피그마 필수 플러그인 Best 5
효율적이고 행복한 작업을 위해
브런치는 오랜만이다. 그동안 포트폴리오 만들기에 집중하느라 조금 바빴지만 많은 시간을 쏟고 있는 만큼 배운 것들이 많았다. 걸음마 부터 시작했던 피그마인데, 피그마 비기너라면 알고 있어야 할 필수 플러그인 BEST 5을 정리해봤다. 내 기준 베스트5이니 혹시나 그 외에도 추천하고 싶은 다른 플러그인이 있다면 댓글로 공유를 부탁드린다! (+ 부록으로 첨부한 추천 플러그인 1개도 있어 총 6개 :) )
참고로, 피그마 플러그인 단축키는 Shift + i 를 누르면 된다.
플러그인은 플러그인 패널에서 서치바를 통해 검색하여 설치할 수도 있다.
1. Unsplash
가장 유명하고 필수적인 플러그인이 아닐까 싶다. 언스플래시는 이미지 찾는 수고를 덜어주는 아주 고마운 플러그인으로, 디자인 효율성을 높이는데 크게 기여한다. Presets 메뉴에서는 테마별 이미지를 랜덤으로 불러와 주기 때문에 디자인 작업물의 무드에 맞는 이미지를 쉽게 붙여넣을 수 있다. 검색도 됨.
2. Split
스플릿트는 산수를 덜어준다. 도형을 반쪽으로 잘라준다. 근데 마진이랑 거터, 컬럼, 로우도 내가 다 설정할 수 있기 때문에 그리드 내에서 디자인 할 때 편리하다. 원하는 마진값으로 도형을 배치하느라 계산기 두드리지 않아도 된다.
3. Content Reel
언플래시와 마찬가지로 이미 유명한 플러그인. 언플래시가 고퀄리티 이미지에 집중한다면, 콘텐트 릴은 UI 컴포넌트에 자잘하게 활용되는 이미지 리소스들을 찾는데 편리하다. 프로필에 들어가는 아바타라던지, 이미지, 아이콘 등 심지어 텍스트도 제공하기 때문에 더미 리소스를 찾는 시간을 줄일 수 있다.
4. HTML to design
알게 되고 매우 기뻤던 플러그인. 웹디자인을 할 때 이제 더이상 레퍼런스를 일일이 캡쳐하고 떠올 수고로움을 덜 수 있다. 혹은 디자인을 연습할 때, 클론 디자인을 많이 하는데 그때도 매움이 될 플러그인.
현재 라이브 중인 웹사이트의 주소를 붙여 넣으면 피그마에 디자인 파일로 붙여 넣어준다. (감격)
특히나 이 플러그인은 공부하면서 도움이 많이 됐는데, 컴포넌트 사이 간격이나 타이포 등 좋은 웹페이지들이 어떤 디자인을 하고 있는지 섬세히 알아볼 수 있다.
그리고 원하는 페이지를 디자인으로 불러와 거기서 부터 내 디자인을 시작해볼 수도 있다. 모든 엘리먼트를 처음부터 그리지 않아도 되니 멋지다. 단, 폰트는 유료거나 나한테 없는 폰트라면 연동 되지 않고 대체되며, 해당 여부는 피그마 붙여 넣을 때 안내해준다.
5. Material Icons
역시나 필수적인 플러그인으로 많이 언급되는 매태리얼 아이콘. 구글 디자인 가이드에 따라 만들어진 매태리얼 심볼들을 피그마에서 쉽게 불러와 디자인에 활용할 수 있다. 아이콘 두께와 채운 아이콘, 스트로크 아이콘, 다크모드 등에 따른 그레이드, 그리고 사이즈도 쉽게 변경이 가능하다.
부록. Figma to Webflow
최근 내가 가장 좋아하는 플러그인에 등극. Figma to Webflow 플러그인은 필수 플러그인이라 보기는 어려울 것 같아 부록으로 넣었지만, webflow를 이용해 웹페이지 디자인을 하려는 사람들에게는 매우 혁신적인 플러그인이다.
최근에 출시된 이 플러그인은 나의 피그마 디자인을 copy and paste로 한 번에 Webflow 서비스로 복사 해준다. 즉, HTML, CSS에 대해 깊이 있게 알지 못해도 웹플로우를 통해 완성도 높은 웹 페이지를 만들 수 있다는 점.
최근 이 플러그인을 통해 포트폴리오를 만들고 있는데, 시행착오를 거치며 여러 기능들을 익히느라 어려워서 시간이 좀 걸렸지만, 이걸 발견했을 때 굉장히 놀랐고 약간 설렜다.. 웹페이지 디자인과 구축을 웹플로우 통해 할 사람이라면 반드시 알아야 할 좋은 플러그인!
그럼 안녕!
