Figma 디자인 시스템
iOS/iPadOS/macOS, Android, Web을 위한 Figma 디자인 시스템 구축 방법. 공식 Figma MCP 서버 기반입니다. 모든 단일 값은 변수입니다. 스타일은 변수로 구성된 합성 요소(텍스트 스타일, 효과 스타일, 그라디언트 채우기 스타일)에만 사용됩니다. 단색 스타일은 레거시입니다.
MCP 도구 호출은 Figma 플러그인에 포함된 플러그인 스킬(figma:figma-use, figma:figma-generate-library, figma:figma-generate-design 등)이 담당합니다. Figma가 이들을 유지 관리합니다. 이 스킬과 함께 로드하세요. 기계적 작업에 관해서는 플러그인 스킬이 우선합니다. 프로세스와 완전성에 관해서는 이 스킬이 우선합니다.
빠른 참조
| 주제 | 참조 |
|---|---|
| 모든 스킬을 위한 토큰 명명: 계층, 패밀리, 플랫폼별 변환 규칙, 코드 구문; 변수 컬렉션, 모드, 타이포그래피, 간격, 반경 | reference/token-architecture.md |
| 컴포넌트 및 상태 목록, Auto Layout, 속성, Slots, 필수 인터랙티브 상태 연결 | reference/component-architecture.md |
| Figma에서 Liquid Glass 구축: Apple 키트, 매개변수, 글래스 토큰, API 제한 | reference/liquid-glass.md |
| 기존 디자인에 비주얼 스타일 적용 (토큰 교체가 아닌 구조 개선) | reference/applying-styles.md |
| 처음부터 구축 및 앱 복제 작업 순서, 파일 구조, Dev Mode 핸드오프, 접근성, 안티패턴 | reference/workflows-and-handoff.md |
| 네 가지 게이트 전체 설명, 작업 규모에 따른 조정, 플랫폼별 최소 화면 세트 | reference/gates.md |
| 변경되는 Figma 사실: 플랜 게이트, 제한, 베타 상태, MCP 도구 및 스킬 이름, 키트 링크, 날짜 | reference/platform-status.md |
게이트
네 가지 규칙입니다. 제가 정한 규칙이며, 세션 시작 시점과 작업 전반에 걸쳐 확인합니다. 이 규칙을 위반하면 조용히 실패하며 가장 큰 비용은 핸드오프 단계에서 발생합니다.
- 어두운 캔버스 우선. 모든 페이지의 캔버스는 콘텐츠가 존재하기 전에
#1E1E1E이어야 합니다. 흰색이면 멈추고 수정하세요. - 빈 페이지나 프레임 없음. 페이지를 생성하는 동시에 완전히 채우고 다음으로 넘어가세요. 최소 화면 세트 없이 플랫폼이 완료되었다고 할 수 없습니다.
- 토큰 이름이 코드베이스와 정확히 일치해야 합니다. 이미 출시된 이름을 사용하세요. 새 이름을 만들지 마세요.
- 라이트 및 다크, 둘 다. 모든 시맨틱 색상은 두 값을 모두 가져야 하며, 모든 화면은 완료되기 전에 두 모드 모두에서 제작되고 검토되어야 합니다.
전체 빌드는 네 가지 게이트를 모두 완전히 충족합니다. 기존 파일에 대한 작은 편집은 파일을 더 나쁘게 만들 수 없으며, 이미 깨진 부분은 조용히 수정하지 않고 보고해야 합니다. reference/gates.md에 이유, 규모 조정 규칙 및 최소 화면 세트가 있습니다.
Figma에서:
어두운 캔버스:
figma.currentPage.backgrounds = [{
type: 'SOLID',
color: { r: 0.118, g: 0.118, b: 0.118 }, // #1E1E1E
opacity: 1
}];
figma.currentPage는 하나의 페이지입니다. figma:figma-use의 페이지 전환 규칙을 사용하여 페이지마다 반복하고, 새 페이지가 생성될 때마다 설정하세요. 수동으로: 빈 캔버스를 마우스 오른쪽 버튼으로 클릭 → 배경색. 스크린샷을 찍어 확인하세요.
빈 페이지 없음. 페이지를 만드는 동시에 채우는 단계를 수행하세요. 🎨 토큰 페이지가 존재하는 경우, 🎛 컴포넌트 페이지를 건드리기 전에 해당 페이지에 변수 컬렉션이 있어야 합니다.
토큰 이름. 변수 경로와 각 변수의 코드 구문은 reference/token-architecture.md를 따릅니다. 코드베이스에 이미 토큰 이름이 있는 경우 해당 이름을 사용합니다.
라이트 및 다크. 시맨틱 색상 컬렉션에 라이트 및 다크 모드가 있습니다. 각 화면의 최상위 프레임을 각 모드로 설정하여 모든 화면을 검토하세요.
레인
이 스킬은 Figma 프로세스와 토큰 이름을 담당합니다. 값과 플랫폼 규칙은 해당 스킬이 소유합니다.
| 필요 사항 | 소유자 |
|---|---|
| 네 가지 게이트 및 최소 화면 세트 | 이 스킬 (reference/gates.md) |
| 팔레트 값 및 각 시맨틱 역할이 별칭으로 사용하는 기본 요소 | color-system |
| Apple 유형 크기, 시스템 색상, Liquid Glass 규칙 및 모양, OS 버전 | apple-platform |
| Material 색상 역할, 형태 스케일, 창 크기 클래스, 라이브러리 버전 | android-platform |
| CSS의 웹 토큰, 코드의 중단점 | web-platform |
| 모션 토큰 이름 및 값 | motion-design |
| 스타일 카탈로그 | visual-styles |
세션 시작
figma:figma-use와 작업에 필요한 플러그인 스킬을 로드합니다: 토큰 및 컴포넌트용figma-generate-library, 화면용figma-generate-design, 구현을 위해 디자인을 읽기 전에figma-design-to-code.- 세션을 엽니다.
create_session을 파일 키와 한 줄 작업 설명과 함께 호출하며, 다른 파일 도구보다 먼저, 읽기 전용 작업을 포함하여 수행합니다. 새 파일: 먼저create_new_file을 호출한 다음create_session을 호출합니다. - 쓰기 전에 읽습니다. 기존 파일에는 페이지, 컬렉션 및 규칙이 있습니다. 추가하기 전에 찾으세요.
- 작업 규모에 맞게 게이트를 확인합니다.
디자인 스타일
토큰이나 컴포넌트를 구축하기 전에 visual-styles 스킬로 비주얼 스타일을 확인하세요. 스타일이 지정되지 않은 경우 플랫폼 고유의 디자인 언어가 기본값입니다. 토큰 계층, 컴포넌트 구조, Auto Layout 및 상태 연결은 스타일 전반에 걸쳐 동일하게 유지됩니다. 값과 구조적 세부 사항만 변경됩니다. reference/applying-styles.md에는 Figma에서 스타일을 적용하는 방법이 있습니다.
철학
디자인 시스템은 디자인과 코드 간의 계약입니다. Figma에서 정의된 토큰은 SwiftUI, Compose 및 CSS에서 사용되는 동일한 토큰입니다. 이름, 값 및 계층 구조는 세 플랫폼에서 모두 일치합니다. 엔지니어링을 청중으로 고려하지 않고 구축된 디자인 시스템은 스티커 시트에 불과합니다.
모든 것을 디자인하세요. 모든 화면, 모든 상태, 모든 엣지 케이스. 빈 상태, 로딩 상태, 오류 상태, 부분 콘텐츠, 오버플로, 긴 텍스트, 짧은 텍스트, 비활성화 상태. 해피 패스만 다루는 디자인은 무드 보드에 불과합니다. 엔지니어링은 코드에서 누락된 상태를 발명할 것이며, 그들은 틀릴 것입니다.
픽셀 퍼펙트는 정확히 그 뜻입니다. 모든 것을 변수에 바인딩하고, 모든 것을 측정하세요. "대략 맞는 것 같아서" 17px 너비인 컴포넌트는 픽셀 퍼펙트가 아닙니다.
두 가지 작업 모드
처음부터 구축. 디자인 시스템을 먼저, 컴포넌트를 그 다음, 화면을 마지막으로 구축합니다. 단일 컴포넌트를 건드리기 전에 토큰이 정의되어야 합니다.
기존 앱 복제. 먼저 감사(audit)를 수행하고, 암시적 시스템을 추출한 다음, 공식화하고, 공식화된 토큰 위에 컴포넌트를 재구축합니다. 감사를 절대 건너뛰지 마세요.
두 모드 모두 reference/workflows-and-handoff.md에 단계별로 설명되어 있습니다.