기획자가 활용해야 할 피그마(Figma) 필수 기능 1
피그마로 업무효율을 높이고 싶다면, 꼭!
다른 모든 툴들이 그렇듯, 피그마(Figma)도 손에 익을수록 큰 도움이 된다.
기획자가 피그마를 사용하는 데 있어 필히 알고 익혀야 할 기본 구성 및 기능을 몇 가지 정리한다.
1. 작업 화면 기본 구성
캔버스(작업화면을 이렇게 표현하겠다)의 좌/우측에는 각각 화면을 조작할 수 있는 영역이 있다.
좌측은 Layers / Assets 탭으로 나뉘며, 간단하게는 아래와 같이 구분된다.
Layers : 페이지의 관리, 페이지에서 그린 각종 오브젝트(텍스트, 프레임, 이미지, 도형 등 모든 것을 통칭하겠다)들의 레이어 관리를 하는 공간
Assets : 제작한 컴포넌트들을 검색하고 바로 끌어다 쓸 수 있는 공간
우측은 Design / Prototype / Inspect 탭으로 나뉘며, 아래와 같이 구분된다.
Design : 오브젝트들의 위치, 정렬, 사이즈, 컬러 등 하나부터 열까지 조작하는 공간
Prototype : 목업을 만들기 위해 화면별 연결, 인터렉션 등을 설정하는 공간
Inspect : 오브젝트의 프로퍼티나 코드 등의 정보를 제공하는 공간
2. 단축키
단축키를 잘 외우고 잘 써먹는다면 작업하는 손은 2배, 3배 아니 그 이상으로 빨라질 수 있다.
키보드로 <Ctrl + Shift +?>를 누르거나 또는 마우스로 피그마 화면 우하단 <?> 클릭 후 Keyboard shortcuts을 클릭하면 대표적인 피그마의 기능 단축키들이 나온다. 특이한 점은 단축키를 한 번씩 시도해 보면 컬러가 바뀌면서 마치 튜토리얼을 하는 것처럼 재미를 준다.
그리고 캔버스의 빈 영역에서 마우스 우클릭, 오브젝트에 마우스 우클릭을 하면 거기서도 더 많은 단축키들을 활용할 수 있다.
추가로 화면 우측 영역의 Design 탭에서도, 각종 기능들에 마우스오버를 하면 단축키를 안내하기도 한다.
대표적으로 많이 사용하는 것은 아래 정도인 것 같다.
삽입 : 텍스트(T), 사각형(R), 원형(O), 프레임(F)
텍스트 정렬 : 좌측 정렬(Ctrl + Alt + L), 가운데 정렬(Ctrl + Alt + T), 우측 정렬(Ctrl + Alt + R)
오브젝트 정렬 : 가로 가운데 맞춤(Alt + H), 세로 가운데 맞춤(Alt + V)
기능 : 컴포넌트(Shift + Ctrl + K), 오토레이아웃(Shift + A)
* 맥 사용자들은 Ctrl 대신 Command 클릭
3. 플러그인, 커뮤니티 활용
서비스 초반에 비해 현재 정말 많이 진화된 Community. 검색을 통해 필요한 각종 플러그인을 설치하거나 다른 사람의 작업물들을 참고할 수 있다. 혼자 끙끙 앓기보다는 커뮤니티를 적극적으로 활용하면 큰 도움이 될 것이다.
4. 프레임 조작 및 디자인
보통 화면을 그릴 때 PC/Mobile 사이즈의 프레임을 만들고 그 안에서 오브젝트들을 구성한다. 이때 프레임에서 설정할 수 있는 몇 가지 유용한 기능들이 있다.
Clip Content : 프레임을 잡고 있을 때만 체크박스가 나타나며, 클릭 시 프레임 밖으로 튀어나온 오브젝트는 자르고 프레임 내부만 보여줌
Constraints : 프레임 안에 위치한 오브젝트들이 대상이며, 프레임 기준 상/하/좌/우/가운데 등으로 위치를 고정할 수 있는 기능
Auto Layout : 굉장히 중요하고 유용한 기능으로, 오브젝트들의 레이아웃을 내가 원하는 대로 자동으로으로 변형하도록 할 수 있음. (개인적으로 피그마에서 가장 활용도가 높은 기능이라 생각하는데, 소개할 기능이 너무 많아 나중에 별도로 글을 적어보도록 하겠다.)
Layout grid : 디자인 툴답게 프레임에 그리드를 설정할 수 있는데, 그리드를 숨김/표시하는 단축키
5. 신묘한 기능
서비스 초반에는 없다가 점점 업그레이드가 된 신묘한 기능들이 있다.
1. 도형/프레임 등의 라운드 처리는 이제 각 모서리별로 컨트롤할 수 있다.
2. 오브젝트의 테두리 선도 이제 상하좌우 각각 컨트롤할 수 있다.
3. 피그마로 제작한 화면을 이미지로 바로 사용하고 싶다면, 추출할 것 없이 바로 Copy as PNG(Shift + Ctrl + C) 할 수 있다.
4. 오브젝트의 투명도 조절은 간단하게 숫자만 클릭하면 된다.
5. 협업툴답게 실시간 대화를 하고 싶다면 </>를 클릭해 보자.
6. 플러그인 쉽게 찾기
플러그인을 검색할 때 Community에 갈 것 없이 캔버스에서 바로 검색/적용이 가능하다. 그렇지만 어떤 플러그인이 있는지 잘 모르기도 하고 필요한 기능이 있어도 이름을 정확하게 아는 것이 아니기 때문에, 그럴 때는 구글링을 한 번 해보면 좋다. 위에 예시 이미지는, 작업할 때 룰러에서 끌어온 수많은 가이드라인을 한 번에 삭제할 수 있는 기능을 찾아보기 위해 구글에 "figma delete guideline"이라고 검색을 했고, 검색 결과에서 "Clear Guides"이라는 플러그인이 있다는 것을 알아낼 수 있다.
몇 년 전에 사내 교육용으로 급히 만들었던 자료에 최근 추가된 기능들을 몇 가지 추가한 거라 내용이 다소 부실해 보일 수도 있지만 누군가에게는 도움이 되길 바라며,
기획자에게 있어 피그마는 직접 조작해 보고 손에 익히는 게 정말 중요하다는 점을 다시 한번 강조하고 싶다.
