Figma AI 도구 공부 정리 | 아이디어에서 제품까지
Figma 블로그에서 AI 도구로 제품 개발 흐름이 어떻게 바뀌고 있는지 사례 4개를 정리해봤다.
Figma 블로그에서 흥미로운 글이 하나 올라왔다. AI 도구를 써서 아이디어에서 제품까지 가는 방식이 어떻게 달라지고 있는지, 조직 4개의 사례를 모아놓은 글이었다.
처음엔 그냥 홍보글이겠지 싶었는데, 읽다 보니 흐름이 좀 다른 것 같아서 정리해봤다.
1️⃣ 이게 뭐냐?
이 글의 핵심은 Figma가 제품 개발 흐름 전반에 AI를 끼워 넣으려 한다는 거다. 구체적으로는 Figma Make, Figma AI Agent, MCP 서버 같은 기능들이 연결되는 방식을 4가지 사례로 보여주는 내용이었다.
사례들을 보면 대략 이런 흐름이다. 기획 단계에서 먼저 코드 기반 프로토타입을 만들고, 그걸 캔버스로 가져와서 팀이 같이 보면서 방향을 맞추는 식이다. 기존에는 디자인 → 문서화 → 개발로 순서대로 가던 걸, 프로토타입을 앞당겨서 일찍 맞추는 방식으로 바꾼 것처럼 보였다.
Make Kits나 Make Attachments 같은 기능은 Figma Make에 디자인 시스템 정보나 브랜딩 가이드를 미리 넣어두는 방식이었다. AI한테 프롬프트를 입력할 때 맥락을 같이 넘겨주는 거랑 비슷한 개념인 것 같았다.
MCP 서버는 Figma의 디자인 토큰이나 컴포넌트 정보를 Cursor 같은 AI 코딩 도구에 직접 연결하는 방식인 것 같았다. 디자인 파일에서 뭔가 바뀌면 코딩 환경에서도 그 변경 사항을 참조할 수 있게 해주는 거라고 이해했다.
2️⃣ 내가 든 생각
공부하면서 가장 흥미로웠던 건 “프로토타입 우선”이라는 방향이었다. 기존 프로세스에서 프로토타입은 좀 나중 단계에 나오거나, 초반에 쓰더라도 더미 데이터로 만든 가벼운 거였다. 그런데 한 사례를 보면 AI로 이틀 만에 구현 가능한 수준의 프로토타입을 만들어서 이해관계자를 설득하는 데 썼다고 했다.
👉🏻 말이나 문서보다 돌아가는 것을 먼저 보여준다는 게, 디자이너 입장에서 꽤 공감이 됐다.
Figma MCP를 써서 컴포넌트와 토큰을 코딩 환경에 자동으로 연결했다는 부분도 인상적이었다. 디자이너-개발자 사이에서 생기는 맥락 손실 문제를 도구로 해결하려는 시도처럼 읽혔다. 내가 이해한 바로는, 지금은 디자인 파일을 보면서 개발자가 직접 값을 옮겨 써야 하는 작업을 자동화하는 거다.
💡 여기서 드는 질문? 디자인 시스템이 잘 정리되지 않은 상태에서도 MCP가 의미 있게 작동하는 건지, 아니면 이미 잘 구조화된 파일이 있어야 하는 건지 — 문서만 봐서는 잘 모르겠다.
3️⃣ 디자이너 입장에서 보면
Figma AI Agent가 레이아웃 변형을 대량으로 만들어준다는 사례가 있었는데, 처음엔 좀 과장처럼 들렸다. 근데 IA 문제를 풀 때 먼저 옵션 공간을 넓게 훑는 방식이라고 보면 이해가 됐다. 손으로 그리는 스케치 단계를 AI가 훨씬 빠르게 대신하는 거라는 느낌이었다.
그게 결국 디자이너가 하는 일의 중심이 “어떤 걸 만들지 판단하는 것”으로 옮겨가는 방향이랑 연결되는 것 같아서, 좀 더 생각해봐야겠다는 인상이 남았다.
⭐️ 마지막으로, 디자인 도구 공부하면서 느낀 점
정리해보니 이 글에서 공통적으로 나오는 패턴이 한 가지 있었다. 도구들이 각자 잘하는 걸 연결하는 방식으로 진화하고 있다는 거다. Figma가 모든 걸 직접 다 하려는 게 아니라, MCP나 Make Kits처럼 외부 도구와 정보를 주고받는 구조를 만드는 쪽에 힘을 쏟는 것 같았다. 공부 끝에 남은 건 “Figma가 어떤 도구가 되려는 걸까”라는 질문 하나였다.