안쓰면 손해, 11가지 유용한 피그마 플러그인
피린이 탈출기원 프로젝트
안쓰면 손해, 유용한 피그마 플러그인
갓피그마를 사용하며 기본적인 기능도 만족하고 쓰고 있지만 디자이너들이라면 플러그인을 활용하여 무궁무진하게 확장하여 유용하게 사용할 수 있습니다. 안쓰면 손해인 여러 유용한 피그마 플러그인들을 소개시켜 드릴테니 필요한 플러그인을 쏙쏙 뽑아 잘 활용하시길 바랍니다 >.< 피그마는 사랑이야 못잃어 절대지켜
1. Find in Page
피그마로 프로젝트를 작업하다 보면 수많은 프레임을 생성하게 되어 내가 원하는 파일을 찾아 이동하는게 쉽지 않아집니다.
파인드인 페이지는 내가 찾는 그래픽 요소가 있는 페이지를 찾아주는 유용한 플러그인입니다.
특정 단어를 찾고, 교체할 수 있는 기능이 특징인 개발자툴에서의 Ctrl + F 같은 기능입니다.
사용방법
1. 검색 범위 선택 (선택/페이지/파일)
2. 검색어 입력
3. ‘단어 일치’ 여부 선택
4. 검색 요소 선택 (레이어/텍스트)
5. ‘레이어’를 선택한 경우 - 레이어 유형 선택
6. 플러그인 실행
7. 레이어를 확대하려면 결과 이름을 클릭하십시오.
8. 전체/특정 결과 선택
9. 레이어 이름/텍스트에 입력한 구문을 새 구문으로 교체
주의사항
너무 많은 결과를 교체해야 하는 상황에서는, 로딩이 너무 오래 걸리거나 플러그인이 충돌할 수 있습니다. 결과에 따른 페이지의 레이어가 포함된 경우 모두 선택/여러 레이어를 바꿀 수 없습니다.
2. CONDUCK
벡터 아이콘 서치하여 바로 가져올 수 있는 플러그인 벡터 아이콘을 서치하여 바로 가져올수 있고 검색되는 아이콘의 양과 종류가 피그마 플러그인중에는 독보적으로 많습니다.
개인적으로 빠르게 원하는 아이콘을 가져다 쓰기에 최적화된 플러그인입니다.
요즘 많이 쓰는 3D 아이콘이나, 플랫한 컬러가 들어가 있는 디자인아이콘도 많이 검색이 됩니다.
클릭하면 화면 중간에 위치하여, 크기만 조정해 편리하게 사용 가능합니다.
3. IConify
피그마에서 가장 큰 아이콘 라이브러리입니다.
100개 이상의 아이콘 세트와 100,000개 이상의 아이콘을 피그마로 가져올 수 있습니다.
개인적으로는 위에 소개한 아이콘덕보다는 이미지 검색량이 많지 않으나,
아이콘의 특성별로 나열되어서 정리가 잘 되어있어서 원하는 모양이 명확할 때 써칭하기 좋습니다.
그리고 아이콘을 셋트로 사용해야 할 때. 아이콘 셋트를 활용할 수 있으니 그 부분에서 활용성이 좋습니다.
아이콘 플러그인으로 위의 두가지를 설치해놓고 그때의 용도에 맞춰서 사용하면 가장 좋을 것 같습니다.
4. Brandfetch
디자이너에게 유용하게 쓰일 수 있는 플러그인입니다.
모든 회사의 브랜드에 즉시 액세스하여, 해당 브랜드의 로고, 색상, 폰트, 스타일에 대한 정보를 가져옵니다. 공식 홈페이지를 통한 로고 파일 및 소스정보를 가져오는 것 같습니다.
로고를 어딘가 저장해두고 매번 또 찾아서 다운받아 쓸 때가 많은데
브랜드 로고를 자주 사용하는 이벤트 페이지나, 협력업체 로고를 넣을 때
최신 업데이트 된 로고를 바로 다운받을 수 있어 유용하게 쓰입니다.
사용방법
1. 회사의 이름을 입력합니다.
2. 브랜드 자산을 가져옵니다.
3. 디자인에 삽입하고 싶으며 클릭합니다.
5. Font Preview
폰트사이트로 유명한 다폰트사이트에서 입력창에 디자인해야 할 글자를 타이핑하면,
미리 여러가지 폰트로 적용되어 미리 볼 수 있습니다.
여러가지 폰트를 미리보기 할 수 있으며, 즐겨찾는 글꼴을 별도의 탭에 저장하면 플러그인을 다시 열 때 그대로 유지됩니다.
거대한 목록을 스크롤할 필요가 없도록 글꼴 필터링 및 검색을 해서 바로 찾을 수 있고,
찾는 폰트가 없다면 플러그인 내부에서 요청한 글꼴을 검색하여 가져올 수 있습니다.
300~1200가지의 미리볼 수 있는 글꼴 목록을 가져올 수 있습니다.
현재 업데이트 중인 기능
- 글꼴 두께로 필터링
- 미리보기 크기 및 문자 간격 변경
6. Font Replacer
일괄적으로 폰트를 변경해야 할 때 매우 유용한 프로그램입니다.
작업하다 보면 여러가지 폰트가 섞일 수 있는데, 대대적으로 정리할 때 또는 다른 폰트로 교체했을 때
어떤 느낌을 가지는지 보고싶을 때 유용합니다.
일일이 수많은 폰트를 확인해가며 수정하지 않고,
정확하고 빠르게 수정할 수 있다는게 장점입니다.
사용방법
1. Ctrl + A를 눌러 모든 에셋을 선택하거나, 글꼴교체를 원하는 텍스트 레이어가 포함된 프레임을 선택합니다.
2. Font Replacer 플러그인을 실행합니다.
3. 현재 적용되어있는 폰트 패밀리나 스타일에 대한 정보를 확인하고, 새로 변경할 폰트를 지정해줍니다.
특징
- 빠른 탐색
- 누락된 글꼴 교체
- 텍스트 스타일 교체 (Coming Soon)
- 퀵바를 통한 사용 (Coming Soon)
7. Unsplash
상업 및 개인 프로젝트에 모두 자유롭게 사용할 수 있는, 저작권 위반되지 않는 다양한 이미지를 검색하여 바로 꺼내어 사용할 수 있는 플러그인입니다.
사용방법
1. 도형툴로 사진이 들어가야 할 화면의 사이즈의 도형을 그러준다.
2. 도형을 그리고 unsplash 플러그인을 켠다.
3. 사용하고 싶은 이미지의 키워드를 입력 후 원하는 이미지를 찾습니다.
4. 도형이 선택된 상태에서 원하는 이미지를 클릭하면 이미지가 삽입됩니다.
5. Unsplash 사이트에서 원하는 이미지를 무료로 다운로드 받을수도 있습니다.
8. SkewDat
피그마로 작업을 하는 디자이너라면 한번쯤은 폰트 기울이는것을 시도해보셨을 겁니다. 피그마에는 다양한 디자인툴이 지원되고 있지만 폰트가 회전하는 것 이외에 추가 액션을 지원하지는 않습니다. 모든 디자이너들이 필요로하는 폰트를 기울게 해주는 플러그인을 소개시켜드립니다.
플러그인 기능
- 조정 내용 실시간 미리보기
- 최소한의 인터페이스, 바로 포인트 - 한 번에 여러 폰트 기울이기
- 원본으로 되돌리는 기능
추가될 기능
- 아이소메트릭 모드
- 고급컨트롤
9.Mapsicle
구글맵에서 스크린샷을 하지 않고, 전세계 어떤 로케이션이든 찾을 수 있고,
줌기능을 통해서 원한느 사이즈로 가져올 수 있습니다.
대화형 지도를 사용하면 완벽한 위치로 이동하거나 전 세계 어디에서나 장소를 검색할 수 있습니다. |디자인에 지도를 배치했으면 Mapsicle로 돌아가 위치, 스타일, 확대/축소 비율을 조정하세요.
지도는 자세히 볼 수 있어야 하기 때문에 고해상도 이미지로 생성합니다.
즉 지도를 만들 때 사용하지 않더라도 레티나에서도 선명하게 보여집니다.
사용방법
1. 피그마에서 메뉴 > 플러그인 > Mapsicle 을 열거나
2. 캔버스 > 플러그인 > Mapsicle을 직접 마우스 우클릭
10.Remove BG
디자이너의 숙명인 누끼로부터 해방되는 플러그인입니다.
웬만한 이미지의 배경을 한번이면 자동으로 제거해 줍니다.
(이 플러그인에는 remove.b 계정이 필요합니다)
사용방법
1. 피그마에 플러그인을 설치한다.
2. 사이트에 들어가 무료 회원가입을 한다. (1일 20개까지 이미지를 편집할 수 있습니다)
3. 편집할 이미지 선택 후 > 마우스 우클릭 > Plugins > Remove BG > Run 을 클릭하면 짧은 로딩 후 자동으로 배경이미지가 제거됩니다.
11. LottieFiles
로띠 파일즈 플랫폼 업로드 되어있는 JSON 파일의 애니메이션 또는 GIF를
프로토타입에서 사용하실 수 있습니다.
또한 LottieFilesLibrary에 가셔서 다른 디자이너나 개발자들이 올린 애니메이션도 무료로 이용하실 수 있습니다.
* 디자인베이스 강좌는 IOS 기준으로 되어있어서 윈도우 사용자들은 혼란스러우실 수 있으니,
Cmd 단축기 대신 Ctrl 을, Option 대신 Alt를 대체하여 사용하시면 됩니다.
Lottie 애니메이션을 GIF로 추가
1. Lottie를 끌어다 놓거나 LottieFiles 라이브러리에서 무료 항목을 선택합니다.
2. GIF에 사용할 배경색을 선택합니다.
3. 'GIF로 변환' 클릭
4. Lottie가 변환된 후 'Figma에 추가'를 클릭합니다.
5. '프로토타입'을 사용하여 디자인이 실제로 작동하는지 확인합니다.
고품질 SVG 애니메이션 레이어 추가
1. Lottie를 끌어다 놓거나 LottieFiles 라이브러리에서 무료 항목을 선택합니다.
2. 플레이어 바를 사용하여 삽입할 애니메이션 프레임을 선택합니다.
3. 'SVG로 삽입'을 클릭합니다.
