개발자의 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 + \ 를 누르면 양쪽 패널이 사라집니다.
디자인 화면을 크게 보고 싶을 때 유용합니다.