Figma / design-systems

How to Supercharge your Design System with Slots | Figma Blog (새 탭에서 열림)

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

The Future of Design Is Code and Canvas | Figma Blog (새 탭에서 열림)

피그마는 기존의 '디자인에서 코드'로 이어지는 단방향 흐름을 넘어, 실제 프로덕션 코드를 다시 편집 가능한 피그마 디자인으로 변환하는 혁신적인 접근 방식을 제안합니다. 앤스로픽(Anthropic)의 Claude Code를 활용해 코드베이스의 시각적 요소를 분석하고 이를 피그마의 레이어와 컴포넌트 구조로 재구성함으로써, 디자인과 개발 사이의 동기화 문제를 해결하고자 합니다. 이를 통해 팀은 실제 구현된 최신 코드를 바탕으로 디자인 자산을 실시간으로 업데이트하고 관리할 수 있습니다. **코드 기반의 디자인 복원 메커니즘** * React, Tailwind CSS 등 실제 프론트엔드 코드에 정의된 스타일 속성과 UI 구조 정보를 정밀하게 추출합니다. * 단순한 시각적 복제를 넘어, 추출된 데이터를 피그마의 오토 레이아웃(Auto Layout), 변수(Variables), 컴포넌트 등 편집 가능한 고유 객체로 변환합니다. * 텍스트 스타일, 색상 값, 간격 등 코드에 명시된 속성이 피그마의 속성 시스템과 일대일로 매핑되어 디자이너가 즉시 수정할 수 있는 상태로 생성됩니다. **Claude Code와의 통합 및 지능형 자동화** * 앤스로픽의 AI 에이전트인 Claude Code를 CLI 환경에서 실행하여 코드베이스 내의 시각적 논리를 추론하고 피그마 플러그인 API와 상호작용합니다. * AI가 복잡한 CSS 계층 구조나 컴포넌트 의존성을 분석하여 피그마 파일 내에서 가장 효율적인 레이어 구조로 재구성하도록 돕습니다. * 개발자가 코드 변경 후 특정 명령어를 실행하는 것만으로 디자인 파일에 해당 변경 사항을 자동으로 반영하는 워크플로우를 실험합니다. **디자인 시스템의 무결성 유지 및 협업 효율화** * 디자인 파일이 실제 프로덕션 코드보다 뒤처지는 '디자인 부채(Design Debt)' 현상을 근본적으로 방지합니다. * 디자이너는 실제 코드에 구현된 제약 사항과 로직이 반영된 캔버스 위에서 작업하므로, 구현 불가능한 디자인을 설계할 위험이 줄어듭니다. * 코드를 디자인의 '단일 진실 공급원(Single Source of Truth)'으로 삼아, 별도의 수동 작업 없이 대규모 디자인 시스템의 일관성을 유지할 수 있습니다. 이 기술적 시도는 디자인과 개발의 경계를 허물고, 실제 제품의 결과물이 다시 디자인 프로세스의 시작점이 되는 선순환 구조를 시사합니다. 개발 중심의 워크플로우를 가진 팀이라면 Claude Code와 피그마 API를 결합하여 디자인 자산의 관리 비용을 획기적으로 낮추는 방향을 고려해 볼 수 있습니다.

5 Shifts Redefining Design Systems in the AI Era | Figma Blog (새 탭에서 열림)

Schema 2025에서 피그마(Figma)는 디자인 시스템이 단순한 UI 컴포넌트 모음을 넘어, 디자인과 엔지니어링의 경계를 허무는 '제품 시스템(Product Systems)'으로 진화해야 한다는 비전을 제시했습니다. 이제 디자인 시스템은 정적인 가이드를 제공하는 수준을 지나, AI와 강력한 코드 연결성을 바탕으로 제품 개발 전체 프로세스를 가속화하는 핵심 인프라로 자리 잡아야 합니다. 이를 통해 조직은 단순 반복 작업에서 벗어나 더 수준 높은 사용자 경험을 설계하는 데 집중할 수 있게 됩니다. **디자인 시스템에서 제품 시스템으로의 패러다임 전환** * 기존의 디자인 시스템이 디자이너를 위한 UI 키트 제작에 치중했다면, 새로운 시대의 시스템은 기획, 디자인, 개발을 아우르는 '제품 전체의 언어'가 되어야 합니다. * 디자인 자산과 실제 프로덕션 코드가 분리되지 않고 하나의 파이프라인으로 연결되는 환경을 구축하는 것이 핵심입니다. * 이를 통해 제품의 일관성을 유지하면서도 변화에 유연하게 대응할 수 있는 확장성을 확보합니다. **코드 커넥트(Code Connect)를 통한 엔지니어링 협업 강화** * 디자인 시스템의 컴포넌트가 코드 상에서 어떻게 구현되는지 피그마 내에서 직접 확인할 수 있는 'Code Connect'가 더욱 강화되었습니다. * 개발자는 디자인 도구 내에서 실제 사용되는 React, SwiftUI, Jetpack Compose 코드를 즉시 참조하여 구현의 정확도를 높일 수 있습니다. * W3C 디자인 토큰 표준을 준수하여 디자인 시스템 데이터가 플랫폼에 구애받지 않고 엔지니어링 환경으로 원활하게 전달되도록 지원합니다. **AI 기반의 시스템 구축 및 문서화 자동화** * AI를 활용하여 수동으로 진행하던 번거로운 문서화 작업을 자동화하고, 컴포넌트 간의 관계를 지능적으로 매핑합니다. * 시스템 구축 초기 단계에서 AI가 최적의 구조를 제안하거나, 기존 디자인을 시스템 컴포넌트로 변환하는 시간을 획기적으로 단축합니다. * 단순한 제작을 넘어 시스템의 상태를 진단하고 유지보수가 필요한 지점을 사전에 파악하는 지능형 관리 기능을 도입합니다. **변수(Variables)와 다중 플랫폼 최적화** * 피그마의 변수 기능을 확장하여 테마(Dark/Light Mode), 화면 크기, 지역별 언어 설정 등에 따라 유연하게 대응하는 시스템을 구축합니다. * 단일 소스(Single Source of Truth)를 통해 웹, 모바일, 데스크톱 등 다양한 플랫폼에 적용되는 디자인 속성을 통합 관리합니다. * 복잡한 로직을 변수에 담아 디자인 단계에서 미리 테스트함으로써 개발 단계에서의 시행착오를 줄입니다. **결론 및 권고** 성공적인 디자인 시스템 운영을 위해서는 이제 UI 컴포넌트를 만드는 것보다 '코드와의 연결성'과 '워크플로우 자동화'에 더 큰 비중을 두어야 합니다. 특히 피그마의 Code Connect와 변수 기능을 적극적으로 도입하여 디자이너와 개발자가 동일한 속성값과 컴포넌트 구조를 공유하는 환경을 만드는 것이 중요합니다. 또한 AI 도구를 활용해 시스템 유지보수의 부하를 줄임으로써, 디자인 시스템이 조직의 성장을 가로막는 병목이 아닌 성장을 돕는 도구가 되도록 체질을 개선할 것을 권장합니다.

Gemini 3 Is Now Available In Figma Make | Figma Blog (새 탭에서 열림)

피그마는 디자이너와 개발자 간의 협업 간극을 줄이기 위해 디자인 의도를 개발 환경으로 직접 전달하는 '디자인 컨텍스트(Design Context)' 환경 구축에 집중하고 있습니다. 단순한 가이드라인 전달을 넘어 개발자가 사용하는 도구 내에서 디자인 데이터에 접근하고 이를 코드로 변환하는 과정을 최적화하여 워크플로우를 혁신하고 있습니다. 이러한 변화는 개발자가 컨텍스트 전환 없이 구현에만 집중할 수 있는 환경을 제공하며, 최종 제품의 품질과 개발 속도를 동시에 높이는 결과를 가져옵니다. ### 개발 환경으로 확장된 Dev Mode와 VS Code 통합 * **Figma for VS Code:** 개발자가 편집기를 떠나지 않고도 디자인 파일을 확인하고, 속성을 추출하며, 디자이너와 실시간으로 소통할 수 있는 익스텐션을 제공합니다. * **코드 스니펫 커스터마이징:** 단순한 CSS 제공을 넘어 프로젝트의 라이브러리나 프레임워크에 맞는 맞춤형 코드 스니펫을 생성하여 코드 작성 시간을 단축합니다. * **에셋 관리 자동화:** 아이콘이나 이미지 등의 에셋을 수동으로 다운로드할 필요 없이 개발 환경에서 즉시 최적화된 형태로 내려받을 수 있는 기능을 지원합니다. ### 디자인 시스템과 코드의 정렬 * **UI 키트의 진화:** 디자이너가 사용하는 UI 구성 요소가 코드상의 컴포넌트 구조와 일치하도록 설계된 UI 키트를 통해 일관성을 유지합니다. * **Design Tokens 연동:** 색상, 타이포그래피, 간격 등의 디자인 변수를 코드로 직접 동기화하여 디자인 변경 사항이 개발 환경에 실시간으로 반영되도록 합니다. * **컴포넌트 문서화:** Dev Mode 내에서 해당 컴포넌트의 사용법, 변수(variants), 관련 문서 링크를 바로 확인할 수 있어 불필요한 커뮤니케이션 비용을 줄입니다. ### 효율적인 핸드오프를 위한 소통 도구 * **디자인 상태 표시(Status update):** 디자인이 '개발 준비 완료(Ready for development)' 상태인지 직관적으로 확인할 수 있도록 하여 불완전한 디자인의 구현을 방지합니다. * **어노테이션(Annotation):** 디자이너가 특정 영역에 개발적인 요구사항이나 인터랙션 디테일을 직접 기입할 수 있는 주석 기능을 강화하여 명확한 가이드를 제공합니다. * **비주얼 디프(Visual Diff):** 이전 버전의 디자인과 현재 디자인의 차이점을 시각적으로 비교하여 변경된 부분만 골라내어 업데이트할 수 있도록 돕습니다. 디자인 컨텍스트를 개발 과정 곳곳에 배치하는 피그마의 전략은 단순히 도구를 제공하는 것을 넘어 조직 전체의 협업 문화를 바꾸는 데 목적이 있습니다. 개발자는 더 이상 디자인 해석에 시간을 쏟지 않고, 코드 스니펫과 실시간 동기화 도구를 활용해 더 높은 수준의 제품 구현에 집중하는 것이 권장됩니다.

Figma Opens a New Hub in India | Figma Blog (새 탭에서 열림)

피그마(Figma)는 인도 벵갈루루에 새로운 허브를 설립하며 세계에서 두 번째로 큰 시장인 인도 내 제품 개발 커뮤니티에 대한 투자를 본격화했습니다. 이번 확장은 AI 기술 도입이 활발한 인도 시장의 특성을 반영하여, 피그마가 단순한 디자인 도구를 넘어 제품 개발 전 과정을 아우르는 AI 기반 협업 플랫폼으로 진화하려는 전략적 움직임입니다. 이를 통해 피그마는 글로벌 사용자의 85%를 차지하는 해외 시장에서의 영향력을 강화하고 사용자 중심의 기술 혁신을 가속화할 방침입니다. **인도 시장의 전략적 가치와 AI 도입 현황** * 인도는 월간 활성 사용자(MAU) 기준 피그마의 세계 2위 시장이며, BSE100(인도 상장사 100대 기업) 기업의 40% 이상이 이미 피그마를 도입했습니다. * 현지 리서치 결과, 인도 디자이너의 93%가 업무에 AI를 활용하고 있으며, 개발자의 81%는 AI 기반 제품의 성공에 디자인이 과거보다 더 중요해졌다고 응답했습니다. * Flipkart, Zomato, Swiggy 등 인도의 대표적인 유니콘 기업들이 피그마를 통해 디자인과 개발의 간극을 줄이고 제품 출시 속도를 높이고 있습니다. **글로벌 네트워크 확장 및 커뮤니티 성장** * 피그마는 매출의 약 50%가 미국 외 시장에서 발생함에 따라 도쿄, 싱가포르, 런던, 파리, 베를린 등에 이어 벵갈루루에 신규 거점을 마련하며 글로벌 운영을 강화하고 있습니다. * 인도 내 'Friends of Figma' 커뮤니티 멤버는 약 25,000명에 달하며, 이들은 전 세계에서 가장 활발하게 디자인 시스템과 협업 툴을 활용하는 집단 중 하나로 꼽힙니다. **Figma Weave와 AI 중심의 제품 혁신** * 생성형 AI 플랫폼인 'Weavy'를 인수하여 'Figma Weave'를 새롭게 선보였으며, 이를 통해 캔버스 내에서 이미지, 비디오, 애니메이션, VFX 등 미디어 자산의 생성 및 전문적 편집이 가능해집니다. * **Figma Make**: 텍스트 프롬프트나 간단한 디자인 초안을 즉시 프로토타입이나 실제 앱 형태로 변환해 주는 기능을 지원합니다. * **영역별 특화 도구**: 개발 생산성을 높이는 'Dev Mode', 동적 웹사이트 제작을 돕는 'Figma Sites', 마케팅 에셋을 대량 생산하는 'Figma Buzz' 등 제품군을 확장했습니다. * **협업 도구 고도화**: 인터랙티브 프레젠테이션 툴인 'Figma Slides'와 고급 벡터 드로잉 도구인 'Figma Draw'를 통해 기획부터 실행까지의 워크플로우를 통합했습니다. 피그마는 이제 디자인 도구를 넘어 기획자, 디자이너, 개발자가 AI를 매개로 소통하는 통합 제품 개발 플랫폼으로 완전히 탈바꿈하고 있습니다. 기업들은 피그마의 새로운 AI 기능들을 활용해 아이디어를 실제 제품으로 구현하는 시간을 단축하고, 디자인 시스템의 일관성을 유지하면서도 창의적인 실험을 지속할 수 있는 환경을 구축할 것을 권장합니다.

Schema 2025: Design Systems For A New Era | Figma Blog (새 탭에서 열림)

디자인 시스템은 단순한 UI 컴포넌트 모음을 넘어, 디자인과 엔지니어링 사이의 간극을 메우는 핵심 인프라로 진화하고 있습니다. 특히 인공지능(AI)의 도입은 디자인 시스템의 관리 방식을 자동화하고 대규모 확장성을 확보하는 데 결정적인 역할을 할 것으로 기대됩니다. 결론적으로 미래의 디자인 시스템은 단순한 도구를 넘어 협업 효율성을 극대화하고 제품의 일관성을 보장하는 지능형 생태계로 자리 잡을 것입니다. **디자인 시스템의 근간과 역할의 확장** * 디자인 시스템은 초기의 단순한 스타일 가이드에서 시작하여, 현재는 재사용 가능한 컴포넌트와 가이드라인을 포함하는 체계적인 라이브러리로 발전했습니다. * 단순히 화면을 시각화하는 도구가 아니라, 브랜드 아이덴티티를 유지하면서 개발 효율성을 높이는 '단일 진실 공급원(Single Source of Truth)' 역할을 수행합니다. * 디자인 토큰(Design Tokens)을 통해 색상, 타이포그래피, 간격 등의 시각적 요소를 코드화하여 관리함으로써 디자인 변경 사항을 프로덕트에 즉각적이고 일관되게 반영할 수 있습니다. **AI 기술을 통한 디자인 시스템의 혁신** * AI는 반복적인 디자인 작업을 자동화하여 디자이너가 더 전략적이고 창의적인 문제 해결에 집중할 수 있는 환경을 조성합니다. * 수많은 컴포넌트 변형(Variants)을 자동으로 생성하거나, 디자인 시스템 내의 복잡한 문서화 작업을 실시간으로 업데이트하는 데 AI가 중추적인 역할을 할 수 있습니다. * 코드 생성 AI와의 결합을 통해 디자인 시안을 즉시 고품질의 프런트엔드 코드로 변환함으로써 디자인과 개발 사이의 핸드오프(Hand-off) 과정을 획기적으로 단축할 것입니다. **협업 문화와 시스템의 확장성** * 디자인 시스템의 성공은 기술적 완성도만큼이나 조직 내 협업 문화와 얼마나 유기적으로 융합되느냐에 달려 있습니다. * 디자이너와 개발자뿐만 아니라 기획자, 마케터 등 모든 이해관계자가 공통의 언어로 소통할 수 있는 협업의 기반을 제공합니다. * 접근성(Accessibility)과 포용성 가이드를 시스템 차원에서 표준화하여, 개별 작업자의 숙련도와 관계없이 모든 제품이 일정 수준 이상의 품질과 사용자 경험을 유지하도록 돕습니다. 디자인 시스템을 구축할 때는 현재의 운영 효율성뿐만 아니라, 향후 AI 기반 자동화가 가져올 변화를 수용할 수 있는 유연한 아키텍처를 설계하는 것이 중요합니다. 시스템은 고정된 결과물이 아니라 제품의 성장과 함께 끊임없이 진화하는 유기적인 프로세스임을 인식해야 합니다.

Three New Features to Help Build Brand Momentum With Figma Buzz | Figma Blog (새 탭에서 열림)

효율적인 Figma 브랜드 템플릿은 단순한 디자인 결과물을 넘어, 비디자이너도 브랜드 일관성을 유지하며 콘텐츠를 생산할 수 있게 돕는 강력한 도구입니다. 이를 위해 디자이너는 오토 레이아웃과 변수(Variables) 같은 Figma의 고급 기능을 활용해 자동화된 시스템을 구축하고, 사용자가 실수하지 않도록 명확한 가이드를 제공해야 합니다. 결국 잘 설계된 템플릿은 협업 효율을 극대화하고 브랜드의 시각적 언어를 견고하게 유지하는 핵심 자산이 됩니다. **오토 레이아웃과 컴포넌트를 통한 유연성 확보** * **오토 레이아웃(Auto Layout) 활용:** 텍스트 길이나 이미지 크기에 따라 디자인 요소가 자동으로 반응하도록 설정하여, 사용자가 일일이 간격을 조정할 필요가 없게 만듭니다. * **컴포넌트 및 스타일 시스템:** 색상, 타이포그래피, 반복되는 UI 요소를 컴포넌트화하여 일관성을 유지하고, 한 번의 수정으로 전체 템플릿에 변경 사항을 적용할 수 있도록 설계합니다. **명확한 구조화와 내부 가이드 제공** * **페이지 및 섹션 정리:** 'Read Me(사용 설명서)', '컴포넌트 자산', '소셜 미디어', '이메일' 등 사용 목적에 따라 페이지와 섹션을 명확히 구분하여 탐색 시간을 단축합니다. * **템플릿 내 주석 삽입:** 각 템플릿 측면에 배치 가이드나 수정 방법, 권장 이미지 해상도 등을 주석(Annotation)으로 남겨 별도의 매뉴얼 없이도 즉시 작업이 가능하게 합니다. **브랜드 제약 사항과 변수(Variables)의 활용** * **선택의 폭 제한:** 너무 많은 자유도는 브랜드 일관성을 해칠 수 있으므로, 미리 정의된 브랜드 컬러와 폰트 세트 내에서만 선택할 수 있도록 제약을 둡니다. * **변수(Variables)를 이용한 테마 전환:** Figma의 변수 기능을 활용해 라이트/다크 모드나 서로 다른 서브 브랜드 테마를 클릭 한 번으로 전환할 수 있도록 설정합니다. **실제 데이터를 활용한 검증과 지속적인 개선** * **실제 콘텐츠 테스트:** 'Lorem Ipsum' 대신 실제 마케팅 문구와 이미지를 넣어 레이아웃이 깨지지 않는지, 가독성은 유지되는지 사전에 확인합니다. * **피드백 루프 구축:** 템플릿 사용자들이 겪는 어려움을 주기적으로 수집하여, 실무 환경에 최적화된 형태로 템플릿을 지속적으로 업데이트합니다. 훌륭한 템플릿은 디자이너의 손을 떠난 뒤에도 브랜드의 품질을 유지할 수 있어야 합니다. 사용자가 고민 없이 콘텐츠 제작에만 집중할 수 있도록 Figma의 자동화 기능을 적극적으로 도입하고, 친절한 가이드를 포함한 시스템 중심의 접근 방식을 취할 것을 권장합니다.

Why You Should Care About Design Context | Figma Blog (새 탭에서 열림)

디자인 시스템과 AI의 결합은 그동안 범용 대규모 언어 모델(LLM)이 개별 기업의 고유한 디자인 언어를 이해하지 못한다는 한계에 부딪혀 왔습니다. 하지만 Anthropic이 발표한 MCP(Model Context Protocol) 서버는 AI가 로컬이나 기업 내부의 디자인 데이터에 직접 접근할 수 있는 표준화된 통로를 제공함으로써 이 문제를 해결합니다. 이를 통해 AI는 단순한 코드 작성을 넘어 조직의 특정 디자인 토큰, 컴포넌트 라이브러리, 가이드라인을 완벽히 준수하는 '전문가급 보조 도구'로 진화하게 됩니다. ### 범용 AI의 한계와 디자인 시스템의 파편화 * **지식의 공백:** 기존 LLM은 인터넷상의 공개 데이터로 학습되었기 때문에, 특정 기업 내부의 비공개 디자인 시스템이나 최신 업데이트된 디자인 토큰에 대한 정보가 없습니다. * **할루시네이션(환각):** AI가 존재하지 않는 컴포넌트 이름을 지어내거나, 기업 표준과 맞지 않는 임의의 색상 값(Hex code)을 제안하여 실무 적용에 어려움을 겪습니다. * **맥락 유지의 어려움:** 디자인 시스템은 계속 변화하지만, AI 모델은 훈련 시점에 고정되어 있어 실시간으로 변경되는 디자인 규격이나 최신 문서를 반영하지 못합니다. ### MCP(Model Context Protocol)의 역할과 작동 원리 * **표준화된 인터페이스:** MCP는 AI 모델이 로컬 파일, 데이터베이스, API 등 다양한 데이터 소스에 안전하게 접근할 수 있도록 돕는 개방형 프로토콜입니다. * **AI를 위한 'USB 포트':** 마치 컴퓨터에 주변기기를 연결하듯, MCP 서버를 통해 기업의 디자인 시스템 저장소를 AI에 직접 연결하여 실시간 컨텍스트를 제공합니다. * **데이터 보안 유지:** 기업의 핵심 자산인 디자인 자산을 외부 모델에 학습시키지 않고도, 필요할 때만 AI가 참조할 수 있도록 설계되어 보안성이 높습니다. ### 디자인 시스템 전용 MCP 서버의 활용 시나리오 * **실시간 토큰 참조:** AI가 코드 작성 시 `design-tokens.json` 파일에 직접 접근하여, 최신 브랜드 컬러나 간격(Spacing) 값을 정확하게 가져와 적용합니다. * **컴포넌트 라이브러리 통합:** 기업 내부의 React나 Vue 컴포넌트 명세서를 AI가 실시간으로 읽어 들여, 조직의 코딩 컨벤션에 맞는 정확한 UI 코드를 생성합니다. * **문서화 및 가이드 준수:** 디자인 원칙이나 접근성 가이드라인이 담긴 문서를 MCP를 통해 연결하면, AI가 이를 바탕으로 코드 리뷰를 수행하거나 가이드를 위반한 부분을 지적할 수 있습니다. ### AI 기반 디자인 시스템의 미래와 생산성 향상 * **프로토타이핑 속도 극대화:** 디자이너나 개발자가 말로 설명하는 것만으로도, 시스템 규격에 맞는 고충실도(High-fidelity) 프로토타입을 즉시 구현할 수 있습니다. * **커뮤니케이션 비용 절감:** 디자인과 개발 사이의 간극을 AI가 채워줌으로써, 사소한 스타일 수정이나 컴포넌트 사용법에 대한 논의 시간을 획기적으로 줄여줍니다. * **일관성 유지:** 수많은 팀원이 협업하는 대규모 조직에서도 AI가 일관된 디자인 시스템 수호자 역할을 수행하여 제품 전반의 품질을 상향 평준화합니다. 성공적인 AI 워크플로우를 구축하기 위해서는 디자인 토큰과 컴포넌트 문서를 머신 러닝이 읽기 쉬운 구조로 정리하고, 이를 MCP 서버로 연결하는 기반 작업이 선행되어야 합니다. 이제 디자인 시스템 팀의 역할은 단순히 에셋을 만드는 것을 넘어, AI가 조직의 디자인 언어를 원활하게 소비할 수 있도록 '데이터의 다리'를 놓는 방향으로 확장될 것입니다.

Are Roles and Responsibilities a Thing of the Past? | Figma Blog (새 탭에서 열림)

Figma의 2025년 AI 리포트는 AI가 단순한 기능적 도구를 넘어 디자인과 개발 프로세스 전반을 재구성하는 핵심 인프라로 자리 잡았음을 강조합니다. AI는 반복적인 작업을 자동화하여 생산성을 비약적으로 높이는 동시에, 디자이너와 개발자의 역할을 단순 제작자에서 고차원적인 전략가와 큐레이터로 변화시키고 있습니다. 결론적으로 미래의 제품 개발은 AI를 활용한 기술적 효율성과 인간의 창의적 의사결정이 결합된 긴밀한 협업 구조로 진화할 전망입니다. **디자이너의 역할 변화: 제작에서 큐레이션으로** * 디자이너는 이제 픽셀을 직접 옮기는 작업보다 AI가 생성한 여러 시안 중 최적의 결과물을 선택하고 다듬는 '편집자' 및 '큐레이터'의 역할에 집중하게 됩니다. * 단순한 UI 레이아웃 생성은 AI에 맡기고, 사용자 경험(UX)의 맥락적 깊이와 브랜드 스토리텔링 같은 전략적인 문제 해결에 더 많은 시간을 할애하는 추세입니다. * AI 도구의 숙련도가 창의적 결과물의 품질을 좌우함에 따라, 프롬프트 활용 능력과 시각적 비평 능력이 디자이너의 필수 역량으로 부상하고 있습니다. **개발과 디자인의 경계 허물기** * AI는 디자인 자산을 코드로 변환하는 과정을 자동화하여, 디자이너와 개발자 사이의 고질적인 '핸드오프(Handoff)' 마찰을 획기적으로 줄여줍니다. * 개발자는 AI를 활용해 보일러플레이트 코드를 생성하고 디자인 시스템을 즉각적으로 코드화함으로써, 비즈니스 로직과 시스템 아키텍처 설계 등 핵심 개발 업무에 더 집중할 수 있습니다. * 양측이 공유하는 AI 기반 워크플로우를 통해 협업 언어가 통일되며, 프로토타이핑 단계에서 실제 구동 가능한 수준의 결과물을 확인하는 속도가 빨라지고 있습니다. **생산성 향상과 품질 유지의 균형** * AI 도입으로 초기 작업 속도는 기하급수적으로 빨라졌으나, 결과물의 상향 평준화로 인해 발생할 수 있는 '디자인의 독창성 부족'이 새로운 과제로 떠올랐습니다. * 보고서에 따르면 숙련된 전문가들은 AI 제안에 전적으로 의존하기보다, 이를 바탕으로 인간만이 구현할 수 있는 미세한 디테일과 감성적인 터치를 더하는 방식을 지향합니다. * 자동화된 워크플로우 속에서도 제품의 철학과 품질을 최종적으로 검증하는 '인간 중심의 검토(Human-in-the-loop)' 프로세스가 더욱 중요해지고 있습니다. **미래를 위한 AI 협업 전략** * 성공적인 팀은 AI를 인력 대체재가 아닌 '능력 증폭기'로 인식하며, 조직 전체의 AI 리터러시를 높이는 데 주력하고 있습니다. * 단순 기술 도입에 그치지 않고, AI가 확보해 준 여유 시간을 팀원 간의 심도 있는 소통과 제품의 장기적인 비전 설계에 재투자하는 전략이 필요합니다.

How to Harness Skills That AI Can’t Automate | Figma Blog (새 탭에서 열림)

AI 코딩 도구가 보편화되고 있지만, 대부분의 대규모 언어 모델(LLM)은 기업 내부의 고유한 디자인 시스템이나 컴포넌트 라이브러리에 대한 구체적인 맥락을 알지 못한다는 한계가 있습니다. 이를 해결하기 위해 모델 컨텍스트 프로토콜(MCP) 서버를 구축하면 AI가 실시간으로 디자인 토큰과 컴포넌트 명세에 접근할 수 있게 되어, 기업 표준을 완벽히 준수하는 코드 작성이 가능해집니다. 결과적으로 MCP는 AI의 생산성을 디자인 시스템의 일관성과 결합하는 핵심적인 연결 고리 역할을 합니다. **AI와 디자인 시스템 간의 단절 문제** * 일반적인 LLM은 오픈소스 라이브러리나 보편적인 CSS 프레임워크(Tailwind 등)에는 익숙하지만, 기업 내부의 비공개 디자인 시스템은 학습 데이터에 포함되어 있지 않습니다. * 이로 인해 AI가 생성한 코드는 기업의 고유한 디자인 규칙을 무시하고 하드코딩된 값이나 잘못된 컴포넌트 구조를 제안하여 기술 부채와 디자인 불일치를 초래합니다. * 컨텍스트 윈도우의 제한으로 인해 수천 줄의 디자인 시스템 문서를 매번 프롬프트에 포함시키는 방식은 비용과 정확도 측면에서 비효율적입니다. **MCP(Model Context Protocol)의 혁신적인 접근** * MCP는 Anthropic이 도입한 개방형 표준으로, AI 모델이 로컬 데이터나 외부 API에 안전하게 연결될 수 있도록 돕는 인터페이스입니다. * 디자인 시스템 전용 MCP 서버를 구축하면 AI가 필요할 때마다 실시간으로 컴포넌트 정의, 디자인 토큰 정보, 사용법 가이드라인을 직접 조회(Retrieval)할 수 있습니다. * 이는 단순한 코드 생성을 넘어, AI가 기업의 '단일 진실 공급원(Single Source of Truth)'을 실시간으로 참조하며 작동하게 함을 의미합니다. **MCP 서버를 통한 디자인 워크플로우 최적화** * **지능형 컴포넌트 추천**: AI가 현재 작업 중인 UI 맥락을 분석하고, MCP 서버를 통해 가장 적합한 내부 컴포넌트와 그에 맞는 속성(Props)을 정확하게 제안합니다. * **디자인 토큰 자동 적용**: 색상, 간격, 타이포그래피 등의 디자인 토큰 데이터베이스에 직접 접근하여, 매직 넘버(Magic Number) 대신 시스템 정의 변수를 사용하도록 강제합니다. * **실시간 검증 및 피드백**: AI가 작성한 코드가 디자인 시스템의 접근성 규칙이나 패턴을 준수하는지 MCP 서버를 통해 즉시 검토하고 수정 사항을 반영합니다. **조직 차원의 도입 가치와 효과** * 개발자는 디자인 문서를 일일이 검색하는 시간을 줄이고 비즈니스 로직에만 집중할 수 있어 개발 속도가 비약적으로 향상됩니다. * 시스템 업데이트 시 MCP 서버의 데이터만 갱신하면 AI가 즉시 새로운 표준을 따르게 되므로, 대규모 마이그레이션이나 리팩토링 과정이 훨씬 수월해집니다. * 디자인 시스템에 익숙하지 않은 신규 개발자나 타 부서 인원도 AI의 가이드를 통해 고품질의 일관된 UI 코드를 작성할 수 있게 됩니다. AI 시대의 디자인 시스템은 단순한 정적 라이브러리에 머물러서는 안 되며, AI가 즉시 이해하고 조작할 수 있는 데이터 구조를 갖추어야 합니다. MCP 서버는 이러한 전환을 가능케 하는 가장 실질적인 도구이므로, 디자인 시스템 팀은 단순히 UI Kit를 관리하는 것을 넘어 AI가 참조할 수 있는 '상황 맥락 데이터베이스'를 구축하는 데 집중해야 합니다.

In Good Company: How Retailers Use Figma to Elevate E-commerce | Figma Blog (새 탭에서 열림)

제시해주신 제목(Figma의 블로그 콘텐츠)을 바탕으로, 현대 에이전시들이 클라이언트와의 협업 방식을 어떻게 혁신하고 있는지에 대한 핵심 내용을 정리해 드립니다. 에이전시와 고객사 간의 협업 방식이 과거의 결과 중심적인 ‘대규모 공개(The Big Reveal)’에서 실시간 투명성을 강조하는 ‘오픈 키친’ 형태로 변화하고 있습니다. 이러한 변화는 피그마(Figma)와 같은 협업 툴을 통해 디자인 과정을 실시간으로 공유함으로써 가능해졌으며, 단순한 도구 도입을 넘어 신뢰와 효율성을 극대화하는 프로세스의 혁신을 의미합니다. 결과적으로 작업의 불확실성을 제거하고 클라이언트의 요구사항을 즉각적으로 반영하여 프로젝트의 성공 확률을 높이는 것이 이 변화의 핵심 결론입니다. **블랙박스 모델에서 투명한 협업으로의 전환** * 과거 에이전시는 내부에서 작업을 완결한 뒤 최종 결과물만 발표하는 방식을 취했으나, 이제는 작업 초기 단계부터 클라이언트를 캔버스에 초대합니다. * 클라이언트는 진행 상황을 수시로 확인하며 의사결정 과정에 참여할 수 있어, 프로젝트 막바지에 발생할 수 있는 대대적인 수정 요청(Pivot)을 미연에 방지합니다. * 이러한 투명성은 에이전시와 클라이언트 사이의 '심리적 거리'를 좁히고 파트너십을 더욱 공고히 하는 기반이 됩니다. **디자인 시스템을 통한 공통 언어 구축** * 에이전시는 단순한 페이지 디자인을 넘어, 클라이언트가 지속 가능하게 사용할 수 있는 ‘디자인 시스템’을 구축하여 전달합니다. * 디자인 시스템은 디자이너, 개발자, 클라이언트 모두가 이해할 수 있는 ‘공통의 언어’ 역할을 하며 소통 오류를 획기적으로 줄여줍니다. * 브랜드 가이드라인과 컴포넌트가 명확히 정의되면, 클라이언트 내부 팀도 전달받은 자산을 기반으로 일관성 있는 사후 관리가 가능해집니다. **실시간 피드백 루프와 개발 협업 최적화** * 피그마의 코멘트 및 브랜칭 기능을 활용해 비동기적으로도 긴밀한 피드백을 주고받으며 프로젝트의 리드 타임을 단축합니다. * 디자인에서 개발로 이어지는 핸드오프(Handoff) 과정에서 'Dev Mode' 등을 활용해 개발자가 필요한 코드와 에셋을 즉시 추출할 수 있도록 지원합니다. * 이를 통해 디자인 의도가 개발 단계에서 왜곡되지 않고 온전히 구현되며, 불필요한 커뮤니케이션 비용을 줄여 생산성을 높입니다. 현대적인 디자인 에이전시로 도약하기 위해서는 투명성을 두려워하지 않는 문화적 변화가 선행되어야 합니다. 디자인 도구를 단순한 제작 툴이 아닌 '소통의 플랫폼'으로 정의하고, 클라이언트를 작업 과정에 깊숙이 참여시켜 함께 제품을 만들어가는 파트너 관계를 구축할 것을 권장합니다.

Figma Launches Latin American Spanish Localization | Figma Blog (새 탭에서 열림)

Figma가 중남미 디자인 및 개발자 커뮤니티와의 접점을 넓히기 위해 라틴 아메리카 스페인어 현지화 버전을 공식 출시했습니다. 이번 업데이트는 단순한 번역을 넘어 문화적으로 최적화된 UI와 전용 지원 시스템을 포함하며, 전 세계 활성 사용자의 85%가 미국 외 지역에 거주하는 Figma의 글로벌 확장 전략의 일환입니다. 이를 통해 중남미 지역 기업들은 디자인 시스템을 더 효율적으로 확장하고 제품 개발 생산성을 높일 수 있게 되었습니다. ### 라틴 아메리카 시장의 성장과 현지화 배경 * **다섯 번째 현지화 언어:** 일본어, 스페인어(본토), 한국어, 브라질 포르투갈어에 이어 라틴 아메리카 스페인어가 Figma의 다섯 번째 공식 현지화 언어로 채택되었습니다. * **폭발적인 커뮤니티 성장:** 지난 한 해 동안 라틴 아메리카 지역에서만 1,000만 개 이상의 Figma 파일이 생성되었을 정도로 해당 지역의 창의적 에너지가 높습니다. * **주요 고객사 확보:** iFood, Mercado Libre, Nubank 등 중남미를 대표하는 유니콘 기업과 대형 금융기관들이 이미 Figma를 통해 디자인과 엔지니어링 워크플로우를 통합하고 있습니다. * **문화적 최적화:** 단순 텍스트 번역에 그치지 않고, 지역 사용자의 문화적 특성을 반영한 인터페이스와 전담 고객 지원을 통해 현지 기업들이 더 원활하게 제품을 설계할 수 있도록 돕습니다. ### 글로벌 플랫폼으로서의 데이터와 지표 * **압도적인 해외 사용자 비중:** 2024년 4분기 기준, Figma 월간 활성 사용자(MAU)의 약 85%가 미국 이외의 지역에 분포하고 있습니다. * **글로벌 매출 구조:** 2024년 전체 매출의 50% 이상이 미국 이외의 글로벌 시장에서 발생하며 명실상부한 글로벌 플랫폼으로 자리 잡았습니다. * **다양해진 사용자 직군:** 전체 사용자의 약 30%가 스스로를 개발자로 정의하고 있으며, 전통적인 디자이너 역할을 넘어 협업에 참여하는 비중이 전체 MAU의 2/3에 달합니다. ### 협업 환경에 주는 시사점 * **직군 간 장벽 완화:** 현지어 지원은 디자이너뿐만 아니라 제품 매니저, 개발자 등 다양한 이해관계자들이 디자인 시스템에 더 쉽게 접근하고 소통하게 만듭니다. * **글로벌 표준화 가속:** 전 세계 어디서든 동일한 수준의 현지화된 도구를 사용할 수 있게 됨에 따라, 다국적 기업 내에서의 협업 생산성이 더욱 향상될 것으로 기대됩니다. * **디자인 경쟁력 강화:** 현지 문화를 반영한 제품 제작이 쉬워지면서, 각 지역 기업들이 차별화된 사용자 경험(UX)을 신속하게 구축하고 시장에 배포할 수 있는 토대가 마련되었습니다.

In Good Company: How Agencies Are Transforming Client Collaboration | Figma Blog (새 탭에서 열림)

글로벌 뉴스 미디어들은 급변하는 뉴스 사이클 속에서도 일관된 브랜드 정체성과 높은 퀄리티의 사용자 경험을 유지하기 위해 피그마(Figma)를 핵심 도구로 활용하고 있습니다. 뉴욕타임스(The New York Times), 가디언(The Guardian), 디 차이트(Die Zeit)와 같은 주요 매체들은 디자인 시스템을 통해 제작 공정을 표준화하고, 기자와 디자이너 간의 실시간 협업을 강화하여 디지털 저널리즘의 한계를 넓히고 있습니다. 결과적으로 이들은 피그마를 단순한 디자인 도구를 넘어, 뉴스룸의 복잡한 커뮤니케이션을 간소화하고 독자에게 최적화된 시각적 경험을 전달하는 전략적 플랫폼으로 정의합니다. ### 뉴스룸의 속도와 일관성을 위한 디자인 시스템 * 뉴욕타임스는 'Oak'라는 디자인 시스템을 피그마로 관리하며, 수백 명의 디자이너와 엔지니어가 동일한 시각적 언어를 공유하도록 합니다. * 반복되는 UI 구성 요소를 컴포넌트화하여 속보 상황에서도 브랜드 가이드라인을 준수하면서 빠르게 레이아웃을 구성할 수 있는 환경을 구축했습니다. * 디자인 토큰(Design Tokens)을 활용해 텍스트 스타일, 컬러 팔레트 등을 체계적으로 관리함으로써 웹, 모바일 앱 등 다양한 플랫폼 간의 일관성을 유지합니다. ### 접근성 중심의 글로벌 협업 환경 구축 * 가디언은 전 세계에 퍼져 있는 팀원들이 피그마 내에서 실시간으로 동시에 작업하며 피드백을 주고받는 워크플로우를 통해 제작 시간을 단축했습니다. * 뉴스 소비의 보편성을 고려하여 피그마의 접근성 관련 플러그인을 적극 활용하며, 시각 장애가 있는 독자들을 위한 대비(Contrast)와 가독성 테스트를 디자인 단계에서 선행합니다. * 기자들과 편집자들이 피그마 파일에 직접 접속하여 텍스트의 길이를 조절하거나 레이아웃을 확인하는 과정을 통해, 디자인과 콘텐츠 간의 불일치를 최소화합니다. ### 인터랙티브 스토리텔링과 프로토타이핑의 결합 * 디 차이트는 복잡한 데이터 시각화나 심층 보도 기사에서 피그마의 프로토타이핑 기능을 사용하여 실제 개발 전 사용자 흐름을 사전에 검증합니다. * 정적인 이미지를 넘어 오토 레이아웃(Auto Layout) 기능을 통해 기기별 반응형 디자인을 실시간으로 테스트하며, 독자가 기사를 읽는 방식에 최적화된 화면 구성을 설계합니다. * 디자이너와 개발자 간의 원활한 핸드오프(Handoff)를 위해 피그마 내의 속성값과 에셋을 공유함으로써, 고난도의 인터랙티브 요소를 높은 완성도로 구현합니다. 디지털 퍼블리싱 환경에서 디자인은 더 이상 마지막 단계의 포장이 아니라 뉴스 가치를 전달하는 핵심 요소입니다. 뉴스룸은 피그마와 같은 협업 도구를 통해 내부 장벽을 허물고, 체계화된 디자인 시스템을 기반으로 더 빠르고 접근성 높은 저널리즘을 구현해야 합니다. 만약 뉴스룸이나 콘텐츠 기반의 서비스를 운영 중이라면, 디자인 시스템의 컴포넌트화를 통해 제작 효율을 높이고 실시간 협업 문화를 정착시키는 것이 디지털 전환의 핵심적인 출발점이 될 것입니다.

Introducing Figma Make: A New Way to Test, Edit, and Prompt Designs | Figma Blog (새 탭에서 열림)

Figma는 Config 2025를 통해 디자인의 경계를 한 단계 더 확장하며, 특히 AI와 고도화된 프로토타이핑 기술의 융합을 핵심 과제로 제시합니다. 단순한 도구를 넘어 디자이너의 창의성을 증폭시키고 개발과의 간극을 좁히는 생태계를 구축하는 것이 이번 발표의 궁극적인 목표입니다. 이를 통해 디자인 프로세스는 더 효율적이고 체계적인 방향으로 진화할 전망입니다. **AI 기술을 통한 디자인 프로세스의 혁신** - 디자인 작업의 단순 반복을 줄이기 위해 생성형 AI를 워크플로우 전반에 깊숙이 통합합니다. - 디자이너가 아이디어를 텍스트나 간단한 스케치로 입력하면, AI가 초기 레이아웃이나 컴포넌트 구성을 제안하여 작업 속도를 획기적으로 높입니다. - 문맥을 이해하는 디자인 제안 기능을 통해 프로젝트의 일관성을 유지하면서도 창의적인 대안을 빠르게 탐색할 수 있도록 돕습니다. **프로토타이핑과 개발 협업의 고도화** - 정적인 디자인을 넘어 실제 제품과 유사한 수준의 복잡한 인터랙션을 구현할 수 있는 프로토타이핑 기능을 강화합니다. - 디자인 단계에서 정의된 데이터와 로직이 개발 환경으로 자연스럽게 이어지도록 설계-개발 간의 '핸드오프(Hand-off)' 과정을 최적화합니다. - 복잡한 애니메이션과 상태 변화를 코드 작성 없이도 직관적으로 제어할 수 있는 도구를 제공하여 사용자 경험(UX) 검증의 정확도를 높입니다. **브랜드 시스템의 확장과 관리** - 대규모 조직에서도 일관된 브랜드 정체성을 유지할 수 있도록 더욱 강력한 브랜드 시스템 관리 기능을 선보입니다. - 다양한 플랫폼과 디바이스 환경에 맞춰 브랜드 자산이 자동으로 최적화되는 동적 디자인 시스템을 지원합니다. - 팀 단위의 협업을 넘어 전사적 차원에서 브랜드 가이드라인을 실시간으로 동기화하고 적용할 수 있는 환경을 구축하여 운영 효율성을 극대화합니다. 디자이너는 이제 단순한 시각적 구현을 넘어 AI와 협업하며 전체적인 사용자 경험의 전략을 설계하는 역할로 진화해야 합니다. Config 2025에서 제시된 도구들을 적극적으로 수용하여 워크플로우를 자동화하고, 보다 고차원적인 창의적 문제 해결에 집중하는 것이 변화하는 환경에 적응하는 핵심이 될 것입니다.

Express Yourself with Figma Draw | Figma Blog (새 탭에서 열림)

피그마(Figma)의 연례 컨퍼런스인 'Config 2025'는 디자인의 한계를 넘어서는 기술적 혁신과 새로운 창의적 지평을 제시합니다. 인공지능(AI)의 심화된 통합과 고도화된 프로토타이핑 도구를 통해 디자이너와 개발자 사이의 간극을 줄이고, 브랜드 가치를 디지털 환경에서 더욱 강력하게 구현하는 데 초점을 맞추고 있습니다. **AI 기반의 디자인 워크플로우 혁신** * 단순 반복 작업을 넘어 디자인 의사결정을 보조하는 AI 기능을 강화하여 디자이너가 전략적인 창의성에 집중할 수 있는 환경을 조성합니다. * 데이터 기반의 디자인 추천 시스템과 자동화된 레이아웃 생성 기능을 통해 복잡한 인터페이스 설계 속도를 획기적으로 높입니다. **고해상도 프로토타이핑과 상호작용** * 실제 제품의 동작 방식을 완벽하게 모사할 수 있는 고급 프로토타이핑 기능을 도입하여 사용자 테스트의 정확도를 향상시킵니다. * 변수(Variables)와 조건부 로직을 활용해 디자인 단계에서 실제 애플리케이션에 가까운 복잡한 인터렉션을 구현할 수 있도록 지원합니다. **디자인 시스템과 브랜드 일관성 강화** * 브랜드 가이드를 디자인 시스템에 유연하게 녹여내어 다양한 플랫폼과 디바이스에서도 브랜드 아이덴티티가 일관되게 유지되도록 돕습니다. * 대규모 조직 내에서 디자인 자산의 배포와 업데이트를 중앙에서 효율적으로 제어할 수 있는 관리 도구를 확장합니다. **개발자 협업 및 핸드오프 최적화** * 디자인에서 코드로 전환되는 과정을 더 정교하게 다듬어 개발자가 별도의 해석 없이도 정확한 UI 구성 요소를 구현할 수 있게 합니다. * Dev Mode의 기능 고도화를 통해 디자인 스펙 확인부터 코드 추출까지의 전체 흐름을 더욱 매끄럽게 연결합니다. Config 2025는 디자인이 단순한 시각 작업을 넘어 비즈니스와 기술의 중심축으로 진화하고 있음을 보여줍니다. 이번에 발표된 AI 및 프로토타이핑 신기능들을 디자인 시스템에 적극적으로 도입하여 업무 효율성을 극대화하고, 더욱 복잡해지는 디지털 제품 환경에 선제적으로 대응해 보시기 바랍니다.