디자인프로그램 (61) 썸네일형 리스트형 [피그마플러그인강좌] #04. Iconify - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Iconify를 보도록 하겠습니다. Iconify는 무료아이콘을 제공하는 피그마 플러그인입니다. 원래는 사이트인데, 플러그인도 있는 거죠. 이것 외에도 많은 아이콘 플러그인이 있으니 한번 검색해 보는 것도 좋겠습니다. Step01. 플러그인을 먼저 찾습니다. Resource 툴을 클릭클릭~! Step02. 검색창에 원하는 아이콘을 검색합니다. 아이콘은 영문으로 검색해야 나옵니다. 이번 기회에 영어공부를?!? Step03. 옵션들을 설정 후 [import icon]버튼을 눌러 줍니다. 옵션은 색상, 크기, 적용할 프레임 등을 지정해주면 됩니다. 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해 주세요. 아래 주소에 들어가면 자세한 영상이 있습니다. .. [피그마플러그인강좌] #03. Pixabay와 Unsplash - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Pixabay와 Unsplash를 보도록 하겠습니다. Pixabay와 Unsplash는 무료이미지를 제공하는 피그마 플러그인입니다. 원래는 사이트인데, 플러그인도 있는 거죠. Step01. 플러그인을 먼저 찾습니다. Resource 툴을 클릭클릭~! 두 플러그인 모두 사용법은 같아서 pixabay만 정리했습니다. Step02. 도형에 바로 마스크 처리합니다. 그냥 사진선택하면 프레임 밖에 나가니까 도형먼저 그리고 사진을 선택해 주세요. Step03. 여러 도형을 잡고 선택하면 한 번에 이미지 들어갑니다. 편리하죠? 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해 주세요. 아래 주소에 들어가면 자세한 영상이 있습니다. https://youtu.be.. [Figma] 29강 Position Fixed와 ScrollTo기능 - 오쌤의 니가스터디 ** 자세한 강의는 유튜브도 있어요! https://youtu.be/WsT01xGUFVY - 유튜브 멤버십 중급 강좌 이상을 신청해야 볼 수 있습니다! 1. Position Fixed - 사이트들을 보다 보면 헤더영역이 고정되었다거나, 스크롤탑버튼이 따라다니는 것을 볼 수 있습니다. - HTML/CSS에서 그 기능은 position: fixed; 를 통해 사용합니다. - position관련 기능을 피그마도 지원하고 있습니다. - 프로토타입 패널에 가면 [Scroll behavior]의 [Position] 기능으로 있습니다. Scroll width parent : 기본 값으로 프로토타입 실행에서 스크롤 이동 시 자신의 위치에 고정된 상태를 의미합니다. Fixed : 프로토타입 실행에서 스크롤 이동 시 화면.. [피그마플러그인강좌] #02. 써큘라 텍스트(Circular Text) - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Circular Text를 보도록 하겠습니다. Circular Text는 텍스트를 원형으로 돌려 줍니다. 원래 일러스트레이터나 포토샵에는 있는 기능인데 피그마에서는 이렇게 플러그인을 설치해야 합니다. Step01. 플러그인을 먼저 찾습니다. Resource 툴을 클릭클릭~! Step02. 창에 원하는 글자를 작성 각도를 지정하면 원이나 반원도 가능! Step03. 프레임 안으로 끌어갖고 오기 보통 프레임 밖에 생성되므로 안으로 끌어 오기! 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해주세요. 아래 주소에 들어가면 자세한 영상이 있습니다. https://youtu.be/iN8h9QszRiQ 유튜브 검색창에 오쌤의 니가스터디라고 검색해주세요. 여러.. [피그마플러그인강좌] #01. 구글시트싱크(Google Sheet Sync) - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 포스트에서는 피그마 플러그인 중 구글시트싱크를 보도록 할게요. 구글시트싱크 (Google Sheet Sync)는 구글시트 데이터를 피그마에 적용시켜 줍니다. Step01. 구글시트에 데이터를 작성합니다. 표 제목은 반드시 굵게 하는 것이 뽀인트~! Step02. 원본 컴포넌트 제작 데이터가 들어갈 레이어명앞에는 #붙이기 Step03. 구글시트주소를 복사해와서 입력창에 붙여넣고 [Fetch & Sync]버튼눌러 적용합니다. 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해주세요. 1강부터 5강까지는 무료, 그 이후는 유료 강좌입니다. https://youtu.be/7hTH891OvTU [Figma] 28강 Text Ellipsis(...생략기호효과) ** 자세한 강의는 유튜브 쇼츠로도 있어요! https://youtube.com/shorts/hbObYS83y9o 1. 글자 생략기호 처리하기 - 디자인을 하다 보면 텍스트 상자의 크기를 지정하고, 그 범위를 벗어나면 생략기호를 줘야 하는 경우가 생깁니다. - 포토샵에서 디자인할 때는 일부러 그냥 박스에 ...을 줘야 하지만 피그마는 기능으로 있습니다. - 추후 구글시트싱크(Google Sheet Sync)를 통해 글자를 한 번에 적용할 때 알아서 범위를 넘어가지 않게도 해줍니다. - 위와 같이 5줄만 표시할 수 있는 텍스트 상자 범위인데, 글자가 넘어갔다고 보겠습니다. 1) 디자인패널의 Text 추가 옵션 누르기 - 빨갛게 체크한 [...]아이콘을 클릭해 줍니다. 2) 추가 옵션 창에서 글자 줄임 효과.. [Figma] 26강 하이퍼링크 넣기 - 오쌤의 니가스터디 ** 자세한 강의는 유튜브 쇼츠로도 있어요! https://youtube.com/shorts/e4GiQg7fhQw - 이번 강좌에서는 피그마에서 글자에 링크 거는 것을 보도록 하겠습니다. - 디자인에서 해당 글자를 누르면 인터넷 페이지가 열립니다. 1. 하이퍼링크 걸기 - 프레임을 하나 제작하고 글자를 작성 후 선택을 합니다. - 그럼 위와 같은 링크 아이콘이 뜹니다. - 마우스 올리면 Create link라고 툴팁도 뜨죠? - 그 아이콘을 클릭해줍니다. - 누르면 URL을 쓰라는 툴팁이 뜹니다. - 그리고 커서가 깜박 깜빡이죠? 이때 여기에 주소를 씁니다. - 네이버 주소를 작성해 봤습니다. - 아래 주소를 복사해서 붙여보세요. http://naver.com - 그러고 나서 엔터를 칩니다. - 링크가 .. 피그마 유료 결제 취소 - plan 변경법 1. 우선 팀을 선택합니다. 2. 팀에서 [Go to admin view]를 눌러 줍니다. 3. setting에 들어가서 [cancle plan]을 누릅니다. 4. 그럼 창이 뜨면서 취소 이유를 체크합니다. - 저는 비싸다고 체크를 했습니다. 다른 이유가 있다면 선택해주세요. - 맨 하단은 취소 관련으로 피그마에서 전화한다는 내용인데 체크하지 말고 [continue]버튼을 눌러 줍니다. 5. [cancle plan]버튼을 눌러 줍니다. 취소하기로 선택하시면 2023년 9월 23일 현재 청구 기간이 끝나면 ossam이 무료 스타터 플랜으로 다운그레이드됩니다. ㅜ_ㅠ 오늘 결제가 되었는데, 그래도 한달 더 열심히 써봐야겠습니다. 이전 1 2 3 4 5 ··· 8 다음
