소개

Figma에서 구현할 항목을 정확히 선택하면 Codex는 프로젝트에 이미 정립된 패턴을 유지하면서 완성도 높은 UI로 구현할 수 있습니다.

Figma 스킬을 사용하면 Codex는 Figma MCP 서버에서 구조화된 디자인 컨텍스트, 변수, 에셋, 구현 대상인 정확한 베리언트를 가져올 수 있습니다.

Playwright 대화형 스킬을 사용하면 Codex가 실제 브라우저에서 앱을 열어 구현 결과를 Figma 레퍼런스와 비교하고, 결과가 목표에 가까워질 때까지 레이아웃이나 동작을 반복해서 개선할 수 있습니다.

Figma 프로젝트 설정하기

Figma 파일이 잘 정리되어 있을수록 첫 구현 결과도 좋아집니다. 작업 전달을 원활하게 하려면 다음과 같이 준비하세요:

• 가능한 곳에는 변수나 디자인 토큰을 사용하되, 특히 색상, 타이포그래피, 간격에 적용하세요
• 분리된 레이어를 반복해서 배치하는 대신 재사용 가능한 UI 요소를 컴포넌트로 만드세요
• 수동으로 배치하는 대신 최대한 자동 레이아웃을 사용하세요
• 주요 화면과 상태, 베리언트를 쉽게 파악할 수 있도록 프레임과 레이어 이름을 명확하게 지정하세요
• Codex가 추측할 필요가 없도록 가능하면 실제 아이콘과 이미지를 파일에 그대로 유지하세요

이렇게 하면 Codex가 더 명확한 구조를 바탕으로 견고하고 프로덕션에 바로 사용할 수 있는 UI를 구현할 수 있습니다.

구체적으로 설명하기

기대하는 인터랙션 패턴과 원하는 스타일을 구체적으로 설명할수록 결과가 좋아집니다.

중요한 상태, 브레이크포인트, 인터랙션이 있다면 명시하세요. 파일에 서로 비슷한 베리언트가 여러 개 있다면 어떤 것을 구현 기준으로 삼아야 하는지 Codex에 알려 주세요.

정확히 일치해야 하는 부분과 레포지토리 규칙을 우선해야 하는 부분을 명확히 설명할수록 Codex가 적절한 균형점을 찾기 쉬워집니다.

디자인 시스템 준비하기

대상 레포지토리에 명확한 컴포넌트 레이어가 이미 갖춰져 있을 때 Codex가 가장 효과적으로 작동합니다. Codex는 기존 컴포넌트와 디자인 시스템을 처음부터 다시 만들지 않고 자동으로 사용할 수 있습니다.

필요하다면 재사용할 프리미티브와 토큰 위치, 그리고 버튼, 입력 필드, 카드, 타이포그래피, 아이콘에서 레포지토리가 기준으로 삼는 구현을 Codex에 알려 주세요.

React와 Tailwind를 조합한 것처럼 보이는 경우가 많은 Figma MCP 출력은 최종 코드 스타일이 아니라 구조적 레퍼런스로 사용하세요. 해당 출력을 프로젝트에서 실제로 사용하는 유틸리티, 컴포넌트 래퍼, 색상 시스템, 타이포그래피 스케일, 간격 토큰, 라우팅, 상태 관리, 데이터 페칭 패턴에 맞게 변환하도록 Codex에 요청하세요.

워크플로우

Figma 선택 항목에서 시작하기

구현하려는 Figma 프레임, 컴포넌트 또는 베리언트 자체를 가리키는 링크를 복사하세요. Figma MCP 플로우는 링크를 기반으로 하므로, 링크가 근처의 상위 프레임이 아니라 원하는 정확한 노드를 가리켜야 합니다.

Codex에 Figma 사용 요청하기

초기 구현은 Figma를 기준으로 진행하세요. Codex가 구현을 시작하기 전에 Figma MCP 플로우를 따르도록 요청하세요.

프롬프트에 포함할 내용:

첫 구현이 완료되면 Codex는 Playwright를 사용해 실제 브라우저에서 UI를 검증하고, 남아 있는 시각적 차이나 인터랙션 차이를 줄여 나갑니다.