[디자인] 피그마 초보 여기 모여라!
주요 기능과 꿀팁 대방출
[디자인] 피그마 주요 기능 꿀팁
이런 분들이 읽으면 좋아요!
피그마(Figma)가 처음인 서비스 기획자, UX/UI 디자이너
빠르고 효율적으로 와이어프레임 또는 스케치를 만들고 싶은 서비스 기획자
다른 고도화된 툴 없이도, 디테일한 프로토타입을 만들고 싶은 프로덕트 디자이너
피그마로 함께 온-오프라인 협업을 진행하는 스타트업 팀
이런 내용을 알 수 있어요!
피그잼, 커뮤니티 등 피그마 주요 기능을 배우고 비주얼라이징에 적용할 수 있어요.
보이스 채팅, 스포트라이트, 툴별 기능과 실무 꿀팁을 알려드려요.
똑똑한개발자 팀이 자주 활용하는 플러그인 종류를 소개해 드려요.
*아래 컨텐츠는 [패파솔루션] 공식 제휴사 '똑똑한개발자' 박수지님께서 작성해 주셨습니다.
안녕하세요! 똑똑한개발자 프로덕트 디자이너 수지입니다. :)
지난 시간 스케치, XD, 피그마, 프레이머까지 다양한 디자인 툴을 소개해드렸는데요.
이번 시간에는 저희 팀에서 피그마(Figma)를 사용하며 얻은 실무 팁과 주요기능 등을
소개해드리고자 합니다!
피그마를 오래 사용하신 분들도 모르는 꿀팁이 있을 수 있으니 다들 시선 집중해주세요~!
1. 피그마 기본 기능과 인터페이스 이해하기
Draft
피그마에서는 새로운 파일을 Draft 라고 표현합니다. 임시 파일의 느낌이죠.
이 Draft는 [프로젝트 팀]이 구성되지 않아도 얼마든지 무한대로 생성할 수 있습니다. 다만 혼자 작업이 아닌 여러 명과 협업하려면 [팀 프로젝트 채널]에 Draft를 생성해야 하며, 이 경우 구독 멤버십에 따라 생성할 수 있는 파일 개수가 제한되어 있어요.
에디터와 뷰어, 그리고 코멘트
지난 시간에도 잠시 언급했듯이, 피그마의 권한은 에디터/뷰어 두가지 유저 타입이 존재합니다.
에디터는 피그마 내에서 디자인 및 컴포넌트 수정이 자유롭게 가능하고,
뷰어는 수정은 불가하나 코드나 에셋 추출, 컴포넌트 복사가 가능합니다.
에디터에 수에 따라 결제금액이 추가되므로, 작은 규모의 팀에서는 ‘디자이너에게만 에디터 권한을 부여’하는 꿀팁도 지난 시간에 알려드렸죠!
꼭 팀 멤버가 아니더라도, 링크를 통해 파일을 공유받은 사람이라면 ‘뷰어'가 될 수 있습니다.
코멘트는 이러한 외부 클라이언트나 작업자들도 의견을 남길 수 있는 피그마의 기능이에요! 말풍선 아이콘을 통해 해당 디자인/기획에서 수정되거나 보완될 내용을 남기고 기록할 수 있습니다.
Frame과 Pages의 차이점
피그마에는 Frame이란 도구와 Page라는 패널이 존재하는데요.
이 둘은 마치 PPT와 슬라이드 같은 개념으로 이해하시면 좋습니다.
어도비 계열 툴과 달리 피그마는 Frame 안에 Frame 을 넣을 수도 있는데요. 이 형태의 장점은 디자인시스템을 구성하며 컴포넌트 단위를 구축하고 관리하기 쉽고,
하나의 피그마 파일에 Page 형태로 IA나 플로우차트 같은 기획 서류를 포함하기 용이하다는 점이 있습니다.
Design/Prototype/Inspect 패널
우측에는 3가지의 패널이 있는데, 요 섹션을 통해 이미지를 png, svg, pdf 등 다양한 포맷으로 추출(Export)하거나 저장할 수 있고, 코드를 확인할 수 있습니다.
프로토타입 패널을 통해서는 간단한 인터랙션이나 화면전환 효과를 줄 수 있습니다. [인터랙션 프로토타입]이라는 기능이 베타 버전에서 갈수록 업데이트되고 있어서, 이제 어지간한 인터랙션 효과는 다른 툴을 활용하지 않아도 피그마 내에서 꽤 디테일하게 구현 가능한 듯 해요!
2. 디자이너 없이도
피그마로 아이디어를 비주얼라이징 하는 법!
다음으로는 기획자 분들께 유용할 수 있는 내용입니다. 디자이너 없이도 어느 정도 완성도 있는 아이디어 비주얼라이징이 필요할 때 활용해보세요!
Figma Community (피그마 커뮤니티)
피그마에는 커뮤니티라는 기능이 있습니다. 피그마를 사용하는 전 세계의 유저들이 자유롭게 플러그인, 이미지 소스 등을 공유하는 채널인데요.
디자이너뿐만 아니라, 기획자나 마케터에게 유용한 템플릿들도 많고 일러스트, UI, 디자인시스템에 대한 파일이 많습니다. 가볍게 와이어프레임을 그리고 싶거나, 디자인시스템을 참고하고 싶다면 Free UI kit 또는 Wireframe 등을 검색해 활용하는 방안도 방법이 될 수 있어요!
기획자, 마케터라면 디자이너 없이도 공유된 소스들을 조합하고 활용하면서 어느정도 완성도 있는 기획서를 비주얼라이징 할 수 있는거죠!
다만 파일에 따라 상업적 이용이 불가능한 라이센스도 있으니 확인은 필수!
일부 무료로 공개 후, Full License 버전을 링크로 연결해 두는 경우도 있으니, 테스트로 사용해보고 마음에 든다면 구매하는 것도 좋은 방법이 될 수 있어요!
다양한 기본 제공되는 템플릿을 통해 IA, 유저 플로우 등을 작성할 수도 있고, 포스트잇이나 스티커를 붙여가며 브레인스토밍을 할 수도 있어요.
저희 팀은 아래처럼 랜선으로 회의를 이어가다가 낙서도 하고… 그림도 그리고… (후략)
해당 아이디어가 실제 디자인으로 연계될때, 피그마 디자인 Draft와의 연계도 쉬워서 더 좋은 것 같습니다.
3. 이렇게나 편리한, 피그마 협업 꿀팁
지금까지가 조금 기본적인, 사용해 본 사람들은 너무나 잘 아는 내용이었다면, 다음으로는 실무단에서 유용하게 활용했던 협업 꿀팁들을 소개하고자 해요!
코멘트는 조금 부담스러워! 빠르게 소통하는 미니 채팅 버블
피그마 화면에서, / 를 누르고 텍스트를 입력하면 미니 채팅 버블이 생겨납니다.
코멘트를 남기기엔 작은 이야기라 부담스럽고, 빠르게 팀원과 랜선으로 소통하고 싶을 때 활용해보세요. 동시에 같은 화면을 보며 이야기 하기 좋아요.
텍스트를 입력하고 시간이 지나면 저절로 불투명해지며 사라지기 때문에 휘발성 멘트나, 가벼운 소통에 유용합니다.
에디터든 뷰어든 구분없이 모두가 활용할 수 있는 기능이에요!
저희는 주로 “ㅋㅋㅋㅋㅋㅋㅋ 이거 너무 웃기네요", “와 이거 너무 좋은데요"와 같은 응원의 멘트를 날릴 때 사용합니다.
재택근무를 자주 한다면, 줌이나 통화, 슬랙 허들보다, 피그마 보이스 채팅!
피그마 우측 상단의 헤드셋 아이콘을 클릭하면, Start Conversation 이라는 버튼과 함께 해당 Draft에 들어와 있는 팀원들과 빠르게 음성 채팅이 가능합니다. 서로 같은 화면을 보며 소통할 수 있고 생각보다 음질이나 속도도 좋아서 재택근무 시 유용하게 사용했던 기능이에요.
줌이나 슬랙의 허들 같은 기능보다 오히려 편리하다고 느껴졌습니다. 재택근무를 자주 하는 팀이라면 한번 쯤 활용해보세요!
내가 보는 화면을 따라오세요! Spotlight 기능!
피그마 우측 상단에서, 다른 팀원의 프로필 아이콘을 누르면 해당 팀원이 현재 작업하고 있는 시야를 확인할 수 있는데요. (마치 게임에서 다른 유저의 시야를 보는 것처럼요.)
여기서 체크! 누군가 나를 일부러 누르지 않더라도, 해당 파일에 들어오자마자 내가 보고 있는 시야와 마우스를 따라오게 만들고 싶다면 Spotlight 기능을 활용해보세요!!
내 프로필을 누르고 [스포트라이트 버튼]을 설정하면, 해당 파일에 있는 다른 팀원들에게 제가 보는 화면이 (강제로) 보여지게 됩니다. 마치 줌에서의 화면공유처럼요! 함께 피드백을 나누거나 회의를 진행할 때, 혹은 클라이언트에게 화면을 공유하며 실시간으로 소통하고자 할 때 유용한 기능입니다!
4. 유용한 플러그인 추천
피그마 커뮤니티에는, 이미지 에셋 뿐 아니라 유용한 플러그인들도 정말 많이 공유되고 있습니다.
다음은 작업을 진행하면서 많이 활용했던 플러그인 5가지를 소개해 드리려고 해요.
통일감 있는 썸네일 제작하기, Better file Thumbnail
피그마 파일에서 간단하게 통일감 있는 썸네일을 생성할 수 있는 플러그인입니다. 이모지, 뱃지 등을 추가할 수 있어 유용하게 활용하고 있어요.
은근히 애매한 상황에서 디자인적 감각이 없는 분들도 깔끔하고 정돈된 대표 이미지를 만들어 줄 수 있어 여기저기 유용하게 활용하고 있습니다.
요즘 대세는 3D, fig3D
화면을 구성하거나 배너를 만들 때, 간단하게 피그마 내에서 벡터 이미지를 3D로 변환해주는 플러그인 입니다. 오류가 나는 경우도 종종 있지만 꽤 퀄리티 있는 입체 이미지를 만들 수 있어서 유용합니다.
특히 텍스트나 심볼의 경우 다른 그래픽 툴을 이용하지 않아도 Extrude & Bevel 효과를 줄 수 있어 잘 활용하고 있는 플러그인 중 하나예요!
Remove BG
피그마를 사용하면서부터, 저는 일러스트레이터보다 피그마가 더 편하고 어느새 간단한 그래픽 작업은 피그마에서 하게 되었는데요. 그래픽 툴은 아니지만 오토레이아웃 같은 기능들이 그래픽 작업에도 유용해서 그런 것 같아요.
관련해서 피그마 내에서도 그래픽 작업 시 이미지의 흰 바탕을 투명하게 바꿔주는 플러그인이 있어 소개해봅니다. 백그라운드를 투명하게 바꿔주는 플러그인으로 유용하게 활용하고 있습니다.
Color Scheme
메인 컬러를 입력하면 100에서 900까지 컬러 단계를 자동으로 생성해주는 플러그인입니다. 스타일가이드나 디자인시스템 구성 시 유용해요!
저희는 내부 시스템 가이드를 활용하고 있지만 초기 세팅 시 활용하면 매우 좋을 듯 해 소개합니다.
텍스트를 아치형으로 만들고 싶다면? ARC
일러스트레이터에서는 Path 를 따라 텍스트를 곡선으로 입력할 수 있는 기능이 있죠. 피그마에도 비슷하게 Arc 라는 텍스트를 호를 그리며 작성할 수 있는 플러그인이 있습니다.
비슷한 종류의 플러그인들이 많은데 사용해 본 것들 중에서는 해당 플러그인이 가장 간편하고 오류도 적어 좋았던 것 같아요. 호 형태가 아닌 다양한 곡선으로 텍스트를 적용하고 싶으시면 ‘Circular Text’ 라는 플러그인도 참고해보세요!
이 외에도 인터랙티브 컴포넌트나, 오토레이아웃과 같은 유용한 기능들이 많이 있어, 기본 인터페이스에만 익숙해지면 파워포인트나 일러스트레이터, 포토샵보다 훨씬 편한 툴로 사용할 수 있다고 느껴집니다.
저도 피그마를 사용한 뒤로는 일반적인 PPT나 그래픽 작업도 피그마 안에서 해결하는 경우가 정말 많은 것 같아요.
매 년 진행하는 피그마 컨퍼런스인 Config 2022 (링크 바로가기)가 얼마 전 공개되었는데요. 많은 기능들이 업데이트 되고, 또 변화되어서 더 디테일한 기능들이 궁금하신 분은 다음 링크 참고하시면 좋을 것 같습니다.
앞으로도 더 발전하는 피그마의 행보(!) 기대합니다.
감사합니다!
Copyright 2022,박수지, All rights reserved
