디자인프로그램 (61) 썸네일형 리스트형 [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]을 검색하면 찾을 수 있습니다. 검색이 잘되는 것을 확인할 수 있습니다. [Figma] 16강 prototype - 모바일패널 오버레이 - 오쌤의 니가스터디 ** 자세한 영상은 유튜브 영상으로 보세요. https://youtu.be/_LllIPS6KAU ** 사용될 이미지 - 저작권 : https://pixabay.com/ ** 완성이미지 ** 완성파일은 [피그마 커뮤니티]에서 찾아보세요. 1) 피그마 앱에서 커뮤니티를 누릅니다. 2) 검색창에 [ossam]이라고 검색합니다. 3) [예제10] 모바일패널을 더블클릭합니다. 4) [duplicate]버튼을 눌러 개인 작업창으로 복제해옵니다. ** 피그마웹에서 찾는 법 - [figma.com/@ossam]을 검색하면 찾을 수 있습니다. 검색이 잘되는 것을 확인할 수 있습니다. [Figma] 15강 Prototype - Slide Images - 오쌤의 니가스터디 ** 자세한 영상은 유튜브로 보세요! https://www.youtube.com/watch?v=QEuh9S43WM0 ** 프로토타입의 기능정리는 아래 주소에 있으니 확인해보세요. https://ossam5.tistory.com/298 [Figma] 14강 Prototype - 네이버 로그인창 - 오쌤의 니가스터디 ** 동영상으로 공부하고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/CTZ3B3shKxM 1. 프로토타입(Prototype) 기능 정리 - 프로토타입은 일차원적인 요소에 이벤트를 이용해 효과나 애니메이션을 ossam5.tistory.com 1. fade Image - 웹에서 많이 사용되는 메인이미지 스타일 중 페이드 효과를 해보도록 하겠습니다. ** 사용될 이미지를 다운.. [Figma] 14강 Prototype - 네이버 로그인창 - 오쌤의 니가스터디 ** 자세한 영상은 유튜브로 제공됩니다. https://youtu.be/CTZ3B3shKxM 1. 프로토타입(Prototype) 기능 정리 - 프로토타입은 일차원적인 요소에 이벤트를 이용해 효과나 애니메이션을 주는 기능입니다. - 피그마의 프로토타입은 [Design]패널 옆에 탭버튼으로 있습니다. 1) 프로토타입의 요소 - 프로토타입은 컴포넌트끼리도 가능하고, 프레임끼리도 가능합니다. - 일단 장면을 통해서 요소를 설명해보겠습니다. - 핫스팟(Hot Spot) : 위 그림에서의 파란색 기준이 되는 점을 핫스팟이라고 합니다. 사용자의 인터랙션이 시작하는 위치입니다. - 커넥션(connection) 라인 : 핫스팟과 이어지는 두개의 요소 사이의 연결 선입니다. 이 선을 클릭하면 프로토타입의 세부적 설정을 할.. [Figma] 13강 Variants - 토글버튼, hover효과 - 오쌤의 니가스터디 ** 자세한 영상은 유튜브로 제공됩니다. https://youtu.be/Q7_UZI9yNnw 1. 베리언츠(Variants) 기능 정리 - Variants는 컴포넌트를 조합하여 컴포넌트 세트를 만들어 더 체계적으로 사용하는 기능입니다. - 예를 들어 이미지의 out상태와 over상태를 만들때 사용할 수 있습니다. - 예를 들어 토글버튼의 on상태와 off상태를 만들때 사용할 수 있습니다. - 또, 버튼의 default, hover, focus, active, disabled를 사용할 수 있습니다. - 위의 상황들은 전부 디자이너가 만드는 것입니다. 1) Variants 패널 설명 - 컴포넌트를 2개 이상 선택하면 저런 버튼이 [Design]패널에 보입니다. - [Combine as Variants]라는 .. 이전 1 2 3 4 5 6 7 8 다음
