Figma는 Claude를 활용해 아이디어를 인터랙티브 소프트웨어로 전환합니다

Figma는 팀이 초기 컨셉부터 출시된 경험에 이르기까지, 디지털 제품을 만들 수 있는 협업 디자인 및 개발 플랫폼입니다. Figma Make를 지원하는 Claude를 통해 Figma는 팀이 아이디어와 정적 목업을 완전히 작동하는 인터랙티브 소프트웨어로 신속하게 전환할 수 있도록 지원하며, 상상에서 현실로의 여정을 가속화합니다.

Claude 도입의 주요 성과

• 디자이너, 개발자, 제품 관리자는 코드를 작성하지 않고도 몇 분 안에 작동하는 프로토타입이나 앱을 만들어 낼 수 있습니다
• 팀은 시간이 많이 걸리는 작업을 자동화하여 더 많은 디자인과 제품 아이디어를 탐색합니다
• 이제 디자이너가 아닌 사람도 아이디어를 시각화할 수 있고, 더 많은 사람들을 디자인 프로세스로 참여시킬 수 있습니다
• Claude Sonnet은 코드 품질, 디자인 의도, 속도를 일관되게 충족했습니다.

디자인의 진화

Figma는 AI와 함께 디자인의 역할이 빠르게 진화하고 있음을 인식했습니다. 선도적인 디자인 플랫폼으로서 디자이너가 창의적인 영향력을 넓혀 디자인을 생생하게 구현할 수 있도록 지원하는 동시에 더 많은 사람들을 디자인 프로세스로 초대할 수 있는 기회를 발견했습니다.

AI는 디자인 아이디어를 신속하게 시각화하고, 간단한 프롬프트를 통해 정적 목업을 인터랙티브 경험으로 전환할 수 있는 새로운 방법을 열어줍니다. Figma에 이 기능을 도입함으로써, 팀은 수동으로 프로토타입을 생성하거나 코드를 작성하지 않고도 다양한 방향을 탐색할 수 있습니다. 

또한 이러한 발전은 업계 전반의 변화와 부합했습니다. Figma의 프로덕트 매니저인 Alex Mullans는 "디자인과 개발 사이의 전통적인 핸드오프는 마찰을 일으킵니다. 개발자가 '제가 만든 건 이겁니다'라며 돌아오는 식의 반복적인 주고받기가 생기는데, 그게 원래 의도와 맞지 않죠." 라고 말했습니다. Figma의 협업 플랫폼은 디자인과 개발을 더 가깝게 연결해 전체 프로세스 전반에서 완성도와 품질을 유지할 수 있게 해줍니다.

기술 숙련도와 디자인 감성을 위해 Claude 선택

AI 모델을 평가할 때, Figma는 디자인 의도와 미학을 이해하면서도 고품질 코드를 생성할 수 있는 솔루션을 찾았습니다.

Mullans는 평가 프로세스에 대해 다음과 같이 설명했습니다. "우리는 다양한 모델을 정기적으로 평가하고 있습니다. Claude는 속도, 정확성, 사용자 의도 이해에 딱 맞는 조합을 일관되게 제공합니다."

Claude의 디자인 감성 또한 차별화된 특징이라고 팀은 말했습니다. Figma Make의 엔지니어는 설명했습니다. "Anthropic이 등장하기 전에는 이 AI 모델들이 지능적이라는 것을 알 수 있었지만, 취향과 개성이 부족한 것은 확실했습니다. 디자인을 만들어 달라고 요청하면 그 디자인은 다소 밋밋하게 나왔습니다. Anthropic이 등장하면서 이제 지능형 모델과 감각 있는 모델을 모두 갖추게 되었습니다."

Figma Make의 제품 매니저인 Holly Li는 Claude의 기능을 직접 경험해 보았습니다. "저는 웹사이트를 구축하기 위해 30시간 동안 독학으로 React를 배웠습니다. Claude를 통해 모든 코드를 하루 만에 리팩터링하고 개선했고, 항상 원했지만 직접 구현할 수 없었던 기능을 추가했습니다."

팀은 Claude Sonnet이 세상에 나온 순간을 획기적인 전환점으로 꼽았습니다. 즉 Figma Make를 위한 비전을 실현할 수 있을 만큼 코드 생성이 충분한 수준에 도달한 시점이었습니다.

자연어를 통한 상호작용

Figma는 Claude를 두 가지 혁신적인 제품에 통합해 아이디어를 코드 기반 소프트웨어로 전환합니다. 첫째, Figma Sites에서 작업하는 디자이너는 원하는 내용을 설명하여 기존 웹사이트 디자인에 상호작용을 추가할 수 있습니다. 요소를 선택하고 "마우스를 올릴 때 기울어지는 호버 효과를 추가해 줘"와 같은 자연어 프롬프트를 입력하면 됩니다. Claude는 원본 디자인의 디테일을 그대로 유지하면서도 고품질 코드를 빠르게 생성합니다.

두 번째 제품인 Figma Make는 설명 또는 기존 Figma 디자인을 바탕으로 인터랙티브 프로토타입이나 앱을 생성합니다. Li가 다음과 같이 설명한 것처럼 말입니다. "Figma Make는 아이디어를 실제 소프트웨어로 전환하는 방법입니다. 처음부터 시작하거나, Figma에서 이미 생성한 기존 디자인으로 시작할 수 있습니다." 사용자가 원하는 내용을 설명하는 프롬프트를 입력하거나, Figma Design에서 픽셀 퍼펙트 목업을 복사할 수 있습니다. 그러면 Claude가 이를 복잡한 로직, 애니메이션, 반응형 동작을 갖춘 완벽하게 작동하는 프로토타입으로 변환합니다.

Li는 자신의 디자인 철학을 명확히 설명하면서, "AI는 디자이너의 현재 작업 방식에 맞춰야 합니다. 이미 완벽한 디자인을 만들었다면, 다시 시작할 필요가 없습니다. Claude는 사용자가 배치한 모든 픽셀을 그대로 살리면서 인터랙티비티를 추가합니다."

팀은 Claude가 업데이트될 때마다 놀라운 개선을 확인했습니다. Li는 다음과 같이 말했습니다. "이제 프롬프트가 그라데이션, 다양한 타이포그래피, 세심하게 설계된 모션이 있는 정교한 디자인을 생성해 냅니다. 우리 디자이너 중 한 명은 'Claude가 너무 좋아, 울고 싶어'라고 말하기까지 했습니다."

비전 실현을 가속화하는 새로운 모델

Figma 팀은 최첨단을 유지하며 최신 Claude 모델을 지속적으로 테스트하고 있습니다.

Figma CEO인 Dylan Field는 말합니다. "Sonnet 4.5는 정말로 인상적인 모델입니다." "지금까지 사용해본 결과, 이 모델이 앞서 계획하는 능력과 복잡한 코드베이스를 추론하는 능력에 깊이 감명받았습니다." Field는 모델이 어떻게 Figma 디자인을 기능적인 코드로 전환했는지 설명했습니다. Field는 Figma Design과 Make 사이의 개선된 왕복 워크플로우를 강조했습니다. 디자인을 복사해 작동하는 프로토타입을 생성한 뒤 디자인 캔버스에 가져와 추가로 반복 작업하고 탐색 결과를 나란히 비교하는 것이었습니다. "Sonnet 4.5가 이 작업 흐름을 이렇게까지 개선해줄 줄은 몰랐습니다... 정말 예상치 못한 성과였습니다." 라고 그는 말했습니다. Field는 이 경험을 "사용하는 것이 즐거웠다"며 "이 모델은 이미 Figma Make의 성능에서 상당한 차이를 보여주었다"고 덧붙였습니다.

또한 Figma는 실험적 모델 설정을 도입해 사용자가 Figma Make에서 사용 가능해지는 즉시 새로운 Claude Opus 4.6을 포함한 최신 릴리스를 이용할 수 있도록 했습니다. Figma의 최고 디자인 책임자인 Loredana Crisan은 "Claude Opus 4.6은 Figma Make에서 인상적인 창의적 범위로 복잡한 인터랙티브 앱과 프로토타입을 생성합니다"라고 말했습니다. "모델은 첫 번째 시도에서 상세한 디자인과 다층적인 작업을 코드로 전환해 줍니다. 이는 팀이 아이디어를 탐색하고 구축하는 강력한 출발점이 됩니다." 실험적 설정을 통해 팀은 Claude가 계속 진화함에 따라 새로운 기능으로 한계를 확장할 수 있습니다.

새로운 모델이 출시될 때마다 팀이 만들어 낼 수 있는 새로운 가능성을 열어줍니다. Field는 "AI 모델이 더 발전할수록 Figma도 더 발전합니다."라고 말했습니다.

누구나 쉽게 디자인과 소프트웨어 제작이 가능한 시대

Claude는 기술적 장벽을 낮추는 방식으로 모든 종류의 Figma 사용자들이 아이디어를 더 빠르게 검증하고, 더 창의적인 방향을 탐색하며, 다양한 관점을 제품 개발 프로세스에 도입할 수 있도록 지원합니다.

속도는 가능성을 바꾸어 줍니다. Li는 자신의 경험을 바탕으로 이 점을 설명합니다. "Figma Make로 새로운 제품 플로우를 5분 만에 프로토타이핑했습니다. 이전에는 디자인과 엔지니어링 지원 없이, 제품 매니저로서 혼자서는 이 작업을 수행하는 것이 말 그대로 불가능했을 것입니다."

이러한 가속화는 완전히 새로운 워크플로우를 가능하게 합니다. 초기 사용자들은 설득력 있는 사례를 공유했습니다. 한 디자이너는 Figma Make를 사용해 주말 동안 스타트업 아이디어를 프로토타이핑한 후 VC에게 피치했고, 완전히 기능하는 데모로 투자자에게 깊은 인상을 남겼습니다. 또 다른 사용자는 Make를 사용해 오랫동안 보류되어 왔던 컨셉을 실현시켰습니다. 이를 인터랙티브하게 만든 것이 회사가 다시 이 컨셉에 대해 논의하게 만들었습니다.

Claude는 개인 생산성 외에도 제품 개발에 기여할 수 있는 사람의 범위를 넓혀 줍니다. Mullans는 다음과 같이 말했습니다. "스프레드시트와 데이터 테이블을 바탕으로 생각하는 제품 관리자는 이제 아이디어를 전달할 수 있는 시각적 프로토타입을 만들 수 있습니다. 엔지니어는 CSS에 시간을 들이지 않고도 인터페이스를 신속하게 목업으로 만들 수 있습니다. 조직 전반의 모든 직원이 디자인 프로세스에 보다 효과적으로 기여할 수 있습니다."

이 변화는 단순한 도구 차원을 넘어서는 것으로, 팀이 제품 개발에 접근하는 방식 자체를 바꾸고 있습니다. 이제 엔지니어가 디자인할 수 있고, 제품 관리자는 프로토타입을 만들어 낼 수 있으며, 디자이너는 소프트웨어를 출시할 수 있습니다. Figma Make는 다양한 역할 간의 경계를 모호하게 만들고, 모든 사람이 아이디어를 시각화하고, 디자인 프로세스에 참여하며, 제품을 실현할 수 있도록 지원합니다.