AI가 Figma의 캔버스 모델을 흔들고 있어요

AI가 Figma의 캔버스 모델을 흔들고 있어요

AI 뉴스 썸네일

Figma는 오랫동안 제품 디자인의 기본 작업 공간이었어요. 그런데 AI 코딩 도구가 기획, 시안, 구현 사이의 거리를 줄이면서 디자인 파일의 역할도 다시 묻게 됐어요.

728x90

Config 2026에서 Figma가 코드 레이어, 모션, 셰이더, 에이전트 흐름을 강조한 이유도 여기에 있어요. 더 예쁜 캔버스가 아니라, 코드와 AI가 중심에 가까워진 제품 개발 과정에서 디자인 의도가 계속 살아남게 만드는 쪽으로 방향을 잡고 있어요.

핵심 요약

구분	핵심	왜 볼 만한가요
디자인 도구	Figma가 캔버스를 코드, 모션, 에이전트 흐름으로 넓히고 있어요	디자인 파일 하나가 제품 개발의 중심이라는 전제가 약해지고 있어요
AI 코딩	Claude Code와 Claude Design 같은 도구가 의도에서 실행 코드로 바로 이어지는 흐름을 만들고 있어요	정적 목업과 핸드오프가 필수 단계인지 다시 따져 보게 해요
비즈니스 모델	Figma의 좌석 기반 협업 모델이 압박을 받고 있어요	엔지니어와 PM이 코딩 환경에서 바로 UI를 만들고 검수하면 수동 좌석 가치가 줄 수 있어요
디자인 시스템	토큰, 구조화된 메타데이터, 코드 연결성이 더 중요해지고 있어요	앞으로의 디자인 자산은 파일보다 재사용 가능한 의도에 가까워질 수 있어요

1. Figma의 경쟁 상대가 디자인 도구에서 AI 워크플로로 바뀌고 있어요

UX Collective의 글은 Config 2026을 Figma의 방향 전환을 보여 주는 장면으로 읽어요. Figma는 코드 레이어, Figma Motion, 셰이더, 에이전트 기능을 캔버스 안으로 끌어오며 기존 디자인 파일의 역할을 넓히고 있어요. 원문은 이 움직임을 단순 기능 추가보다 큰 문제로 봐요. AI가 제품 개발을 코드 에디터와 에이전트 환경 쪽으로 당기면, 디자이너가 픽셀을 배치하고 엔지니어가 다시 구현하는 순서 자체가 느슨해지기 때문이에요. 1

Figma의 기존 강점은 여러 직군이 같은 파일에 들어와 보고, 댓글을 달고, 검수하는 협업 구조였어요. 이 구조는 좌석 기반 매출과도 이어져요. 하지만 엔지니어가 코딩 환경에서 바로 UI를 만들고, PM이 에이전트에게 의도를 설명해 작동하는 화면을 얻는다면 이야기가 달라져요. 모든 사람이 Figma 파일 안에 들어와야 하는 이유가 줄어들 수 있어요. 2

그래서 Figma의 과제는 캔버스를 더 화려하게 꾸미는 일이 아니에요. 디자인 의도, 컴포넌트 논리, 구현 정렬을 다른 도구에서도 유지하게 만드는 일이 더 중요해졌어요. Figma Make의 로컬 코드 연동과 Code Connect 같은 흐름은 이 방향에 가까워요. 디자인 파일을 최종 산출물이 아니라 제품 개발 흐름의 한 레이어로 바꾸려는 시도에 가까워요. 3

AI 코딩 도구가 바꾸는 기준

Claude Code는 코드베이스 안에서 여러 파일을 읽고 수정하는 방식으로 제품 구현에 직접 닿아요. 여기에 Claude Design처럼 브랜드와 디자인 의도를 다루는 기능이 붙으면, 팀은 정적 시안을 거치지 않고도 더 빠르게 작동 화면을 만들 수 있어요. 완성도 높은 제품을 바로 만든다는 뜻은 아니에요. 다만 초기 아이디어를 움직이는 화면으로 바꾸는 속도가 달라지면, 정적 목업을 보는 감각도 달라져요. 4

이 변화는 디자이너가 사라진다는 말과 달라요. 오히려 디자인의 무게중심이 파일 편집에서 의도 설계로 옮겨갈 수 있다는 쪽에 가까워요. 버튼의 색과 간격만 맞추는 일이 아니라, 어떤 컴포넌트가 어떤 상태를 갖고, 어떤 맥락에서 재사용돼야 하는지 정리하는 능력이 더 중요해져요.

파일보다 이동 가능한 구조가 중요해져요

원문이 짚은 또 하나의 축은 이식성이에요. Photoshop에서 Sketch로, Sketch에서 Figma로 넘어온 흐름을 보면 특정 파일 포맷의 힘은 오래가도 영원하지 않았어요. 팀이 더 빠른 제작 방식과 더 나은 협업 방식을 원하면 작업 공간은 바뀌었어요.

AI 시대의 디자인 자산도 비슷한 압박을 받아요. `.figma` 파일 안에서만 의미가 살아 있는 레이어보다, 토큰과 컴포넌트 구조, 접근성 규칙, 인터랙션 의도가 코드와 브라우저, 에이전트 사이를 오갈 수 있어야 해요. Figma Motion이 CSS, JSON, React, MP4, WebM, 애니메이션 SVG, GIF 같은 내보내기를 강조하는 것도 이 흐름과 맞닿아 있어요. 5

Figma가 강한 이유는 여전히 분명해요. 많은 팀의 협업 습관이 이미 Figma에 들어가 있고, 디자인 시스템과 플러그인 생태계도 큼직하게 자리 잡았어요. 그래서 당장 캔버스가 밀려난다고 보기는 어려워요. 다만 팀의 가장 중요한 시간이 어디에서 쓰이는지는 바뀔 수 있어요. 제품의 진짜 결정이 코드 에디터와 에이전트 대화 안에서 더 많이 일어난다면, Figma는 중심 작업 공간이 아니라 여러 도구 중 하나가 될 수 있어요.

왜 중요한가요

이 뉴스는 디자인 도구 업데이트보다 넓은 문제를 건드려요. AI 코딩 도구가 강해질수록 제품 팀은 “시안을 만들고 넘긴다”는 오래된 순서를 덜 당연하게 보게 돼요. 디자이너에게는 Figma 숙련도만큼 디자인 의도를 구조화하고 코드와 연결하는 능력이 중요해질 수 있어요. 개발자에게는 AI가 만든 UI를 검수할 때 디자인 시스템, 접근성, 상태 관리 기준을 더 잘 알아야 하는 부담이 생겨요. 2

서비스 운영자와 기획자에게도 의미가 있어요. AI로 화면을 빠르게 만드는 일은 쉬워져도, 제품 전체가 일관된 경험을 유지하는 일은 자동으로 해결되지 않아요. 팀이 토큰, 컴포넌트, 브랜드 규칙, 코드 구현을 한 흐름으로 관리하지 못하면 빠른 생성은 곧 빠른 혼란이 될 수 있어요.

Figma의 다음 경쟁은 “Sketch보다 좋은가”가 아니에요. 제품 팀이 AI 에이전트와 코드 기반 도구를 쓰는 상황에서도 디자인의 판단과 구조를 붙잡을 수 있느냐에 가까워요. 그래서 이번 글은 Figma 사용자만 볼 뉴스가 아니에요. AI로 제품을 더 빨리 만들려는 팀이라면 디자인 파일 바깥에서 디자인이 어떻게 살아남는지 같이 봐야 해요.

참고 자료

1. AI 시대, Figma를 다시 생각하다 — GeekNews
2. Rethinking Figma in an AI world — UX Collective
3. Figma Make, now on your local code — Figma Blog
4. Claude Design now stays on brand for daily work — Anthropic
5. Introducing Figma Motion: Your canvas now has a timeline — Figma Blog