기획자가 Figma 쓰는 법: 2부
기획자들을 위한 Figma 단축키, 플러그인
2020년에 잘 쓰던 UI/UX툴인 Adobe Xd를 버리고 Figma로 갈아탔다고 이야기한 바 있다.
벌써 1년 하고도 3개월이 지났다. 이 기간 동안 디자이너와 PO직군은 모두 Figma에 정착하여 모든 와이어프레임, 디자인, 컴포넌트들이 Figma에서 관리되고 있다. 신규 입사자 온보딩 과정에서 제품과 관련된 모든 직군에게는 Figma에 대한 설명도 빼놓지 않고 있다. 하지만 Adobe Xd에 있는 과거 모든 자료를 Figma로 백업하지는 못했다.
기획자는 Figma를 다 몰라도 된다
Figma로의 백업은 나보다는 디자이너분들이 알아서 해주시기 때문에 나는 우선 “와이어프레임을 그릴 수 있는 수준”정도로만 Figma를 익히는데 초점을 맞췄다. Figma에는 정말 많은 기능이 있는데, 그 많은 기능을 기획자가 알 필요는 없다고 생각했다. 기획자는 디자인 시스템을 “make”할 필요도 없고, 만들어진 걸 그냥 “use”, 즉 사용하면 되기 때문에 아주 기본적인 단축키와 플러그인만 알면 되기 때문이다.
가장 먼저 숙지해야 할 것은 프레임(Frame)의 개념과, 프레임 사용법, 그리고 선이나 도형의 간단한 사용법, 텍스트와 색상 사용법 정도였다. 그중에서 프레임은 Figma에서는 아트보드(Artboard)로서 역할도 하지만, 나중에는 컴포넌트 제작이나 오토 레이아웃 등 다양한 기능을 가진 도형의 역할로 더 많이 활용되기 때문에 프레임이 어디에 쓰이고, 어떻게 활용 가능한지만 알면 와이어프레임을 그릴 때 매우 편하게 사용할 수 있기 때문에 필수적으로 알아두면 좋다.(1부에서 프레임 관련해서 한번 간략히 설명을 했었다. 한번 보고 오시면 이해하시기 더욱 쉽다.)
그다음은 디자이너들이 만들어둔 에셋과 컴포넌트 활용 법에 대한 것이다. 우리 회사는 디자인팀에서 공통 컴포넌트와, 색상(Color), 지정 폰트(Text)들을 모두 공용으로 사용할 수 있게 세팅해 놔서 내가 와이어프레임을 제작할 때 하나부터 열까지 모두 다 그릴 필요는 없었는데 이것도 컴포넌트 활용법을 디자인팀을 통해 배워서 가능했던 부분이다.
Figma 파일에서 Assets을 볼 수 있는 상단 메뉴만들어진 컴포넌트와 에셋들이 있다면 Figma 파일을 열 때 Assets을 클릭해서 활용할 수 있는데, 우리 회사는 wep, mobileapp, webapp, wireframe 등으로 그룹화하여 사용하고 있어 기획 내용에 따라서 어떤 종류의 에셋이나 컴포넌트를 사용할지 선택할 수 있다. 이런 것들을 적극 활용하면, 기존 디자인 화면과 유사한 정리된 와이어프레임이 나와서 기획 리뷰를 할 때 내 눈도 보호하고 개발자나 디자이너들의 눈도 보호하고 여러 가지 좋은 효과(?)를 누릴 수 있는 장점이 있다.
Assets의 Library이 외에 좀 더 잘 활용하고 싶다면, 오토 레이아웃 활용법을 좀 자세히 알아두거나 컴포넌트 원본과 복사본 활용법 등을 알아두면 좋다. 서비스에서 기존에 제공하지 않는 좀 더 다양한 형태의 UI/UX 실험을 할 수 있다. 개인적으로는 오토 레이아웃 활용법을 자세히 알아두길 권하는데, 알아두면 텍스트 사이즈에 따라서 도형 크기를 조율한다거나 표를 만든다거나 하는 작업을 할 때 매우 유용하기 때문이다.
실전 Figma 사용법
그럼 이제 실전에서 Figma를 사용할 때 어떻게 사용하는지 알아보자. 예전에 Adobe Xd로 와이어프레임 그리기 글에서도 단축키부터 외워두라고 했었는데, Figma도 마찬가지다. 기본 단축키를 외워두고 자주 써야 금방 익숙해지고, 다른 기능들을 익히는 데에도 시간이 덜 드는 편이다. 다만 Adobe Xd보다 단축키가 더 많고 잘 안 외워지는데, 이를 Figma에서도 알고 있는지 Ctrl+Shift+/ 를 누르면 단축키 도움말 창이 아래에 뜬다. Figma 사용 초창기뿐만 아니라 지금도 간간히 사용해야 할 단축키가 생각이 안 날 때 사용한다.
그렇다! 당신들이 지금 외워야 할 것은 이 안내 창을 띄우는 단축키다.단축키가 아니라 그냥 기능을 찾아보고 쓰면 되지 않느냐는 생각도 드시겠지만, Figma 기능이 워낙 많아서 단축키 찾아보고 사용하는 게 가장 시간을 절약하는 방법이라 그렇다.(미안하다. 이 방법밖에 모른다...)
그다음에 외워야 할 기본 Tool 단축키는 아래와 같다.
v : 가장 많이 사용하는 단축키다. 다른 툴을 쓰고 나서 어떤 요소를 선택하거나 이동시킬 때 우선 마우스를 기본 화살표 모양으로 바꿔야 하는데 이때 이 키를 쓴다.
f / a : 디자인의 기본 Frame을 만들 때 사용한다. 개인적으로는 a 단축키를 더 많이 사용한다.(figma에서는 a를 누르면 Frame이 뜬다는 이야기가 없는데, Adobe 사용하던 사용자들이 a를 많이 써서 그냥 되게 해준 것 같다.)
t : 텍스트 넣을 일이 많은 기획자에게 이거 필수다
l : 소문자 엘. 줄을 그을 때 아주 유용하다
Shift+L : 플로우 그릴 때 이거만 있으면 천하무적(?)이다. Flow를 그려주는 다른 Plugin을 안 써도 된다. 근데 예쁘게 그려지는 건 아니니, 예쁘게 flow가 곡선을 그리면서 표시하면 좋겠다 싶으면 별도 플러그인 사용하셔야 한다.
o : 동그라미 그릴 때 쓴다.
r : 사각형 그릴 때 쓴다
c : 디자인에 코멘트 달아야 한다면 이걸 눌러서 의견을 남기면 디자이너에게 알림이 간다.
그다음으로 많이 쓰는 단축키는 와이어프레임을 본격적으로 많이 그릴 때 아주 유용한 것들이다.
alt : frame이나 컴포넌트들을 복사할 때 사용한다. ctrl+c, v 안 써도 돼서 너무 편하다.(다른 디자인 툴에도 적용되는 단축키니 많이 활용해보셔라)
ctrl+g : 컴포넌트들을 그룹화할 때 쓴다.
ctrl+alt+b : 컴포넌트를 깨고 싶을 때 사용한다. 메인 컴포넌트와의 연결성을 끊어내고 자유롭게 사용하기 위한 것으로 제한적으로 사용한다.
shift+a : 오토 레이아웃(Auto layout) 만들 때 사용한다.
alt+shift+a : 오토 레이아웃을 깰 때 사용한다.
이런 단축키들 어디서부터 사용해야 할지 모르겠다면 Figma 커뮤니티에서 공유된 playbook으로 연습해보시는 걸 추천한다. 뭐든 자주 많이 사용해봐야 익숙해지고 점점 활용도가 올라가는 법이다.
Figma Shortcut Playbook
추가적으로 필요하다고 생각하는 Figma 무료 Plugin들을 찾아서 설치해서 쓰는 편인데, 가장 많이 쓰는 건 아이콘 관련 Plugin이다. 이미 서비스에서 사용 용도로 만들어진 아이콘 이외의 것이 필요할 경우 쓰는 편이다. (보통은 그렇게 와이어프레임에 새로운 아이콘을 넣어두면 디자이너가 서비스에 맞게 새로 디자인한다.) 그리고, 지금은 Figma 쓰면서 Zeplin 잘 안 쓰는 데, 종종 백업용으로 제플린에 디자인을 백업해야 할 경우를 대비해서 Zeplin으로 파일을 전송하는 Plugin을 설치해두었다. Figma 쓰시면서 Zeplin도 같이 쓸 계획이라면 설치해두는 걸 권장한다.
내 Figam에 설치된 Plugin. 실제로 쓰는 건 몇 개 안된다.맺음말
Figma 대유행의 시기가 오면서 많은 기획자들이 ppt나 다른 UI 툴에서 벗어나 Figma를 한번 사용해볼까?라고 접근했다가 너무 어려워서 포기하는 경우도 있다고 들었다. 나도 처음에는 Figma가 너무 어려워서 Adobe Xd를 계속 쓰면 안 되냐고 부탁한 적도 있었다. 하지만 디자인 업무 효율과 개발자와의 커뮤니케이션을 원활하게 하기 위해 Figma 활용도를 높여갔고 지금은 Figma에 완전히 정착하면서 누구보다 Figma를 찬양하는 사람이 되었다.
Figma는 결코 쉬운 툴이 아니다. 옆에서 도와주는 사람이 없다면 어떤 기능이 있는지도 모르고, 한글화도 안되어서 이게 무슨 의미인지도 모르는 영어 메뉴들 들여다보다가 포기했을 것 같다. 하지만 옆에 디자이너가 Figma를 사용하고 있다면 포기하지 말고 디자이너를 괴롭(?)혀가면서 익혀두길 추천한다. 개인 사이드 프로젝트할 때도 Figma로 다양한 걸 시도해볼 수 있으니 한번 배워두면 두고두고 도움이 될 거라고 장담할 수 있다.
새롭게 Figma로 기획하면서 어려움에 직면한 모든 기획자들에게 이 글이 도움이 되길 바란다. 다음 편에서는 Figma로 디자이너와 개발자와 어떻게 소통하고 업무를 진행하는 지로 이야기를 가져와 보겠다.
