개발자를 위한 Figma 핵심 및 디자인 핸드오프(Dev Mode) 가이드

# 개요

Figma는 브라우저 기반의 UI/UX 디자인 도구입니다.
디자이너뿐 아니라 개발자도 Figma를 이해한다면, 디자인과 코드 사이의 간극을 크게 줄일 수 있습니다.

과거에는 디자이너가 이미지나 PPT 등의 디자인 시안을 전달하고, 개발자는 그 가이드를 기반으로 개발을 했습니다.
이러한 방식은 가이드에서 커버하지 못하는 정보에서 여러 문제를 일으킵니다.
"이 색상 코드가 뭐죠?", "글꼴 크기를 모르겠어요." 같은 질문이 반복되곤 합니다.

Figma를 활용하면 이런 문제를 해소할 수 있습니다.
개발자는 색상, 간격, 타이포그래피 등 개발에 필요한 속성을 직접 확인하거나 단위 변환이나 컴포넌트 매핑 등에 활용할 수 있습니다.
플랫폼에 관계없이 에셋 추출, 디자인 의도 파악, 변경사항 확인 등의 작업도 가능합니다.

이 글에서는 직접 디자인하는 방법보다는, 디자인을 읽고 해석해서 코드로 변환하는 개발자의 시선으로 Figma를 살펴봅니다.
Figma는 다음과 같은 주요 특징이 있습니다.

# 가입 및 요금제

Figma에서 무료로 계정을 생성할 수 있습니다.
요금제는 변경될 수 있으므로, Figma Pricing 페이지를 확인해 주세요.
크게 정리하면, 다음과 같은 요금제가 있습니다.

Figma 요금제

오거니제이션 요금제로 업그레이드하려면, 업무용 이메일 주소를 사용해야 합니다.

오거니제이션 요금제 조건

Figma는 웹 브라우저에서 바로 사용할 수 있지만, 데스크톱 앱을 설치할 수도 있습니다.
데스크톱 앱을 설치하면 몇 가지 장점이 있습니다.

# 인터페이스 구성

Figma의 화면은 크게 4개 영역으로 구성됩니다.

• 왼쪽 사이드바(Left Sidebar): 레이어, 에셋, 페이지 등 관리
• 캔버스(Canvas): 무한의 디자인 작업 영역
• 오른쪽 사이드바(Right Sidebar): 선택한 요소의 속성, 디자인, 프로토타입 등 설정
• 툴바(Toolbar): 프레임, 도형, 텍스트 등 도구 선택

인터페이스 구성

# 기본 요소

Figma에서 디자인을 구성하는 핵심 요소들을 살펴봅니다.
영역, 도형, 텍스트 등 각 요소의 역할과 특징을 이해하면, 디자인을 코드로 변환할 때 각 요소가 어떻게 대응되는지 판단하기 쉬워집니다.

# 페이지

페이지(Page)는 하나의 Figma 파일 안에서 캔버스를 분리하는 단위입니다.
화면 설계, 컴포넌트, 디자인 시스템 등을 페이지별로 나누어 관리할 수 있으며, 왼쪽 사이드바에서 추가하거나 전환할 수 있습니다.

스크린샷 2026-03-13 오후 4.09.09.jpg

페이지 이름을 -(하이픈) 기호로 만들면 페이지 목록에 구분선이 생깁니다.
여러 페이지를 논리적으로 그룹화할 때 유용합니다.

스크린샷 2026-03-13 오후 4.10.35.jpg

# 영역

Figma에서 요소들을 묶거나 배치하는 영역은 섹션(Section), 프레임(Frame), 그룹(Group) 세 가지로 나뉩니다.
각각의 역할과 지원 기능이 다르므로, 다음 표에서 간단한 차이를 확인해 보세요.

# 섹션

섹션(Section)은 여러 프레임을 최상위 영역으로 묶어서 기획, 개발 등의 공유 목적으로 구분하는 데 최적화되어 있습니다.

툴바 > 섹션

섹션 안에서의 각 자식 프레임은 이름이 표시되지만, 프레임 안에서의 자식 프레임은 따로 이름이 표시되지 않습니다.
다음 이미지에서의 전체 영역이 왼쪽은 섹션이고, 오른쪽은 프레임입니다.
섹션 안에서는 Logo, Button, Icons 같은 자식 프레임의 이름이 표시됩니다.

여러 프레임을 포함하는 섹션 vs 프레임

섹션에서 크기에 맞게 조정하기(Resize to fit)를 사용하면, 자식 프레임들에 맞게 패딩이 포함된 상태로 크기가 조정됩니다.

오른쪽 사이드바 > 레이아웃 > 크기에 맞게 조정하기

프레임의 경우도 크기는 조정되지만, 패딩은 포함되지 않습니다.

크기에 맞게 조정하기 기능이 동작하는 섹션 vs 프레임

# 프레임

프레임(Frame)은 화면, 카드, 배너 등 UI 요소를 구성하는 디자인의 핵심 영역입니다.

툴바 > 프레임

프레임은 일반적으로 자유로운 크기로 만들어서 사용하지만, 오른쪽 사이드바의 프레임 프리셋에서 스마트폰, 태블릿, 데스크톱 등 다양한 디바이스 크기를 선택해 바로 만들 수도 있습니다.

프레임 프리셋

프레임 영역에서 넘친 콘텐츠 숨기기(Clip content)로 넘치는 자식 요소를 숨길 수 있습니다.

프레임에서 넘친 콘텐츠를 보여주기 vs 숨기기

제약 조건(Constraints)으로 프레임 크기가 변할 때 자식 요소가 어떤 위치 기준에 반응할지 설정할 수 있습니다.

오른쪽 사이드바 > 위치 > 제약 조건 선택

프레임 크기에 맞게 위치 변경

오토레이아웃(Auto Layout)으로 프레임이나 자식 요소 변경에 따라 동적으로 크기나 정렬 등이 반응하도록 만들 수 있습니다.

오른쪽 사이드바 > 오토레이아웃 선택

프레임 크기에 맞게 크기 변경

# 그룹

그룹(Group)은 단순히 요소를 묶는 영역으로, 여러 요소의 동시 제어를 위해 사용합니다.

레이어 선택 > 우클릭 > 그룹 선택

그룹의 크기를 변경하면 자식 요소들의 크기가 그에 맞게 같이 변경됩니다.

그룹의 크기 변경

그리고 그룹에서 색상을 변경하면 그룹 자체의 색상이 아닌 자식 요소들의 색상이 변경됩니다.

그룹의 색상 변경

# 도형과 기본 속성

패널에서 다양한 도형을 선택할 수 있습니다.

툴바 > 도형 선택

여러 도형 중 직사각형과 원형은 HTML <div>, Compose Box의 속성(Border Radius 등)을 이용해 코드로 직접 구현할 수 있습니다.
반면, 별이나 다각형 같은 복잡한 도형은 <svg>, <vector>를 사용해 상황에 따라 이미지로 처리해야 합니다.

직사각형, 타원, 다각형, 별, 이미지, 선, 화살표

도형을 선택하면 오른쪽 사이드바에서 위치나 레이아웃 등의 기본 속성을 제어할 수 있습니다.

도형 선택 > 오른쪽 사이드바

위치(Position)는 상위 영역(섹션, 프레임)을 기준으로 표시되며, 정렬하거나 좌표를 지정하거나 회전하거나 반전시킬 수 있습니다.

레이아웃(Layout)은 도형의 크기를 말합니다.
기본적으로 고정 너비(Fixed width/height)를 사용하지만, 상위 프레임에서 오토레이아웃을 사용하면 컨테이너 채우기(Fill container)를 통해서 가변 너비를 지정할 수도 있습니다.
웹에서는 px, 안드로이드에서는 dp 단위에 대응합니다.

외형(Appearance)에서 투명도(Opacity), 모서리 반경(Corner Radius), 블렌드 모드(Apply blend mode)를 지정할 수 있습니다.

채우기(Fill)는 도형의 배경색을 지정합니다.
단색(Solid), 선형 그라데이션(Linear gradient), 방사형 그라데이션(Radial gradient) 등을 선택할 수 있고, 이미지를 채우기로 사용할 수도 있습니다.

외곽선(Stroke)은 도형의 테두리를 지정합니다.
색상, 두께, 위치(안쪽/가운데/바깥쪽)를 설정할 수 있으며, 점선이나 파선 같은 스타일도 지정할 수 있습니다.

효과(Effects)에서는 그림자(Drop shadow, Inner shadow), 흐림(Layer blur, Background blur) 등의 시각 효과를 추가할 수 있습니다.

내보내기(Export)에서는 해당 요소를 PNG, JPG, SVG, PDF 등의 형식으로 내보낼 수 있습니다.
배율(1x, 2x, 3x 등)을 지정해서 여러 해상도의 에셋을 한 번에 추출할 수도 있습니다.

# 텍스트

텍스트(Text)는 디자인에서 사용하는 문자 요소입니다.
웹에서는 px, 안드로이드에서는 sp 단위에 대응합니다.

텍스트 속성

레이아웃은 자동 너비(Auto width), 자동 높이 조절(Auto height), 고정 크기(Fixed size)로 구분됩니다.
자동 너비는 텍스트 내용에 따라 너비가 자동으로 조절되고, 자동 높이 조절은 너비는 고정하되 높이만 내용에 맞게 변경됩니다.
고정 크기는 너비와 높이를 모두 직접 지정합니다.

글씨체(Typography)에서는 폰트, 굵기, 크기, 줄 높이, 자간 등을 지정할 수 있습니다.
디자이너가 텍스트 스타일(Text Style)을 미리 정의해 두면, 일관된 타이포그래피를 유지하면서 재사용할 수 있습니다.

외곽선(Stroke)은 텍스트 개별 글자의 외곽에 테두리를 추가하는 기능입니다.
로고나 강조 텍스트에 주로 사용되며, 일반 본문에서는 잘 사용하지 않습니다.

# 이미지

이미지는 로컬 이미지를 따로 불러오거나 웹에서 이미지를 복사해서 피그마 캔버스에 바로 붙여넣을 수 있습니다.

웹에서 이미지 복사

또는 프레임이나 도형 안에 이미지를 채워넣을 수도 있습니다.

도형 선택 > 오른쪽 사이드바 > 채우기 > 채우기 추가 > 사용자 지정 > 이미지

# 빠른 선택

캔버스에서 요소를 클릭하면 기본적으로 최상위 프레임이 선택됩니다.

최상위 프레임 선택

내부의 깊은 요소를 선택하려면 더블클릭을 반복해서 단계별로 더 깊게 선택할 수 있습니다.
혹은 Ctrl(Cmd) 키를 누른 상태에서 요소를 클릭하면, 최상위 프레임이 아닌 클릭한 지점의 최하위 요소가 바로 선택됩니다.

최하위 요소 선택

Ctrl(Cmd) 키를 누른 상태에서 우클릭하면, 해당 지점에 겹쳐 있는 모든 레이어 목록이 표시됩니다.
목록에서 원하는 레이어를 선택할 수 있어, 겹쳐진 요소가 많을 때 특히 유용합니다.

선택 가능한 레이어 표시

# 레이어

레이어(Layer)는 Figma에서 캔버스 위의 모든 요소(프레임, 도형, 텍스트, 이미지 등)를 트리 구조로 표현한 것입니다.
왼쪽 사이드바의 레이어 패널에서 각 요소의 계층과 순서를 확인하고 관리할 수 있습니다.
상위 레이어일수록 위에 표시됩니다.

왼쪽 사이드바 > 레이어

# 오토레이아웃

오토레이아웃(Auto Layout)은 웹의 Flex, 안드로이드의 LinearLayout과 유사한 개념으로, 자식 요소를 자동으로 정렬하고 간격을 관리합니다.

프레임 레이아웃의 오토레이아웃 전환(Toggle auto layout) 버튼을 선택하거나, 레이아웃의 자유 입력(Freeform)을 제외한 세로(Vertical), 가로(Horizontal), 그리드(Grid) 중 하나를 선택하면 자동으로 오토레이아웃으로 전환됩니다.

오른쪽 사이드바 > 레이아웃 > 오토레이아웃 전환

자유 입력 vs 오토레이아웃

# 방향과 정렬

세로(Vertical) 혹은 가로(Horizontal)를 선택해서 자식 요소가 정렬되는 방향을 결정할 수 있습니다.

오른쪽 사이드바 > 레이아웃(오토레이아웃) > 가로/세로 선택

자식 요소들은 레이어의 순서를 변경하거나 드래그해서 정렬 순서를 쉽게 변경할 수 있습니다.

가로 vs 세로

그리고 자식 요소들이 정렬되는 방향 기준도 지정할 수 있습니다.
상단 왼쪽부터 하단 오른쪽까지 총 9개의 기준이 있습니다.

오른쪽 사이드바 > 레이아웃(오토레이아웃) > 방향 기준 선택

각 방향 기준에 따른 정렬 차이

랩(Wrap)을 사용하면 정렬된 자식 요소들을 줄바꿈할 수 있습니다.

랩(Wrap) 설정

랩(Wrap) 적용 결과

# 패딩과 간격

패딩(Padding)은 프레임 내부의 여백을 말합니다.
기본적으로 가로 패딩(Horizontal padding)과 세로 패딩(Vertical padding)을 지정할 수 있습니다.

패딩 설정

가로/세로 패딩 적용 결과

우측의 개별 패딩 버튼을 선택하면 왼쪽(Left padding), 상단(Top padding), 오른쪽(Right padding), 하단(Bottom padding)을 따로 지정할 수도 있습니다.

개별 패딩 설정

개체 간의 가로 간격(Horizontal gap between objects)으로 프레임의 자식 요소 사이 간격을 지정할 수 있습니다.
랩(Wrap)을 사용해 줄바꿈을 하는 경우에는, 행 간의 세로 간격(Vertical gap between row)을 사용할 수도 있습니다.

오른쪽 사이드바 > 오토레이아웃 > 개체 간의 가로 간격

오른쪽 사이드바 > 오토레이아웃 > 행 간의 세로 간격

간격 적용 결과

# 크기 제어

오토레이아웃이 적용된 프레임의 자식 요소 크기를 제어하는 방식은 3가지입니다.

• 고정 너비/높이(Fixed width/height): 지정한 크기를 유지
• 내용에 맞게 조절(Hug contents): 자식 크기에 맞게 줄어듦 / 자식을 껴안음
• 컨테이너 채우기(Fill Container): 부모 크기에 맞게 늘어남 / 부모를 채움

고정 너비/높이 vs 내용에 맞게 조절 vs 컨테이너 채우기

크기 조절이 적용되면, 다음과 같이 해당 요소의 크기 부분에 허그(Hug), 채우기(Fill)의 태그가 표시됩니다.

오른쪽 사이드바 > 오토레이아웃

# 제약 조건

오토레이아웃이 적용되지 않은 부모 프레임의 크기가 변할 때 자식 요소가 어떤 위치 기준에 반응할지 제약 조건(Constraints)으로 지정할 수 있습니다.
제약 조건은 절대 위치를 지정하는 개념이기 때문에, 오토레이아웃이 적용된 부모 프레임에서 정렬되는 자식 요소에는 사용할 수 없습니다.

제약 조건 설정

선택 가능한 값은 다음과 같습니다.
왼쪽, 상단이 기본값입니다.

• 가로
  • 왼쪽(Left): 부모의 왼쪽에 고정
  • 오른쪽(Right): 부모의 오른쪽에 고정
  • 왼쪽+오른쪽(Left+Right): 부모의 좌우 모두에 고정, 부모 너비 변화에 따라 자신도 너비가 변함
• 세로
  • 상단(Top): 부모의 상단에 고정
  • 하단(Bottom): 부모의 하단에 고정
  • 상단+하단(Top+Bottom): 부모의 상하단 모두에 고정, 부모 높이 변화에 따라 자신도 높이가 변함
• 공통
  • 가운데(Center): 부모의 가운데 기준
  • 확대/축소(Scale): 부모의 크기와 같은 비율을 유지

프레임의 자식 요소는 기본적으로 제약 조건이 왼쪽과 상단이기 때문에, 프레임의 크기를 조절해도 모든 자식 요소의 위치는 항상 왼쪽 상단에서 시작합니다.

기본 제약 조건 - 왼쪽, 상단

프레임의 3번째 자식 요소의 제약 조건을 오른쪽과 하단으로 변경하면, 프레임의 크기가 조절되었을 때 3번째 자식 요소의 위치가 변경되는 것을 볼 수 있습니다.

제약 조건 - 오른쪽, 하단

프레임의 가운데 있는 2번째 자식 요소의 제약 조건을 가운데로 변경하면, 프레임의 크기가 조절되었어도 항상 가운데 위치를 유지합니다.

제약 조건 - 가운데

그리고 프레임의 1번째 자식 요소의 제약 조건을 확대/축소로 변경하면, 프레임의 크기에 맞게 같은 비율로 확대되거나 축소되는 것을 볼 수 있습니다.

제약 조건 - 확대/축소

# 컴포넌트

컴포넌트(Component)는 재사용 가능한 UI 요소를 말하며, 기본적으로 메인 컴포넌트(Main Component)와 인스턴스(Instance)로 구분됩니다.
메인 컴포넌트는 원본이고, 인스턴스는 사본으로 이해하면 쉽습니다.
메인 컴포넌트를 수정하면 모든 인스턴스에 반영되며, 각 인스턴스에서는 개별적인 변경사항을 적용할 수 있습니다.

간단한 구조의 버튼을 컴포넌트로 만들어, 메인 컴포넌트와 인스턴스를 이해해 봅시다.
다음과 같이 만들어진 간단한 버튼 레이어에서 우클릭 후 컴포넌트 만들기(Create component)를 선택합니다.

레이어 우클릭 > 컴포넌트 만들기(Create component)

오른쪽 사이드바 > 버튼 스타일 참고

그러면 버튼 레이어의 아이콘과 색상이 변경되며, 메인 컴포넌트로 만들어집니다.
메인 컴포넌트는 ❖ 아이콘으로 표시됩니다.

메인 컴포넌트로 변환된 버튼

이렇게 만들어진 컴포넌트를 사용하려면 에셋(Assets) 메뉴에서 컴포넌트를 삽입해야 합니다.
다음 이미지와 같은 과정으로 인스턴스를 삽입할 수 있습니다.
3번 단계에서 사용할 컴포넌트를 캔버스로 드래그하거나 4번 단계의 인스턴스 삽입(Insert instance) 버튼을 선택합니다.

에셋에서 컴포넌트 삽입하기

그러면 새로운 버튼 인스턴스가 추가되는데, 메인 컴포넌트와의 구분을 위해 메인 컴포넌트는 ❖ 아이콘으로 표시되고, 인스턴스는 ◇ 아이콘으로 표시됩니다.

메인 컴포넌트와 인스턴스 구분

이제 메인 컴포넌트를 기반으로 여러 인스턴스를 재사용할 수 있습니다.
그리고 메인 컴포넌트에서 버튼의 색을 변경하거나 글자를 수정하면 모든 인스턴스에도 똑같이 반영됩니다.

메인 컴포넌트 색상 변경이 인스턴스에 반영

# 베리언트

베리언트(Variant)를 통해서 하나의 컴포넌트가 가질 수 있는 다양한 변형을 만들 수 있습니다.

베리언트로 여러 종류의 버튼 스타일을 제공해 봅시다.
메인 컴포넌트 레이어에서 우클릭한 후 주요 컴포넌트(Main component) > 베리언트 추가(Add variant)를 선택합니다.

베리언트 추가 메뉴

위 과정을 한 번 더 반복하면, 메인 컴포넌트의 베리언트 레이어가 총 3개(기본, 베리언트2, 베리언트3) 생성되며, 각 베리언트는 ◆ 아이콘으로 표시됩니다.
그리고 캔버스를 보면, 각 베리언트를 감싸는 점선의 컴포넌트 영역과 컴포넌트 이름이 표시됩니다.

그리고 각 베리언트 레이어를 원하는 스타일로 수정합니다.
확인, 취소, 삭제 등으로 사용할 버튼 스타일을 각각 만들었습니다.

3개의 베리언트 스타일

특정 베리언트를 선택하고 하단에 + 을 선택하거나 Ctrl(Cmd) + D 단축키로 더 빠르고 쉽게 새로운 베리언트를 만들 수도 있습니다.

특정 베리언트에서 새로운 베리언트 추가

기본, 베리언트2 같은 이름은 직관적이지 않으니 베리언트 이름을 변경해 봅시다.
먼저 기본 베리언트 레이어를 선택합니다.
그리고 오른쪽 사이드바에서 '속성 1'의 값을 선택해 하단의 이름 변경...(Rename...) 메뉴를 선택합니다.
새로운 값으로 Primary라고 입력합니다.

이렇게 각 베리언트를 레이어를 선택해, 베리언트2를 Secondary로, 베리언트3을 Danger라는 이름으로 변경합니다.

베리언트 이름 변경 결과

이제 버튼 인스턴스에서 여러 스타일을 선택적으로 사용할 수 있습니다.
앞서 삽입했던 버튼 인스턴스를 선택하고 오른쪽 사이드바에서 속성 1의 값을 변경하면, 값에 맞는 스타일로 변경되는 것을 볼 수 있습니다.

인스턴스에서 베리언트 선택

속성 1이라는 이름은 직관적이지 않으니 다른 이름으로 변경해 봅시다.
메인 컴포넌트를 선택하고 오른쪽 사이드바에서 속성 1의 속성 편집(Edit property)을 선택합니다.
그리고 이름을 속성 1에서 Variant로 변경합니다.
(원하는 다른 이름으로 변경해도 됩니다)

속성 이름 변경

다시 버튼 인스턴스를 선택하면, 다음과 같이 이름이 변경되어 있습니다.

변경된 속성 이름 확인

# 텍스트

컴포넌트의 특정 베리언트에서 버튼 이름을 변경해도 다른 버튼의 이름은 같이 변경되지 않습니다.
만약 버튼의 이름을 한 번에 관리하려면, 컴포넌트의 텍스트(Text) 속성을 사용할 수 있습니다.

베리언트별 텍스트 차이

먼저 메인 컴포넌트를 선택합니다.
오른쪽 사이드바의 속성 만들기(Create property)를 선택하고 나오는 메뉴에서 텍스트(Text)를 선택합니다.

텍스트 속성 만들기 메뉴

텍스트 속성의 이름을 Label, 값을 Button으로 지정하고 속성 만들기(Create property)를 선택합니다.

텍스트 속성 설정

이렇게 새로운 텍스트 속성이 만들어졌지만, 아직 사용되지 않고 있다는 경고가 표시됩니다.

텍스트 속성 미사용 경고

텍스트 속성을 연결할 버튼의 모든 텍스트 레이어를 선택합니다.

모든 텍스트 레이어 선택

모든 텍스트 레이어를 선택했다면, 오른쪽 사이드바에서 변수/속성 적용(Apply variable/property) 버튼을 선택합니다.
그리고 나오는 메뉴에서 위에서 만든 Label 텍스트 속성을 선택합니다.

텍스트 속성 적용

이제 모든 베리언트 레이어의 텍스트가 통일되며, 수정하면 모든 텍스트가 변경됩니다.

통일된 텍스트

인스턴스에서는 오른쪽 사이드바의 Label 속성에서 값을 변경할 수 있습니다.

인스턴스에서 Label 속성 변경

# 불리언

불리언(Boolean) 속성으로 컴포넌트의 특정한 레이어를 숨기거나 표시하는 것을 제어할 수 있습니다.
그러면 이 기능으로 버튼에서 아이콘 사용 여부를 지정해 봅시다.

먼저 메인 컴포넌트를 선택하고 오른쪽 사이드바의 속성 만들기(Create property)를 선택하고 메뉴에서 불리언(Boolean)을 선택합니다.

불리언 속성 만들기 메뉴

속성의 이름을 Has Icon으로, 값을 True로 지정한 후 속성 만들기(Create property)를 선택합니다.

불리언 속성 설정

불리언 속성 생성 완료

먼저 Primary 베리언트 레이어에서 작업해 봅시다.
베리언트의 첫 번째 자식으로 텍스트를 추가해서 check 문자를 작성합니다.

아이콘 텍스트 추가

그리고 오른쪽 사이드바에서 이 문자의 글씨체를 Material Icons로 변경합니다.

글씨체를 Material Icons로 변경

캔버스에서 check라는 문자가 아이콘으로 변경된 것을 볼 수 있습니다.
다른 베리언트에도 아이콘 레이어를 복사하고 알맞게 색상도 변경합니다.

모든 베리언트에 아이콘 레이어 추가

이제 불리언 속성을 적용하기 위해서 모든 베리언트의 아이콘 레이어를 선택합니다.

모든 아이콘 레이어 선택

오른쪽 사이드바의 외형(Appearance)에서 변수/속성 적용(Apply variable/property)을 선택하고 위에서 만든 Has Icon 속성을 선택합니다.
이제 아이콘 레이어는 이 속성의 True, False 값에 따라 보이거나 보이지 않게 됩니다.

불리언 속성 적용

불리언 속성 적용 완료

아이콘은 기본적으로는 사용하지 않고 필요할 때만 사용할 것으므로, 모든 아이콘 레이어의 레이어 표시 전환(Toggle layer visibility)을 선택해서 일단 캔버스에서는 보이지 않도록 합니다.

모든 아이콘 레이어 숨기기

버튼 컴포넌트에서는 기본적으로 아이콘이 보이지 않음

인스턴스에서는 오른쪽 사이드바의 Has Icon 속성에서 스위치 형태로 True, False 값을 전환할 수 있습니다.

오른쪽 사이드바 > Has Icon 속성

인스턴스에서 아이콘 표시

# 분리 및 해제

원하는 베리언트 레이어를 선택하고 컴포넌트 영역(점선) 밖으로 드래그합니다.
그러면 기존 컴포넌트의 베리언트가 아닌 독립적인 새 컴포넌트가 됩니다.

영역 밖으로 드래그 > 컴포넌트 분리

컴포넌트를 더 이상 사용하지 않거나 다시 만들고 싶을 때, 직접 해제하는 기능은 없지만 인스턴스를 활용해 우회할 수 있습니다.
컴포넌트의 인스턴스 레이어에서 우클릭 후 인스턴스 분리(Detach instance)를 선택합니다.
해당 인스턴스는 메인 컴포넌트와의 연결이 끊어지고 일반 레이어가 되며, 필요에 따라 기존의 컴포넌트는 삭제하면 됩니다.

레이어 우클릭 > 인스턴스 분리

# 변수

변수(Variables)는 디자인 토큰(Design Token)의 역할을 합니다.
하나의 변수를 정의하면 다크 모드나 라이트 모드 등의 여러 모드에 따라 다른 값을 가질 수 있습니다.

컬렉션, 그룹, 변수 순서에 맞게 계층적으로 구성됩니다.
오른쪽 사이드바에서 다음과 같이 변수 정보를 확인할 수 있습니다.

• 컬렉션(Collection): 최상위 분류로, 목적이나 도메인별로 변수를 구분
• 그룹(Group): 컬렉션 내에서 변수를 세분화
• 중첩된 하위 그룹: 그룹에서 더 세분화된 변수를 구분하는 중첩된 하위 그룹
• 변수(Variable): 실제 값을 가지는 단위로, 각 모드별로 다른 값을 지정 가능

오른쪽 사이드바 > 변수

1
2
3
4
5
6
7
8
9
10
컬렉션
├─ 그룹
│  ├─ 변수
│  ├─ 변수
│  └─ 하위 그룹 (중첩 가능)
│     ├─ 변수
│     └─ 변수
└─ 그룹
   ├─ 변수
   └─ 변수

# 변수 만들기

어떤 레이어도 선택하지 않은 상태에서 오른쪽 사이드바 > 변수 > 변수 열기(Open variables)를 선택합니다.
처음에는 아무런 변수도 존재하지 않으니 만들기 버튼을 선택하고 나오는 메뉴에서 색상 등의 원하는 변수 종류를 선택합니다.

기본 이름과 값으로 지정된 변수에서, 이름과 값을 변경하면 됩니다.
이름에 / 기호를 사용하면, 변수와 그룹을 같이 만들 수 있습니다.

이미 존재하는 디자인의 색상이나 기타 값에서 바로 변수를 만들 수도 있습니다.
특정 요소를 선택하고 오른쪽 사이드바에서 다음 이미지와 같이 사용 색상을 선택하고 그 색상을 바로 변수로 만듭니다.

컬렉션이 없을 때는 컬렉션 항목이 없음

컬렉션이 있으면 컬렉션 항목이 있음

이렇게 버튼 컴포넌트의 나머지 Secondary와 Danger 베리언트도 사용하는 색상을 변수로 지정합니다.
다시 오른쪽 사이드바에서 변수 열기(Open variables)를 선택하면 다음 이미지와 같이 변수 목록이 만들어집니다.
컬렉션 이름도 Variables로 변경합니다.

변수 목록

이제 다른 곳에서 변수를 재사용할 수 있습니다.
변수는 색상이나 텍스트 등의 값을 지정할 때, 라이브러리(Libraries)에서 선택할 수 있습니다.

라이브러리에서 변수 선택

# 모드

지금까지 만든 버튼은 모두 다크 모드(Dark Mode) 버전이었습니다.
라이트 모드(Light Mode)에서도 버튼을 사용하기 위해서 변수의 모드(Mode) 기능을 활용해 봅시다.

먼저 라이트 모드 버전으로 새로운 버튼을 디자인합니다.

라이트 모드 버튼 디자인

새로운 변수 모드(Add new mode) 버튼을 선택하면 값의 이름이 Mode 1과 Mode 2로 구분됩니다.
그리고 Mode 2의 각 변수 값을 라이트 모드 버전의 새로운 버튼 디자인에 맞게 수정합니다.

새로운 변수 모드 추가

각 모드의 직관성을 위해서 Mode 1과 Mode 2를 Dark Mode와 Light Mode라는 이름으로 변경합니다.

모드 이름 변경

모드를 적용할 준비가 완료되었으니, 실제 라이트 모드의 버튼을 표시해 봅시다.
라이트 모드로 표시할 영역을 프레임으로 감싸서 새로운 인스턴스 버튼을 베리언트에 맞게 나열합니다.

라이트 모드 인스턴스 나열

버튼들을 감싼 프레임을 선택하고 오른쪽 사이드바의 외형(Appearance)에서 변수 모드 적용하기(Apply variable mode)를 선택합니다.
Variables 컬렉션에는 자동으로 Dark Mode가 선택되어 있는데, 이를 명시적으로 Light Mode로 변경합니다.

변수 모드 적용하기

그러면 프레임 자체가 Light Mode로 전환되면서 내부의 모든 버튼이 그에 맞게 표시되는 것을 볼 수 있습니다.

라이트 모드 적용 결과

# 내보내기/가져오기

변수 컬렉션을 JSON 파일로 내보내거나, 다른 디자인에서 내보낸 변수 파일을 가져올 수 있습니다.

다음과 같이 변수 패널의 컬렉션에서 우클릭하면 내보내기 모드(Export modes) 기능을 선택할 수 있습니다.

오른쪽 사이드바 > 변수 > 변수 열기 > 컬렉션 우클릭 > 내보내기 모드 선택

그러면 Variables.zip와 같이 컬렉션 이름으로 된 압축 파일을 다운로드합니다.
압축을 풀면 다음과 같이 각 모드로 구분된 변수 파일(JSON)을 확인할 수 있습니다.

1
2
3
Variables/
  ├─ Dark_Mode.tokens.json
  └─ Light_Mode.tokens.json

다른 디자인에서 이 JSON 파일을 가져와서 변수로 사용할 수 있습니다.
변수 패널의 컬렉션을 우클릭하고 가져오기(Import)를 선택한 후, 내보낸 변수 파일을 선택합니다.

변수 내보내기

변수 파일 다중 선택 > 열기

컬렉션 1 기본 이름을 원하는 다른 이름으로 바꿔서 사용하면 됩니다.

가져온 변수 컬렉션

# 프로토타이핑

프로토타이핑(Prototyping)은 화면 간 전환과 인터랙션을 시뮬레이션하는 기능입니다.
실제 앱이나 웹처럼 동작하는 프로토타입을 만들어 디자인을 검증할 수 있습니다.

프로토타이핑 화면

오른쪽 사이드바의 프로토타입(Prototype) 탭을 선택하면 프로토타이핑 모드로 전환됩니다.

프로토타입 탭

프로토타입의 시작 화면을 지정하려면 최상위의 섹션이나 프레임을 선택한 후, 프로토타입(Prototype) 탭에서 흐름 시작점(Flow starting point)을 추가합니다.

흐름 시작점 지정

프레임 등의 요소를 선택하면 오른쪽에 작은 원형 핸들이 나타납니다.
이 핸들을 드래그해서 이동할 대상 화면이나 기타 프레임에 연결하면 인터랙션이 만들어집니다.

인터랙션 핸들 사용

인터랙션 연결

# 상호작용

인터랙션은 트리거(Trigger)와 작업(Action)의 조합으로 구성되며, 화면 전환 시 애니메이션(Animation)을 지정할 수 있습니다.

상호작용

트리거

트리거(Trigger) 는 인터랙션이 실행되는 조건을 지정합니다.

• 없음(None): 트리거 없음
• 탭(On click / On tap): 요소를 클릭하거나 탭할 때
• 드래그 시(On drag): 요소를 드래그할 때
• 마우스를 올리는 동안(While hovering): 마우스를 올려놓는 동안
• 누르는 동안(While pressing): 요소를 누르고 있는 동안
• 키/게임패드(Keyboard / Gamepad): 특정 키보드 키나 게임패드 버튼을 누를 때
• 마우스 들어옴(Mouse enter): 마우스가 요소 영역에 진입할 때
• 마우스 나가기(Mouse leave): 마우스가 요소 영역을 벗어날 때
• 터치 다운(Mouse down): 마우스나 터치를 누르기 시작할 때
• 터치업(Mouse up): 마우스나 터치를 놓을 때
• 지연 후(After delay): 지정한 시간이 경과한 후

작업

작업(Action) 은 트리거가 발생했을 때 실행할 동작을 지정합니다.

• 없음(None): 작업 없음
• 로 이동(Navigate to): 다른 프레임으로 화면 전환
• 변경(Change to): 컴포넌트의 베리언트 변경
• 뒤로(Back): 이전 화면으로 돌아가기
• 스크롤하여 이동(Scroll to): 같은 화면의 특정 위치로 스크롤
• 링크 열기(Open link): 외부 URL 열기
• 변수 설정(Set variable): 변수 값을 변경
• 변수 모드 설정(Set variable mode): 변수의 모드를 변경
• 조건부(Conditional): 조건에 따라 다른 작업을 실행
• 오버레이 열기(Open overlay): 모달이나 팝업 표시
• 오버레이 교체(Swap overlay): 현재 오버레이를 다른 오버레이로 교체
• 오버레이 닫기(Close overlay): 열려 있는 오버레이를 닫기

애니메이션

애니메이션(Animation) 은 화면 전환 시 적용할 효과를 지정합니다.

• 인스턴트(Instant): 전환 효과 없이 즉시 변경
• 디졸브(Dissolve): 페이드 인/아웃으로 전환
• 스마트 애니메이션(Smart animate): 같은 이름의 레이어를 자동으로 연결하여 부드러운 전환
• 안으로 이동(Move in): 새 화면이 한 방향에서 슬라이드하며 등장
• 밖으로 이동(Move out): 현재 화면이 한 방향으로 슬라이드하며 퇴장
• 푸시(Push): 이전 화면을 밀어내며 새 화면 등장
• 슬라이드 인(Slide in): 새 화면이 기존 화면 위로 슬라이드하며 등장
• 슬라이드 아웃(Slide out): 현재 화면이 슬라이드하며 퇴장

# 스크롤과 고정

콘텐츠가 프레임 영역을 벗어나는 경우, 프로토타입에서의 스크롤 동작을 설정할 수 있습니다.
긴 목록, 본문 텍스트, 갤러리 등 프레임보다 큰 콘텐츠를 스크롤로 탐색할 수 있게 합니다.

할 일 목록 스크롤

프레임 영역을 선택하고 프로토타입(Prototype) 탭에서 스크롤 동작(Scroll behavior)의 오버플로(Overflow)를 지정합니다.

프로토타입 > 스크롤 동작 > 오버플로

• 없음(None): 스크롤 불가
• 세로(Vertical): 세로 방향 스크롤
• 가로(Horizontal): 가로 방향 스크롤
• 모두(Both): 가로/세로 모두 스크롤

프로토타입에서 특정 요소를 스크롤과 관계없이 화면에 고정할 수도 있습니다.
내비게이션 바, 헤더, 플로팅 버튼 등 화면에 항상 표시되어야 하는 요소에 사용합니다.

할 일 추가 버튼 고정

고정할 요소를 선택하고 프로토타입(Prototype) 탭에서 스크롤 동작(Scroll behavior)의 위치를 지정합니다.

프로토타입 > 스크롤 동작 > 위치

# 프로토타입 보기

프로토타입을 실행하려면 오른쪽 상단의 프로토타입 보기(Prototype view) 버튼을 선택합니다.
프레젠테이션(Present)은 새 탭에서 전체 화면으로 프로토타입을 실행하며, 미리보기(Preview)는 편집 화면 옆에 작은 창으로 열려 수정사항을 바로 확인할 수 있습니다.

프로토타입 프레젠테이션과 미리보기

프로토타입 미리보기 화면

Figma 앱을 설치해 미러링 기능으로 실제 모바일 기기에서 프로토타입을 확인할 수 있습니다.
다음은 실제 갤럭시 폴드에서 확인한 이미지입니다.

Figma 앱 설치

Figma 앱 로그인

미러링 메뉴 > 미러링 시작

미러링 메뉴 켜기 안내

미러링 메뉴

프로토타입 확인

프로토타입 확인

# 디자인 핸드오프

디자인 핸드오프(Design Handoff)는 완성된 디자인 결과를 개발자가 실제 기능적인 제품으로 구현할 수 있도록 전달하는 과정을 말합니다.

디자인이 완료되면 기획자나 개발자 등에게 공유하기 위해, 오른쪽 사이드바 상단의 공유하기(Share)를 선택합니다.
그러면 다음과 같이 해당 파일 공유(Share to selection "content") 패널을 확인할 수 있고, 우측 상단의 링크 복사(Copy link)를 선택해 복사한 링크를 공유할 수 있습니다.

스크린샷 2026-03-14 오후 5.44.21.jpg

로그인하지 않은 상태에서 공유된 링크로 접속하면 디자인이나 프로토타입을 보는 것은 가능하지만, 댓글, 검사, 편집 등의 기능은 제공하지 않습니다.
다음과 같이 하단의 툴바에서 회원가입 및 로그인을 유도합니다.

로그인하지 않은 상태

개발자가 디자이너의 계정으로 접속하는 것이 아니라면, 개발자가 직접 회원가입 및 로그인 후 접속해야 합니다.
개발자가 로그인하면 댓글, 검사 등의 개발에 필요한 기본적인 기능이 주어지고, 디자이너(소유자)에게 권한을 요청해 직접 편집이나 Dev Mode 같은 추가 기능을 사용할 수 있습니다.

로그인한 후 '볼 수 있음' 권한 상태

추가 권한이 없는 기본 기능에서는, 캔버스에서 요소를 선택하면 오른쪽 사이드바의 속성(Properties) 탭에서 해당 요소에 적용된 레이아웃이나 색상 등의 여러 정보를 확인할 수 있습니다.

요소 선택과 속성 확인

컴포넌트 속성이나 레이아웃 같은 각 항목의 우측 상단에서 복사(Copy) 버튼을 선택하면, 다음과 같은 CSS 코드를 복사할 수 있습니다.
복사된 코드에는 기본적인 스타일 정보가 포함되지만, 단위가 없거나 의미 없는 속성이 포함되는 등 실제 사용하려면 코드 수정이 필요합니다.

1
2
3
4
5
6
7
8
width: 372;
height: 74;
border-radius: 16px;
border-width: 1px;
padding: 16px;
gap: 12px;
angle: 0 deg;
opacity: 1;

두 요소 사이의 간격을 확인하려면, 기준 요소를 선택하고 Alt(Option) 키를 누른 상태로 다른 요소 위에 마우스를 올리면, 빨간색 선으로 정확한 간격이 표시됩니다.

간격 측정

디자인에 사용된 아이콘, 이미지 등의 에셋을 추출할 수도 있습니다.
여러 해상도의 디바이스를 지원하기 위한 여러 크기나 포맷을 추가해서 내보낼 수 있습니다.

추출할 에셋 요소를 선택한 후 오른쪽 사이드바의 내보내기(Export)에서 내보내기 설정 추가(Add export settings) 버튼을 선택합니다.
버튼을 여러 번 선택해서 원하는 여러 크기와 포맷을 추가합니다.

에셋 내보내기

# 댓글 도구

# 댓글

Figma에서 직접 댓글을 추가하고 특정 요소에 대해 질문하거나 피드백을 주고받을 수 있습니다.

디자인과 Dev Mode에서 모두 댓글을 작성할 수 있습니다.
화면 하단의 툴바에서 댓글(Comment)을 선택합니다.

디자인 > 툴바 > 댓글 선택

Dev Mode > 툴바 > 댓글 선택

댓글은 원하는 아무곳이나 선택해서 추가할 수 있습니다.
디자인에 대한 질문이나 의견을, 상대방이 잘 이해할 수 있도록 정리해서 제출합니다.

댓글 작성 및 제출

댓글이 추가되면 다른 사람은 캔버스, 툴바, 오른쪽 사이드바에서 읽지 않은 새로운 댓글이 있는지 확인할 수 있습니다.
읽지 않은 새로운 댓글은 파란색이나 초록색으로 표시됩니다.

캔버스 > 새 댓글 확인

캔버스 > 새 댓글 확인

툴바 > 새 댓글 확인

오른쪽 사이드바 > 새 댓글 확인

추가 댓글을 남겨서 소통할 수 있습니다.

댓글 답변

댓글에서 스레드 액션을 선택해, 댓글을 읽지 않음으로 표시하거나, 댓글 링크를 복사해서 공유하거나, 해당 댓글(스레드)을 삭제할 수 있습니다.
또는 해결됨으로 표시 버튼을 선택해서, 해당 댓글에서 질문이나 의견을 마무리합니다.
댓글을 해결됨으로 표시하면 더 이상 오른쪽 사이드바의 댓글 영역에서 보이지 않습니다.

댓글 추가 기능

해결된 댓글을 보려면 오른쪽 사이드바의 댓글에서 해결된 댓글 보기로 필터링하면 됩니다.

오른쪽 사이드바 > 댓글 > 해결된 댓글 보기

# 주석

주석은 디자이너가 개발자에게 전달할 구현 관련 정보를 디자인 위에 직접 기록하는 기능입니다.
캔버스 특정 요소에 대한 정렬 방식, 크기 조정 규칙, 코드로 옮길 때의 이해 맥락 등을 자유롭게 텍스트나 속성 형태로 남길 수 있습니다.

툴바에서 주석(Annotation)을 선택합니다.

툴바 > 주석

캔버스에서 주석 도구로 원하는 요소를 선택하고 텍스트, 카테고리, 속성 등을 추가해서 주석을 작성합니다.

주석 작성

주석의 카테고리 선택

주석의 속성 선택

주석이 많아지면 메뉴의 보기(View) > 주석(Annotation)을 통해 숨기거나 다시 보일 수 있습니다.

메뉴 > 보기 > 주석.jpg

효과적인 주석 작성을 위해 다음과 같은 규칙을 만들어서 관리하세요.

• 1~2가지 유형의 주석만 배치하면 훨씬 읽기 쉽습니다.
• 동일한 반복 요소에서는 첫 번째 요소에만 주석을 추가하고 나머지는 무시하거나 같다고 표시합니다.
• 개발 이슈, 접근성, 반응형 등 유형별로 주석을 분류하면, 개발자가 필요한 정보를 보다 빠르게 찾을 수 있습니다.

# 측정값

측정값 기능을 통해서 캔버스에서 간격이나 크기를 시각적으로 표시할 수 있습니다.
주석을 통해서 맥락과 속성 정보를 전달한다면, 측정값은 두 요소 사이의 거리나 크기를 정확한 수치로 시각화하는 역할입니다.

툴바에서 측정값(Measurement)을 선택합니다.

툴바 > 측정값

캔버스에서 요소 위에 마우스를 올리면 측정 시작점이 빨간색 선으로 표시됩니다.
측정 시작점에서 원하는 위치의 측정 끝점으로 드래그하면 수치가 시각화됩니다.
시각화된 수치는 원하는 위치로 움직일 수 있습니다.

측정값 시각화

# Dev Mode

Dev Mode는 Figma의 유료 기능으로, 개발자를 위해 특화된 모드입니다.
프로페셔널(Professional) 데브 시트(Dev Seat) 이상의 요금제를 선택해야 이 모드를 사용할 수 있습니다.

Dev Mode 인터페이스

Dev Mode는 개발자를 위한 '디자인을 읽는' 모드입니다.
일반 모드에서는 지원하지 않는, 개발에 필요한 스펙, 코드 스니펫, 에셋 추출 등의 기능을 지원합니다.

# 코드 스니펫

Dev Mode의 편리한 기능 중 하나는 코드 스니펫을 자동으로 생성한다는 것입니다.
요소를 선택하면 오른쪽 사이드바에서 바로 사용 언어의 코드를 확인하고 복사할 수 있습니다.

스크린샷 2026-03-15 오후 1.11.31.jpg

지원 언어는 다음과 같습니다.

• CSS
• Android: XML, Compose
• iOS: SwiftUI, UIKit

# 에셋 추출

Dev Mode에서는 디자인에 사용된 아이콘, 이미지 등의 에셋을 쉽게 추출할 수 있습니다.
상위 프레임을 선택하면 그 안에서 사용되는 모든 에셋을 한 번에 확인하고 다운로드할 수 있습니다.
이미지 다운로드 설정(Image download settings)을 통해서 모든 에셋 혹은 개별 에셋의 여러 크기나 포맷을 추가할 수도 있습니다.

스크린샷 2026-03-15 오후 1.26.10.jpg

에셋은 용도에 따라서 다음과 같이 내보냅니다.

JPG나 PNG 같은 비트맵 이미지를 사용할 때는, 고해상도 디스플레이 지원을 위해, 여러 배율(1x, 2x 등)로 내보내야 합니다.
Figma의 내보내기 설정에서 배율을 추가한 후 내보내면, 파일 이름에 @2x, @3x 등의 접미사가 자동으로 추가됩니다.

HTML에서 srcset 속성을 사용하면, 브라우저가 디스플레이 밀도에 맞는 이미지를 자동으로 선택하게 합니다.

1
2
3
4
5
6
<img
  src="my-image.png"
  srcset="my-image@2x.png 2x, my-image@3x.png 3x"
  alt="상품 이미지"
  width="320"
  height="200" />

혹은 <picture> 요소를 사용해 WebP 같은 대체 이미지(Fallback)를 함께 제공할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
<picture>
  <source
    srcset="my-image.webp, my-image@2x.webp 2x, my-image@3x.webp 3x"
    type="my-image/webp" />
  <img
    src="my-image.png"
    srcset="my-image@2x.png 2x, my-image@3x.png 3x"
    alt="상품 이미지"
    width="320"
    height="200" />
</picture>

안드로이드 Compose에서는 밀도 한정자(Density qualifier) 폴더에 이미지를 배치해, 시스템이 디바이스 밀도에 맞는 이미지를 자동으로 선택하게 합니다.

SVG 에셋은 밀도 선택이 필요하지 않으므로, Android Studio의 Vector Asset 기능으로 Vector Drawable(.xml)로 변환하고 밀도 한정자 없이 drawable/ 폴더에만 배치하면 됩니다.

1
2
3
4
5
6
7
8
9
res/
├── drawable/
│   └── icon.xml
├── drawable-mdpi/
│   └── my-image.webp
├── drawable-xhdpi/
│   └── my-image.webp
└── drawable-xxhdpi/
    └── my-image.webp

이렇게 배치한 이미지는 Compose에서 painterResource로 참조하면, 시스템이 디바이스 밀도에 맞는 이미지를 자동으로 선택합니다.

1
2
3
4
5
Image(
    painter = painterResource(id = R.drawable.my-image),
    contentDescription = "나의 이미지",
    modifier = Modifier.size(320.dp, 200.dp)
)

# 디자인 토큰

디자인 토큰(Design Token)은 색상, 타이포그래피, 간격, 모서리 반경 등 디자인 속성을 이름-값 쌍으로 정의한 것으로, 앞에서 설명한 것처럼 Figma에서는 변수가 그 역할을 합니다.
토큰을 사용하면 디자인과 코드의 값이 항상 일치하고, 테마 변경이나 다크 모드 대응 시 한 곳만 수정하면 되고, 디자이너와 개발자가 같은 이름으로 소통할 수 있습니다.

캔버스에서 아무것도 선택하지 않은 상태에서 오른쪽 사이드바의 변수 테이블 열기(Open variables table)로 변수 패널을 열고 컬렉션에서 내보내기 모드(Export modes) 기능을 선택합니다.

스크린샷 2026-03-15 오후 2.23.56.jpg

그러면 앞서 살펴본 것처럼 컬렉션 이름으로 된 압축 파일을 다운로드합니다.
압축을 풀면 다음과 같이 각 모드로 구분된 변수 파일(JSON)을 확인할 수 있습니다.

1
2
3
Variables/
  ├─ Dark_Mode.tokens.json
  └─ Light_Mode.tokens.json

다음 예시와 같이 JSON 파일에서는 각 그룹(Fills, Labels)으로 묶인 변수들의 값($value)을 포함하는 상세 정보를 확인할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
{
  "Fills": {
    "Primary": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [0.05098039284348488, 0.4313725531101227, 0.9921568632125854],
        "alpha": 1,
        "hex": "#0D6EFD"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:2051:4",
        "com.figma.scopes": ["ALL_SCOPES"],
        "com.figma.isOverride": true
      }
    },
    "Secondary": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [0.11764705926179886, 0.16078431904315948, 0.23137255012989044],
        "alpha": 1,
        "hex": "#1E293B"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:2051:6",
        "com.figma.scopes": ["ALL_SCOPES"],
        "com.figma.isOverride": true
      }
    },
    "Danger": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [0.20392157137393951, 0.09803921729326248, 0.1411764770746231],
        "alpha": 1,
        "hex": "#341924"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:2051:8",
        "com.figma.scopes": ["ALL_SCOPES"],
        "com.figma.isOverride": true
      }
    }
  },
  "Labels": {
    "Primary": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [1, 1, 1],
        "alpha": 1,
        "hex": "#FFFFFF"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:2051:10",
        "com.figma.scopes": ["ALL_SCOPES"],
        "com.figma.isOverride": true
      }
    },
    "Secondary": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [0.6771448850631714, 0.736008882522583, 0.8323317170143127],
        "alpha": 1,
        "hex": "#ADBCD4"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:2051:12",
        "com.figma.scopes": ["ALL_SCOPES"],
        "com.figma.isOverride": true
      }
    },
    "Danger": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [1, 0.2672025263309479, 0.2672025263309479],
        "alpha": 1,
        "hex": "#FF4444"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:2051:14",
        "com.figma.scopes": ["ALL_SCOPES"],
        "com.figma.isOverride": true
      }
    }
  },
  "$extensions": {
    "com.figma.modeName": "Dark Mode"
  }
}

내보낸 JSON 데이터를 각 플랫폼의 코드로 변환하면 다음과 같이 사용할 수 있습니다.
Android(Kotlin)에서는 라이트/다크 모드별 색상 객체를 정의하고, 각 변수 이름을 속성으로 매핑합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
val LightAppColors = AppColors(
  surface = Color(0xFFFFFFFF),
  primary = Color(0xFF3C94FF),
  secondary = Color(0xFFE7F0F9),
  label = Color(0xFF1A1A1A),
  labelSub = Color(0xFF526682),
  labelOnPrimary = Color(0xFFFFFFFF),
  labelOnSecondary = Color(0xFF526682),
  danger = Color(0xFFFF4B4B),
  dangerBg = Color(0xFFF9D9E4),
  border = Color(0xFFD5E0EC)
)

val DarkAppColors = AppColors(
  surface = Color(0xFF101822),
  primary = Color(0xFF0D6EFD),
  secondary = Color(0xFF1E293B),
  label = Color(0xFFFFFFFF),
  labelSub = Color(0xFFADBCD4),
  labelOnPrimary = Color(0xFFFFFFFF),
  labelOnSecondary = Color(0xFFADBCD4),
  danger = Color(0xFFFF4444),
  dangerBg = Color(0xFF341924),
  border = Color(0xFF2A3546)
)

웹(CSS)에서는 CSS 변수로 정의하고, :root.dark 선택자로 다크 모드 값을 재정의합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
:root {
  --surface: #ffffff;
  --primary: #3c94ff;
  --secondary: #e7f0f9;
  --label: #1a1a1a;
  --label-sub: #526682;
  --label-on-primary: #ffffff;
  --label-on-secondary: #526682;
  --danger: #ff4b4b;
  --danger-bg: #f9d9e4;
  --border: #d5e0ec;
}

:root.dark {
  color-scheme: dark;
  --surface: #101822;
  --primary: #0d6efd;
  --secondary: #1e293b;
  --danger-bg: #341924;
  --label: #ffffff;
  --label-sub: #adbcd4;
  --label-on-secondary: #adbcd4;
  --danger: #ff4444;
  --border: #2a3546;
}

# 토큰 자동화

변수에서 수동으로 디자인 토큰으로 변환하고 저장하는 것은 매우 번거롭습니다.
Figma의 GitFig 플러그인을 사용해 이를 쉽게 자동화해 봅시다.
GitFig는 Figma에서 디자인 토큰을 Git 저장소에 동기화하는 도구입니다.
디자이너가 Figma에서 디자인 토큰을 변경하고 지정된 저장소의 브랜치로 직접 커밋/푸시할 수 있습니다.

Figma 툴바에서 작업을 선택하고 플러그인 및 위젯에서 GitFig를 검색합니다.

플러그인 및 위젯에서 GitFig 검색

GitFig 플러그인의 실행에서 Open Sync Panel 버튼을 선택합니다.
그러면 플러그인이 설치됩니다.

GitFig 설치 및 실행

플러그인이 실행되면 GitHub 연동을 위해서 로그인이 필요합니다.
Sign in with GitHub 버튼을 선택해서 로그인을 시작합니다.

GitHub 연동을 위한 로그인

GitFig 연동을 위해서 인증 코드를 복사하고 Open GitHub 버튼을 선택합니다.

GitHub 연동을 위한 코드 복사

브라우저로 이동하면 연동을 원하는 계정으로 Continue 버튼을 선택합니다.

GitHub Device Activation

앞서 복사했던 인증 코드를 붙여넣고 Continue 버튼을 선택합니다.

GitHub Authorize your device

다음으로 권한과 승인에서 Authorize ds1 버튼을 선택해 최종 승인합니다.

GitHub 최종 승인

GitHub 승인 확인

다시 Figma로 돌아와서 GitFig 플러그인을 보면 연동이 완료되어 있습니다.
바로 Connect Repository 버튼을 선택합니다.

GitHub 저장소 연결 시작

내 GitHub 계정의 원하는 저장소 이름을 입력합니다.
그러면 잠시 검색 후 해당 저장소의 브랜치 목록을 볼 수 있습니다.
연동을 원하는 브랜치를 선택하고 아래의 Connect 버튼을 선택합니다.

GitHub 저장소 이름과 브랜치 선택

그러면 해당 브랜치의 폴더와 파일 구조를 확인할 수 있습니다.
Figma 디자인 토큰을 저장할 미리 준비했던 JSON 파일을 선택합니다.
그리고 저장할 타입과 포맷을 선택한 뒤 저장(Save)합니다.

선택 가능한 포맷은 다음과 같습니다.

• Auto-detect: 파일 내용을 분석해 포맷을 자동으로 감지
• W3C Design Tokens: W3C 디자인 토큰 커뮤니티 그룹의 표준 포맷
• Style Dictionary: Amazon의 Style Dictionary 도구에서 사용하는 포맷
• Tokens Studio: Tokens Studio(구 Figma Tokens) 플러그인 호환 포맷
• Custom JSON: 사용자 정의 JSON 구조로 내보내기

GitHub 저장소의 브랜치에서 토큰 파일 선택

이제 이 변경사항을 커밋하고 푸시해야 합니다.
먼저 Changes 항목에서 Stage All을 선택해서 변경사항을 스테이징합니다.

변경사항 스테이징

변경사항에 대한 커밋 메시지를 작성하고 Create Commit 버튼을 선택해서 커밋합니다.

커밋 메시지 작성 및 커밋 생성

마지막으로 하단의 Push 버튼을 선택하면, 원격 저장소로 푸시됩니다.

원격 저장소 푸시

GitHub 원격 저장소에 디자인 토큰 반영

혹은 하단의 Create Pull Request 버튼을 선택해서 PR을 생성하고 리뷰 후 병합할 수도 있습니다.

원격 저장소 PR 생성

GitHub 원격 저장소 PR 반영

# Ready for Dev

디자이너가 작업을 완료하면 섹션, 프레임, 컴포넌트 등에 Ready for dev 상태를 표시할 수 있습니다.
이는 디자인 작업이 완료되었고 구현(개발)을 시작하면 된다는 표시입니다.

Ready for dev

스크린샷 2026-03-15 오후 4.51.52.jpg

스크린샷 2026-03-15 오후 4.52.01.jpg

개발자는 Dev Mode에서 Ready for dev 상태만 필터링하고 구현하면 됩니다.
이를 통해 아직 작업 중인 디자인을 구현하는 실수를 방지할 수 있습니다.
또한 Ready for dev 상태는 가장 최근에 업데이트된 시점을 강조 표시하기 때문에, 초기 구현 후 변경사항이 있는지 쉽게 파악할 수 있습니다.

스크린샷 2026-03-15 오후 4.53.24.jpg

구현이 완료되면 개발자가 Dev Mode에서 Completed 상태를 표시할 수 있습니다.
이를 통해 디자이너와 개발자 모두 어떤 화면이 구현 완료되었는지 한눈에 파악할 수 있고, 남은 작업 범위를 명확하게 관리할 수 있습니다.
다만 Completed 상태를 표시하려면 오거니제이션(Organization) 이상의 요금제를 선택해야 합니다.

Completed

# 변경사항 비교

Dev Mode의 변경사항 비교(Compare Changes) 기능을 사용하면 디자인의 변경사항을 시각적으로 비교할 수 있습니다.

비교를 원하는 섹션이나 프레임을 선택하고 오른쪽 사이드바에서 '이전 버전과 비교' 버튼을 선택합니다.

스크린샷 2026-03-15 오후 4.50.48.jpg

그러면 다음과 같이 버전 비교 패널이 표시됩니다.
버전의 내역, 편집된 레이어, 현재 버전과 이전 버전의 에셋, 코드 비교 등의 기능을 사용할 수 있습니다.

스크린샷 2026-03-15 오후 4.50.26.jpg

변경사항은 다음과 같은 하이라이트 색상으로 표시됩니다.

• 추가됨: 이전 버전에 없던 새로운 요소가 추가된 경우
• 변경됨: 기존 요소의 크기, 색상 등 속성이 수정된 경우
• 제거됨: 이전 버전에 있던 요소가 삭제된 경우

# MCP 활용

MCP(Model Context Protocol)는 AI 도구가 외부 서비스와 연동할 수 있게 하는 규약입니다.
VS Code, Cursor, Claude Code 등의 AI 코딩 도구에 Figma MCP 서버를 연결하면 AI가 Figma 디자인을 읽고 코드를 생성할 수 있습니다.

웹 브라우저에서 Figma를 사용하는 경우, 캔버스에서 아무것도 선택하지 않았을 때의 오른쪽 사이드바에서 MCP의 AI 에이전트에 연결 버튼을 선택합니다.

웹 Figma > Dev Mode > MCP > AI 에이전트에 연결

패널 좌측의 VS Code, Cursor, Claude Code, 다른 편집자 항목 중에서 원하는 AI 코딩 도구를 선택하고 설명에 따라서 연결을 설정합니다.

VS Code Copilot에서 Figma MCP를 사용해 봅시다.
MCP 클라이언트 설정의 VS Code 항목에서 + 추가 버튼을 선택합니다.

MCP 클라이언트 설정

VS Code에서 Figma MCP를 설치합니다.
아래 이미지들과 같이 외부 인증 과정을 진행합니다.

VS Code에서 열기

VS Code에서 Figma MCP 설치

Figma MCP 인증

VS Code에서 외부 웹 사이트 열기를 허용

Figma의 원격 MCP 서버에 연결 동의 및 액세스 허용

로그인 성공

GitHub Copilot Chat으로 Figma MCP를 활용해 봅시다.
VS Code에 확장 프로그램에서 GitHub Copilot Chat을 검색하고 설치합니다.

GitHub Copilot Chat 확장 프로그램 설치

명령 팔레트에서 Chat: Open Chat을 검색해 실행하거나, Ctrl(Cmd) + Alt(Option) + B 단축키를 입력하면 Copilot 채팅 패널이 나타납니다.
채팅에서 #get_design_context 해시 명령을 실행하면, Figma MCP 연결이 잘 되었는지 확인할 수 있습니다.

Copilot 채팅 시작

GitHub Copilot Chat을 사용하려면, 로그인이 필요합니다.

Copilot 로그인 - Sign in to use AI Features

정상적으로 연결이 되었다면, 다시 Figma로 돌아갑니다.
디자인에서 섹션, 프레임, 컴포넌트 등 원하는 요소를 선택하고 오른쪽 사이드바의 MCP 항목을 보면, AI가 해당 요소를 구현하기 위한 예상 토큰 수와 예제 프롬프트 복사 버튼을 확인할 수 있습니다.
그리고 예제 프롬프트 복사 버튼을 선택해서, 이 1개의 디자인을 Figma에서 구현하세요.라는 간단한 프롬프트와 함께, 선택 요소에 대한 Figma 주소를 복사합니다.

오른쪽 사이드바 > MCP > 예제 프롬프트 복사

다시 VS Code Copilot 채팅으로 돌아와서 복사된 프롬프트를 입력합니다.
프롬프트에 포함된 URL 주소는 Figma에서 선택된 요소의 참조이기 때문에 수정해선 안 됩니다.
URL 주소를 제외하고는, 프롬프트를 얼마든지 원하는 내용으로 수정해도 됩니다.

채팅 붙여넣고 입력 > AI 구현

처리를 기다리면, 프로젝트에 관련 내용이 구현되는 것을 볼 수 있습니다.

구현 결과 확인 / 구현 결과 중 CSS 코드 일부

Figma 데스크톱을 사용하는 경우, 웹 브라우저와는 다르게 오른쪽 사이드바에 데스크톱 MCP 서버 활성화 버튼이 보입니다.
데스크톱 MCP 서버 활성화 버튼을 선택합니다.

데스크톱 Figma > Dev Mode > MCP > 데스크톱 MCP 서버 활성화

다음과 같이 로컬 서버가 활성화되어야 합니다.

Figma MCP 로컬 서버 활성화

그러면 바로 툴바 위에 Figma MCP 로컬 서버 URL 주소가 표시됩니다.
URL 복사 버튼을 선택합니다.

Figma MCP 로컬 서버 URL 복사

VS Code에서는 다음과 같이 진행합니다.
명령 팔레트(Ctrl(Cmd) + Shift + P)에서 'MCP: 서버 추가'를 검색해 실행합니다.

명령팔레트 > MCP: 서버 추가

먼저 HTTP(HTTP 또는 서버 전송 이벤트) 서버 유형을 선택합니다.

추가할 MCP 서버 유형 선택

위에서 복사한 Figma MCP 로컬 서버 URL 주소를 붙여넣습니다.

서버 URL 입력

MCP 서버 이름을 지정합니다.
이후 검색이 쉽도록 figma-desktop으로 지정하는 것을 추천합니다.

서버 ID 입력

Figma MCP 로컬 서버를 현재 프로젝트에서만 사용할 것인지, 로컬의 모든 프로젝트에서 사용할 것인지 등록합니다.

MCP 서버 추가

이번에는 Claude Code를 통해서도 Figma MCP를 사용해 봅시다.
위에서 복사한 Figma MCP 로컬 서버 URL 주소를 다음과 같이 claude mcp 명령 끝에 추가해 터미널에서 실행합니다.
주소가 바뀌지 않는다면, 다음 명령을 그대로 복사해서 사용해도 됩니다.

1
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

터미널에서 Claude Code에 Figma MCP 추가

VS Code에서 살펴봤듯, Claude Code를 실행해 Figma에서 복사한 예제 프롬프트를 입력하고 구현을 기다립니다.

Claude Code 프롬프트 입력

# 디자이너와 협업하기

# 협업 워크플로

효과적인 협업을 위해서는 디자이너와 개발자가 어떤 순서와 약속 아래에서 함께 움직이느냐가 중요합니다.
Dev Mode를 중심으로 하는 협업 워크플로를 살펴봅시다.

다음 단계가 한 번의 흐름으로 끝나지 않을 수 있습니다.
QA에서 발견된 문제가 디자인 수정으로 이어지고, 다시 개발과 QA를 반복하는 순환 구조가 됩니다.
양쪽 모두 같은 화면과 같은 토큰 등을 확인하며 소통해야 오해가 쌓이는 것을 막고 재작업을 줄일 수 있습니다.

1. 킥오프:

프로젝트가 시작되면, 디자이너와 개발자가 한자리에 모여 몇 가지 공통 규칙을 정하는 것이 좋습니다.
미리 합의하면 좋을 대표적인 내용은 다음과 같습니다.

• 디자인 시스템 정의: 색상, 타이포그래피, 간격 등의 디자인 토큰(Design Token)과 공통 컴포넌트(Component)의 범위를 함께 결정합니다.
• 네이밍 규칙: Figma 레이어 이름이 곧 코드의 변수명이나 클래스명이 될 수 있도록, 작명 규칙을 사전에 통일합니다.
• 변수 구조: Figma 변수의 컬렉션과 모드를 어떻게 구성할지 합의해서 코드의 테마 시스템과 직접 대응하도록 만들면, 이후 작업이 훨씬 매끄럽습니다.

2. 디자인:

킥오프에서 정한 규칙을 바탕으로, 디자이너가 본격적으로 화면을 설계하는 단계로 넘어갑니다.
디자이너는 단순히 보기 좋은 화면을 만드는 데 그치지 않고, 개발자가 해석하기 쉬운 구조로 설계하는 것이 중요합니다.

• 변수 활용: 색상이나 간격 같은 값을 직접 입력하지 않고 최대한 변수로 만들어 연결하면, 개발자가 Dev Mode에서 디자인 토큰을 바로 확인할 수 있습니다.
• 컴포넌트 단위 설계: 반복되는 UI 요소는 Figma 컴포넌트로 만들어 관리하면, Dev Mode에서 해당 컴포넌트의 베리언트와 기타 속성을 한눈에 파악하고 개발 시 재사용 가능한 컴포넌트로 자연스럽게 전환됩니다.
• Ready for dev 표시: 디자인이 완료된 섹션에는 Ready for dev 상태를 표시하면, 개발자가 Dev Mode에서 아직 디자인 중인 부분과 구분하고 개발할 수 있습니다.

3. 개발:

Ready for dev 상태가 표시된 섹션이 생기면, 개발자는 Dev Mode를 열어 본격적으로 구현합니다.

• Ready for dev 섹션 확인: Dev Mode에서 Ready for dev 상태로 필터링해서 구현 가능한 섹션만 골라 작업 범위를 명확히 합니다.
• 스펙 확인 및 코드 스니펫 참조: 요소를 선택하면 표시되는 크기, 색상, 간격, 타이포그래피 정보를 확인하고 코드 스니펫을 참조해 빠르게 구현합니다.
• 토큰 기반 구현: 디자이너가 지정한 디자인 토큰을 코드의 변수로 옮기고, 하드코딩된 값(#3B82F6) 대신 var(--color-primary) 같은 변수 참조를 사용하면 이후 디자인이 변경되더라도 유지보수가 훨씬 수월합니다.
• Figma 댓글로 소통: 구현 중 헷갈리거나 누락된 부분이 있어 Figma의 해당 요소에서 직접 댓글을 추가하면, 별도의 소통 없이도 디자인 맥락 안에서 바로 질문하고 답변을 받을 수 있습니다.

4. QA:

구현이 끝나면, 디자이너와 개발자가 함께 결과물을 검토합니다.

• 변경사항 비교: 디자인 원본과 실제 구현 결과를 나란히 놓고 시각적 차이를 확인합니다.
• 스펙 확인 및 수정: 간격이 8px이어야 하는데 10px로 구현되었다거나, 색상 토큰이 잘못 매핑된 부분을 찾아 수정합니다.
• 최종 승인: 디자이너가 구현 결과를 확인하고 이상이 없으면 해당 섹션의 작업을 완료 처리합니다.

# 디자이너에게 사전 요청

디자이너가 의도한 디자인을 코드로 정확하게 옮기려면, 개발 과정에서 어떤 정보가 필요한지 미리 공유하는 것이 중요합니다.
다음 사항을 함께 정리해 두면 서로의 작업 효율이 크게 높아집니다.

• 오토레이아웃 사용: 프레임에 오토레이아웃을 적용하면 Dev Mode에서 방향, 간격, 패딩, 정렬 정보가 자동으로 표시되어 개발자가 레이아웃을 정확하게 구현할 수 있습니다.
• 변수 활용: 색상, 간격, 모서리 반경 등에 변수를 연결하면 Dev Mode에서 토큰 이름이 표시되므로, 개발자가 값을 하드코딩하지 않고 디자인 토큰으로 쉽게 매핑할 수 있습니다.
• 의미 있는 레이어 이름: header, card-title처럼 역할을 알 수 있는 이름을 사용하면, 개발자가 디자인 구조를 빠르게 파악하고 코드의 변수나 컴포넌트 이름 등으로도 바로 활용할 수 있습니다.
• Ready for dev 표시: 개발 준비가 된 섹션이나 프레임에 'Ready for dev' 상태를 표시하면, 개발자가 어떤 화면부터 작업해야 하는지 우선순위를 명확하게 알 수 있습니다.
• 베리언트 구성: 버튼, 인풋 같은 컴포넌트에 기본, 호버, 비활성화 등 상태별 베리언트를 만들어야, 개발자가 모든 상태를 빠짐없이 확인하고 구현할 수 있습니다.
• 에셋 내보내기(Export) 설정: 아이콘이나 이미지에 내보내기 형식(SVG, PNG 등)과 배율을 미리 설정하면, 개발자가 Dev Mode에서 클릭 한 번으로 에셋을 다운로드할 수 있습니다.
• 일정한 배수의 크기, 간격 등 설정: 크기, 여백, 간격에 사용되는 값을 4, 8, 12 같이 일정한 배수로 통일하면, 토큰화가 쉬워지고 디자인과 코드 모두에서 일관된 디자인 시스템을 유지할 수 있습니다.

# QA 체크리스트

구현이 끝나면 디자인과 구현 결과를 하나씩 대조해서 점검합니다.
다음과 같은 기본적인 항목을 점검하고 프로젝트에 맞게 필요한 항목을 추가하세요.

• 디자인의 바깥/안쪽 여백이 구현과 같은지 비교
• 허그, 채우기 같은 요소의 크기 조절과 코드가 같은 방식으로 동작하는지 비교
• 오토레이아웃에서 설정된 간격과 코드의 정렬 간격이 같은지 비교
• 배경, 텍스트, 테두리에 사용된 변수 이름과 코드의 변수 이름이 올바르게 매핑되는지 비교
• 투명도가 적용된 요소는 요소의 투명도와 색상 자체의 투명도를 구분해서 코드에 적용했는지 비교
• 텍스트 스타일의 글꼴, 크기, 굵기, 행간, 자간과 코드의 텍스트 스타일이 같은지 비교 (출력 환경에 따라 다를 수 있음을 주의)
• 텍스트 정렬, 줄 수 제한, 말줄임 처리가 디자인 의도와 맞게 구현되었는지 비교
• 모서리 반경 값과 코드의 모서리 둥글기가 같은지 비교 (꼭짓점마다 다른 값이 적용된 경우 개별 확인)
• 그림자 효과의 방향, 흐림, 확산, 색상과 코드의 그림자 값이 같은지 비교
• 버튼, 인풋, 체크박스 등 인터랙티브 요소의 모든 베리언트와 호버, 비활성화 같은 상태가 코드에서 빠짐없이 구현되었는지 점검
• 포커스 표시가 디자인에 정의되어 있을 때, 코드의 포커스 스타일도 정의되었는지 비교
• 로딩, 비어있음, 에러 같은 상태별 화면이 디자인에 포함되어 있다면, 코드에서 해당 조건 분기가 모두 구현되었는지 점검
• 오토레이아웃의 랩 설정과 코드에서 자식 요소가 줄 바꿈되는 동작이 같은지 비교
• 제약 조건 설정과 실제 화면 크기 변화 시 구현의 반응 방식이 같은지 비교
• 반응형 레이아웃을 위한 중단점의 디자인 정의 및 레이아웃 변화가 구현과 같은지 비교
• 아이콘의 크기, 색상, 주변 여백이 구현과 같은지 비교
• 이미지의 채우기 방식과 코드에서 이미지가 표시되는 방식(Cover, Contain 등)이 같은지 비교
• 변수의 라이트/다크 모드 값과 코드의 테마 변수가 올바르게 매핑되는지 비교
• 라이트/다크 모드 전환 시 배경, 텍스트뿐 아니라 그림자, 테두리, 아이콘 색상까지 모든 토큰이 모드 값에 맞게 전환되는지 점검