작업 방식
Figma Create Design System Rules는 앞으로의 Figma-to-code 작업을 위한 프로젝트별 가이드를 만듭니다. 컴포넌트 위치, 스타일 처리 방식, 토큰 정의 위치, 구현이 지켜야 할 아키텍처 규칙을 분석합니다. 산출물은 규칙 파일이며, Figma 컴포넌트 라이브러리나 새로 디자인한 화면이 아닙니다.
소스는 Claude Code, Codex, Cursor용 규칙 형식을 지원합니다. 유용한 규칙은 모든 저장소에 일반적인 React나 Tailwind 패턴을 강요하지 않고 실제 컴포넌트 경로와 토큰 소스를 명시합니다. 워크플로는 작은 컴포넌트에 규칙을 적용해 보고 효과가 없던 부분을 다듬는 것으로 끝납니다. 작성된 지시가 에이전트가 일관되게 따른다는 증거는 아니기 때문입니다.
예상 산출물
- 프로젝트별 Figma 구현 규칙 섹션 또는 파일
- 구체적인 컴포넌트, 토큰, 에셋 위치 안내
- 규칙을 다듬는 데 사용하는 소규모 구현 점검
브리프에서 검토까지
- 01기존 규칙 살펴보기
먼저 Figma MCP create_design_system_rules 도구에서 기본 템플릿을 가져옵니다. 그런 다음 컴포넌트 구성, 스타일링, 임포트, 라우팅, 기존 에이전트 규칙을 읽고 프로젝트별 내용을 작성합니다.
- 02실행 가능한 매핑 작성
실제 컴포넌트와 토큰 파일 이름을 적고, 필요한 Figma 컨텍스트와 스크린샷 흐름을 설명하며, 프로젝트의 프레임워크를 유지하세요.
- 03규칙 저장 및 테스트
관련 없는 지시를 덮어쓰지 않고 적절한 호스트 규칙 형식을 사용하세요. 작은 Figma 구현을 테스트하고 충돌하거나 도움이 되지 않는 안내는 제거하세요.