개요
2026년 5월 Figma Agent가 베타 버전으로 출시되었습니다.
MCP 없이 Figma 디자인 내에서 직접 디자인을 생성하고 심지어 컴포넌트화 + 변수/스타일 바인딩까지 해줍니다.
그래서 Figma MCP 사용기에 이어서 다시 0->1 디자인 시스템 구축 워크플로우를 연구해보았습니다.
베타 버전 기간 동안 Professional 시트에서 크레딧 소모 없이 무제한 무료로 제공됩니다. 덕분에 부담 없이 실험할 수 있었습니다.
워크플로우
기존 워크플로우는 이랬습니다.
- PRD, IA, Screen Flow Chart, 디자인 원칙/토큰 생성
- 아이디어 화면 생성
- 와이어프레임 수동 작성
- 완전한 디자인 생성
- 수동 컴포넌트화 및 토큰 바인딩
새로 나온 Figma Agent는 2~5 작업을 수행할 능력이 있습니다.
기존 워크플로우 대비 변경 사항
컴포넌트 및 토큰
Figma Agent는 기존 Figma MCP보다 API 활용이 훨씬 강력하기 때문에, 컴포넌트 생성이나 변수/스타일 생성을 직접 하지 않고 Figma Agent에게 맡길 것입니다.
다만 컴포넌트/토큰의 SSOT는 기존과 같이 LLM이 프로젝트의 특성에 맞게 작성한 명세 문서를 사용할 것입니다.
와이어프레임
기존 워크플로우에서 와이어프레임을 작성했던 이유는 Figma Make 결과물의 품질을 높이기 위해서였는데, 이번에는 조금 다르게 해보려고 합니다.
와이어프레임을 프레임으로 생성하는 대신, 페이지 디자인 명세 문서를 만들어서 Figma Agent가 UI 생성 시 이를 참고하도록 해보겠습니다.
컴포넌트 먼저 vs 페이지 먼저
기존 워크플로우에서는 페이지를 먼저 생성하고 거기서 컴포넌트를 수동으로 추출하였는데, Figma Agent는 컴포넌트화 뿐만 아니라 기존 컴포넌트 활용에도 큰 장점이 있으니 이를 활용하여 컴포넌트 먼저 생성하는 방식도 시도해보겠습니다.
1. 컴포넌트 먼저(Bottom-up)
먼저 LLM으로 상세한 컴포넌트/페이지 명세를 생성하였습니다. 페이지 명세는 구성 요소로 컴포넌트 명세의 컴포넌트를 명시적으로 참조합니다.
디자인 원칙과 컴포넌트 명세를 첨부하고 모든 컴포넌트를 순차적으로 생성하도록 지시한 다음, 마찬가지로 페이지 명세를 바탕으로 모든 페이지를 순차적으로 생성할 것입니다.
결과
컴포넌트 자체는 무난하게 생성해주었습니다. 일부 컴포넌트는 컨텍스트를 제대로 따르지 못해 수정 작업이 추가로 필요했지만, 전체적으로 못써먹을 정도는 아니었습니다.
문제는 페이지 생성입니다. 페이지 명세가 부실한 건지, 에이전트가 기존 컴포넌트 활용에만 치중하여 페이지 자체의 UI를 완성도 있게 구성하는 것을 어려워합니다.
결국에는 컴포넌트 활용은 페이지 구성의 보조 역할일 뿐, 가장 중요한 것은 에이전트가 자유롭게 페이지를 채워나갈 수 있어야 합니다.
혹은 Bottom-up 방식을 제대로 쓰려면, 처음부터 컴포넌트 구조와 와이어프레임을 만드는 게 낫다고 생각합니다. 그러나 결국 레이아웃을 직접 구성할 능력이 있어야 하고, 시간과 노력이 더 많이 들 것입니다.
2. 페이지 먼저(Top-down)
컴포넌트 명세를 건너뛰고 페이지 명세만 먼저 생성합니다. 반드시 페이지를 어떻게 구성할지 상세한 UI 묘사를 포함해야 합니다.
생성한 페이지를 바탕으로 공통 컴포넌트를 추출하고, 컴포넌트화 및 변수/스타일 바인딩을 지시할 것입니다.
결과
에이전트가 처음 생성한 페이지를 가이드로 사용하니, 이후 순차 작업에서 일관성있는 디자인으로 페이지를 작성할 수 있었습니다.
컴포넌트 재사용보다 페이지 레이아웃에 집중할 때 결과물이 훨씬 괜찮은 것으로 보입니다.
이렇게 만든 페이지들의 스타일과 레이아웃을 직접 검수하고, 추가 수정 작업으로 완성도를 개선해나갔습니다.
페이지가 어느 정도 완성되고 나서 컴포넌트화를 진행했습니다.
무작정 정리를 명령하기보다는, 먼저 공통 패턴을 찾아서 후보로 만들고 이를 눈으로 직접 확인하는 방법이 체계화에 더 유리했습니다.
공통 이슈
컨텍스트 오염
베타 버전이라 여러 이슈가 있습니다. 속도는 둘째 치고 가벼운 모델을 사용하는 것인지, 컨텍스트가 쉽게 오염됩니다.
예를 들어 친근한 UX를 위해 '~요' 체를 사용하도록 지시하면, 말 그대로 모든 단어와 문장에 '~요'를 붙일 때도 있습니다.
페이지 프레임
페이지를 생성할 때 항상 최상위 프레임을 mockup 형태로 그리는데, 이게 매번 모양도 다르고 배경색을 넣을 때도 있어서 나중에 일일이 다 수정해야 합니다. 명확하게 지시하지 않으면 항상 기본 동작으로 이렇게 생성하는데, 아마 기본 스킬에 관련 내용이 포함되어 있는 것 같습니다.
병렬 작업 시 일관성
컨텍스트 경량화를 위해 페이지 단위 병렬 생성을 지시했을 때, 디자인 원칙이나 명세와는 별개로 매번 다른 스타일의 결과물이 생성됩니다.
결국 일관성을 위해서는 컨텍스트 오염을 감수하고 모든 페이지를 한번에 생성하거나, 2~3개씩 단계적으로 생성하면서 수정을 반복하고, 이전 페이지의 스타일을 참고하도록 직렬로 작업해야 합니다.
오토 레이아웃과 변수 바인딩
Figma MCP 만큼은 아니지만, 오토 레이아웃과 변수/스타일 활용에 실수가 잦습니다.
예를 들어 세로 정렬로 충분한 리스트 레이아웃에서 뜬금없이 그리드를 사용한다든가, 프레임 높이를 하드코딩해서 오토 레이아웃을 의미 없게 만들기도 합니다.
변수나 스타일 바인딩은 그나마 잘하지만, 여전히 디자인 시스템에 존재하지 않는 토큰을 창조하여 하드코딩하는 때가 있습니다.
이 부분에서는 Figma Agent나 Figma MCP 모두 Figma API를 사용하기 때문에, 어쩌면 API나 노드 자체가 복잡하고 무겁기 때문에 AI가 어려워 하는 것으로 짐작됩니다.
오토 레이아웃은 직접 수정해주는 것이 정신건강에 좋았으며, 변수/스타일 바인딩은 별도로 지시하면 깔끔하게 처리해주었습니다.
디자인 퀄리티
UI 생성 결과물 자체는 Figma Make와 비슷한 수준입니다. 여전히 레퍼런스가 없으면 AI 생성의 한계가 보입니다.
그래서 Figma Agent의 진짜 강점은 UI/UX 디자인 자체보다는 디자인 시스템 자동화에 가깝다고 생각합니다.
이전 포스트에서도 언급했지만, 사실 어떤 AI든 사용자 입맛에 맞는 디자인을 생성하려면 레퍼런스가 반드시 필요합니다. 다만 에이전트마다 기본 디자인 스킬이 있는데, Figma Agent나 Figma Make의 스타일이 Cursor 같은 다른 에이전트 대비 뛰어나다고 생각되지는 않습니다.
정리
Figma Agent가 잘하는 것
- 변수/스타일 생성
- 컴포넌트화 후보 탐색 및 컴포넌트 생성
- 컴포넌트 속성 및 베리언트 관리
- 여러 페이지에 인스턴스 적용
- 하드코딩을 변수/스타일로 대체
- 이미지/텍스트 교체
- 소규모 페이지 생성
Figma Agent가 잘 못하는 것
- 대규모 페이지 생성
- 일관성있는 레이아웃
- 도형으로 복잡한 일러스트/아트워크 생성하기
- 벡터 아이콘 생성 및 리사이징
- 엄격한 오토 레이아웃
- 프레임 생성과 동시에 변수/스타일 바인딩하기
맺음말
전체적으로 나쁘지 않았습니다. 이전에 Figma Make와 MCP를 붙잡고 한 달동안 사투했던 것을 생각하면 Figma API 활용에 있어 굉장히 큰 도약이고, 편의성도 좋아 긍정적인 첫인상을 주었습니다.
다만 디자인을 완성하려면 여전히 사람의 손길이 필요합니다. 상술한 Figma Agent의 단점들은 단순히 에이전트에게 개선 작업을 더 많이 지시하거나 토큰을 쏟아부어서는 해결되지 않기 때문입니다.
정식 버전이 기대되는 부분입니다. 이제는 Figma에서도 괜찮은 퀄리티의 디자인 시스템을 어렵지 않게 생성이 가능하니, 풀스택으로 더욱 정교한 제품을 만들 수 있게 되었습니다.