Figma

Figma 디자인을 코드로 옮기는 팀을 위한 컨벤션입니다. Figma는 참고 자료이고 스펙은 코드입니다. 화면은 스크린샷과 메타데이터로 먼저 읽고, get_design_context는 저장소에 대응물이 없는 가장 작은 노드에만 불러 LLM 토큰을 아낍니다. 숨긴 레이어, UX 메모, 그려지지 않은 상태를 구현 전에 모으고, 값은 프로젝트 토큰으로, 구조는 기존 컴포넌트로 옮기며, 완료 전에 렌더 값을 실측합니다. 디자인 파일의 레이어가 정리돼 있든, Code Connect가 있든 없든 결과 품질이 크게 흔들리지 않게 합니다. TSX를 바꿀 때는 React 규칙을, 스타일을 바꿀 때는 CSS 규칙을 함께 봅니다.

함께 보는 규칙

React 규칙은 다음 변경이 있을 때 함께 봅니다. TSX 화면이나 컴포넌트를 추가하거나 수정한다.
CSS 규칙은 다음 변경이 있을 때 함께 봅니다. 스타일시트, className, 토큰 값을 추가하거나 수정한다.

규칙

1. MCP로 Figma 읽기

어떤 도구를 어느 노드에 어떤 순서로 부를지 정합니다. 스크린샷과 메타데이터는 비용을 미리 가늠할 수 있고, get_design_context는 레이어가 정리되지 않을수록 노드가 늘어 비싸집니다. 그래서 화면은 싼 도구로 먼저 읽고, 비싼 도구는 저장소에 대응물이 없는 가장 작은 노드에만 부릅니다. 레이어 이름과 숨긴 레이어처럼 파일 정리 상태에 따라 뜻이 달라지는 정보는 렌더 결과와 대조해서 읽습니다. 섹션 페이지

규칙	요지
1.1 Figma 노드는 스크린샷과 메타데이터부터 읽습니다	한 화면을 읽는 비용을 레이어 정리 상태와 무관하게 예측할 수 있는 범위로 묶습니다
1.2 스크린샷은 화면 프레임에, 메타데이터는 메모 래퍼에 부릅니다	같은 비용으로 화면 글자와 메모를 놓치지 않고 읽습니다
1.3 `get_design_context`는 대응물이 없는 작은 노드에만 부릅니다	가장 비싼 도구의 비용이 디자인 파일의 정리 상태를 따라 불어나지 않게 막습니다
1.4 문구와 컴포넌트 종류는 레이어 이름이 아니라 렌더 결과에서 읽습니다	디자이너가 이름을 바꾼 레이어 때문에 화면과 다른 문구가 코드에 들어가지 않습니다
1.5 숨긴 레이어와 메모는 구현 전에 상태 목록으로 모읍니다	한 화면에 겹쳐 둔 상태와 요구 조건이 구현에서 빠지지 않고, 버린 초안이 화면에 올라가지도 않습니다

2. 디자인 의도와 빈자리

Figma 화면은 한 시점의 표본입니다. UX 메모와 GUI 화면이 어긋나는 곳은 구현 전에 묻고, 그려지지 않은 상태는 프로젝트 기본 컴포넌트로 채웁니다. 프레임 폭과 샘플 문구는 실제 데이터와 화면 폭이 달라질 수 있는 표본으로 읽고, 아이콘과 표시가 암시하는 동작을 구현합니다. 섹션 페이지

규칙	요지
2.1 UX 메모와 GUI 화면이 어긋나면 구현 전에 질문합니다	어긋난 두 디자인 중 하나를 말없이 골라 구현했다가 되돌리는 비용을 막습니다
2.2 그려지지 않은 상태는 프로젝트 기본 컴포넌트로 채우고 보고합니다	디자인에 없는 로딩, 빈 목록, 오류 상태가 흰 화면이나 화면마다 다른 모양으로 남지 않습니다
2.3 프레임 폭, 고정 크기, 샘플 문구는 표본으로 읽습니다	한 기기 폭과 샘플 데이터로 그린 치수가 다른 폭과 실제 데이터에서 넘치거나 비어 보이지 않습니다
2.4 정렬 아이콘, 펼침 화살표처럼 동작을 암시하는 표시는 동작으로 구현합니다	동작 표시를 그림으로만 옮겨 눌러도 반응 없는 화면을 만들지 않습니다

3. 값과 문구의 출처

생김새는 Figma에서 읽고 값은 저장소에서 가져옵니다. 간격, 색, 모서리 반경, 글꼴은 프로젝트 토큰으로 옮기고, 문구는 고정 문구와 서버 데이터로 나눠 출처를 정합니다. 섹션 페이지

규칙	요지
3.1 Figma 수치와 변수는 프로젝트 토큰으로 옮깁니다	디자인 파일의 변수 이름이 코드에 새지 않고 테마와 토큰 변경이 화면에 그대로 반영됩니다
3.2 고정 문구와 서버 데이터를 나눠 글자의 출처를 정합니다	Figma 샘플 값을 하드코딩하지 않고, 고정 문구를 응답 필드에서 찾지도 않습니다

4. 코드로 옮기기

읽은 화면을 코드로 옮길 때 저장소 컴포넌트를 먼저 씁니다. get_design_context가 돌려준 레이어 구조, 절대 좌표, 임시 에셋 URL은 옮기지 않고 의도만 CSS와 컴포넌트로 다시 씁니다. 섹션 페이지

규칙	요지
4.1 새 마크업보다 저장소 컴포넌트를 먼저 씁니다	디자인 파일의 컴포넌트 정리 상태와 무관하게 화면이 저장소의 동작, 상태, 접근성을 물려받습니다
4.2 레이어 구조를 DOM으로 복제하지 않습니다	디자이너가 도형을 쌓은 방식이 래퍼, 절대 좌표, 임의 값 클래스로 코드에 남지 않습니다
4.3 아이콘과 이미지는 기존 글리프나 내려받은 에셋을 씁니다	만료되는 에셋 URL과 손으로 그린 도형이 코드에 남지 않습니다

5. 검증과 보고

일치를 주장하기 전에 실제 화면에서 렌더 값을 재고 판정 어휘로 보고합니다. 보고에는 읽은 노드, 부른 도구, 대응시킨 컴포넌트, 남은 질문과 차이를 남겨 다음 사람이 같은 호출을 되풀이하지 않게 합니다. 섹션 페이지

규칙	요지
5.1 일치를 주장하기 전에 렌더 값을 실측합니다	눈으로 대조해서는 놓치는 간격, 색, 빠진 상태를 수치로 확인하고 보고합니다
5.2 보고에 읽은 노드, 대응표, 남은 질문과 차이를 남깁니다	다음 사람이 같은 MCP 호출을 되풀이하지 않고 확인할 곳을 바로 찾습니다