이제 Claude Code로 시작한 워크플로를 Figma에서 더 멀리 확장할 수 있습니다. 브라우저에서 동작하는 실제 UI를 캡처해 Figma 캔버스에서 편집 가능한 프레임으로 변환하고, 팀과 함께 비교·탐색·의사결정을 더 빠르게 진행하세요.
토픽
Gui Seiz Figma AI 디자인 디렉터
Alex Kern Figma 소프트웨어 엔지니어
이제 Claude Code로 시작한 워크플로를 Figma에서 더 멀리 확장할 수 있습니다.
때로는 아이디어를 앞으로 밀고 나가는 가장 빠른 방법이, 실제로 작동하는 무언가를 만들어보는 것입니다. 코드를 통해 만드는 것은 그중 하나의 방법이죠. 라이브 프로토타입은 실제 데이터를 다루고, 움직이는 상호작용을 직접 느끼며, 기술적 범위를 더 명확히 파악할 수 있게 해줍니다. Claude Code 같은 AI 기반 워크플로 덕분에 이러한 탐색은 더욱 쉬워졌습니다. 프롬프트로 시작해 반복하며, 실시간으로 인터페이스를 조정할 수 있으니까요. 문제는 이런 작업을 ‘선형적인’ 맥락에서 꺼내, 혼자든 팀과 함께든 더 발전시킬 수 있는 공유 공간으로 어떻게 옮기느냐입니다.
빠르게 움직이는 것은 중요합니다. 하지만 탐색 없는 속도는 잘못된 방향으로의 ‘가속’이 될 수 있습니다. 바로 그때 코드가 캔버스와 만나야 합니다.
Claude Code 워크플로를 Figma로 바로 가져오면, 개발자·디자이너·취미로 만드는 사람까지도 브라우저에서 실제로 동작하는 UI(프로덕션, 스테이징, 또는 localhost)를 캡처해 Figma 캔버스 위의 편집 가능한 프레임으로 변환할 수 있습니다. 코드는 수렴(converging)에 강합니다. 빌드를 실행하고, 경로를 클릭해, 한 번에 하나의 상태에 도달하게 하죠. 반대로 캔버스는 발산(diverging)에 강합니다. 전체 경험을 배치하고, 분기점을 확인하며, 함께 방향을 다듬습니다. 코드에서 캔버스로 이동하면 팀은 더 유연하게 움직일 수 있습니다. 좁혀야 할 때는 좁히고, 협업해야 할 때는 열어두는 식으로요.
이 ‘캡처 → Figma’ 기능을 사용하면, 가장 자연스러운 지점에서 빌드를 시작할 수 있습니다. 코드 우선 탐색은 보통 예측 가능한 형태를 가집니다. 로컬에서, 변경하고 새로고침하면 바로 결과가 보이죠. 싱글 플레이어 환경에서는 한 사람이 분기, 개발 서버, 맥락을 머릿속에 모두 담고 있습니다. 초반에는 그 속도가 도움이 되지만, UI가 한 화면을 넘어 커지는 순간, 혼자서 탐색하는 속도는 제약이 되기도 합니다. 피드백을 받으려면 스크린샷이나 녹화본을 공유하거나, 누군가에게 로컬에서 빌드를 실행해달라고 부탁해야 하는데, 이 모든 선택지는 팀이 더 넓게 펼쳐 함께 더 많은 옵션을 탐색해야 하는 바로 그 순간에 마찰을 더합니다.
Claude Code to Figma에서는 캡처한 각 화면을 전송하거나 클립보드로 복사해, 어떤 Figma 파일에도 붙여넣을 수 있습니다. 그러면 그 화면은 Figma 프레임이 되어, 정리하고, 복제하고, 다듬고, 다른 디자인 작업과 함께 공유할 수 있습니다. 팀은 UI를 보기만 하는 데서 그치지 않습니다. 잘 작동하는 부분을 주석으로 남기고, 불명확한 지점을 짚고, 누군가가 새 환경으로 컨텍스트 스위칭을 하거나 코드 파일 절반을 고쳐야 하는 변경 없이도 발산 아이디어를 탐색할 수 있습니다.
플로우의 경우 한 세션에서 여러 화면을 캡처할 수도 있어, 순서와 맥락을 보존함으로써 전체 경험이 자연스럽게 이해되도록 합니다. 코드에서 만든 인터페이스를 캔버스로 가져오면 대화가 달라지고 새로운 가능성이 열립니다. 즉, 사고와 탐색을 위한 ‘열린 공간’으로 들어가게 되는 거죠.
Claude Code에서 페이지, 상태, 플로우를 캡처하면 Figma에서 즉시 편집할 수 있습니다.
AI가 ‘시작’의 모습을 바꾸면서, 만드는 일은 더 쉬워졌습니다. 거의 즉시 반응해볼 수 있는 구체적인 프로토타입이 생기는 경우가 많으니까요. 그 결과 디자인 대화는 ‘어떻게 만들까’에서 ‘어떤 버전을 확장할까’로 옮겨갑니다. 우리는 Figma에서 모든 작업 방식을 지원하고자 합니다. Figma Make로는 프롬프트를 작동하는 프로토타입으로 바꿀 수 있고, Copy design ### Figma Make를 캔버스로 가져오기 이제 Figma Make 미리보기에서 어떤 디자인이든 디자인 캔버스로 복사해 편집하고 반복하며 아이디어를 더 멀리 확장할 수 있습니다.를 통해 어떤 Make 미리보기든 디자인 캔버스로 바로 가져와 추가로 반복할 수 있습니다. Claude Code to Figma는 이와 동일한 아이디어를 코드 우선 워크플로에 적용해, 빌드된 인터페이스를 편집 가능한 디자인 산출물로 변환합니다. 시작점은 달라도 결과는 같습니다. 더 빠르게 만들고, 그다음 더 깊게 탐색하는 것.
Figma Make의 프롬프트에서 시작하든 Claude Code에서 시작하든, 목표는 같습니다. 손에 잡히는 무언가를 만든 다음, 더 발전시키는 것. 오늘날 제품을 차별화하는 것은 ‘느낌’, 사용자 안내 방식, 그리고 가치가 얼마나 명확하게 전달되는지입니다.
아래는 Claude Code to Figma가 그 목표에 더 빨리 도달하도록 돕는 네 가지 방법입니다.
인터페이스를 Figma 캔버스로 가져오면 나란히 비교가 쉬워집니다. 특히 다단계 플로우에서 패턴, 빈틈, 트레이드오프, 불일치를 더 쉽게 찾을 수 있습니다.
아이디어를 시험해보기 위해 코드를 다시 쓰지 않고도 프레임을 복제하고, 단계를 재배치하며, 구조적 변경을 테스트할 수 있습니다. 또한 대안을 병렬로 비교하면, 채택되지 않은 아이디어도 향후 탐색을 위해 계속 보존할 수 있습니다.
디자이너, 엔지니어, PM이 같은 산출물을 같은 맥락에서 같은 수준의 충실도(fidelity)로 보고 반응할 수 있습니다. 정답이 분명하지 않을 때, 공유된 시야는 질문이 더 일찍 드러나도록 하며—아직 결정을 다듬기 쉬운 시점에—논의를 앞으로 당깁니다.
공유된 Figma 캔버스에서 디자인은 제품을 사고하는 방식이 됩니다. 캡처된 화면은 완전히 편집 가능하기 때문에, 팀은 결정에 주석을 달고, 선택지를 개념화하며, 동료의 목표를 더 잘 이해해 결과물을 끌어올릴 수 있습니다. 기능을 사용자가 체감할 수 있는 의미 있는 경험으로 바꾸며, 제품을 더 좋게 만듭니다.
화면을 나란히 비교하고, 대안을 탐색하며, Figma 캔버스에서 함께 반복하세요.
Figma MCP 서버를 통해 Figma를 개발자 워크플로에 바로 연결해, LLM이 디자인 맥락을 반영한 코드 생성을 할 수 있도록 도와주세요.
Figma MCP 서버를 사용하면 프롬프트와 Figma 프레임 링크를 통해 작업을 코딩 환경으로 다시 가져올 수 있습니다. 단순하고 가벼운 연결로, 공유된 이해에서 다시 빌드로 돌아갈 때도 맥락을 잃지 않도록 도와줍니다.
작업이 코드에서 시작될 때도 있고, 캔버스에서 시작될 때도 있습니다. 그리고 종종 그 중간 어딘가에서 시작되기도 하죠. Claude Code에서 Figma로 바로 이동할 수 있다는 것은 더 유연한 제작 방식을 반영합니다. 장벽이 줄어들수록 더 크고 더 대담한 아이디어가 앞으로 나아가게 됩니다.
이는 코드에서 디자인으로 이어지는 워크플로를 더 매끄럽게 만들겠다는 우리의 약속에서 중요한 진전입니다. 빌더들이 더 빠르게 움직이고 더 나은 제품을 만들도록 돕습니다. 지원되는 클라이언트와 기능 개요는 Figma MCP 서버 가이드를 참고하세요. 또한 Claude Code to Figma 같은 MCP 도구 사용법에 대한 자세한 안내는 개발자 문서에서 확인할 수 있습니다.
Gui는 Figma의 AI 디자인 디렉터로, 디자인과 코드를 위한 에이전트형 워크플로(agentic workflows)를 이끄는 역할을 합니다. 이전에는 Pinterest에서 AI 이니셔티브를 이끌었습니다.
Alex Kern은 Figma의 소프트웨어 엔지니어로, 코드·디자인·AI의 교차점에 집중합니다. Figma 이전에는 Dynaboard의 창업자였으며, Dynaboard는 2024년 Figma에 합류했습니다.
이메일 입력*
Figma의 메일링 리스트 수신에 동의합니다.* - [x]
“구독”을 클릭하면 서비스 약관 및 개인정보 처리방침에 동의하는 것으로 간주됩니다.
### 뉴스: Figma의 최신 소식을 확인하세요
### 디자인 시스템: AI 시대에 디자인 시스템을 구축하고 확장하는 데 필요한 모든 것* [피그마 내부](https://www.figma.com/blog/inside-figma/)
* [제품 업데이트](https://www.figma.com/blog/product-updates/)
* [Dev Mode](https://www.figma.com/blog/dev-mode/)
* [AI](https://www.figma.com/blog/ai/)
* [엔지니어링](https://www.figma.com/blog/engineering/)
* [뉴스](https://www.figma.com/blog/news/)
### 디자인 시스템과 AI: 왜 MCP 서버가 열쇠(Unlock)인가 2025년 8월 6일 Ana Boyer MCP 서버와 결합하면 디자인 시스템은 AI 기반 워크플로의 생산성 계수가 되어, AI 에이전트가 브랜드에 맞고 관련성 높은 결과물을 만들도록 보장합니다.* [함께 일하기](https://www.figma.com/blog/working-well/)
* [디자인 시스템](https://www.figma.com/blog/design-systems/)
* [AI](https://www.figma.com/blog/ai/)
* [생산성](https://www.figma.com/blog/productivity/)
### 왜 디자인 컨텍스트가 중요한가 2025년 9월 24일 Thomas Lowry 개발자들이 에이전트형 코딩 도구를 점점 더 많이 사용함에 따라, 디자인 파일의 구조와 명확성은 그 어느 때보다 중요해지고 있습니다. 작업을 신중하게 정리하면 개발자 파트너가 더 효율적이고 정확하게 빌드하는 데 도움이 됩니다.* [인사이트](https://www.figma.com/blog/insights/)
* [디자인](https://www.figma.com/blog/design/)
* [디자인 시스템](https://www.figma.com/blog/design-systems/)
* [AI](https://www.figma.com/blog/ai/)
English