** 자세한 영상은 유튜브 영상으로 보세요!
0. 피그마 플러그인 검색 및 설치
- 블로그에 글을 쓰려고 피그마를 켰는데 또 새로운 기능이 나왔습니다.
- 그래서 예전에 플러그인을 설치하는 방법과 새로 나온 방법을 비교해서 보여드리겠습니다.
1) 과거(2022년 6월 2x일 이전의 플러그인 설치)
- 피그마아이콘(메뉴) - [Plugins] - [Browse plugins in Community]를 눌러서 플러그인을 찾았습니다.
- 혹은 그 위에 있는 [Plugins] - [Manage plugins]를 눌러서 사용했습니다.
2) 현재(2022년 6월 2x일 이후의 플러그인 설치)
- 현재는 새로운 툴이 생겼습니다.
- 아래 파랗게 체크되어 있는 [Resource]툴이 추가되었습니다.
- Components, Plugins, Widgets의 세가지 형태 리소스를 다 지원합니다.
- 우린 그냥에서 [Plugins]를 누르고 원하는 플러그인을 눌러서 [Run]을 눌러줍니다.
- 원래 사용하시던 분들은 [Resources]툴을 누르면 [recents]드롭다운 메뉴를 눌러보면 [install]이라고 있습니다.
- 거기 가면 기존 설치한 것들이 있습니다. 전 테스트하느라 다 지웠더니 메뉴자체가 없어져 버렸네요.
1. Content Reel
- 디자인이나 화면 설계시 필요한 더미 데이터를 바로 추가해주는 플러그인입니다.
- 이미지, 텍스트, 이름, 주소, 이메일 주소 등을 지원해줍니다.
- 아쉽게도 텍스트들이 모두 영문으로 처리되지만 그래도 쏠쏠하게 사용할 수 있습니다.
- 한국 개발자 중 누군가가 만들어주면 너무 좋을 듯 합니다.
** Content Reel 사용법 영상
2. Unsplash
- Unsplash는 무료 이미지를 제공하는 유명한 사이트입니다.
- 그 사이트에서 제공하는 이미지를 피그마 디자인에 바로 사용할 수 있게 해주는 플러그인입니다.
- 위의 Content Reel의 이미지는 더미파일이라면 이것은 주제에 맞게 사진을 추가할 수 있습니다.
- 그냥 사진을 추가하면 전체로 들어가고, 도형을 선택한 상태면 도형 내부에 사진이 마스크되서 들어갑니다.
** unsplash 사용법 영상
3. Lorem Ipsum
- 이 플러그인 역시 더미 텍스트를 넣는 플러그인입니다.
- 이 플러그인은 텍스트툴로 범위를 잡아 놓으면 그 범위에 글자가 전부 들어가는 장점이 있습니다.
- 물론 수치를 지정해서 몇문장만도 넣는 것이 가능합니다.
** Lorem Ipsum 사용법 영상
4. Material Design Icons + Iconify
- 아이콘을 제공하는 플러그인은 좋은 것이 많습니다.
- 그 중에서 2개만 선정해보았습니다.
** 아이콘 관련 플러그인 사용법 영상
4-1. Material Design Icons
- 구글에서 제공하는 Material Design Icons를 바로 끌어다 쓸 수 있는 플러그인입니다.
- PNG 및 SVG로 되어 있는 35,000개 이상의 아이콘을 손쉽게 사용할 수 있습니다.
- Google에서 제공하는 6800개 정도는 무료 아이콘이나 [icon8.com]에서 링크되는 것도 있어서 라이센스는 확인하거나 구매해서 사용해야합니다.
4-2. Iconify
- Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji 및 기타 많은 아이콘(100,000개 이상의 아이콘이 포함된 100개 이상의 아이콘 세트)을 벡터 모양으로 Figma 문서로 가져옵니다.
- 초반에 나온 플러그인어서 그런지 가장 좋아요가 많은 플러그인 중 하나입니다.
- 장점은 미리 색상 변경 및 회전등을 해서 가지고 올 수 있습니다.
5. Rename It
- Figma 파일을 체계적으로 유지하고 레이어와 프레임의 이름을 일괄적으로 변경하는 플러그인 입니다.
- 특히, 다중레이어 선택으로 한번에 여러 레이어 이름을 바꿔줍니다.
- 그리고 알아서 레이어 뒤에 숫자도 붙여주는 좋은 기능을 가지고 있습니다.
6. Color Palettes + Brandfetch
6-1. Color Palettes
- 인기 색상 조합을 보여주는 플러그인입니다.
- 색상 코드나 팔레트 번호 또는 이름을 검색하여 디자인에 적용할 수 있습니다.
6-2. Brandfetch
- 이 플러그인은 회사명을 입력하면 그 회사가 사용하는 로고, 색상, 글꼴을 가져옵니다.
7. Forms + Handy Components
- 이번 플러그인들은 폼양식을 컴포넌트화한 플러그인들입니다.
- 포토샵으로 디자인할 때는 매번 박스를 만들어서 제작하던 입력폼들을 쉽게 만들 수 있습니다.
7-1. Forms
- 폼양식을 쉽게 구현해주는 플러그인입니다.
- 디자인 라이브러리와 통합하여 글꼴, 간격, 색상 등을 변경해서 커스터마이징이 가능합니다.
7-2. Handy Components
- 이 플러그인은 Forms보다 더 다양한 UI를 제공합니다.
- 34가지의 UI구성요소를 제공합니다.
- 폼양식 외에도 툴팁, 탭바, 슬라이드바 등 다양한 것을 제공합니다.
8. Wireframe
- 기획시 자주 사용되는 와이어프레임을 제공하는 플러그인입니다.
9. Autoflow
- 기획 시 사용되는 플로우차트나 정보설계등을 제작할 때 사용하는 화살표선을 쉽게 만들어주는 플러그인입니다.
- 오브젝트끼리 잘 연결해줘서 쉽게 사용가능합니다.
** auto flow사용법 영상
10. Google Sheets Sync
- 첫번째로 본 Content Reel이 더미파일을 사용했다면, Google Sheet Sync은 실제 데이터를 넣을 때 사용합니다.
- 구글 시트를 사용해서 데이터들을 미리 넣어놓고, 데이터를 적용하면 한번에 변경이 가능합니다.
** 구글시트싱크 사용법 영상
'디자인프로그램 > Figma' 카테고리의 다른 글
| [Figma] 21강 이미지(소스)내보내기(feat. 디자인에셋내보내기) - 오쌤의 니가스터디 (8) | 2022.07.20 |
|---|---|
| [Figma] 20강 Rename It 플러그인 - 오쌤의 니가스터디 (0) | 2022.07.18 |
| [Figma] 18강 Prototype - Dropdown Menu - 오쌤의 니가스터디 (10) | 2022.06.16 |
| [Figma] 17강 prototype - HOVER이미지 - 오쌤의 니가스터디 (5) | 2022.06.10 |
| [Figma] 16강 prototype - 모바일패널 오버레이 - 오쌤의 니가스터디 (0) | 2022.06.04 |
