디자인프로그램/Figma (32) 썸네일형 리스트형 [Figma] 24강 코드 Inspect패널과 Zeplin - 오쌤의 니가스터디 ** 자세한 강의는 유튜브 영상으로 제공됩니다. https://youtu.be/NYWR4G5OtZA ** 이번 강좌에서는 디자인이 다된 파일을 개발자에게 넘길 때 유용한 작업과 코드 Inspect패널사용법에 대해 알아보도록 하겠습니다. 그와 관련된 유용한 플러그인인 zeplin과 clean document 플러그인도 배워보도록 하겠습니다. 1. 코드 변환 전 체크 요소 - 디자인이 너무 중첩되었거나, 레이어에 이름을 작성하지 않았거나 하면 코드로 변환 시 의도치 않게 나올 수 있습니다. - 그래서 미리 여러 가지를 체크하고 개발자에게 넘기면 좋을 듯 합니다. 1) 레이어 정리 - 일단 모든 레이어에는 이름을 잘 지정해주세요. 혹시 vector로 빼야 하는 이름이 동일한 경우 [rename it]플러그인을.. [Figma] 23강 Variants를 이용한 탭바컨텐츠 - 오쌤의 니가스터디 ** 자세한 강의는 유튜브 영상으로 제공됩니다. https://www.youtube.com/watch?v=DlsvQKry-cc ** 이번 강좌에서는 탭바컨텐츠를 제작해보겠습니다. - Variants기능을 이용하면 탭바버튼을 얼마나 쉽게 제작할 수 있는지 보도록 하겠습니다. - 그리고 프로토타입 기능을 이용해서 실제 탭버튼 클릭시 화면 전환도 해보도록 하겠습니다. ** 완성 예시 ** 사용될 이미지 다운받기 출처 : https://pixabay.com/ko/ - 놀라운 무료 이미지 pixabay - 위의 svg파일은 버튼에 들어갈 화살표입니다. ** 사용될 텍스트 이태리남부 환상투어 투어코스 : 로마출발 → 폼페이 → 소렌토전망대 → 포지타노 → 로마도착 여행일정 : 원데이 - 투어날짜는 자세히보기를 눌러.. [Figma] 22강 피그마파일공유 및 코멘트툴 - 오쌤의 니가스터디 ** 자세한 영상은 유튜브 영상으로 제공됩니다. https://youtu.be/-WsXLsBYKcs 1. 피그마 파일 공유 - Share - 피그마는 기획자, 디자이너, 개발자가 프로젝트를 편하게 공유하기 위해 고안된 프로그램입니다. - 협업 프로그램으로 개발된 프로토타입툴이기 때문에 공유 기능이 굉장히 잘 되어 있습니다. - 그래서 이번 강좌에서 공유기능에 대해서 알아보도록 하겠습니다. 1) [Share]버튼 누르기 - 툴박스 바에 오른쪽에 보면 파란색으로 [Share]버튼이 있습니다. - [Share]버튼을 누르면 공유관련 옵션팝업이 대화상자로 뜹니다. 2) [Share] 공유옵션 팝업 - [Invite]라는 탭으로 초대할 수 있는 파트가 뜨는 것이 보입니다. - 옆에는 [Publish to Comm.. [Figma] 21강 이미지(소스)내보내기(feat. 디자인에셋내보내기) - 오쌤의 니가스터디 ** 자세한 강의는 유튜브 영상으로 제공됩니다. https://youtu.be/rcmB6XMZVrc - 이번 강좌에서는 이미지(소스) 내보내는 방법을 알아보겠습니다. - XD에서는 디자인에셋 내보내기라는 용어를 써서 제목에 feat로 달아봤습니다. - 피그마 역시 XD처럼 내보내는 것이 아주 편리합니다. - 모바일에 대응한 1x, 2x, 3x로 내보낼 수도 있고, 내보내기를 체크한 것만 내보낼 수도 있습니다. - 그리고 원래 svg를 이용했거나, 벡터 혹은 직접 제작한 것은 SVG파일로도 내보낼 수 있습니다. 1. 해상도 설명 - 1x, 2x, 3x??? - 이제 내보내기(Export) 수업을 하게 되는데, 처음부터 1x, 2x, 3x가 나옵니다. - 이건 애플 즉 아이폰에서의 해상도관련 용어입니다. -.. [Figma] 20강 Rename It 플러그인 - 오쌤의 니가스터디 1. Rename It 설명 - Figma 파일을 체계적으로 유지하고 레이어와 프레임의 이름을 일괄적으로 변경하는 플러그인 입니다. - 특히, 다중레이어 선택으로 한번에 여러 레이어 이름을 바꿔줍니다. - 그리고 알아서 레이어 뒤에 숫자도 붙여주는 좋은 기능을 가지고 있습니다. - 이프로그래은 원래 맥컴퓨터에서 사용되는 스케치라는 프로그램에도 있던 플러그인인데 자주 사용되었던 플러그인입니다. - 이 플러그인은 [19강 오쌤PICK! 플러그인TOP10] 게시물에서도 소개했었는데, 이번 강좌에서는 좀 더 디테일하게 알아보도록 하겠습니다. 1) 키워드 코드 표 - 아래서 예시를 보여드리기 전에 키워드를 미리 정리해보도록 하겠습니다. 타입 키워드 설명 Sequence (문장별정리) Keyword%N 키워드명 뒤.. [Figma] 19강 오쌤 Pick! 피그마 플러그인 Top 10 - 오쌤의 니가스터디 ** 자세한 영상은 유튜브 영상으로 보세요! https://youtu.be/z3_hjBFItXk 0. 피그마 플러그인 검색 및 설치 - 블로그에 글을 쓰려고 피그마를 켰는데 또 새로운 기능이 나왔습니다. - 그래서 예전에 플러그인을 설치하는 방법과 새로 나온 방법을 비교해서 보여드리겠습니다. 1) 과거(2022년 6월 2x일 이전의 플러그인 설치) - 피그마아이콘(메뉴) - [Plugins] - [Browse plugins in Community]를 눌러서 플러그인을 찾았습니다. - 혹은 그 위에 있는 [Plugins] - [Manage plugins]를 눌러서 사용했습니다. 2) 현재(2022년 6월 2x일 이후의 플러그인 설치) - 현재는 새로운 툴이 생겼습니다. - 아래 파랗게 체크되어 있는 [Re.. [Figma] 18강 Prototype - Dropdown Menu - 오쌤의 니가스터디 ** 자세한 영상은 유튜브로 제공됩니다. https://youtu.be/QCFDEoMLv3g ** 사용될 이미지 출처 : https://pixabay.com/ko/photos/%ec%82%ac%eb%ac%b4%ec%8b%a4-%ec%9d%bc%ed%95%98%eb%8b%a4-%ec%b1%85%ec%83%81-%ec%bb%b4%ed%93%a8%ed%84%b0-932926/ ** 완성 예시 ** 완성파일은 [피그마 커뮤니티]에서 찾아보세요. 1) 피그마 앱에서 커뮤니티를 누릅니다. 2) 검색창에 [ossam]이라고 검색합니다. 3) [예제12] Dropdown Menu이미지을 더블클릭합니다. 4) [duplicate]버튼을 눌러 개인 작업창으로 복제해옵니다. ** 피그마웹에서 찾는 법 - [figma.com.. [Figma] 17강 prototype - HOVER이미지 - 오쌤의 니가스터디 ** 자세한 영상은 유튜브 영상으로 제공됩니다. https://youtu.be/71a76v5c884 ** 사용될 이미지 - 출처 : https://pixabay.com/ ** 완성파일은 [피그마 커뮤니티]에서 찾아보세요. 1) 피그마 앱에서 커뮤니티를 누릅니다. 2) 검색창에 [ossam]이라고 검색합니다. 3) [예제11] HOVER이미지을 더블클릭합니다. 4) [duplicate]버튼을 눌러 개인 작업창으로 복제해옵니다. ** 피그마웹에서 찾는 법 - [figma.com/@ossam]을 검색하면 찾을 수 있습니다. 검색이 잘되는 것을 확인할 수 있습니다. 이전 1 2 3 4 다음
