Figma

MCP 핵심 요약: 컨텍스트의 중요성과 활용 방법 | Figma 블로그 (새 탭에서 열림)

Figma가 Anthropic의 Model Context Protocol(MCP)을 도입하여 AI 에이전트가 디자인 캔버스를 직접 읽고 이해할 수 있는 환경을 구축했습니다. 이를 통해 개발자와 디자이너는 LLM이 디자인 파일의 레이어 구조와 속성을 실시간으로 파악하여 코드를 생성하거나 디자인 가이드를 작성하도록 명령할 수 있습니다. 결과적으로 AI는 단순한 채팅 도구를 넘어 디자인 도구 내부 데이터에 접근하여 실질적인 작업을 수행하는 협업 파트너로 진화하게 되었습니다. ### Model Context Protocol(MCP)의 통합과 역할 * Figma는 Anthropic이 공개한 오픈 표준인 MCP를 활용하여 AI 에이전트와 Figma 데이터 간의 직접적인 연결 고리를 마련했습니다. * 기존에는 사용자가 스크린샷을 찍어 AI에게 전달해야 했으나, 이제는 AI 에이전트가 직접 Figma API를 통해 디자인 객체의 메타데이터에 접근할 수 있습니다. * 이를 통해 AI는 레이어의 계층 구조, 오토 레이아웃(Auto Layout) 설정, 색상 및 타이포그래피 스타일 등 시각적 정보 너머의 세부 기술 정보를 정확하게 파악합니다. ### AI 에이전트의 디자인 데이터 활용 방식 * AI 에이전트는 특정 페이지나 프레임을 탐색하고, 디자인 시스템 내 구성 요소(Component)의 속성과 사용 현황을 분석할 수 있습니다. * 디자인 파일 내의 특정 영역을 기반으로 React, Tailwind CSS 등 실제 구현에 필요한 프론트엔드 코드를 고도로 정확하게 추출하는 것이 가능해집니다. * 복잡한 캔버스 안에서 특정 텍스트나 디자인 요소를 검색하고, 디자인 시스템 준수 여부를 확인하는 등 자동화된 감사(Audit) 업무를 수행할 수 있습니다. ### 워크플로우 효율화와 실무적 변화 * 디자인에서 개발로 넘어가는 핸드오프(Handoff) 과정에서 발생하는 정보 손실을 최소화하고, 반복적인 UI 구현 작업을 자동화합니다. * 디자인 변경 사항을 추적하여 자동으로 요약 문서를 작성하거나, 디자인 사양(Spec)에 기반한 릴리스 노트를 생성하는 등 문서화 공수를 획기적으로 줄여줍니다. * Claude Desktop과 같은 MCP 지원 클라이언트를 사용하는 사용자는 Figma MCP 서버를 연결함으로써 별도의 개발 없이도 자신의 디자인 데이터를 AI 모델의 컨텍스트로 즉시 활용할 수 있습니다. 이제 개발자와 디자이너는 Figma MCP 서버를 활용해 자신의 디자인 파일을 AI의 지식 베이스로 전환할 수 있습니다. 특히 복잡한 디자인 시스템을 운영하거나 디자인 기반의 코드 작성이 잦은 팀이라면, AI 에이전트에 Figma 접근 권한을 부여하여 워크플로우의 병목 구간을 해결해 보기를 권장합니다.

Figma Weave로 프롬프트를 다섯 가지 확장 가능한 워크플로우로 전환하기 | Figma 블로그 (새 탭에서 열림)

Figma Weave는 단순히 채팅창에 명령어를 입력하는 기존의 AI 방식을 넘어, 디자인 도구의 캔버스 자체에 AI를 깊숙이 통합한 차세대 AI 네이티브 제작 엔진입니다. 사용자가 아이디어를 시각화하는 과정에서 AI가 디자인 맥락과 시스템을 실시간으로 이해하고 협업하며, 정적인 결과물 생성이 아닌 편집 가능한 실제 디자인 요소를 생성하는 데 초점을 맞춥니다. 이를 통해 디자이너는 단순 반복 작업에서 벗어나 더 높은 차원의 창의적 의사결정에 집중할 수 있는 환경을 제공받게 됩니다. ### AI 네이티브 엔진, Weave의 핵심 개념 * **캔버스 중심의 통합:** 별도의 사이드바나 채팅창이 아닌, 디자이너가 작업하는 캔버스 위에서 AI가 직접 요소를 생성하고 수정합니다. * **객체 모델 기반 생성:** 단순한 이미지를 생성하는 것이 아니라, Figma의 레이어, 오토 레이아웃, 컴포넌트 구조를 유지한 채 수정 가능한 디자인 객체를 만들어냅니다. * **멀티모달 상호작용:** 텍스트 설명뿐만 아니라 기존의 스케치, 이미지, 레이아웃 구조를 입력값으로 받아 디자인의 의도를 정확하게 파악합니다. ### 디자인 맥락과 시스템의 깊은 이해 * **브랜드 일관성 유지:** 프로젝트 내의 기존 디자인 시스템, 라이브러리, 색상 팔레트를 학습하여 생성된 결과물이 기존 브랜드 가이드라인에서 벗어나지 않도록 합니다. * **의미론적 이해(Semantic Understanding):** 버튼, 내비게이션 바, 카드 등 각 디자인 요소의 역할을 인지하여 논리적인 사용자 인터페이스(UI)를 구성합니다. * **컴포넌트 활용:** 단순히 새로운 그림을 그리는 것이 아니라, 팀에서 이미 정의한 컴포넌트를 활용하여 즉시 상용화 가능한 수준의 디자인을 제안합니다. ### 실시간 반복 작업과 정교한 제어 기능 * **직관적인 재구성:** AI가 생성한 결과물의 특정 부분만 선택해 프롬프트를 다시 입력하거나, 드래그 앤 드롭 방식으로 레이아웃을 즉시 변경할 수 있습니다. * **와이어프레임의 고도화:** 거친 아이디어 스케치나 낮은 수준의 와이어프레임을 순식간에 고해상도(High-fidelity) 프로토타입으로 발전시킵니다. * **비파괴적 편집:** AI의 제안을 수용하면서도 디자이너가 언제든지 세부적인 수치를 수동으로 조정할 수 있는 완전한 제어권을 보장합니다. 이제 디자인은 '무엇을 그릴 것인가'를 넘어 '어떻게 AI와 협업하여 가치를 만들어낼 것인가'의 단계로 진입했습니다. Figma Weave를 효과적으로 활용하기 위해서는 팀 내 디자인 시스템을 견고하게 구축하고, AI가 학습할 수 있는 명확한 디자인 원칙을 수립하는 것이 더욱 중요해질 것입니다. 초기 도입 단계부터 AI의 제안을 검토하고 다듬는 '에디팅 역량'을 기르는 것을 추천합니다.

How Figmates Used Figma AI to Take Delight to the Next Level | Figma Blog (새 탭에서 열림)

Figma는 1990년대 초창기 웹의 감성을 재현한 '레트로 커서' 기능을 도입하며 협업 환경에 시각적인 즐거움을 더했습니다. 이 업데이트는 단순한 미적 변화를 넘어, 디자인 도구 내에서 사용자 간의 상호작용을 더욱 풍부하고 개성 있게 만들기 위해 기획되었습니다. 과거의 디지털 유산을 현대적인 협업 캔버스에 녹여냄으로써 사용자들이 웹 역사의 뿌리를 경험하고 창의적인 분위기를 조성하는 것이 이번 업데이트의 핵심 결론입니다. **1990년대 초기 웹 인터페이스의 재해석** - 초기 운영체제와 브라우저에서 사용되던 픽셀화된 화살표, 대기 중을 의미하는 모래시계, 링크를 클릭할 때의 손 모양 아이콘 등을 현대적인 Figma 환경에 맞게 복원했습니다. - 투박하지만 직관적이었던 과거의 UI 요소를 통해 중장년층 사용자에게는 향수를, 젊은 세대에게는 'Y2K' 감성의 신선한 시각적 재미를 제공합니다. - 단순히 이미지를 씌운 것이 아니라, 당시의 비트맵 스타일과 움직임을 정교하게 구현하여 실제 90년대 소프트웨어를 사용하는 듯한 몰입감을 줍니다. **멀티플레이어 경험의 개인화와 상호작용** - 실시간 협업 시 다른 사용자의 위치를 파악하는 용도였던 커서를 사용자의 상태나 개성을 표현하는 도구로 확장했습니다. - 팀 브레인스토밍, 디자인 리뷰, 워크숍 등 여러 명이 동시에 작업하는 환경에서 딱딱한 분위기를 완화하고 참여자 간의 유대감을 높이는 'Ice Breaker' 역할을 수행합니다. - 각 팀원이 서로 다른 레트로 커서를 선택함으로써 복잡한 캔버스 위에서도 각자의 움직임을 더욱 명확하고 재미있게 구분할 수 있습니다. **'작지만 큰 디테일'을 통한 사용자 경험 개선** - 이번 기능은 Figma의 'Little Big Details(작지만 큰 디테일)' 철학을 반영하여, 대대적인 기능 개편 없이도 사용자의 만족도를 극대화하는 데 초점을 맞췄습니다. - 사용자는 Figma의 커맨드 팔레트나 특정 메뉴 설정을 통해 복잡한 과정 없이 즉각적으로 커서 스타일을 변경할 수 있습니다. - 기술적인 도구에 인간적인 재미 요소를 더함으로써, 도구와 사용자 사이의 심리적 거리감을 줄이는 효과를 거두었습니다. 협업 과정에서 창의적인 영감이 필요하거나 팀원들과 가벼운 소통이 필요한 순간, 레트로 커서를 활성화하여 90년대 웹의 자유롭고 활기찬 분위기를 디자인 작업에 녹여보시길 권장합니다.

Build With More Context and More Control in Figma Make | Figma Blog (새 탭에서 열림)

Figma는 정적인 디자인을 넘어 실제 작동하는 경험을 즉각적으로 공유할 수 있도록 'Make Prototype' 기능을 생태계 전반에 통합했습니다. 이제 사용자는 AI를 활용해 디자인을 인터랙티브한 프로토타입으로 빠르게 변환하고, 이를 Figma Design뿐만 아니라 FigJam, Figma Slides 등 협업 환경 어디에나 임베딩하여 공유할 수 있습니다. 이러한 변화는 복잡한 설명 대신 실제 작동 방식을 시각적으로 보여줌으로써 팀원 간의 의사소통 효율을 극대화하는 것을 목표로 합니다. **AI 기반의 신속한 프로토타입 생성 (Make Prototype)** * Figma AI의 'Make Prototype' 기능을 사용하면 수동으로 인터랙션을 연결하는 번거로움 없이, 정적인 레이아웃에서 클릭 가능한 프로토타입을 즉시 생성할 수 있습니다. * AI가 디자인 컨텍스트를 이해하고 화면 간의 논리적인 흐름을 자동으로 구축하여 프로토타입 제작 시간을 획기적으로 단축합니다. * 디자인 초기 단계부터 고충실도(High-fidelity)의 인터랙션을 구현하여 아이디어를 더 명확하게 검증할 수 있습니다. **Figma 제품군 전반의 매끄러운 임베딩 워크플로우** * 생성된 프로토타입은 Figma Design에만 국한되지 않고, Figma Slides와 FigJam 등 모든 협업 공간에 직접 삽입하여 실행할 수 있습니다. * Figma Slides에서는 발표 도중 별도의 창 전환 없이 슬라이드 내부에서 프로토타입을 직접 시연하며 생생한 디자인 의도를 전달합니다. * FigJam에서는 브레인스토밍 단계에서 프로토타입을 함께 배치하여, 아이디어 구상과 동시에 사용자 흐름을 실제로 테스트하고 논의할 수 있습니다. **효율적인 의사소통을 위한 'Show don't tell' 전략** * 단순한 이미지나 텍스트 설명보다 실제 작동하는 프로토타입을 통해 이해관계자들이 제품의 맥락을 직관적으로 파악하도록 돕습니다. * 협업 과정에서 발생하는 오해를 줄이고, 개발자나 기획자가 실제 사용자 경험을 미리 체감하게 함으로써 고도화된 피드백을 유도합니다. * 디자인 결과물을 공유하는 방식이 '설명하는 것'에서 '보여주는 것'으로 전환되어 전체 제품 개발 생태계의 속도가 향상됩니다. 디자인의 가치는 공유되고 이해될 때 비로소 완성됩니다. 이제 Figma의 'Make' 기능을 적극 활용하여 정적인 화면 뒤에 숨겨진 동적인 경험을 모든 협업 채널에서 실시간으로 시연해 보세요. 특히 Figma Slides에 프로토타입을 임베딩하여 활용한다면, 발표의 몰입도를 높이고 더 빠른 의사결정을 끌어낼 수 있을 것입니다.

소프트웨어와 상호작용하는 방식을 재구상하는 6가지 디자인 | Figma 블로그 (새 탭에서 열림)

Figma Make를 활용한 AI 기반 워크플로우는 제품 팀이 아이디어를 실제 디자인으로 시각화하는 데 드는 비용을 획기적으로 낮추어 줍니다. 이를 통해 팀은 개발에 착수하기 전 기획의 타당성을 빠르게 검증하고, 이해관계자들 간의 정렬을 조기에 마침으로써 제품 결정에 대한 확신(Conviction)을 더 빨리 얻을 수 있습니다. 결과적으로 Figma Make는 단순한 디자인 자동화를 넘어, 제품 전략의 속도와 정확도를 높이는 전략적 도구로 기능합니다. **아이디어 구체화 및 시각적 논리 검증** * 추상적인 기획 단계에서 텍스트 프롬프트를 통해 즉각적인 UI를 생성함으로써, 로직의 허점을 초기에 발견할 수 있습니다. * 기존의 화이트보드나 포스트잇 형태의 브레인스토밍을 넘어, 실제 작동 가능한 수준의 레이아웃을 보며 데이터 흐름과 사용자 여정을 검토합니다. * 복잡한 시스템 기획 시, 다양한 케이스(에러 상태, 빈 화면 등)를 빠르게 생성하여 엣지 케이스를 놓치지 않고 설계에 반영할 수 있습니다. **고충실도(High-fidelity) 프로토타이핑을 통한 의사결정 가속화** * 저충실도(Low-fi) 와이어프레임이 줄 수 있는 모호함을 제거하고, 실제 최종 제품에 가까운 비주얼을 공유하여 이해관계자들의 피드백 품질을 높입니다. * 디자이너가 세세한 픽셀을 조정하기 전에도 기획자나 제품 매니저가 직접 시각 자료를 만들어 소통함으로써 디자인 루프(Iteration) 횟수를 대폭 줄입니다. * 실제 구성 요소와 유사한 UI를 통해 개발 가능성을 미리 타진하고, 기술적 제약 사항을 디자인 초기 단계에서 조율할 수 있습니다. **다양한 변수 탐색 및 디자인 확장성 확보** * 하나의 컨셉에 대해 AI가 제안하는 여러 가지 디자인 변형을 순식간에 검토하여 최적의 UX 패턴을 선택할 수 있습니다. * 반복적이고 단순한 디자인 작업을 AI가 대신 처리함으로써, 팀은 사용자 경험의 본질적인 문제를 해결하는 데 더 많은 시간을 할애합니다. * 성공적인 디자인 컴포넌트나 스타일 가이드를 기반으로 한 확장이 용이해져, 제품 전체의 일관성을 유지하면서도 빠른 실험이 가능해집니다. Figma Make는 디자이너의 역할을 대체하는 것이 아니라, 제품 팀 전체가 디자인 언어로 소통할 수 있게 돕는 강력한 촉매제입니다. 초기 기획 단계에서부터 적극적으로 AI 생성을 활용해 시각적 증거를 확보한다면, 불확실성을 제거하고 제품의 시장 출시 속도(Time-to-Market)를 눈에 띄게 개선할 수 있을 것입니다.

피그마의 차세대 데이터 캐싱 플랫폼 | 피그마 블로그 (새 탭에서 열림)

피그마(Figma)는 단일 관계형 데이터베이스(RDS)의 물리적 한계에 직면하자, 이를 해결하기 위해 수직적 분할을 거쳐 최종적으로 수평적 샤딩(Horizontal Sharding) 체제로 전환했습니다. 이 과정에서 'Fidous'라는 자체 데이터베이스 프록시 계층을 구축하여 애플리케이션 코드의 복잡성을 줄이고 데이터 정합성을 유지했습니다. 결과적으로 피그마는 서비스 중단 없이 수백 개의 샤드로 데이터를 분산하며 가용성과 확장성을 획기적으로 개선하는 데 성공했습니다. **단일 데이터베이스의 한계와 임계점** * 피그마의 초기 성장은 단일 거대 RDS 인스턴스에 의존했으나, 트래픽 급증으로 인해 AWS가 제공하는 최대 하드웨어 사양(CPU, 메모리, IOPS)에 도달했습니다. * 읽기 전용 복제본(Read Replicas)으로 조회를 분산했음에도 불구하고, 쓰기 작업의 부하와 복제 지연(Replication Lag) 문제가 전체 시스템의 안정성을 위협했습니다. * 특히 특정 대형 조직의 데이터가 급증할 때마다 단일 DB의 성능 저하가 모든 사용자에게 영향을 미치는 구조적 취약점이 드러났습니다. **수직적 파티셔닝(Vertical Partitioning)을 통한 1차 대응** * 샤딩을 도입하기 전 과도기적 단계로, 특정 테이블들을 도메인별로 묶어 물리적으로 분리된 별도의 데이터베이스 인스턴스로 이동시켰습니다. * 예를 들어 '사용자(Users)' 관련 테이블과 '파일(Files)' 관련 테이블을 서로 다른 DB 인스턴스로 분리하여 쓰기 부하를 분산했습니다. * 이 방식은 당장의 급한 불을 끄는 데는 효과적이었으나, 가장 큰 테이블들이 여전히 단일 DB에 머물러 있어 근본적인 해결책은 되지 못했습니다. **수평적 샤딩(Horizontal Sharding)과 샤드 키 선정** * 데이터 행(Row)을 여러 DB에 분산 저장하는 수평적 샤딩을 최종 해결책으로 채택했습니다. * 가장 중요한 결정은 '샤드 키(Shard Key)' 선정이었으며, 피그마는 대부분의 데이터가 조직(Organization) 단위로 액세스된다는 점에 착안해 `org_id`를 주요 샤드 키로 활용했습니다. * 샤드 키가 없는 데이터나 여러 샤드에 걸친 쿼리를 처리하기 위해, Vitess의 개념을 차용한 자체 라우팅 레이어 'Fidous'를 개발하여 쿼리 라우팅과 트랜잭션 관리를 수행하게 했습니다. **무중단 마이그레이션: 라이브 백필과 섀도우 쓰기** * 수 테라바이트에 달하는 데이터를 서비스 중단 없이 새로운 샤드 체계로 옮기기 위해 다단계 마이그레이션 전략을 사용했습니다. * 기존 DB에서 새로운 샤드로 데이터를 복제하는 '백필(Backfill)' 과정을 거친 후, 실시간 쓰기 작업을 양쪽 모두에 수행하는 '섀도우 쓰기(Shadow Write)'를 통해 정합성을 검증했습니다. * '데이터 정합성 검사기(Consistency Checker)'를 상시 가동하여 기존 DB와 샤딩된 DB 간의 오차를 0으로 만든 후, 트래픽을 단계적으로 전환(Cutover)했습니다. 피그마의 사례는 데이터베이스 확장성 문제를 해결할 때 처음부터 복잡한 샤딩을 도입하기보다, 수직적 분할로 시간을 벌고 그 사이 견고한 라우팅 인프라를 구축하는 단계적 접근이 중요함을 시연합니다. 특히 애플리케이션 계층과 데이터베이스 사이에 추상화 레이어를 두는 것은 장기적인 운영 효율성과 마이그레이션의 안정성을 확보하는 핵심 요소입니다.

에이전트, Figma 캔버스를 만나다 | Figma 블로그 (새 탭에서 열림)

미래의 디자인 도구는 단순히 시각적인 요소를 배치하는 단계를 넘어, 실제 제품의 기반이 되는 '코드'와 창의성을 발현하는 '캔버스'가 결합된 형태로 진화하고 있습니다. 피그마는 AI 기술을 활용해 디자인 프로세스의 비효율을 제거하고, 디자이너와 개발자가 동일한 맥락에서 소통할 수 있는 통합된 워크플로우를 제시합니다. 궁극적으로 디자인은 정적인 결과물이 아니라 실제 코드와 동기화된 살아있는 시스템으로 기능하며 제품 개발의 속도를 혁신하는 데 목적을 둡니다. **AI를 통한 창의성과 생산성의 재정의** * **Figma AI 도입:** 텍스트 프롬프트를 통해 UI 레이아웃의 초안을 생성하거나, 복잡한 레이어 구조에 이름을 자동으로 부여하고 정리해주는 기능을 통해 반복적인 수작업을 획기적으로 줄여줍니다. * **지능형 에셋 및 시각적 검색:** 이미지나 스케치만으로 디자인 시스템 내의 관련 구성 요소를 찾아내어, 수많은 컴포넌트 사이에서 필요한 요소를 찾는 시간을 단축하고 일관성 있는 디자인을 지원합니다. * **자동 프로토타이핑:** 정적인 레이어들을 클릭 한 번으로 연결된 프로토타입으로 변환하여, 아이디어를 실제 작동하는 제품처럼 빠르게 검증할 수 있게 합니다. **사용자 경험에 집중한 인터페이스와 도구의 확장** * **UI3 리디자인:** 캔버스 영역을 최대한 확보하기 위해 도구 모음을 하단으로 배치하고 패널을 유연하게 조정할 수 있도록 개편하여, 디자이너가 작업물 자체에 더 몰입할 수 있는 환경을 제공합니다. * **Figma Slides:** 디자인 환경 내에서 직접 프레젠테이션을 제작하고 공유할 수 있는 기능을 추가하여, 기획부터 디자인, 이해관계자 설득에 이르는 전체 커뮤니케이션 과정을 하나의 플랫폼으로 통합했습니다. **디자인과 개발을 잇는 코드 중심의 워크플로우** * **Dev Mode의 고도화:** 개발자가 디자인의 변경 사항을 한눈에 파악하고, 구현에 필요한 속성값을 더 정확하게 추출할 수 있도록 'Ready for Dev' 상태 관리와 변경 로그 기능을 강화했습니다. * **Code Connect:** 실제 프로덕션 코드 라이브러리(React, SwiftUI 등)를 피그마의 컴포넌트와 직접 연결하여, 개발자가 디자인 도구 내에서 실제 사용될 코드 조각을 즉시 확인하고 복사할 수 있는 환경을 구축했습니다. * **디자인 시스템의 코드화:** 디자인 토큰과 변수(Variables)를 통해 디자인의 논리적 구조를 코드와 일치시킴으로써, 디자인 수정이 제품 전체에 유기적으로 반영되는 시스템적 설계를 지향합니다. 앞으로의 디자이너는 단순히 픽셀을 그리는 역할에서 벗어나 제품의 논리적 구조와 시스템을 설계하는 역량을 갖추어야 합니다. 피그마가 제시하는 AI와 코드 연결 기능을 적극적으로 활용하여 '그리는 디자인'이 아닌 '작동하는 제품'을 만드는 워크플로우로 전환하는 것이 중요합니다. 이를 통해 조직은 디자인과 개발 사이의 불필요한 마찰을 줄이고 제품 출시 주기를 획기적으로 단축할 수 있을 것입니다.

Design’s Influence Is Expanding, and Here’s Why That Feels Hard | Figma Blog (새 탭에서 열림)

Are roles and responsibilities a thing of the past? Insights Research AI News

컴포넌트 인스턴스의 토대를 재구축한 방법 | Figma 블로그 (새 탭에서 열림)

Figma rendering: Powered by WebGPU Inside Figma Engineering Quality & performance

제15호: 디자인의 현주소 | 피그마 블로그 (새 탭에서 열림)

Issue no.14: Software is culture Working Well The Long & Short of It

비샬 카푸르의 AI로 정직한 제품을 만드는 10가지 규칙 | 피그마 블로그 (새 탭에서 열림)

메타(Meta)의 CTO 앤드류 보즈워스(Andrew “Boz” Bosworth)는 새로운 설계 패러다임, 특히 공간 컴퓨팅과 AI 시대를 맞이하는 디자이너들을 위한 10가지 원칙을 제시합니다. 그는 새로운 매체가 등장한다고 해서 기존의 매체가 사라지는 것이 아니라 서로를 보완하며 발전하며, 디자이너는 도구의 변화에 매몰되기보다 사용자 경험의 본질에 집중해야 한다고 강조합니다. 궁극적으로 기술은 사용자 인터페이스 자체가 아니라 사용자가 하려는 ‘활동’ 그 자체를 돕는 방향으로 진화해야 한다는 것이 이 글의 결론입니다. **매체의 진화와 도구의 본질** * **새로운 매체와 공존**: 새로운 기술 매체는 기존 매체를 대체하는 것이 아니라, 기존 매체가 가장 잘하는 역할에 집중할 수 있도록 돕습니다. 예를 들어 사진이 등장했을 때 회화는 사실적 묘사에서 벗어나 추상화라는 고유의 영역을 개척하며 발전했습니다. * **변하지 않는 디자인의 가치**: 디자인 도구와 플랫폼은 끊임없이 변하지만, 문제를 해결하고 경험을 설계하는 디자인의 본질적 기술(Craft)은 변하지 않습니다. 도구의 변화를 두려워하기보다 본연의 창의성에 집중해야 합니다. **사용자 의도 중심의 인터페이스 설계** * **활동이 목표, 인터페이스는 수단**: 훌륭한 디자인은 사용자가 UI를 조작하고 있다는 사실조차 잊게 만듭니다. 사용자의 최종 목표는 버튼을 누르는 것이 아니라 특정 활동을 완수하는 것임을 명심해야 합니다. * **상호작용보다 의도 설계**: 사용자에게 구체적인 동작(Action)을 요구하기보다, 사용자가 무엇을 하고 싶어 하는지 그 '의도(Intent)'를 파악하여 시스템이 반응하도록 설계해야 합니다. * **맥락(Context)의 중요성**: 사용자가 처한 환경과 상황인 맥락은 가장 중요한 입력 신호입니다. 공간 컴퓨팅 시대에는 사용자의 위치, 시선, 주변 환경이 인터페이스의 핵심 요소가 됩니다. **몰입형 경험과 물리 법칙의 존중** * **몰입감의 극대화**: 사용자가 기술의 존재를 잊고 경험에 완전히 빠져드는 '현존감(Presence)'을 구현하는 것이 현대 디자인의 핵심 과제입니다. * **물리 법칙 준수**: 가상 환경이라 할지라도 중력, 관성 등 현실의 물리 법칙을 모방할 때 사용자는 직관적이고 편안한 경험을 느낍니다. 익숙한 메타포를 깨뜨릴 때는 매우 신중해야 합니다. * **지연 시간(Latency) 최소화**: 고품질의 그래픽보다 중요한 것은 즉각적인 반응성입니다. 반응 속도가 느리면 사용자의 몰입이 깨지고 불쾌감을 느낄 수 있으므로, 성능 최적화는 디자인의 일부로 간주되어야 합니다. **반복과 결과 중심의 프로세스** * **루프를 통한 개선**: 정적인 결과물(Artifact)을 완성하는 데 집착하기보다, 실제 사용자의 피드백을 받고 수정하는 '반복 주기(Loop)' 자체를 최적화하여 더 빠르게 배워야 합니다. * **최종 결과물에 집중**: 단순한 기능(Feature)의 나열이 아니라, 사용자가 최종적으로 겪게 되는 전체적인 경험과 그로 인한 변화(Outcome)를 최우선으로 고려하여 제품을 출시해야 합니다. 새로운 기술 패러다임에서 디자이너는 단순한 화면 설계자를 넘어 경험의 설계자가 되어야 합니다. 기술적 제약이나 도구의 화려함에 매몰되지 않고, 인간의 본능과 물리적 직관을 존중하는 설계를 실천할 때 비로소 차세대 플랫폼에서도 가치 있는 제품을 만들 수 있을 것입니다.

AI 시대에 갈고닦아야 할 5가지 디자인 기술 | 피그마 블로그 (새 탭에서 열림)

2026년의 디자이너는 단순한 화면 설계자를 넘어 프로젝트의 복잡한 중간 과정인 '메시 미들(Messy Middle)'을 조율하는 오케스트레이터로 진화하고 있습니다. AI가 단순 반복적인 작업을 대체함에 따라, 디자이너는 아이디어 구상과 최종 결과물 사이의 모호한 영역에서 의사결정과 논리적 구조 설계에 더욱 집중하게 됩니다. 이는 디자인의 영역이 단순히 시각적 완성도를 높이는 것에서 벗어나 비즈니스 전략과 기술적 구현을 통합하는 방향으로 확장되고 있음을 시사합니다. ### AI와 협업하는 디자인 워크플로우의 변화 * AI는 단순 UI 컴포넌트 생성이나 반복적인 에셋 제작을 자동화하여 디자이너의 물리적 작업 시간을 획기적으로 단축합니다. * 디자이너는 직접 픽셀을 옮기는 '제작자'에서 AI가 생성한 수많은 시안 중 최적의 안을 선택하고 조합하는 '큐레이터'로 역할이 전환됩니다. * 프롬프트 엔지니어링과 AI 모델 튜닝이 디자인 도구의 일부로 편입되며, 개별 페이지 디자인보다 전체적인 디자인 시스템의 규칙을 정의하는 역량이 중요해집니다. ### 디자인과 엔지니어링의 경계 붕괴와 통합 * 디자인과 개발 사이의 경계가 모호해지면서, 디자인 결과물이 즉시 코드로 변환되거나 실제 데이터와 상호작용하는 프로토타이핑 환경이 보편화됩니다. * 디자이너가 코드의 논리를 이해하고 데이터 구조를 설계 단계에서 고려하는 '디자인 엔지니어링'적 접근이 팀의 생산성을 결정짓는 핵심 요소가 됩니다. * 과거의 정적인 '핸드오프' 방식 대신, 디자이너와 개발자가 동일한 시스템 언어 내에서 실시간으로 소통하며 제품을 완성해 나가는 협업 모델이 정착됩니다. ### 불확실한 중간 과정(Messy Middle)에서의 문제 해결 * 제품 정의가 모호하고 기술적 제약이 얽혀 있는 '메시 미들' 단계에서 논리적인 가설을 세우고 검증하는 능력이 디자이너의 핵심 경쟁력이 됩니다. * 단순히 보기 좋은 인터페이스를 만드는 것을 넘어, 복잡한 비즈니스 로직을 사용자 중심의 단순한 흐름으로 시각화하고 구조화하는 역량이 강조됩니다. * 다양한 이해관계자의 요구사항을 조율하고, 기술적 가능성과 사용자 가치 사이의 접점을 찾아내는 전략적 판단력이 더욱 요구됩니다. ### 데이터 기반의 의사결정과 비즈니스 임팩트 * 디자인 시스템은 단순한 UI 키트의 역할을 넘어, 조직 전체의 일관된 의사결정을 돕는 비즈니스 프레임워크로 기능합니다. * 사용자의 행동 데이터를 실시간으로 분석하여 디자인에 반영하고, 이를 통해 비즈니스 지표를 직접적으로 개선하는 성과 중심의 디자인이 주류를 이룹니다. * 디자인의 가치를 시각적 감성이 아닌 비즈니스 성장과 운영 효율화의 관점에서 증명하는 능력이 필수적입니다. 다가오는 2026년을 준비하기 위해 디자이너는 개별 도구의 숙련도에만 매몰되지 말고, 데이터 문해력과 시스템 설계 능력을 길러야 합니다. AI가 대체하기 어려운 '맥락에 맞는 창의성'과 '복잡한 이해관계 조율' 능력을 강화하여, 불확실한 프로젝트의 중간 과정에서 명확한 가치를 창출하는 해결사로 거듭나는 것이 필요합니다.

슬롯(Slots)으로 (새 탭에서 열림)

Figma는 Schema 2025를 통해 디자인 시스템이 단순한 컴포넌트 라이브러리를 넘어, AI와 코드 연동을 통해 제품 개발 전체 프로세스를 가속화하는 핵심 인프라로 진화하고 있다고 강조합니다. 이제 디자인 시스템은 디자이너와 개발자 사이의 장벽을 허물고, 복잡한 다중 플랫폼 환경에서도 일관된 사용자 경험을 실시간으로 유지하는 방향으로 나아가고 있습니다. **AI를 통한 디자인 시스템의 지능화** * 단순 반복적인 컴포넌트 문서화나 속성 정의 작업을 AI가 보조하여 관리 비용을 획기적으로 줄이고 시스템 구축 속도를 높입니다. * 디자인 시스템 내의 방대한 가이드를 AI가 학습하여, 디자이너가 작업 중에 필요한 규칙을 즉각적으로 제안받거나 오류를 자동으로 수정하는 '디자인 린팅' 기능이 강화됩니다. **코드 중심의 협업 체계: Code Connect** * Figma 디자인과 실제 프로덕션 코드를 직접 연결하는 'Code Connect'를 통해 디자인 시스템의 '단일 진실 공급원(Single Source of Truth)'을 실현합니다. * 개발자는 Dev Mode에서 디자이너가 의도한 정확한 코드 스니펫을 확인하고 사용할 수 있어, 구현 과정에서의 커뮤니케이션 오류를 최소화합니다. **Variables를 활용한 다중 플랫폼 대응 및 확장성** * 색상, 간격, 타이포그래피 등의 스타일을 Variables(변수)로 체계화하여 다크 모드나 다양한 테마 전환을 코드와 동기화된 방식으로 처리합니다. * 플랫폼별로 상이한 토큰 값을 하나의 시스템 내에서 유연하게 관리함으로써, 모바일과 웹 등 다양한 환경에 대응하는 디자인 시스템의 운영 효율성을 극대화합니다. **실천적 제언** 향후 디자인 시스템은 '만드는 것'보다 '어떻게 연결하고 유지할 것인가'에 초점이 맞춰질 것입니다. 조직은 단순히 컴포넌트의 개수를 늘리는 데 집중하기보다, AI와 코드 연동 도구를 적극적으로 도입하여 디자인과 개발의 워크플로우를 하나로 통합하는 시스템 고도화 전략을 수립해야 합니다.

Figma Make로 팀이 (새 탭에서 열림)

Prototypes are the new PRDs Working Well Product management AI Figma Make

Config 2026 연사 (새 탭에서 열림)

Figma의 Config 2025는 인공지능(AI)과 고도화된 프로토타이핑 기술을 통해 디자인의 경계를 확장하는 데 집중합니다. 디자인 도구가 단순한 제작 도구를 넘어 창의적인 파트너로서 작동하며, 디자이너가 반복적인 작업에서 벗어나 더 전략적인 문제 해결에 몰입할 수 있는 환경을 구축하는 것을 목표로 합니다. 이를 통해 제품 기획부터 구현까지의 프로세스를 하나로 통합하고, 브랜드 가치를 더 일관되게 전달할 수 있는 새로운 워크플로우를 제시합니다. ### AI 기반의 디자인 생산성 혁신 * 생성형 AI를 활용하여 초기 아이디어를 빠르게 시각화하고, 복잡한 레이아웃을 자동으로 구성하는 기능을 통해 작업 속도를 획기적으로 높였습니다. * 디자인 컨텍스트를 이해하는 AI가 적절한 컴포넌트를 추천하거나, 실제와 유사한 더미 데이터를 디자인에 즉시 반영하여 테스트 환경을 최적화합니다. * 디자이너의 수동 작업을 자동화함으로써 단순 제작보다는 제품의 논리와 사용자 경험의 본질에 더 집중할 수 있는 '지능형 캔버스'를 지향합니다. ### 고도화된 프로토타이핑과 인터랙션 * 정적인 화면의 연결을 넘어 실제 제품과 유사한 로직과 변수(Variables)를 활용한 동적 프로토타이핑 기능을 강화했습니다. * 디자인과 개발 사이의 간극을 줄이기 위해 실제 코드 수준의 인터랙션을 시각적인 방식으로 구현할 수 있는 환경을 제공합니다. * 복잡한 사용자 흐름을 실제 구동 환경과 유사하게 시뮬레이션함으로써, 개발 단계 이전에 제품의 사용성을 완벽하게 검증할 수 있도록 돕습니다. ### 브랜드 아이덴티티와 시스템의 확장 * 다양한 채널과 플랫폼에서 일관된 브랜드 경험을 유지할 수 있도록 디자인 토큰(Design Tokens)과 시스템 관리 기능을 심화했습니다. * 브랜드 가이드라인이 디자인 자산과 긴밀하게 동기화되어, 브랜드의 변경 사항이 대규모 프로젝트 전체에 즉각적이고 정확하게 반영되는 구조를 갖추었습니다. * 대규모 조직 내에서 협업 효율을 높이기 위해 자산 관리 및 거버넌스 도구를 강화하여 브랜드의 일관성을 시스템적으로 보호합니다. 디자이너는 이제 AI를 단순한 보조 도구가 아닌 협업 파트너로 받아들이고, 이를 활용해 생산성을 극대화하는 워크플로우를 구축해야 합니다. 특히 고도화된 프로토타이핑 기능을 통해 디자인 단계에서 제품의 기술적 타당성을 검토하고, 디자인 시스템을 통해 브랜드 가치를 자동화된 방식으로 관리하는 역량을 갖추는 것이 중요합니다.