techlist.io
KR EN

Figma

700 개의 포스트

www.figma.com/blog/engineering

태그로 필터

figma 381 product-design 220 design-systems 118 ai 96 ui-ux 92 ux-design 86 ui-design 78 collaboration 76 ui-ux-design 68 design 68 prototyping 63 design-tools 62 +560
figma

워크플로우 랩: Figma MCP로 캔버스 확장하기 | 피그마 블로그 (새 탭에서 열림)

Anthropic이 발표한 MCP(Model Context Protocol)는 AI 모델이 기업 내부 데이터나 특정 도구의 맥락(Context)에 안전하고 표준화된 방식으로 접근할 수 있도록 돕는 개방형 프로토콜입니다. 특히 Figma는 이 프로토콜을 활용해 디자인 시스템의 데이터를 AI에게 직접 전달함으로써, AI가 단순한 추측이 아닌 실제 디자인 가이드라인에 기반한 정확한 결과물을 도출할 수 있도록 지원합니다. 결과적으로 MCP는 파편화된 데이터 소스를 AI와 연결하는 표준 인터페이스 역할을 하며, 개발과 디자인 사이의 간극을 좁히는 핵심 기술로 자리 잡고 있습니다. **AI의 한계와 맥락(Context)의 중요성** * 거대언어모델(LLM)은 방대한 지식을 학습했지만, 특정 조직의 최신 디자인 파일이나 내부 문서와 같은 '마지막 1마일'의 구체적인 정보는 알지 못합니다. * 이전에는 AI에게 이러한 맥락을 제공하기 위해 매번 복잡한 커스텀 통합(Integration) 과정을 거쳐야 했으며, 이는 유지보수와 보안 측면에서 큰 부담이었습니다. * MCP는 AI 모델과 데이터 소스 사이의 통신 규격을 표준화하여, 한 번의 설정으로 다양한 AI 도구가 기업 데이터에 즉시 접근할 수 있는 환경을 제공합니다. **Figma MCP를 통한 디자인 시스템의 활용** * Figma의 MCP 서버를 활용하면 AI 에이전트가 디자인 토큰, 컴포넌트 라이브러리, 레이아웃 명세 등에 직접 접근할 수 있습니다. * AI는 단순히 "버튼을 만들어줘"라는 요청에 대해 임의의 코드를 생성하는 대신, Figma에 정의된 실제 브랜드 컬러, 여백, 스타일 가이드를 준수하는 코드를 작성하게 됩니다. * 디자인 시스템이 업데이트되면 MCP를 통해 연결된 AI도 실시간으로 변경 사항을 인지하므로, 디자인과 코드 사이의 동기화 오류를 획기적으로 줄일 수 있습니다. **워크플로우 혁신과 효율성 증대** * 개발자는 디자인 사양을 일일이 확인하며 코드를 옮기는 대신, AI에게 MCP를 통한 디자인 가이드 참조를 명령함으로써 구현 속도를 높일 수 있습니다. * AI가 작성한 코드가 디자인 시스템을 준수하는지 자동으로 검수(Audit)하는 프로세스를 구축하여 품질 관리의 자동화가 가능해집니다. * 디자이너와 개발자 간의 핸드오프(Handoff) 과정에서 발생하는 커뮤니케이션 비용을 줄이고, 창의적인 문제 해결에 더 많은 시간을 할애할 수 있습니다. 성공적인 AI 도입을 위해서는 모델의 성능만큼이나 '정확한 데이터의 연결'이 중요합니다. MCP를 활용해 Figma와 같은 디자인 소스의 진실(Source of Truth)을 AI에게 연결하는 것은, 조직 내에서 AI가 실질적인 비즈니스 가치를 창출하게 만드는 가장 구체적이고 강력한 전략이 될 것입니다.

figmaaidesign-systemsstrategy
figma

업무용 에이전트 도구 설계 방법 | 피그마 블로그 (새 탭에서 열림)

AI 기술의 발전으로 디자인의 물리적 실행 장벽이 낮아지면서, 디자이너의 역할은 '직접 만드는 사람'에서 '방향을 제시하고 결정하는 전략가'로 빠르게 전환되고 있습니다. 이제 디자이너는 AI가 생성한 수많은 결과물 중 최선의 안을 선택하는 안목과, 비즈니스 목적에 맞게 문제를 정의하는 고차원적인 사고 역량을 갖춰야 합니다. 기술적 숙련도보다는 시스템 전체를 조망하고 인간 중심의 가치를 더하는 능력이 AI 시대 디자인의 핵심 경쟁력이 될 것입니다. ### 문제 정의 및 프레임워크 구축 (Problem Framing) * AI는 해결책을 제시하는 데 능숙하지만, '무엇이 진짜 문제인지'를 찾아내는 것은 여전히 인간의 영역입니다. * 사용자의 숨겨진 요구사항을 파악하고 이를 구체적인 디자인 과제로 전환하는 전략적 기획력이 더욱 중요해집니다. * 복잡한 비즈니스 목표와 사용자 경험 사이의 접점을 찾아 AI에게 정확한 맥락(Context)을 제공하는 능력이 필수적입니다. ### 큐레이션과 미적 감각 (Curation & Design Taste) * AI가 대량으로 생성하는 시나리오와 시각적 결과물 중에서 브랜드의 정체성과 품질 기준에 부합하는 것을 골라내는 '안목'이 중요합니다. * 단순히 예쁜 디자인을 넘어, 특정 맥락에서 어떤 디자인이 가장 효과적인지 판단하는 비판적 평가 역량을 길러야 합니다. * AI의 결과물을 가공하여 인간적인 감성과 디테일을 완성하는 '마지막 10%'의 터치가 브랜드의 차별점을 만듭니다. ### 시스템적 사고 (Systems Thinking) * 단일 화면이나 아이콘 제작을 넘어, 전체 제품 생태계와 디자인 시스템의 구조를 설계하는 능력이 강조됩니다. * 개별 구성 요소들이 서로 어떻게 상호작용하는지 이해하고, 이를 일관성 있게 유지하기 위한 규칙과 논리를 구축해야 합니다. * 디자인 시스템에 AI를 통합하여 워크플로우를 자동화하고 효율성을 극대화하는 관리 역량이 요구됩니다. ### 비즈니스 및 제품 전략 (Business & Product Strategy) * 디자인이 실제 비즈니스 지표(KPI)와 수익에 어떤 영향을 미치는지 이해하고 데이터에 기반한 의사결정을 내려야 합니다. * AI 기술의 구현 가능성과 비용을 고려하면서, 사용자에게 가장 큰 가치를 줄 수 있는 기능이 무엇인지 판단하는 제품적 사고가 필요합니다. * 이해관계자들과 기술적 언어 및 비즈니스 언어로 소통하며 디자인의 타당성을 설득하는 능력이 핵심입니다. ### 윤리적 책임과 포용성 (Ethics & Inclusive Design) * AI 모델이 가질 수 있는 편향성을 인지하고, 이를 디자인 단계에서 필터링하여 공정하고 포용적인 경험을 설계해야 합니다. * 사용자의 데이터 프라이버시를 보호하고 AI의 작동 방식을 투명하게 전달하여 기술에 대한 신뢰를 구축하는 역할을 수행합니다. * 다양한 문화적 배경과 접근성을 고려하여 소외되는 사용자 없이 누구나 편리하게 기술의 혜택을 누릴 수 있도록 감시하고 개선해야 합니다. AI는 디자이너의 일자리를 뺏는 위협이 아니라, 단순 반복 업무에서 해방시켜 더 가치 있는 고민에 집중하게 돕는 강력한 파트너입니다. 툴의 사용법을 익히는 데 매몰되기보다는 인문학적 소양을 기르고 세상의 변화를 읽는 통찰력을 키우십시오. 기계가 모방할 수 없는 '공감 능력'과 '전략적 판단력'을 갈고닦는 것만이 AI 시대에 대체 불가능한 디자이너로 살아남는 유일한 방법입니다.

aidesignresearchcareer-education+1
figma

이제 FigJam은 코딩 에이전트의 화이트보드이기도 합니다 | Figma 블로그 (새 탭에서 열림)

피그마(Figma)는 AI가 디자인과 개발 사이의 간극을 메우기 위해 디자인 시스템이라는 핵심 맥락(Context)을 이해해야 함을 강조하며, 그 해결책으로 **Model Context Protocol(MCP)**의 도입을 제안합니다. MCP는 AI 모델이 피그마의 디자인 데이터를 직접 조회할 수 있게 함으로써, 추상적인 지시가 아닌 실제 브랜드 가이드라인과 코드 규격에 맞는 결과물을 생성하도록 돕습니다. 결과적으로 MCP는 디자이너와 개발자가 동일한 데이터 소스를 바탕으로 더 빠르고 정확하게 협업할 수 있는 기술적 토대를 제공합니다. ### AI 모델의 한계와 맥락의 중요성 * 기존의 범용 AI 모델은 특정 기업의 디자인 시스템이나 컴포넌트 라이브러리에 대한 지식이 없어 일반적이고 추상적인 결과물만 생성하는 한계가 있습니다. * 디자인 의도를 AI에게 전달하기 위해 일일이 스크린샷을 찍거나 코드를 복사해서 붙여넣는 방식은 비효율적이며, 데이터의 신선도를 유지하기 어렵습니다. * AI가 진정으로 생산성을 높이기 위해서는 단순한 텍스트 생성을 넘어, 기업의 실시간 디자인 자산과 토큰(Tokens) 정보라는 '맥락'에 직접 접근할 수 있어야 합니다. ### MCP(Model Context Protocol)의 역할 * MCP는 Anthropic이 발표한 오픈 표준으로, AI 모델(클라이언트)이 로컬 데이터나 서비스 API(서버)에 안전하고 쉽게 접근할 수 있도록 연결하는 범용 인터페이스입니다. * 개별 도구마다 복잡한 커스텀 통합을 구축할 필요 없이, 표준화된 프로토콜을 통해 AI가 데이터베이스, 파일 시스템, 디자인 도구의 데이터에 실시간으로 접근하게 해줍니다. * 이는 AI를 단순한 채팅 인터페이스에서 실질적인 데이터 기반 에이전트로 진화시키는 핵심 기술입니다. ### Figma MCP 서버의 기능과 활용 * 피그마는 자체 MCP 서버를 통해 AI 에이전트(예: Claude Desktop, Cursor 등)가 피그마 REST API를 직접 호출하여 레이어, 스타일, 변수 정보를 읽을 수 있게 지원합니다. * 개발자는 AI에게 "이 피그마 디자인을 바탕으로 리액트 컴포넌트를 만들어줘"라고 요청할 때, AI가 디자인 파일의 실제 수치와 토큰 정보를 참조하여 오차 없는 코드를 생성하게 할 수 있습니다. * 단순한 시각적 모사가 아니라 디자인 시스템의 규칙을 준수하는 코드를 생성하므로, 개발 후 수정 단계(Hand-off)에서의 소통 비용을 획기적으로 줄여줍니다. ### 디자인 시스템과 AI의 결합 가치 * 디자인 시스템은 이제 단순한 문서화 도구를 넘어 AI가 학습하고 참조해야 할 '기계가 읽을 수 있는(Machine-readable) 진실의 원천'으로 기능합니다. * MCP를 통해 AI가 디자인 시스템을 이해하게 되면, 브랜드 일관성을 유지하면서도 반복적인 UI 구현 작업을 자동화할 수 있습니다. * 이를 통해 팀은 단순 구현 작업에서 벗어나 더 고도화된 사용자 경험 설계와 전략적인 문제 해결에 집중할 수 있는 시간을 확보하게 됩니다. --- **실용적인 제안** 조직의 개발 효율성을 높이고 싶다면, 피그마 MCP 서버를 개발 환경(Cursor 등)에 연동하여 디자인-투-코드(Design-to-Code) 워크플로우를 자동화해 보세요. 디자인 시스템의 변수와 컴포넌트 명명 규칙을 철저히 관리할수록 MCP를 통한 AI의 코드 생성 정확도는 더욱 높아질 것입니다.

figmaaidesign-systemsmcp
figma

AI 리더들이 디자인 플레이북을 활용하는 방법 | Figma 블로그 (새 탭에서 열림)

해당 글은 디자인의 역할이 단순한 시각적 구현을 넘어 제품 전략과 비즈니스 전반으로 확장되면서 발생하는 변화와 그에 따른 실무자들의 어려움을 다루고 있습니다. 디자인의 위상이 높아진 만큼 디자이너에게 요구되는 역량이 다각화되었으며, 이러한 확장이 디자이너들에게는 오히려 압박과 피로감으로 다가오고 있다는 것이 핵심입니다. 결국 현재 디자인 업계가 겪는 혼란은 디자인이 제품의 핵심 경쟁력으로 자리 잡는 과정에서 발생하는 필연적인 성장통이라고 결론짓습니다. ### 디자인의 정의 변화와 전략적 위상 강화 * 디자인은 더 이상 제품 개발의 마지막 단계에서 '포장'하는 역할에 머물지 않고, 제품의 초기 기획과 전략 수립 단계부터 깊숙이 관여합니다. * 디자이너의 성과 지표가 단순히 '사용성'이나 '심미성'에 그치지 않고, 비즈니스 성과(KPI)와 수익 모델에 미치는 영향력으로 평가받기 시작했습니다. * 이러한 변화는 디자인이 기업 내에서 더 큰 의사결정권을 갖게 되었음을 의미하지만, 동시에 그 결과에 대한 책임도 막중해졌음을 뜻합니다. ### AI가 촉발한 제작 공정의 자동화와 판단의 중요성 * AI 기술의 발전으로 반복적인 UI 작업, 프로토타이핑, 레이아웃 생성 등 과거 디자이너의 많은 시간을 차지했던 '실행(Execution)' 영역이 자동화되고 있습니다. * 단순한 제작 능력을 넘어, 수많은 선택지 중 어떤 디자인이 사용자와 비즈니스에 최적인지를 결정하는 '안목'과 '판단력(Curation)'이 디자이너의 핵심 경쟁력이 되었습니다. * AI 도구를 능숙하게 다루면서도 기술이 대체할 수 없는 창의적 고유성을 유지해야 한다는 새로운 과제가 주어졌습니다. ### 다학제적 역량 요구에 따른 심리적 부담 * 현대의 디자이너는 디자인 툴뿐만 아니라 데이터 분석, 비즈니스 언어, 심지어는 엔지니어링 지식까지 갖춰야 하는 상황에 놓여 있습니다. * 개발자와의 원활한 소통을 위해 코드의 논리를 이해해야 하고, 기획자와 논의하기 위해 시장 논리를 파악해야 하는 등 업무의 경계가 모호해지면서 번아웃을 호소하는 사례가 늘고 있습니다. * 성장해야 할 영역이 너무 광범위해짐에 따라 발생하는 "과연 내가 잘하고 있는가"에 대한 실존적인 불안감이 디자이너들에게 큰 스트레스로 작용합니다. ### 협업의 복잡성 증가와 커뮤니케이션의 핵심화 * 디자인의 영향력이 커질수록 더 많은 유관 부서와의 협의가 필요하며, 이는 곧 회의 시간의 증가와 조율의 난이도 상승으로 이어집니다. * 자신의 디자인 결정을 논리적으로 설명하고 설득하는 '디자인 비평'과 '스토리텔링' 능력이 그 어느 때보다 중요해졌습니다. * 단순히 화면을 잘 그리는 사람보다 조직 내에서 디자인적 사고를 전파하고 타 직군과의 가교 역할을 하는 '퍼실리테이터'로서의 역할이 강조됩니다. --- **실용적인 결론** 디자이너들은 이제 도구(Tool) 숙련도에만 매몰되기보다 **비즈니스적 사고방식**을 기르고 **AI를 협업 파트너로 수용**하는 유연함을 갖춰야 합니다. 지금 느끼는 막막함은 디자인이 제품의 부수적인 요소가 아닌 **핵심 동력**으로 변모하고 있다는 증거입니다. 따라서 모든 역량을 완벽하게 갖추려 하기보다, 자신의 강점을 바탕으로 타 직군과 전략적으로 협력하는 법을 익히는 것이 지속 가능한 커리어 성장의 열쇠가 될 것입니다.

aidesignthought-leadershipresearch
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 접근 권한을 부여하여 워크플로우의 병목 구간을 해결해 보기를 권장합니다.

figmaaidesign-toolsproduct-updates+1
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의 제안을 검토하고 다듬는 '에디팅 역량'을 기르는 것을 추천합니다.

figmaux-designproduct-updatesai-native