Figma AI 자동 레이아웃 혁신: Config 2025에서 공개된 Grid, MCP 서버, Make까지 총정리

드디어 Figma가 본색을 드러냈습니다. 2025년 5월 6일부터 8일까지 열린 Config 컨퍼런스에서 발표된 Figma AI 자동 레이아웃 기능은 디자인 워크플로우의 근본적인 변화를 예고하고 있습니다. 중첩된 Auto Layout 프레임을 3~4단계로 쌓아가며 레이아웃을 만들어본 경험이 있는 디자이너라면, 이번 업데이트가 왜 “게임 체인저”로 불리는지 직접 확인해보실 시간입니다.

Figma AI 자동 레이아웃의 핵심: Grid가 모든 것을 바꿉니다

Figma Config 2025에서 가장 큰 환호를 받은 기능은 단연 Grid입니다. 기존 Auto Layout이 한 방향(가로 또는 세로)으로만 정렬할 수 있었다면, 새로운 Grid는 행과 열을 동시에 제어하는 2D 레이아웃을 지원합니다. CSS Grid에 익숙한 개발자라면 바로 이해할 수 있는 구조이며, 디자이너에게는 그동안 불가능했던 직관적인 2차원 배치가 가능해진 것입니다.

실무에서 이것이 의미하는 바는 명확합니다. 그동안 벤토 박스(Bento Box) 레이아웃이나 반응형 카드 그리드를 만들려면 Auto Layout을 3~4단계로 중첩해야 했습니다. 가로 프레임 안에 세로 프레임을 넣고, 그 안에 또 가로 프레임을 배치하는 복잡한 구조가 필요했죠. 이제 Grid 하나면 됩니다. 행과 열을 정의하고 간격 값을 설정하면 Figma가 나머지를 처리합니다.

Figma 공식 블로그에 따르면, Grid는 반응형 브레이크포인트도 지원합니다. 데스크톱에서는 4열, 태블릿에서는 2열, 모바일에서는 1열로 자동 전환되는 레이아웃을 브라우저 내보내기 없이 Figma 안에서 바로 확인할 수 있습니다. Forrester의 분석에서도 Grid가 “수년간 디자이너들을 좌절시켰던 복잡한 중첩 Auto Layout 해결책을 제거한다”고 평가했습니다. 디자인 시스템 팀이 수십 개의 레이아웃 변형을 관리하는 환경에서, 이것만으로도 스프린트당 수 시간의 유지보수 작업을 절약할 수 있습니다.

Suggested Auto Layout: AI가 디자인 구조를 자동으로 잡아줍니다

Grid가 레이아웃의 “어떻게”를 해결했다면, Suggested Auto Layout은 “언제”를 다룹니다. 구체적으로 말하면, 디자이너가 자유롭게 탐색을 마치고 이를 정돈된 프로덕션 레디 컴포넌트로 변환해야 하는 그 지루한 순간을 자동화하는 기능입니다.

작동 방식은 이렇습니다. 캔버스 위의 오브젝트 그룹을 선택하면, Figma AI가 공간적 관계(정렬, 간격 패턴, 시각적 위계)를 분석합니다. 그리고 적절한 패딩과 간격 값이 설정된 Auto Layout 프레임으로 자동 감싸줍니다. 디자인 의도를 이해하는 지능형 “정리” 버튼이라고 생각하면 됩니다.

일부에서는 이 기능이 기존 커뮤니티 플러그인들이 제공하던 것과 유사하다고 지적했습니다. 타당한 비판이지만, 핵심은 네이티브 통합에 있습니다. 퍼스트 파티 기능은 Figma의 렌더링 엔진, 컴포넌트 메타데이터, 디자인 토큰 인프라에 서드파티 플러그인이 접근할 수 없는 수준으로 접근합니다. 결과적으로 더 빠른 성능, 더 높은 정확도, 그리고 배리언트나 컴포넌트 속성 같은 다른 Figma 기능과의 완벽한 호환성을 제공합니다.

와이어프레임이나 탐색 결과를 디자인 시스템 컴포넌트로 정기적으로 변환하는 팀이라면, Suggested Auto Layout이 기존 30분짜리 정리 작업을 몇 번의 클릭으로 압축할 수 있습니다. 이 시간 절약은 디자인 팀 전체에 걸쳐 빠르게 복리 효과를 냅니다.

Code Connect와 MCP 서버: 디자인-개발 간극을 AI로 메웁니다

디자이너와 개발자 사이의 핸드오프 문제는 업계의 오랜 숙제였습니다. Figma는 이번 Config에서 두 가지 AI 기반 도구로 이 문제에 정면 도전합니다.

Code Connect UI는 AI를 활용하여 Figma 컴포넌트와 GitHub 코드 파일을 자동으로 매핑합니다. 디자인 시스템에서 버튼 컴포넌트를 선택하면, AI가 해당 버튼의 실제 React, Vue, 또는 SwiftUI 구현체를 코드베이스에서 자동으로 찾아 연결합니다. Figma의 공식 문서에 따르면, 이를 통해 디자인 토큰, 레이아웃 제약 조건, 컴포넌트 속성이 개발 환경에 직접 전달됩니다.

이것의 실질적인 의미는 큽니다. 개발자가 디자인 스펙을 해석하고 기존 컴포넌트와 수동으로 매칭하는 대신, AI가 그 매핑을 자동으로 처리합니다. 대규모 코드베이스에서 자주 발생하는 “해당 컴포넌트가 이미 있는 줄 몰라서 처음부터 새로 만들었다” 문제를 근본적으로 줄여줍니다.

MCP(Model Context Protocol) 서버는 이 개념을 한 단계 더 발전시킵니다. 디자인 시스템 전체(토큰, 레이아웃 제약, 컴포넌트 구조, 사용 가이드라인)를 AI 에이전트가 읽고 쓸 수 있는 표준화된 인터페이스로 노출합니다. 이것은 Figma 전용 플러그인이 아닙니다. Claude, Cursor 등 MCP 호환 AI 도구가 코드를 생성하거나 디자인 결정을 내릴 때 디자인 시스템 맥락을 이해할 수 있게 해주는 개방형 프로토콜입니다.

Figma의 MCP 관련 블로그에서는 AI가 디자인-코드 간 불일치를 감사하고, 디자인 토큰 업데이트를 제안하며, AI 생성 결과물 전반에 걸쳐 브랜드 일관성을 유지하는 시나리오를 구체적으로 설명합니다. AI 기반 개발 워크플로우에 투자하고 있는 조직이라면, MCP 서버가 Config 2025에서 전략적으로 가장 중요한 발표일 수 있습니다.

Figma Make와 신규 도구들: AI 시대의 디자인 생태계 확장

Figma Make는 텍스트 프롬프트를 입력하면 프로토타입을 자동 생성하는 AI 도구입니다. “장바구니 요약, 결제 양식, 주문 확인이 포함된 이커머스 체크아웃 플로우”라고 입력하면 적절한 컴포넌트와 레이아웃이 포함된 프로토타입이 생성됩니다. Vercel의 v0나 Lovable 같은 프롬프트-투-UI 도구가 이미 시장에 존재하지만, Figma Make는 디자인 시스템과의 네이티브 통합이라는 결정적 차별점을 갖습니다. 생성된 프로토타입이 제네릭 UI가 아닌 팀의 기존 컴포넌트와 토큰을 활용합니다.

Config 2025에서는 이 외에도 여러 주목할 만한 도구가 공개되었습니다:

• Figma Sites — Figma에서 직접 웹사이트를 퍼블리싱하는 기능입니다. 디자인에서 라이브 사이트까지 한 번에 이동할 수 있지만, Forrester는 접근성(Accessibility) 관련 우려를 제기했습니다. 디자인-투-퍼블리시 워크플로우가 WCAG 준수를 충분히 강제하지 않을 수 있다는 점이 핵심 우려입니다.
• Figma Buzz — 마케팅 콘텐츠 제작 도구로, 브랜드 팀을 위한 Canva 대항마로 포지셔닝됩니다. 템플릿 기반의 빠른 콘텐츠 생성에 초점을 맞추고 있습니다.
• Figma Draw — 자유형 드로잉 도구로, Figma의 정밀 중심 도구가 다루지 못했던 초기 아이디에이션 “냅킨 스케치” 단계를 지원합니다.

AI 시대에 디자인이 더 중요해지는 이유: 업계 전문가들의 분석

Forrester는 Config 2025를 분석하면서 설득력 있는 테제를 제시했습니다. “AI가 코드 생성을 민주화할수록, 디자인이 핵심 차별화 요소가 된다”는 것입니다. 누구나 AI에게 기능적인 코드를 프롬프트할 수 있게 되면, 사용자 경험과 시각적 디자인의 품질이 성공적인 제품과 잊히는 제품을 가르는 결정적 요소가 됩니다.

Figma의 전략은 이 관점과 정확히 일치합니다. Grid, Suggested Auto Layout, Code Connect, MCP 서버, Make — 모든 주요 발표가 AI를 디자이너의 대체재가 아닌 증폭기(Amplifier)로 포지셔닝합니다. AI가 레이아웃을 구조화하고, 컴포넌트를 코드에 매핑하며, 디자인 시스템을 다른 AI 도구에 노출하고, 프롬프트로 프로토타입을 생성합니다. 하지만 디자인 결정, 크리에이티브 방향, 사용자 경험 전략은 여전히 인간의 영역에 남아있습니다.

다만 Figma Sites의 접근성 문제는 반드시 주시해야 합니다. Forrester가 지적한 것처럼, 디자인 도구에서 직접 퍼블리싱하는 과정에서 WCAG 같은 웹 접근성 표준이 충분히 반영되지 않을 수 있습니다. 이는 6월 정식 롤아웃 전까지 Figma가 해결해야 할 과제이며, 디자인 커뮤니티가 Figma에 책임을 물어야 할 부분입니다.

2025년 6월부터 순차적으로 롤아웃되는 이 기능들은 디자인 워크플로우의 진정한 패러다임 전환을 의미합니다. Grid가 레이아웃 아키텍처를 간소화하고, AI가 디자인 의도를 프로덕션 레디 컴포넌트로 구조화하며, MCP 서버가 디자인 시스템을 인간 디자이너와 AI 에이전트 사이의 공유 언어로 만들어줍니다. 디자인 시스템을 운영하거나 AI 지원 개발 파이프라인에 투자하고 있는 팀이라면, 지금이 이 도구들이 워크플로우에 어떻게 통합될 수 있는지 평가를 시작할 때입니다.