Codex와 Figma로 프론트 (새 탭에서 열림)
Codex와 Figma MCP 서버를 연결하면 디자인과 실행 중인 프론트엔드 UI를 양방향으로 오갈 수 있다. Figma의 디자인 정보를 Codex에 전달해 코드를 생성하고, 구현된 UI를 다시 편집 가능한 Figma 프레임으로 가져와 검토·협업·개선한 뒤 변경 사항을 코드에 반영하는 방식이다. 이를 통해 초기 디자인이나 코드에 고정되지 않고, 탐색과 구현을 반복하며 더 나은 제품을 만들 수 있다.
Figma 디자인에서 앱 시작하기
- Figma MCP 서버는 Figma Design, Figma Make, FigJam 파일의 정보를 Codex에 전달한다.
- 구현할 Figma 파일에서 원하는 프레임이나 노드를 우클릭한 뒤 **“Copy as → Copy link to selection”**을 선택한다.
- 복사한 선택 URL은 단일 요소, 컴포넌트 묶음 등 특정 캔버스 영역을 가리키며, 에이전트가 코드 생성에 사용할 원본 데이터가 된다.
- Codex에서 새 프로젝트나 기존 프로젝트를 선택하고 다음과 같은 방식으로 요청한다.
- “이 Figma 디자인을 코드로 구현하고, 기존 디자인 시스템 컴포넌트를 최대한 활용해줘.”
- Codex는 Figma MCP 서버의
get_design_context도구를 호출해 다음 정보를 추출한다.- 레이아웃 구조
- 스타일
- 컴포넌트 정보
- 기타 디자인 관련 컨텍스트
- 이 정보를 바탕으로 Codex가 디자인에 맞는 UI 코드를 생성한다.
코드에서 Figma 캔버스로 가져오기
- 코드에서 UI를 구현하고 반복 수정한 뒤, 실행 중인 화면을 Figma로 가져와 시각적으로 비교하고 대안을 탐색할 수 있다.
- 앱은 로컬 환경이나 공개 웹 서버에서 렌더링할 수 있다.
- Codex에 새 Figma Design 파일을 생성하도록 요청하면 다음 과정을 안내한다.
- 새 파일 또는 기존 파일 선택
- 파일을 저장할 워크스페이스 선택
- UI 캡처를 위한 애플리케이션 설정
- 브라우저에서 앱 세션 열기
- Figma MCP 서버의
generate_figma_design도구는 실행 중인 인터페이스를 편집 가능한 Figma 프레임으로 변환한다.
UI 캡처 기능
앱이 다시 로드되면 화면 상단에 캡처 도구 모음이 표시된다.
- Entire screen: 현재 표시된 전체 화면을 Figma 파일로 캡처
- Select element: 페이지에서 특정 컴포넌트나 요소만 선택해 캡처
- Open file: 생성된 디자인 레이어를 Figma에서 확인
캡처가 끝나면 Figma 파일을 바로 열거나 Codex로 돌아갈 수 있으며, Codex에는 해당 Figma 파일 URL이 전달된다.
캔버스에서 UI 개선하기
Figma로 가져온 실행 UI는 단순 이미지가 아니라 추가 편집과 협업이 가능한 디자인 자료로 활용된다.
- 디자인 시스템 컴포넌트 추가
- 스타일, 글꼴, 색상을 변수로 전환
- 레이아웃 조정 및 주석 작성
- 인터랙션과 빈 상태 화면 설계
- 여러 UI 변형안과 탐색안 비교
- 팀원과 캔버스에서 공동 검토
수정이 끝나면 처음과 동일하게 프레임 또는 노드의 선택 URL을 복사해 Codex에 전달하고, Figma MCP 서버를 통해 변경된 디자인을 애플리케이션 코드에 반영할 수 있다.
디자인과 코드의 왕복 workflow
- 디자인에서 시작해 Codex로 구현한다.
- 실행 중인 UI를 Figma로 가져와 실제 결과를 검토한다.
- Figma 캔버스에서 스타일, 컴포넌트, 레이아웃, 상태를 개선한다.
- 변경된 디자인 컨텍스트를 다시 Codex로 보내 코드에 반영한다.
- 이 과정을 반복하면서 속도를 유지한 채 프로토타입부터 실제 서비스 UI까지 발전시킬 수 있다.
실무에서는 먼저 Figma에 디자인 시스템과 핵심 화면을 정리한 뒤 Codex에 전달하고, 생성된 UI를 generate_figma_design으로 다시 캔버스에 가져와 시각적 차이를 검토하는 방식을 추천한다. 이를 통해 코드 구현과 디자인 의사결정을 분리하지 않고 하나의 반복 가능한 작업 흐름으로 통합할 수 있다.