피그마(figma) 입문 - 생산성 끌어올리기

 

 

 

 

피그마를 제대로 활용하고 생산성을 끌어올릴 수 있는 3가지 방법을 알아보자.

 

1. 템플릿 활용

피그마(figma) 커뮤니티의 템플릿

피그마 커뮤니티 탭에서 들어가보면 위와 같이 완성도 높은 템플릿들을 만나볼 수 있다. 이곳에 올라와있는 템플릿들은 프레임, 레이어 정리가 잘 되어있어 재활용성이 높고 레이어 관리를 어떻게 할지에 대한 감도 잡을 수 있다.

원하는 템플릿을 클릭하면 미리보기도 가능하고, 우측 상단의 Duplicate 버튼을 누르면 페이지 캔버스로 복제되어 바로 사용할 수 있다. 

복제된 템플릿

이 곳에서 원하는 템플릿을 찾지 못했다면 구글 검색 (검색어 예시: iOS figma template)을 통해서도 더욱 다양한 템플릿을 찾아볼 수 있다. 어마어마한 오픈소스 덕분에 무에서 유를 창조해내지 않아도 스타일의 UI디자인에 도전할 수 있다.

 

 

2. 플러그인 활용

서드파티에서 훌륭한 플러그인을 제공하고 있다. 역시 커뮤니티 탭에서 Plugins으로 들어가보면 인기순으로 플러그인을 볼 수 있다.

피그마(fig) 커뮤니티의 플러그인

설치방법은 간단하다. 우측 Install 버튼을 누르면 끝이다. 캔버스로 돌아가 보면 바로 사용할 수 있다.

 

Unsplash

이 플러그인은 도형에 사진을 바로 입혀주는 최고의 플러그인이다. 외부에서 사진을 골라 저장해 피그마로 가져온 후 도형으로 마스킹 작업을 하는 과정을 생략해준다. 도형이기에 당연히 크기조정이 자유롭고 Crop 모드에서 사진의 원하는 부분이 보이도록 조정할 수 있다.

Google Sheets Sync

이 플러그인은 구글 스프레드 시트에 있는 데이터를 일일이 가공하지 않아도 띄워준다. 데이터의 크기나 유형, 내용을 일일이 수정하지 않아도 일괄적으로 반영할 수 있어 매력적이다.

Material Design Icons

구글의 머티리얼 디자인이 적용된 아이콘을 직접 만들지 않거나 다운받지 않고 캔버스에 바로 가져다 쓸 수 있다.

 

 

 

3. 단축키 활용

우측 하단의 ( ? ) 버튼을 누르면 단축키를 확인할 수 있다.  또는  cmd  +  shift  +  ?  를 눌러 확인할 수 있다.

단축키 확인방법

 

맥OS 사용자에게는 맥OS에 맞는 단축키를, 윈도우즈 사용자에게는 윈도우즈에 맞는 단축키를 확인할 수 있다. 한 번이라도 사용한 단축키는 파란색으로 표시된다.

대체로, 맥OS의 cmd키는 윈도우즈의 ctrl키로, 맥OS의 opt키는 윈도우즈의 alt키로 대체된다.

단축키 목록

 

[ 툴 선택 ]

펜툴　　 p 
컬러피커 i

 

[ 레이어 위계 ]

앞으로 　 cmd + ]
맨 앞으로 cmd + shift + ]
뒤로 　　 cmd + [
맨 뒤로 　cmd + shift + [

 

 

[ 가로로 길게 나열할 때 ]

상단정렬 opt + W
하단정렬 opt + S
중앙정렬 opt + V            < 오브젝트의 상하위치를 조정하므로 Vertical
간격정렬 ctrl + opt + H  < 오브젝트의 좌우간격을 조정하므로 Horizontal

 

[ 세로로 길게 나열할 때 ]

좌측정렬 opt + A
우측정렬 opt + D
중앙정렬 opt + H           < 오브젝트의 좌우위치를 조정하므로 Horizontal
간격정렬 ctrl + opt + V  < 오브젝트의 상하간격을 조정하므로 Vertical

Tidy up ctrl + opt + T

 

[ 화면전환 ]

피그마 UI 숨기기 cmd + ＼
해상도 100%  　 cmd + 숫자0
확대 cmd + 마우스 휠 아래로   또는   트랙패드 핀치인 동작
축소 cmd + 마우스 휠 위로   또는   트랙패드 핀치아웃 동작
이동 마우스 스크롤버튼 클릭 + 마우스 드래그   또는   트랙패드 두 손가락으로 이동