오늘부터 Codex에서 Figma MCP 서버를 사용해 Figma 디자인 파일을 생성할 수 있습니다. 이 MCP 서버는 양방향 작업을 지원합니다. 실제로 작동하는 UI를 Figma 캔버스로 가져오는 일도, 캔버스에서 다듬은 디자인을 다시 코드에 반영하는 일도 간단합니다. 덕분에 처음 떠올린 아이디어에서 출발해 여러 가능성을 살펴보고 가장 좋은 아이디어를 발전시킬 수 있습니다.
Codex 데스크톱 앱은 에이전트 기반 코딩을 위해 설계되었습니다. 하나의 인터페이스에서 여러 프로젝트에 걸쳐 여러 에이전트를 병렬로 관리하고, 작업 컨텍스트를 유지하면서 진행 상황을 확인하고, 외부 도구를 연동할 수 있습니다. Figma를 사용하는 팀이라면 이런 작업 방식이 익숙할 것입니다. Figma 캔버스에서도 여러 아이디어를 자유롭게 시도하고 디자인을 거듭 다듬으며 가장 좋은 아이디어를 구체화할 수 있습니다. Figma 캔버스를 Codex에 연결하면 개발 워크플로우에서도 이런 탐색을 이어갈 수 있습니다. 프로토타입부터 프로덕션 애플리케이션까지 만들 수 있는 새로운 방법이 열리는 셈입니다.
디자인에서 시작해 앱 만들기
Figma MCP 서버의 주요 용도 중 하나는 Figma 파일에서 컨텍스트를 가져와 코드 생성에 활용하는 것입니다. 앱을 만드는 과정에서 Figma MCP 서버는 Figma Design, Make, FigJam 파일에서 정보를 추출해 Codex에 전달할 수 있습니다.
먼저 앱 디자인이 담긴 Figma 파일을 여세요. 사용할 프레임을 마우스 오른쪽 버튼으로 클릭한 다음 ‘다음으로 복사’ 메뉴에서 ‘선택 항목 링크 복사’를 선택하세요.
이렇게 복사한 URL은 Figma 캔버스의 프레임이나 노드를 직접 가리킵니다. 선택 항목은 요소 하나일 수도 있고 여러 컴포넌트의 모음일 수도 있습니다. 에이전트는 이 항목을 원본 데이터로 사용해 코드를 생성합니다. Figma Design, Make, FigJam 파일 모두에서 항목을 선택할 수 있습니다. URL을 복사했으면 Codex를 열고 새 프로젝트나 기존 프로젝트를 선택하세요. 그런 다음 아래와 같은 프롬프트로 Codex에 작업을 요청하세요.
이 Figma 디자인을 코드로 구현해 주세요. 제가 쓰고 있는 디자인 시스템의 컴포넌트를 최대한 활용해 주세요.이런 프롬프트를 받으면 에이전트는 Figma MCP 서버의 get_design_context 도구를 호출합니다. 이 도구는 Figma 파일에서 레이아웃, 스타일, 컴포넌트 정보 등 디자인의 핵심 정보를 추출하고, Codex가 코드를 생성할 때 활용할 수 있도록 이 컨텍스트를 전달합니다.
Figma MCP 서버에는 디자인 정보 추출 외에도 여러 작업에 활용할 수 있는 도구가 있습니다. 전체 도구 목록은 Figma 문서에서 확인하세요.
코드에서 캔버스로
코드로 UI를 다듬은 뒤에는 디자인을 캔버스로 다시 가져와 플로우를 비교하고, 대안을 살펴보고, 처음 세운 가정이 맞는지 확인할 수 있습니다. Figma MCP 서버를 사용하면 브라우저 화면을 보며 일일이 다시 만들 필요 없이 해당 화면을 Figma로 가져올 수 있습니다. generate_figma_design 도구는 실행 중인 인터페이스를 몇 초 만에 모든 요소를 편집할 수 있는 Figma 프레임으로 변환합니다. 실제로 작동하는 UI를 캔버스에 바로 옮겨 팀원들과 함께 디자인을 더 깊이 탐색할 수 있습니다.
먼저 로컬 환경이나 공개 웹 서버에서 애플리케이션 UI를 렌더링하세요. 그런 다음 Codex에 새 Figma 디자인 파일을 생성해 달라고 요청하세요.
Codex의 안내에 따라 다음 단계를 진행하세요.
- 새 Figma 파일을 만들지 기존 파일을 사용할지 선택하세요.
- 파일을 저장할 워크스페이스를 선택하세요.
- UI를 캡처할 수 있도록 애플리케이션을 설정하세요.
- 새 브라우저 세션에서 애플리케이션을 여세요.
애플리케이션을 다시 로드하면 페이지 상단에 다음 옵션이 있는 새 도구 모음이 나타납니다.
전체 화면: 현재 표시된 화면 전체를 캡처해 Figma 파일로 보냅니다.
요소 선택: 페이지에서 캡처할 컴포넌트나 요소를 선택합니다.
파일 열기: Figma 파일을 열어 새로 생성된 디자인 레이어를 확인합니다.
Figma로 옮길 내용을 모두 캡처했다면 파일을 열거나 Codex로 돌아가세요. Codex로 돌아가면 Figma 파일 URL을 확인할 수 있습니다.
MCP로 코드와 캔버스 오가기
앱을 만들고 디자인 파일도 준비했으니 이제 UI를 다듬을 차례입니다. Figma 캔버스에서 다음과 같은 작업을 할 수 있습니다.
- 디자인 시스템 컴포넌트 추가하기
- 스타일, 글꼴, 색상에 변수 적용하기
- 레이아웃을 조정하고 주석으로 지침 추가하기
- 다양한 인터랙션과 빈 상태 화면 설계하기
- 팀원들과 함께 여러 디자인 시안을 만들고 다른 가능성 탐색하기
UI를 다듬은 뒤에는 이 글의 앞부분에서 설명한 단계를 다시 따라 MCP 서버를 통해 변경 사항을 애플리케이션에 반영하세요.
코드와 캔버스를 연결하면 아이디어를 구현하는 일과 새로운 가능성을 탐색하는 일을 자유롭게 오갈 수 있습니다. 이렇게 양방향으로 작업할 수 있다는 점이 Codex와 Figma MCP 서버를 함께 쓰는 강점입니다. 코드에서든 캔버스에서든 원하는 곳에서 시작해 개발 속도를 유지하면서 사용자에게 가치 있고 완성도 높은 앱 경험을 제공할 수 있습니다.
Figma MCP 서버에 관해 더 알아보려면 Figma 문서를 살펴보세요. 바로 사용하려면 Codex 데스크톱 앱에서 Figma MCP 서버를 직접 설치하세요.