Figma는 더 이상 디자이너만을 위한 도구가 아닙니다. 개발 모드가 도입되면서 이제 프런트엔드 엔지니어는 설계 정보를 효율적으로 추출할 수 있는 간소화된 방법을 갖게 되었습니다. 이 기사에서는 Figma에서 코드로의 연결을 원활하게 하기 위한 실용적인 기술을 다룹니다.
개발자 모드로 정확한 디자인 정보 얻기
Figma의 Dev Mode는 개발자에게 최적화된 뷰입니다. 파일 보기의 오른쪽 상단에 있는 스위치를 사용하여 켜거나 Shift+D을 누르세요.
개발자 모드에서 할 수 있는 작업
- 속성 검사: 요소를 클릭하면 너비, 높이, 패딩, 글꼴 크기, 색상 등이 속성 패널에 표시됩니다.
- 자동 생성된 CSS: CSS 속성이 패널에 자동으로 표시되므로 코드에 직접 복사할 수 있습니다.
- 애셋 내보내기: 이미지 아이콘을 클릭하여 SVG 또는 PNG로 내보냅니다.
개발자 모드에 표시된 CSS는 참조용이라는 점을 명심하세요. 실제 구성 요소 아키텍처에 맞게 조정해야 합니다.
일관성을 위한 디자인 토큰 공유
색상, 글꼴 크기, Figma와 코드베이스 간의 간격과 같은 디자인 토큰을 동기화하면 디자인 드리프트를 방지할 수 있습니다.
Figma 토큰 플러그인
Figma용 Tokens Studio(이전의 Figma Tokens)는 디자인 토큰을 JSON으로 중앙에서 관리할 수 있는 플러그인입니다.
- 플러그인을 설치하고 색상, 타이포그래피, 간격에 대한 토큰을 정의합니다.
- JSON으로 내보냅니다.
- JSON을 스타일 사전 또는 Tailwind CSS 구성 파일로 변환합니다.
{
"color": {
"brand": {
"primary": { "value": "#3b82f6" },
"secondary": { "value": "#10b981" }
}
},
"spacing": {
"md": { "value": "16px" }
}
}
이 JSON을 스타일 사전에 입력하면 CSS 사용자 정의 속성, SCSS 변수, Tailwind 구성 등을 생성할 수 있습니다.
원활한 디자이너-개발자 핸드오프
최고의 툴링을 사용하더라도 효율적인 핸드오프를 위해서는 디자이너와 개발자 간의 조정이 필요합니다.
구성요소 명명 표준화
Figma 레이어 이름을 코드의 구성 요소 이름과 일치시키면 검색 시간이 줄어듭니다. Figma에서 레이어가 Button/Primary이라고 하면 코드에서 이름을 ButtonPrimary 또는 Button.Primary로 지정하세요.
자동 레이아웃 사용
Figma의 자동 레이아웃 기능은 CSS Flexbox 동작을 반영합니다. 간격 및 정렬 의도가 코드로 직접 변환되도록 디자이너에게 자동 레이아웃을 사용하도록 요청하세요.
Figma에 댓글 남기기
개발 중에 “이 패딩 값은 무엇입니까?“와 같은 질문이 있습니다. 관련 Figma 요소에 대한 설명으로 남겨 두는 것이 가장 좋습니다. 이는 Slack 메시지를 보내는 것보다 훨씬 더 안정적입니다.
설치할 가치가 있는 플러그인
| 플러그인 | 목적 |
|---|---|
| Figma 토큰 | 디자인 토큰 관리 및 내보내기 |
| 아니마 | Figma 디자인을 React/Vue 코드로 변환 |
| 제플린 | Figma 통합을 통한 기존 핸드오프 도구 |
| Figma용 Tailwind CSS | 디자인에 Tailwind 클래스 이름 표시 |
요약
Figma에서 코드로 이동하기 위한 가장 실용적인 워크플로우는 Dev Mode를 통해 정확한 디자인 정보를 추출하고 Figma 토큰을 사용하여 디자인 토큰을 공유하는 것입니다. 토큰이든 명명 규칙이든 둘 다이든 디자이너와 개발자 간에 공유 언어를 갖는 것이 효율적인 핸드오프 프로세스의 핵심입니다. 이러한 기술 중 하나 또는 두 가지로 시작하여 거기에서 구축하십시오.