Codex Design vs Figma Make 비교.

Figma Make와 Codex Design은 둘 다 AI로 설명을 작동하는 인터페이스로 바꿔 줍니다. Figma Make는 Figma 안에서 그 일을 하고 결과를 웹 앱으로 게시할 수 있습니다. Codex Design은 Codex에 캔버스를 더해, 코드를 쓰는 바로 그 자리에서 디자인을 탐색하고 비교하게 해 줍니다.

2026년 11월 6일 업데이트 · 6분 분량

짧게 답하자면

팀이 Figma에서 디자인한다면 Figma Make가 자연스러운 선택입니다. 기존 프레임과 라이브러리를 바탕으로 작업하고, 공유 가능한 URL에 작동하는 프로토타입을 게시합니다. Codex로 개발한다면 Codex Design이 디자인 단계를 코드와 같은 곳에 둡니다. 화면은 로컬 캔버스의 라이브 HTML입니다.

Figma Make를 고르세요. 디자인과 디자인 시스템이 이미 Figma에 있거나, 다른 사람이 브라우저에서 열어 볼 수 있는 작동하는 프로토타입이 필요하거나, 팀이 Figma 파일에서 협업한다면.
Codex Design을 고르세요. 이미 Codex를 쓰고, 구현하기 전에 여러 방향을 나란히 비교하고 싶고, 디자인이 호스팅되는 앱이 아니라 내 코드베이스에 들어가길 원한다면.

각 도구는 무엇인가

Figma Make는 Figma의 프롬프트 투 앱 도구입니다. AI 에이전트와 대화하면서 Figma 디자인의 프레임과 컴포넌트를 붙여 넣으면 인터랙티브한 앱을 만들어 줍니다. 생성된 코드를 Make에서 수정하고 내려받을 수 있고, 데이터를 저장할 백엔드를 추가할 수 있으며, 결과를 figma.site 주소나 내 도메인의 웹 앱으로 게시할 수 있습니다. Make 키트는 디자인 시스템의 패키지, 변수, 스타일을 작업 흐름에 가져옵니다.

Codex Design은 저희가 만든 Codex용 독립 플러그인입니다. Codex가 디자인한 화면을 라이브 HTML 페이지로, 목업 이미지와 레퍼런스 옆에 놓아 주는 로컬 캔버스를 더해 줍니다. 요소를 선택해 사이드바에서 폰트, 색상, 간격을 바꾸거나, Codex에 요청해 계속 다듬을 수 있습니다. 캔버스 프로젝트는 내 컴퓨터에 저장됩니다.

나란히 비교

	Figma Make	Codex Design
만드는 것	프롬프트와 기존 Figma 디자인으로 만드는 인터랙티브 앱과 작동하는 프로토타입	라이브 HTML 페이지로 된 웹사이트·앱 목업, 그리고 목업 이미지
실행 위치	Figma 안	Codex 안에서 실행되며 캔버스는 내 컴퓨터에 있음(macOS, Linux)
결과물과 코드	.zip으로 내려받을 수 있는 수정 가능한 코드. figma.site URL이나 커스텀 도메인에 게시. 미리보기를 Figma Design에 복사	로컬 프로젝트의 HTML 페이지와 이미지. 이후 Codex가 선택한 디자인을 내 코드로 구현
요금	월 최대 500 AI 크레딧의 무료 Starter 플랜. Professional은 Full 시트당 월 $16부터, AI 크레딧 3,000	캔버스 프로젝트 1개는 무료, Pro는 월 $5로 프로젝트 무제한. Codex 사용량은 별도
이럴 때 적합	Figma에서 디자인하고 공유 가능한, 작동하는 프로토타입이 필요한 팀	만들기 전에 UI 방향을 비교하고 다듬고 싶은 Codex 사용자

Figma의 AI 크레딧은 모든 AI 기능이 함께 쓰며, 일부 Make 기능은 플랜과 시트에 따라 달라집니다. 이 비교는 2026년 11월 6일 기준 두 제품의 공식 사이트와 문서를 반영했습니다.

Figma Make를 고르는 경우

다음과 같은 경우에는 Figma Make가 더 낫습니다.

디자인이 이미 Figma에 있다. 프레임과 컴포넌트를 채팅에 붙여 넣거나 디자인 URL을 컨텍스트로 추가하면 Make가 그것을 바탕으로 만듭니다.
오늘 바로 눌러 볼 수 있는 결과물이 필요하다. Make 파일을 고유 URL의 웹 앱으로 게시하고, 커스텀 도메인을 붙이고, 프로토타입에 데이터 저장이 필요해지면 백엔드를 추가할 수 있습니다.
디자인 시스템이 Figma에 있다. Make 키트에는 npm 패키지와 디자인 라이브러리의 변수 및 스타일, 그리고 이를 쓰는 방법에 대한 가이드라인이 들어갈 수 있습니다.
레이어로 되돌리고 싶다. 해당 플랜에서는 미리보기의 스냅샷을 레이어로 복사해 Figma Design에 붙여 넣을 수 있습니다.
팀이 Figma에서 함께 일한다. 팀원이 같은 Make 대화를 공유하고, 댓글을 남기고, 생성된 코드를 동시에 수정할 수 있습니다.

Codex Design을 고르는 경우

이미 Codex로 개발한다. 캔버스가 코드를 쓰는 에이전트 안에 있으므로 디자인과 구현 사이에 내려받기나 핸드오프가 없습니다. 기존 프로젝트에 선택한 방향을 구현하라고 Codex에 요청하세요.
확정하기 전에 탐색하고 싶다. Codex Design은 여러 방향을 한 캔버스에 나란히 놓고, 레퍼런스와 목업 이미지 옆에서 비교하도록 만들어졌습니다.
빠르게 시각적으로 조정하고 싶다. HTML 목업에서 요소를 선택하고 사이드바에서 폰트, 색상, 간격 등의 속성을 조정하세요.
작업물을 내 컴퓨터에 두고 싶다. 캔버스 프로젝트는 호스팅되는 파일이 아니라 로컬에 저장됩니다.
또 하나의 크레딧 체계는 싫다. Codex Design에는 자체 AI 크레딧이나 토큰 지갑이 없습니다. 캔버스 프로젝트 1개는 무료이고 Pro는 월 $5입니다. Codex 사용량은 Codex 플랜에서 차감됩니다.

자주 묻는 질문

Codex Design은 Figma Make의 대안인가요?

디자인 단계에서는 그렇습니다. Codex를 쓴다면요. 둘 다 설명을 작동하는 인터페이스로 바꿔 줍니다. Figma Make는 Figma 안에 있고 앱을 게시할 수 있습니다. Codex Design은 Codex 안에 있고, Codex가 내 코드베이스에 구현하기 전에 디자인을 탐색하고 다듬는 데 집중합니다. 팀이 Figma에서 일하고 게시된 프로토타입이 필요하다면 Figma Make가 더 맞습니다.

Figma 디자인을 Codex Design에서 쓸 수 있나요?

캔버스에는 이미지와 라이브 HTML 페이지를 올릴 수 있습니다. 그래서 Figma 프레임을 이미지로 내보내 Codex가 디자인한 화면 옆에 비교용 레퍼런스로 놓을 수 있습니다. Codex Design은 Figma 파일을 직접 가져오지는 않습니다.

Figma Make는 Figma 무료 플랜에 포함되나요?

Figma는 Make를 Starter 플랜과 유료 플랜에 모두 올려 두었고, Figma AI 크레딧을 사용합니다. Starter에는 월 최대 500 AI 크레딧이 포함됩니다. 코드 보기와 내려받기, 유료 플랜의 게시 같은 일부 기능은 시트 유형에 따라 달라집니다.