요약
Figma가 디자인 수정에 특화한 자체 AI 모델을 훈련해 Figma 에이전트에 넣고 있습니다.
Figma에서 AI 플랫폼을 맡은 조시 클렘 엔지니어링 부사장이 쓴 글입니다. 간격 조정이나 색 변경처럼 디자이너가 수시로 하는 작은 수정은 품질만큼 속도가 중요해서 자체 모델을 만들었다고 설명했습니다.
왜 중요한가
- 에이전트가 세밀한 수정은 자체 모델에 맡기고, 이미지 생성이나 새 시안은 외부 최상위 모델에 맡기는 분업 구조입니다.
- 처음에는 최상위 모델도 Figma 파일 형식을 이해하지 못했고, 프롬프트로 가르치면 토큰 비용이 컸습니다.
- 자체 모델이 맡는 작업 비중을 두 배 넘게 늘리면서 메시지당 평균 비용을 낮췄습니다.
핵심 내용
- Qwen 3.8 27B를 후속 훈련한 모델이 내부 편집 평가에서 77.8%를 받아 Sol 6.1(76.9%)을 근소하게 앞섰습니다.
- 초기에는 시작 디자인, 합성 수정 요청, 성공한 수정을 묶은 예제로 지도 미세조정(정답 예시를 따라 하게 하는 훈련)을 했습니다.
- 이 방식은 모방에 치우치고 일반화가 약해서, 전문 디자이너의 평가 기준을 보상으로 쓰는 강화학습으로 옮겨 가고 있습니다.
- 품질은 정렬, 대비, 요청 충실도를 따로 채점하고 구조 검사, 시각 판정 모델, 디자이너 보정을 함께 씁니다.
- 베타에서 정식 출시까지 작업 속도는 약 20% 빨라졌고, 사용자가 결과를 되돌리는 비율은 60% 줄었습니다.
HN 반응
- 코딩 에이전트로 HTML과 CSS를 바로 만드는 편이 낫다며 Figma의 앞날을 의심하는 댓글이 많았습니다.
- 자기 에이전트를 쓰고 싶다며, 전용 모델보다 쓸 만한 MCP(외부 AI가 앱을 다루게 하는 연결 규격)를 내놓으라는 요구도 나왔습니다.
전 피그마 직원입니다.
참고로 이 블로그 글은 캔바가 Brush를 발표한 날과 같은 날 나왔는데, 이쪽이 이 분야에서는 더 앞서 있는 것 같습니다. https://www.canva.com/newsroom/news/canva-brush/
피그마가 이 분야를 밀어붙이는 건 반갑습니다. 피그마는 세계 최고 수준의 UI 데이터셋을 가지고 있다고 생각하는데, 대체로 그걸 쓰지도 않고 깔고 앉아 있었거든요. 어디까지 가는지 기대되긴 하지만, LLM 기반 편집 모델뿐 아니라 이미지 모델도 들여다봐야 한다고 생각합니다(저는 피그마를 나와서 이미지 모델 기반 UI 디자인 도구를 시작했으니 편향된 건 맞습니다). 이 영역에서는 이미지 모델이 더 유능하다고 보거든요.
아, 당연히 피그마에 있는 UI 디자인은 전부 피그마 거겠죠. 다른 생각을 할 사람이 어디 있겠어요?
말 그대로 몇 년이 지났는데 피그마가 내놓을 수 있는 최선이 '곧 발표할 거라는 발표'네요
그리고 다른 댓글 말대로 피그마 MCP는 쓰레기예요
피그마에게 자연어로 시킬 수 있는 방법이 있나요?
이 레이어 위로 올려, 이 박스 옮겨, 이런 식으로요.
https://youtu.be/hHwjceFcF2Q?is=GWE74YfHzoEDaiWL
추신: 이 장면에는 흥미로운 구석이 더 있다고 봐도 됩니다. 리클라이너에 풀 죽은 채 늘어져서 싸구려 위스키를 홀짝이며 화면을 보고, 갈라지는 단조로운 목소리만으로 여러 기기에 걸친 픽셀 퍼펙트 레이아웃을 손보는 디자이너들을 미리 보여 주는 복선 말고도요...
https://blog.kenperlin.com/?p=16063
저는 그 블레이드 러너 장면을 정말 좋아해서, AI와 어떻게 일하는지 설명할 때 사람들에게 자주 보여 줍니다.
그러면서 일부 웹사이트의 '로봇이 아닙니다' 위젯이 사실상 보이트-캄프 테스트와 같다는 얘기도 합니다.
그나저나 그 장면의 독일어 번역은 정말 오글거립니다. 마지막에 데커드가 "Gib mir davon eine feste Kopie"라고 하는데, "hard copy"를 직역한 표현이라 독일어를 쓰는 사람은 아무도 그렇게 말하지 않거든요.
이론상으로는 그걸 하라고 있는 게 피그마 에이전트입니다. 다만 솔직히 말하면 제가 퇴사한 뒤에 나와서, 효과가 있는지 말할 만큼 써 보지는 못했습니다.
Codex와 피그마 플러그인을 설치하세요.
저는 작은 수정 말고는 한동안 피그마에서 직접 손으로 편집한 게 없습니다.
저는 제품 디자인에 Codex, Claude Code, GitHub Copilot, Figma의 MCP, Figma Agent, Pen.dev, Paper.design을 여러 조합으로 써 봤습니다. 프런트엔드 개발 경험이 있어서 평균적인 제품 디자이너보다는 기술 쪽에 더 가깝습니다.
제 경험으로는 Figma Agent와 Figma의 MCP는 아쉬운 점이 많습니다. Claude Code 같은 걸 써 본 적 없는 사람에게는 Figma Agent가 분명 유용하겠지만, 잘 작동하려면 제품의 맥락 대부분이 Figma 안에 있어야 합니다.
제품의 맥락이 Figma 밖에 있는 순간부터 자기만의 스타일을 지어내며 어긋나기 시작합니다. 코드에 접근할 수 있는 AI와 MCP를 같이 쓰면 결과가 낫긴 한데, 그래도 제가 어느 페이지를 수정하라고 했는지 기억하는 데 애를 먹습니다.
가이드라인이나 스펙 같은 기능을 추가하고 Figma 파일을 GitHub 저장소와 연결하는 식으로 이 문제를 해결하려는 건 압니다. 하지만 제 불만은, 제가 일했던 회사 상당수가 이런 기능이 지원하는 아주 특정한 기술 스택을 쓰지 않는다는 겁니다. Code Connect와 비슷하다면 더 폭넓게 지원되기까지 몇 년은 걸릴 수 있습니다. 제가 다닌 회사는 전부 C# 기반의 마이크로소프트/Azure 환경이었거든요.
이건 Figma에 대한 더 큰 불만, 즉 초점과 비전이 없다는 점을 해소해 주지 못합니다. 온갖 제품과 기능을 개발해서 전방위로 경쟁하려 하는데, 미래나 제품 디자인에 대해 일관된 이야기가 있는 것 같지 않습니다. 이 업계 사람 대부분이 그런 이야기를 갖고 있지 않은 것도 사실이지만, 그래도 Figma Make, Figma Agent, 코드 레이어를 각각 언제 써야 하는 겁니까?
이들 사이의 경계를 계속 흐리고 있는데, 솔직히 저는 제가 돈 내고 쓰는 AI 에이전트로 필요한 걸 코딩하고, 보관이나 탐색이 필요할 때 그것을 캔버스로 가져오는 쪽에 더 관심이 있습니다.
이 분야에서 최고라고 보시는 건 뭔가요?
저는 이제는 구버전이 된 Claude design 경험이 정말 좋았습니다. 프로젝트가 앤트로픽 서버에 있다는 점만 빼면요.
제가 바라는 이상적인 제품은 Claude design에서 하던 창작 루프를 그대로 하되 실제 컴포넌트 라이브러리와 더 긴밀하게 통합돼서 동기화할 게 아예 없는 겁니다.
Penpot에서 재미를 좀 봤지만 제 실제 컴포넌트를 쓰게 해 주지는 않았습니다.
이제는 프로젝트마다 살아 있는 스타일 가이드 형태로 직접 만들어 볼 생각이 있습니다. 그런데 Claude Design 시스템 프롬프트에 있던 뭔가가 빠져 있어요. 그게 있어서 탐색하고, 마음에 드는 결과에 도달하고, 프로토타입을 공유하는 과정이 그렇게 빠르고 쉽게 느껴졌거든요.
시각 피드백 루프(PNG 스냅샷)가 있는 좋은 MCP와 좋은 문서만 제공하는 데 집중하면 됩니다. 나머지는 최첨단 모델들이 알아서 해결할 겁니다. 자체 모델을 학습시키겠다는 건 무모해 보입니다. 좋은 MCP는 정말 만들기 어렵지 않고, 사람들이 자기네 제품에 AI를 제대로 쓰게 하려면 그것만 하면 됩니다.
그리고 Figma 전용 모델이 에이전트가 쓸 수 있는 여러 모델 중 하나라는 점은 저도 압니다. 그래도 Figma Make 안에서보다 같은 모델을 골라 GitHub Copilot에서 썼을 때 더 나은 결과가 나옵니다.
더 나은 결과란 제 머릿속에 그리던 것에 더 가깝거나, 디자인이 주관적으로 더 낫다는 뜻입니다.
저는 Figma 사용을 완전히 대체했습니다. 각각이 Figma 문서 하나를 흉내 내는
/design/{project}라우트를 두고, 에이전트에게 html/css/react 등으로 만들게 합니다.이제는 Figma에서 뭔가를 그리는 것 자체가 엄청난 방해로 느껴져요.
네, 저는 그 용도로 Claude design을 씁니다. 본질적으로 HTML/JS 아티팩트를 감싼 괜찮은 UI일 뿐이고(곧 그 전용 UI도 없앨 예정이라고 해요), 아주 좋아요. JS로 앱을 만들어 UI를 테스트할 수 있으니 Figma가 왜 필요하겠어요... 어차피 최종 결과물은 HTML과 CSS인데, 왜 굳이 독점 중간 언어로 디자인하나요?
저는 몇 년째 디자인 플레이북을 쓰고 있습니다. 더미 데이터로 거의 모든 컴포넌트를 한 페이지에 펼쳐 놓아서 리스킨 결과를 한꺼번에 볼 수 있는 페이지예요. 운영 환경에서도 그대로 돌리고 있습니다. 어디에도 링크하지 않았지만, 제가 만든 사이트 상당수는 /design/playbook으로 가면 전체를 볼 수 있습니다.
강력히 추천합니다. 솔직히 이런 용도로 .well_known URL 같은 걸 정해야 한다고 생각해요.
이런 걸 온라인 어딘가에서 볼 수 있게 링크해 주실 수 있나요? 꼭 보고 싶어요.
제가 틀렸거나 잘못 알고 있을 수도 있지만, Figma에서 에이전트를 쓰려면 제가 쓰고 싶은 아무 에이전트가 아니라 Figma를 알도록 특별히 학습시킨 에이전트여야 한다는 건 Figma에 큰 약점으로 보입니다.
영리한 경쟁자라면 이 점을 파고들 수 있는 큰 문제라고 생각합니다. 저는 제 에이전트를 쓰고 싶지, 에이전트를 쓰자고 Figma에 돈을 내고 싶지 않습니다.
그리고 Figma가 API 호출을 심하게 조이는 것도 좀 불만입니다. Figma API와 연동하는 모든 제품에서 고객 응대 문제가 생기거든요. 그래서 제가 편향된 걸 수도 있지만, 여기 댓글들을 보면 Figma MCP도 그다지 좋지 않은 것 같습니다. Figma의 장기 전략은 완전한 폐쇄형 생태계로 가는 건가요?
패러다임이 당신 발밑에서 바뀔 겁니다. 우리는 에이전트끼리 소통하는 쪽으로 가고 있어요. 당신의 Claude 에이전트가 서브 에이전트와 대화하는 것과 똑같은 방식으로 Figma 에이전트와 대화하게 될 겁니다.
Figma는 남은 날이 몇 달 정도라고 봅니다. 맨 HTML로 만드는 최첨단 AI의 디자인이 솔직히 놀라운 수준에 이르고 있어요. '자전거 타는 펭귄 SVG' 같은 학습 예제가 틀림없이 뭔가 효과를 낸 겁니다. Opus가 PNG를 긁어 오는 대신 로고 SVG를 한 번에 만들어 냈는데, 픽셀 단위로 완벽했거든요. Claude design은 출시 때는 좀 빈약했지만 지금은 아주 유능합니다.
Figma에 탄탄한 팬층이 있고 다들 자사 내장 AI를 위한 '사후 학습' 모델을 만들고 있으며 Figma가 훌륭한 제품이라는 건 압니다. 하지만 최첨단 모델이 Figma가 자체 중간 포맷으로 하는 일을 사실상 HTML로 해낼 수 있다는 사실은, 몇 번 더 개선되면 Figma를 어디에 쓰게 될지 어디로 귀결될지를 보여 줍니다.
저는 같은 이유로 캔바도 6개월 넘게 안 썼고, 솔직히 둘 다 사용자층이 늘고 있지 않다고 봅니다.
지금의 민망한 AI 도입보다는 뭐든 나을 겁니다. 그나마 쓸 만한 걸 얻는 유일한 방법은 Claude Code를 Fable이나 그만큼 의도가 높은 창에 넣고 동물 제물을 바치는 것뿐입니다.
그런데 서버 쪽 폰트 라이선스 때문에 결국 전부 사실상 쓸모가 없어져요. 비싼 브랜드 폰트를 MCP에서 쓸 수 없어서, 자리표시 폰트를 진짜 폰트로 바꾸는 클라이언트 쪽 Figma 플러그인을 한 겹 더 얹어야 합니다.
뭐라고요?
저는 Figma가 안쓰럽습니다. 정확히는 그곳 직원들이요.
Figma는 훌륭한 제품이고, 제가 과거에 UI 디자인에 썼던 여러 도구보다 훨씬 잘 맞았습니다.
하지만 이 제품의 미래도 보이지 않습니다. 이제 앤트로픽은 디자인 캔버스 비슷한 것을 아티팩트로 생성할 수 있습니다. Figma만큼 좋냐고요? 절대 아니죠. 디자이너가 쓸까요? 잘 모르겠지만, 예전 같으면 고객 작업 때문에 협업할 디자이너를 구해야 했을 상황에서 저한테는 충분히 쓸 만했습니다.
Figma는 이미 배가 떠났습니다. 코딩 에이전트로 직접 프로토타입을 만드는 게 더 쉽고, 더 빠르고, 더 낫습니다.
앞으로 2년 안에 Claude Design이나 다른 LLM 기반 디자인 도구를 상대로 Figma가 어떻게 살아남을지... 정말 궁금합니다.
저는 diffui.ai를 상용 수준 애플리케이션 3개에 써 왔고 돌아본 적이 없습니다. 빠진 기능이 좀 있지만, 꽤 괜찮아 보이는 디자인을 실제로 만들어 내고 그걸 곧바로 코딩 모델에 연결해 주는 능력은 지금까지 제 경험으로는 견줄 데가 없습니다.
그 피드백 어서 주세요! 좋은 말씀도 감사합니다.
-diffui 만든 사람
피드백을 받아 주셔서 감사합니다. 사용자 실수일 수도 있는 부분이 있습니다. 전반적으로 앱이 정말 마음에 들고, 기꺼이 돈을 내고 있습니다(이미 냈고요)!
사이드 스크롤 휠이 없는 마우스를 쓰면 그리드를 어떻게 돌아다니나요? 화면을 20개 넘게 정의해 둘 때가 있는데, 그리드의 빈 곳을 잡고 끌어서 이동하고 싶습니다. 사이드 스크롤 마우스라면 해결되지만, 기본 마우스 휠은 위아래로만 움직여서 사이드 스크롤이 없으면 정말 돌아다닐 수가 없습니다.
왼쪽 패널에 확대 아이콘은 있는데 축소 아이콘이 없습니다.
기존 디자인이나 페이지를 주고 새 버전을 받는 더 깔끔한 방법을 원합니다. 지금도 가능하긴 한데 방식이 (제 생각에는) 엉성합니다. PNG를 그리드에 끌어다 놓고, 새 빈 프롬프트를 만들고, PNG의 출력을 빈 프롬프트의 입력으로 끌어다 놓아야 합니다. 그런 다음 자연어로 "첨부한 이미지"라고 가리키는데, 최소한 프롬프트 창에 그 이미지를 가리킬 방법이나, 이미지를 인식했다는 시각적 표시가 있으면 좋겠습니다. 기존 화면에서 새 화면을 만드는 더 나은 방법이 있다면 알려 주세요.
성능 문제입니다. 생성된 라우트가 40개 넘는 화면이 하나 있는데, 앱 전체입니다. 굉장하지만 M5 Pro가 정말 버벅대기 시작합니다.
화면 전체에 브랜드를 설정하는 방법을 추가해 주실 수 있을까요? 제가 잘못 쓰고 있는 걸 수도 있지만, 새 프롬프트를 만들 때마다 브랜드를 골라야 합니다. 브랜드를 섞어 쓰는 일이 전혀 없으니, 그리드에서 브랜드를 한 번만 설정하면 거기서 시작하는 프롬프트에 모두 적용되면 좋겠습니다.
다양한 스타일의 디자인을 만들도록 돕는 제안 기능을 넣으면 어떨까요? 저만 그럴 수도 있지만, 여러 앱에 걸쳐 써 봤고 디자인은 훌륭한데 개선하거나 변화를 주는 방법에 대한 제안을 받고 싶습니다. 가끔 "모던하고 정말 멋지게 해 줘" 같은 말을 하는데, 맞는 용어가 아니라는 건 압니다. 앱을 만들 때 업계 표준 용어와 아이디어, 방향성(예를 들어 레트로 픽셀풍)이 있을 텐데, 그런 제안이 어떤 식으로든 구현되면 멋질 것 같습니다. 어떻게 해야 할지는 잘 모르겠지만 아주 도움이 될 것 같습니다.
최근에 Teams를 추가하신 걸 봤습니다. 저희 회사에서는 이게 큰 걸림돌이어서 통과시키려고 싸워야 했습니다. 앱으로 추가해서 OKTA를 통해 로그인할 수 있도록 OKTA 연동이 필요합니다. 지금은 계정이 하나뿐인데 저희에게는 매우 이례적입니다. 하지만 앱이 워낙 좋아서 개인 단위로 접근 권한을 얻도록 밀어붙였습니다.
Figma가 LLM 기반 디자인 도구인데요.
쓴 교훈을 배우는 데 3... 2... 남았네요.
딜런 필드가 얼마 전에 Llama 70B 모델로 놀라운 일을 해냈다고 올린 건 알지만, AI 학습 분야는 완전한 뱀 구덩이예요.
그래도 뭐, 태울 돈이 있으니까요.
쓴 교훈을 오해하고 계시네요. 이 경우에 적용된다고 생각하시면 틀렸습니다. '최첨단 LLM이 항상 더 낫다'는 얘기가 아니라 '연산량과 데이터에 따라 확장되는 알고리즘이 결국 인간의 이해에 기반한 알고리즘을 능가한다'는 얘기입니다.
특정 작업을 더 잘하도록 오픈소스 LLM을 강화학습으로 파인튜닝하는 것은 쓴 교훈에 전혀 어긋나지 않습니다.