개발자의 Figma 사용법

 

처음 Figma를 사용할 당시에는 사용법을 검색해도 포스팅이 없었습니다. 😇

모르는게 많아서 디자이너님에게 많이 물어보면서 깨우쳤습니다.

개발자에게 유용한 Figma 사용법을 작성해 보겠습니다.

 

---

 

개발자 모드 켜기

Figma가 2023년 6월 21일 업데이트되면서 오른쪽 상단에 개발자 모드가 생겼습니다.

개발자 모드를 처음 키면 플랫폼을 설정할 수 있습니다. 근데 나중에 바꿀 수 있으니 다른 플랫폼을 선택해도 괜찮습니다.

완료하여 Dev Mode를 킨 모습입니다.

 

코드 확인

디자이너님이 구현한 Text, Button 요소를 클릭하면 오른쪽 Inspect에서 코드를 볼 수 있습니다.
iOS는 UIKit, SwiftUI 모두 지원하네요.
Font를 정의 (Title, Body, ...) 하여 사용하는 경우 CSS에서 주석으로 Font 이름이 표시될 수 있습니다.

 

이미지 저장

저장할 아이콘이나 이미지를 클릭하고 Inspect의 맨 하단에 Export를 + 버튼을 눌러 펼칩니다.
기본은 PNG로 되어있는데 PNG, JPG, SVG, PDF로 저장할 수 있어요.
저는 가급적 이미지가 깨지지 않도록 SVG 벡터로 저장하는 편입니다.

흰 배경의 X 버튼을 선택하고 싶은데 X 만 선택됐네요.
이럴 땐 왼쪽 Layers에서 상위 항목을 선택하던지 ⇧ Shift + Enter  입력해주세요.

 

Padding 확인

기본적으로 요소를 클릭하면 top, bottom, leading, trailing 값이 나옵니다.

저 위의 Text와의 간격을 보고싶을땐 ⌥ Option 키를 누른 채로 마우스 커서를 가져다 댑니다.
그래도 업데이트 되면서 패딩 값 보는 게 더 수월해 진 것 같아요.

옵션 키 누르면서 캡쳐 못하네..

 

텍스트 복사하기

Text 요소를 누르고 Inspect에 있는 내용을 클릭하면 클립보드에 복사됩니다.

 

Component 이동

아이콘 등 디자이너님이 Component 화를 해놨을 수 있습니다.
Inspect의 Component 버튼을 누르면 Component가 정의된 페이지로 이동합니다.

 

코멘트 남기기

작업하다가 궁금하거나 이상한 점이 생겼을 때 Add Comment 버튼을 클릭합니다.

원하는 영역에 드래드하여 영역을 만들면 코멘트를 남길 수 있는 창이 생겨납니다.
@로 Figma를 공유하고 있는 누군가를 멘션할 수도 있습니다.

 

양쪽 패널 Pages, Inspect 숨기기

⌘ Command + \  를 누르면 양쪽 패널이 사라집니다.
디자인 화면을 크게 보고 싶을 때 유용합니다.