Figma 기본 개념 (개발자가 알아야 할 것들)

들어가며

Figma를 직접 디자인할 일은 없지만, 디자이너가 만든 화면을 열어보고 스펙을 확인하는 일은 개발하면서 자주 생긴다. 제대로 읽을 줄 모르면 디자이너에게 매번 물어봐야 하고 커뮤니케이션 비용이 늘어난다. 개발자 입장에서 꼭 알아야 할 것들을 정리해둔다.

---

Figma 파일 구조

디자이너에게 링크를 받으면 브라우저에서 바로 열린다. 파일 구조를 먼저 파악하는 게 중요하다.

페이지 (Page)

좌측 상단에서 페이지 목록을 확인할 수 있다. 보통 이런 식으로 구성되어 있다.

Cover          : 파일 썸네일, 프로젝트 정보
Design         : 실제 화면 디자인
Components     : 버튼, 인풋 등 재사용 컴포넌트 모음
Style Guide    : 색상, 타이포그래피 정의
Flow           : 화면 간 이동 흐름

개발자는 주로 Design 페이지와 Components 페이지를 본다.

프레임 (Frame)

화면 하나를 나타내는 단위다. 좌측 레이어 패널에서 프레임 목록을 볼 수 있다.

실무에서 프레임 네이밍 예시:
Login / SignUp
Home / Home - Loading / Home - Empty
Product Detail / Product Detail - OOS (Out of Stock)
My Page / My Page - Edit

상태별로 프레임이 나뉘어 있는 경우가 많다. 개발 전에 어떤 상태 화면이 있는지 먼저 파악하는 게 중요하다.

---

개발 전 Figma 파일에서 확인해야 할 것들

실무에서 개발 시작 전에 디자인 파일을 꼼꼼히 확인하지 않으면 나중에 문제가 생긴다.

1. 화면 상태 (State) 파악

확인 항목:
- 기본 상태 (Default)
- 로딩 상태 (Loading)
- 빈 상태 (Empty)
- 에러 상태 (Error)
- 비활성화 상태 (Disabled)
- 호버/포커스 상태 (Hover / Focus)

디자이너가 모든 상태를 만들어두지 않은 경우가 있다. 개발 전에 빠진 상태가 있으면 미리 요청해야 한다.

2. 반응형 여부 확인

확인 항목:
- Mobile / Tablet / Desktop 프레임이 모두 있는가?
- 반응형이 필요한 컴포넌트는 어떻게 동작하는가?
- 브레이크포인트가 정의되어 있는가?

3. 인터랙션 확인

Prototype 탭에서 확인:
- 화면 간 이동 흐름
- 애니메이션 트랜지션
- 모달, 드로어, 토스트 동작 방식

4. 컴포넌트 확인

확인 항목:
- 버튼 종류 (Primary / Secondary / Tertiary / Danger)
- 버튼 크기 (Large / Medium / Small)
- 인풋 상태 (Default / Focus / Error / Disabled)
- 아이콘 라이브러리 (어떤 라이브러리 쓰는지)

---

스펙 확인하는 방법

요소를 클릭하면 우측 패널에서 스펙을 확인할 수 있다.

크기 / 위치

우측 패널 → Design 탭
- W (Width): 너비
- H (Height): 높이
- X / Y: 위치 좌표
- Rotation: 회전 각도

여백 확인

요소를 클릭한 상태에서 다른 요소에 마우스를 올리면 두 요소 사이의 간격이 표시된다.

Alt 키 누른 채로 다른 요소에 마우스 오버
→ 빨간 선으로 간격(px) 표시

텍스트 스펙

텍스트 요소 클릭 → 우측 패널 → Design 탭
- Font family
- Font size
- Font weight
- Line height
- Letter spacing
- Color

색상 스펙

색상 클릭 → HEX / RGB / HSL 값 확인
디자인 시스템이 적용된 경우 변수명(Color Token)으로 표시됨
예: --color-primary-500, --gray-100

---

실무에서 자주 발생하는 상황

스펙이 애매한 경우

문제: 여백이 14px인지 16px인지 불분명
해결:
1. Figma에서 직접 측정 시도
2. 애매하면 디자이너에게 Figma 코멘트로 질문
   (요소 선택 → C 단축키 → 코멘트 입력)

디자인이 개발하기 어려운 경우

문제: 특정 애니메이션이나 레이아웃이 구현하기 복잡함
해결:
1. 구현 가능한 대안 제시
2. 공수 차이를 설명하고 협의
3. Figma 코멘트에 기록해두기

디자인이 중간에 바뀐 경우

문제: 개발 중에 디자인이 업데이트됨
해결:
1. 디자이너에게 변경 사항 명시적으로 공유 요청
2. Figma 버전 히스토리 확인
   (좌측 상단 파일명 클릭 → Show version history)
3. 변경된 범위 파악 후 개발 공수 재산정

---

Figma 코멘트 활용

개발하면서 궁금한 점은 Figma 코멘트에 남기는 게 좋다. Slack DM보다 맥락이 명확하다.

코멘트 단축키: C
사용 방법: C 누르고 궁금한 요소 클릭 → 질문 입력

코멘트 활용 예시:
"이 버튼 비활성화 상태 디자인이 없는데 추가 가능할까요?"
"모바일에서 이 테이블은 어떻게 표시되나요?"
"이 애니메이션 duration이 얼마인가요?"

---

정리

항목	실무 포인트
페이지 구조 파악	Design / Components / Style Guide 페이지 먼저 확인
화면 상태 확인	Default / Loading / Empty / Error 상태 모두 있는지 체크
스펙 확인	클릭 후 우측 패널, Alt 키로 여백 측정
애매한 스펙	Figma 코멘트로 질문
디자인 변경	버전 히스토리로 변경 내역 확인