소개

Figma에서 구현할 대상을 정확히 선택하면 Codex가 프로젝트의 기존 패턴을 살려 완성도 높은 UI로 구현할 수 있습니다.

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

Playwright interactive 스킬을 사용하면 Codex가 실제 브라우저에서 앱을 열어 구현 결과를 Figma 디자인과 비교하고, 목표에 가까워지도록 레이아웃이나 동작을 반복해서 조정할 수 있습니다.

Figma 프로젝트 정리하기

Figma 파일을 잘 정리할수록 첫 구현의 완성도가 높아집니다. 디자인을 개발 단계로 넘기기 전에 다음과 같이 준비하세요.

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

이렇게 디자인 구조를 명확히 해 두면 Codex가 실제 서비스에 사용할 수 있는 견고한 UI를 구현하기 쉬워집니다.

요구 사항 구체화하기

기대하는 인터랙션 패턴과 원하는 스타일을 구체적으로 설명할수록 더 나은 결과를 얻을 수 있습니다.

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

디자인과 정확히 일치해야 하는 부분과 레포지토리의 규칙을 우선해야 하는 부분을 명확히 구분해 주면 Codex가 상황에 맞게 판단하기 쉬워집니다.

디자인 시스템 준비하기

대상 레포지토리에 컴포넌트 계층이 명확하게 잡혀 있으면 Codex가 가장 효과적으로 작업할 수 있습니다. Codex는 컴포넌트와 디자인 시스템을 처음부터 다시 만들지 않고 기존 것을 자동으로 활용할 수 있습니다.

필요하다면 어떤 기본 컴포넌트를 재사용할지, 디자인 토큰은 어디에 있는지, 버튼, 입력 필드, 카드, 타이포그래피, 아이콘에는 레포지토리에서 어떤 구현을 표준으로 삼는지 Codex에 알려 주세요.

Figma MCP의 출력은 흔히 React와 Tailwind로 작성한 코드처럼 보입니다. 최종 코드 스타일은 프로젝트 기준을 따르고, 이 출력은 구조를 파악하는 데 활용하세요. 프로젝트에서 실제로 사용하는 유틸리티, 컴포넌트 래퍼, 색상 체계, 타이포그래피 스케일, 간격 토큰, 라우팅, 상태 관리, 데이터 요청 패턴에 맞춰 구현해 달라고 Codex에 요청하세요.

워크플로우

Figma에서 구현할 대상 선택하기

구현하려는 Figma 프레임, 컴포넌트 또는 베리언트의 링크를 복사하세요. Figma MCP 플로우는 링크를 기반으로 작동하므로 상위 프레임이 아니라 구현할 노드를 정확히 가리키는 링크가 필요합니다.

Codex에 Figma를 사용하도록 요청하기

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

프롬프트에 다음 지시를 포함하세요.

첫 구현을 마치면 Codex가 Playwright로 실제 브라우저에서 UI를 검증하고, 디자인과 여전히 차이가 나는 화면 요소나 인터랙션을 조정합니다.