Figma/디자인 시스템

246 개의 포스트

figma원문

피그마, 인도에 새로운 (새 탭에서 열림)

피그마(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 기능들을 활용해 아이디어를 실제 제품으로 구현하는 시간을 단축하고, 디자인 시스템의 일관성을 유지하면서도 창의적인 실험을 지속할 수 있는 환경을 구축할 것을 권장합니다.

figma3분 읽기큐레이션 요약

제13호:

빠르게 변화하는 AI 시대에는 디자인 시스템이 품질과 일관성을 유지하는 기반이 된다. Figma는 디자인 시스템을 사람뿐 아니라 AI도 활용할 수 있도록 확장하고, Figma Make와 MCP 서버를 통해 디자인·코드·협업의 연결을 강화하고 있다. 또한 AI 도구가 작업을 정확히 이해하도록 파일 구조와 디자인 맥락을 명확하게 관리해야 한다고 강조한다. ## AI 시대의 디자인 시스템 - 디자인 시스템은 팀의 취향, 품질 기준, 디자인 의도를 반복적으로 확장하는 장치다. - AI가 디자인과 코드를 생성하는 환경에서는 잘 정리된 시스템이 결과물의 품질과 일관성을 높인다. - Schema by Figma 2025에서는 디자인 시스템을 AI 워크플로에 연결하는 방법을 소개했다. - Figma Make에 디자인 시스템의 맥락을 반영하고, MCP 서버를 통해 에이전트형 코딩 작업에서도 디자인 기준을 활용할 수 있도록 했다. - 목표는 AI가 임의의 결과를 만드는 것이 아니라, 팀의 컴포넌트·스타일·규칙에 맞는 결과를 생성하도록 하는 것이다. ## Figma Make로 새로운 작업 방식 만들기 - Figma Make를 활용하면 디자이너가 기존의 시각적 디자인 작업을 넘어 코드 기반 프로토타입과 제품 아이디어를 빠르게 만들 수 있다. - 디자인팀은 제품 로드맵을 다시 구성하거나, 반복적으로 사용할 시작 템플릿을 만드는 등 새로운 방식으로 도구를 활용하고 있다. - Maven Clinic, Pendo, ServiceNow, LinkedIn 등의 사례가 소개된다. - 프롬프트를 통해 아이디어를 발전시키면서 디자인, 코드, 협업 사이의 전환 비용을 줄일 수 있다. - 결과적으로 디자인 시스템은 완성된 화면을 관리하는 데 그치지 않고, 새로운 제품 경험을 탐색하는 출발점이 된다. ## AI가 이해할 수 있는 디자인 맥락 - AI 코딩 도구가 일상적인 개발 과정에 포함되면서 디자인 파일의 구조와 설명이 더욱 중요해졌다. - 개발자와 AI가 디자인 의도를 정확히 파악할 수 있도록 다음 요소를 명확하게 관리해야 한다. - 파일과 페이지의 체계적인 구성 - 의미가 드러나는 레이어와 컴포넌트 이름 - 디자인 결정에 대한 주석과 설명 - 디자인 시스템의 사용 규칙 - 화면 간 관계와 필요한 상태 정보 - 시각적으로 보기 좋은 파일만으로는 충분하지 않으며, 다른 사람이 작업 의도를 추론할 수 있는 맥락 정보가 필요하다. - 명확한 맥락은 에이전트형 코딩 도구가 디자인을 코드로 변환할 때 정확도와 효율성을 높인다. ## 디자인 시스템 관련 학습 자료 - Figma는 Schema 2025를 준비하며 디자인 시스템의 기초부터 AI 기반 자동화까지 기존 콘텐츠를 정리했다. - 디자인 시스템을 처음 도입하는 팀은 기본 개념과 운영 원칙부터 학습할 수 있다. - 변화가 큰 환경에서 디자인 리더가 팀의 회복력과 적응력을 높이는 방법도 함께 제안한다. - 디자인 시스템은 단순한 UI 컴포넌트 모음이 아니라, 팀의 협업 방식과 제품 품질을 지탱하는 조직적 기반으로 다뤄진다. 실무에서는 컴포넌트와 토큰을 정리하는 데서 멈추지 말고, 파일 구조·명명 규칙·주석·사용 지침까지 문서화하는 것이 좋다. 이렇게 구축한 디자인 시스템을 Figma Make나 AI 코딩 도구와 연결하면 빠른 생성 속도와 일관된 품질을 함께 확보할 수 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Schema 2025:

Figma의 Schema 2025는 디자인 시스템을 정적인 규칙 모음에서 디자인·코드·AI를 연결하는 살아 있는 기반으로 발전시키는 방향을 제시한다. 이를 위해 여러 브랜드를 지원하는 컬렉션, 컴포넌트 확장성을 높이는 슬롯, 변수 사용을 자동 점검하는 AI 기반 린터 등을 발표했다. 핵심 목표는 시스템의 일관성을 유지하면서도 팀과 제품별 유연성, 협업 범위, 개발 연계를 강화하는 것이다. ## AI 시대의 디자인 시스템 - 제품·디자인·엔지니어링의 경계가 흐려지고, 더 많은 사람과 AI 도구가 제품 개발에 참여하고 있다. - 디자인 시스템은 팀 간 일관성을 유지하는 공유 언어를 넘어, AI가 디자인과 코드를 이해하도록 돕는 번역 계층으로 확장되고 있다. - Figma는 디자인 시스템의 발전 방향을 다음 세 가지로 제시한다. - 강력한 기능과 유연성의 균형 - 디자인과 코드 사이의 연결 강화 - 더 많은 사람이 디자인 프로세스에 참여할 수 있도록 영향력 확대 ## 브랜드 확장을 지원하는 Extended collections - 기존 변수 컬렉션은 단일 브랜드나 단순한 테마 관리에는 적합하지만, 여러 제품과 브랜드를 운영하는 기업에는 한계가 있었다. - Extended collections를 사용하면 디자인 시스템 관리자가 기본 시스템을 화이트라벨 형태로 배포할 수 있다. - 각 제품이나 브랜드의 디자이너는 기본 시스템을 바탕으로 자체 테마를 추가하고, 이를 게시·재사용할 수 있다. - 확장 컬렉션은 부모 디자인 시스템과 연결되어 다음 변경 사항을 자동으로 상속한다. - 새 변수 추가 - 색상 업데이트 - 핵심 시스템의 기타 변경 - 팀이 명시적으로 재정의한 색상과 값은 유지되므로, 중앙 통제와 브랜드별 자율성을 함께 확보할 수 있다. - 2025년 11월 제공 예정으로 소개됐다. ## 컴포넌트 유연성을 높이는 Slots - 기존 컴포넌트 인스턴스는 구조가 제한적이었다. - 예를 들어 드롭다운 컴포넌트에 새 항목을 추가하려면 미리 숨겨 둔 항목을 활성화하거나, 컴포넌트를 분리(detach)해야 했다. - 컴포넌트를 분리하면 디자인 시스템과의 연결이 끊겨 일관성과 개발 핸드오프가 약화된다. - Slots를 사용하면 인스턴스 내부에 사용자가 직접 레이어를 추가할 수 있다. - 특정 슬롯이 어떤 인스턴스를 허용할지도 지정할 수 있어 다음 효과를 얻는다. - 컴포넌트 사용성 향상 - 디자인 시스템 규칙 준수 - 컴포넌트 연결을 유지한 채 콘텐츠 확장 - 슬롯 기능은 얼리 액세스로 제공될 예정이며 별도 신청이 필요하다. ## AI 기반 변수 검수 기능, Check designs - 개발 핸드오프 과정에서 실제 값 대신 어떤 디자인 토큰이나 변수를 사용해야 하는지 확인하는 일이 자주 발생한다. - Check designs 린터는 디자인을 개발 준비 상태로 표시하거나 빠른 실행 메뉴를 통해 실행할 수 있다. - 시스템은 원시 값과 대응하는 변수를 비교해, 디자인 시스템에 맞지 않는 요소를 찾아낸다. - Figma의 사용자 지정 모델이 현재 맥락에 적합한 변수를 추천한다. - 디자이너는 추천 내용을 검토한 뒤 적용할 수 있으므로, 자동화와 최종 판단을 함께 유지할 수 있다. - 이를 통해 개발자는 변수 사용이 정리된 디자인을 전달받고, 핸드오프 과정의 추가 질문을 줄일 수 있다. - 조직 또는 엔터프라이즈 전체 좌석 플랜 사용자는 얼리 액세스를 신청할 수 있다. ## 디자인 시스템 운영 방향 - 디자인 시스템이 규모가 커질수록 단순한 표준화만으로는 다양한 제품·브랜드·플랫폼 요구를 충족하기 어렵다. - Figma의 이번 업데이트는 중앙 시스템의 일관성을 유지하면서도 제품 팀이 필요한 부분을 확장하도록 설계됐다. - 변수, 컴포넌트, AI 검수 기능을 결합해 디자인 시스템을 다음과 같은 운영 기반으로 만들려는 접근이다. - 중앙에서 관리되는 공통 규칙 - 제품별로 확장 가능한 테마와 콘텐츠 - 디자인 단계에서부터 검증되는 개발 연계성 - 사람이 만든 디자인 의도를 AI가 이해할 수 있는 구조 여러 브랜드를 운영한다면 Extended collections로 공통 토큰과 브랜드별 재정의를 분리하고, 복잡한 컴포넌트는 Slots를 통해 detach 없이 확장하는 방식이 유용하다. 또한 Check designs를 활용해 개발 핸드오프 전에 변수와 토큰 사용을 검수하면 디자인 시스템의 일관성과 구현 효율을 함께 높일 수 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Figma Buzz로 브랜드 모멘텀

Figma Buzz는 브랜드·마케팅 팀이 디자인 시스템을 지키면서도 대규모로 마케팅 자산을 제작하도록 돕는 도구다. 이번 업데이트에서는 디자인 시스템 기반의 유연한 템플릿, 외부 업무 도구를 연결하는 플러그인, 영상 트리밍 기능을 추가했다. 이를 통해 디자이너는 브랜드 가이드라인을 통제하고, 마케터는 다양한 채널과 캠페인에 맞게 자산을 직접 수정할 수 있다. ## 디자인 시스템과 연결된 구성 가능한 템플릿 - Figma Design에서 컴포넌트 세트와 컴포넌트 속성을 사용해 만든 템플릿을 Figma Buzz로 복사할 수 있다. - 복사된 템플릿에서는 디자인 시스템의 속성이 자동으로 작동한다. - 마케터는 수백 개의 템플릿 변형을 일일이 찾지 않고, 하나의 템플릿 세트 안에서 필요한 옵션을 선택할 수 있다. - 템플릿의 **Change layout** 패널에서 다음과 같은 작업이 가능하다. - Instagram, LinkedIn 등 채널에 맞는 레이아웃 선택 - 드롭다운을 통한 레이아웃 변형 전환 - 날짜, 로고, CTA 등의 요소 표시 여부 토글 - 브랜드가 승인한 컴포넌트 인스턴스 교체 - 색상 조합, 일러스트레이션 등 허용된 디자인 요소 변경 - 디자이너는 편집 가능한 범위에 제약을 둘 수 있고, 마케터는 브랜드 규칙을 벗어나지 않으면서 다양한 결과물을 만들 수 있다. ## 플러그인을 통한 외부 도구 연동 - Figma Buzz에 플러그인 탭이 추가되어, 기존 Figma 생태계의 외부 도구를 작업 화면에서 직접 사용할 수 있다. - 초기 플러그인은 디지털 자산 관리, 번역 관리, 애니메이션 등의 마케팅 업무에 초점을 맞춘다. - 팀은 Figma Buzz를 떠나지 않고 승인된 자산을 불러오거나, 완성한 디자인을 외부 시스템에 업로드할 수 있다. - 조직의 필요에 따라 내부용 플러그인을 직접 만들고 게시할 수도 있다. ### 디지털 자산 관리 시스템 연동 - 대규모 이미지·디자인 자산을 관리하는 DAM과 연결해 브랜드 승인 이미지를 바로 검색하고 가져올 수 있다. - 최신 디자인을 DAM에 업로드해 자산 라이브러리와 동기화할 수 있다. - 소개된 DAM 플러그인은 다음과 같다. - Air - Brandfolder - Bynder - OrangeLogic ### 번역 관리 시스템 연동 - 번역 관리 시스템(TMS)의 번역문을 Figma Buzz 템플릿으로 직접 가져올 수 있다. - 캠페인 문구를 여러 언어로 현지화하고, 실제 디자인 맥락 안에서 번역 결과를 확인할 수 있다. - 마케팅·번역·디자인 팀 간의 협업과 글로벌 캠페인 확장에 필요한 컨텍스트 전환을 줄인다. ### 애니메이션 및 기타 플러그인 - 애니메이션 제작 등 디지털 콘텐츠 업무를 지원하는 플러그인도 제공된다. - 마케팅 팀은 자산 관리, 번역, 모션 작업에 사용하는 기존 도구를 Figma Buzz와 연결해 하나의 제작 흐름으로 통합할 수 있다. ## Figma Buzz 안에서 영상 트리밍 - Figma Buzz에서 영상의 필요한 구간만 직접 잘라 사용할 수 있다. - 별도의 영상 편집 도구를 거치지 않고, 마케팅 자산 안에서 영상이 재생되는 범위를 조정할 수 있다. - 소셜 미디어 게시물, 디지털 광고, 이벤트 홍보물처럼 영상 길이와 시작·종료 지점이 중요한 자산을 더 세밀하게 제어할 수 있다. ## 업데이트의 배경과 목표 - Figma Buzz는 제품 출시 이후 브랜드와 마케팅 팀이 소셜 게시물, 디지털 광고, 이벤트 홍보물 등을 대규모로 제작하도록 설계됐다. - 기존에도 영상 가져오기·내보내기, 팀 라이브러리 연결, Unsplash 이미지 추가 기능이 제공됐다. - 이번 업데이트는 단순한 템플릿 제작을 넘어 다음 세 가지를 강화한다. - 브랜드 일관성을 유지하는 편집 제어 - 마케팅 업무에 필요한 외부 시스템 연동 - 이미지뿐 아니라 영상까지 포함한 자산 제작 유연성 브랜드 디자이너는 디자인 시스템과 승인된 옵션을 중심으로 템플릿을 설계하고, 마케팅 팀은 이를 활용해 채널별 자산을 빠르게 제작하는 방식으로 Figma Buzz를 활용하는 것이 효과적이다. 특히 DAM·TMS를 이미 사용 중인 조직이라면 플러그인 연동을 통해 자산 검색과 번역 작업의 반복을 크게 줄일 수 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

디자인 시스템: 기초부터 앞으로

디자인 시스템은 대규모 제품에서 시각적 일관성을 유지할 뿐 아니라 디자인과 개발 사이의 간극을 줄이는 공통 기반이다. AI로 작업 속도와 아이디어 확장이 빨라질수록, 원칙과 구성 요소를 체계화한 디자인 시스템의 중요성은 더욱 커진다. 성공적인 시스템을 위해서는 명확한 문서화와 지속적인 성과 측정이 필수적이다. ## 디자인 시스템의 기원과 발전 - 디자인 시스템은 초기 그래픽 디자인과 인쇄 매체의 스타일 가이드, 타이포그래피 표준에서 출발했다. - 20세기 중반 기업 브랜드의 중요성이 커지면서 일관된 브랜드 정체성을 위한 종합 가이드라인이 발전했다. - 디지털 전환 이후 IBM, Microsoft, Apple, Google 등은 이러한 원칙을 디지털 인터페이스로 확장했다. - 오늘날의 디자인 시스템은 운영체제 규칙과 UI 패턴을 표준화하고, 내부 팀과 외부 개발자가 일관된 제품 경험을 만들도록 돕는다. - 기존 인쇄 디자인 시스템을 디지털 인터페이스로 전환한 미국 국립공원관리청 사례처럼, 오래된 디자인 원칙도 디지털 환경에 맞게 재해석할 수 있다. ## 문서화를 통한 도입 확대 - 문서화는 추상적인 디자인 원칙을 실제 작업 지침으로 바꾸는 역할을 한다. - 디자이너와 개발자가 시스템을 어떻게 사용해야 하는지 알 수 있는 공통 참고점이 되어 사용에 대한 자신감을 높인다. - Alaska Airlines의 디자인 시스템 Auro는 도입 과정에서 문서화를 우선시했다. - Figma의 오토 레이아웃 사용법 - 브랜치 병합 방법 - 주요 기능을 작업에 적용하는 방법 - 문서화만으로 adoption이 보장되지는 않는다. - 역할에 따라 필요한 정보가 다르므로 문서는 다음과 같이 다양하게 제공되어야 한다. - 개발자에게 필요한 상세 사양 - 디자이너를 위한 사용 지침 - 전체 팀이 이해할 수 있는 고수준 원칙 - 시각적 예시와 맥락 설명 - 디자인 과정에 참여하는 직군이 늘어날수록 문서는 명확하고 쉽게 접근할 수 있어야 한다. ## 디자인 시스템의 ROI 측정 - 디자인 시스템의 비즈니스 효과는 정량적 지표로 추적할 수 있다. - 활용 가능한 주요 지표는 다음과 같다. - 구성 요소와 기능의 사용량 - 팀과 프로젝트의 도입률 - 디자인 일관성 점수 - athenahealth는 일관성 점수를 분석하는 과정에서 특정 컨테이너 컴포넌트의 detach 증가를 발견했다. - 컴포넌트가 분리되는 현상은 다음 문제를 나타낼 수 있다. - 컴포넌트의 버그 - 현재 기능으로 충족되지 않는 개선 요구 - 기존 요소를 예상하지 못한 방식으로 조합하는 사용 패턴 - 따라서 지표는 단순히 성공 여부를 판단하는 수단이 아니라, 시스템의 결함과 사용자 요구를 발견하는 피드백 수단으로 활용해야 한다. ## 디자인 시스템이 맡는 역할 - 디자인과 개발 간의 커뮤니케이션 비용을 줄인다. - 반복적인 UI 제작을 표준화해 작업 효율을 높인다. - 여러 팀과 제품에 걸쳐 일관된 사용자 경험을 유지한다. - AI가 생성한 결과물을 검토하고 조정할 수 있는 기준과 제약을 제공한다. - 조직이 커질수록 개인의 경험이나 구두 지식에 의존하지 않고, 공유된 규칙과 문서에 기반해 협업하도록 만든다. 실무에서는 처음부터 거대한 시스템을 만들기보다 핵심 컴포넌트와 사용 규칙부터 정의하고, 역할별 문서와 사용 데이터를 함께 구축하는 것이 좋다. 특히 detach, 미사용 컴포넌트, 도입률 같은 신호를 정기적으로 분석하면 디자인 시스템을 실제 팀의 필요에 맞게 개선할 수 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Figma Make와 함께 디자인

Figma Make는 자연어 프롬프트와 기존 디자인을 바탕으로 작동하는 고충실도 프로토타입을 만들어, 아이디어를 빠르게 검증하고 공유하도록 돕는다. 글은 Maven Clinic, Pendo, ServiceNow, LinkedIn의 사례를 통해 디자인팀이 보류된 아이디어를 되살리고, 새로운 방향을 탐색하며, 협업하고, 디자인 시스템의 일관성을 유지하는 방법을 소개한다. 핵심은 디자이너가 반복적인 제작보다 문제 정의와 전략, 사용자 경험의 완성도에 더 집중하게 된다는 점이다. ## Figma Make가 디자인 탐색을 바꾸는 방식 - Figma Make는 프롬프트를 입력해 앱과 인터페이스를 생성하는 도구다. - 초기 아이디어를 단순한 목업이 아니라 직접 조작할 수 있는 프로토타입으로 발전시킨다. - 프로토타입을 통해 팀은 기능의 타당성, 사용자 흐름, 마이크로인터랙션을 더 빠르게 검토할 수 있다. - 디자인팀은 반복적인 레이아웃 제작과 프로토타이핑에 쓰는 시간을 줄이고, 취향·전략·비전에 집중할 수 있다. - Figma Make에서 만든 결과물을 Figma Design 캔버스로 복사해 세부 수정과 반복 작업을 이어갈 수 있다. ## 보류된 아이디어를 제품 로드맵으로 되돌리기 Maven Clinic은 난임 클리닉을 지도에서 찾는 기능을 출시 일정 때문에 보류했지만, Figma Make로 기능의 가능성을 설득할 수 있는 인터랙티브 프로토타입을 제작했다. - 초기 디자인을 Figma Make에 입력해 실제 제품처럼 보이고 작동하는 고충실도 프로토타입을 만들었다. - 완성도 높은 결과물이 Slack에서 널리 공유되고 CEO의 관심을 이끌어내면서, 우선순위에서 밀릴 수 있었던 기능을 다시 로드맵에 올렸다. - 다른 디자이너가 결과물을 수정한 뒤 Figma Make로 되돌리는 방식으로 디자인을 반복 개선했다. - 정적인 목업으로는 발견하기 어려운 마이크로인터랙션과 사용 흐름의 문제를 조기에 파악했다. - 팀은 “0에서 시작”하는 대신 어느 정도 구현된 상태에서 출발했고, 그 결과 클리닉 파인더 MVP를 4개 미만의 스프린트로 설계·개발·테스트·출시했다. - 2년 동안 백로그에 머물던 아이디어를 빠르게 검증 가능한 제품으로 전환한 사례다. ## 탐색과 협업을 위한 공통 활용 방향 글은 다음과 같은 네 가지 활용 방향을 제시한다. - **로드맵에 아이디어 되살리기**: 인터랙티브 프로토타입으로 이해관계자의 관심과 투자 결정을 이끌어낸다. - **미지의 영역을 탐색하기**: 여러 디자인 방향을 짧은 시간 안에 시도해 빈 캔버스에서 시작하는 부담을 줄인다. - **새로운 인터페이스를 함께 개선하기**: 디자이너와 제품·개발 등 다른 직군이 실제로 조작 가능한 결과물을 보며 구체적인 피드백을 주고받는다. - **초기 탐색에 디자인 시스템 반영하기**: 빠르게 만든 시안도 기존 제품의 시각 언어와 컴포넌트 체계를 유지해, 탐색과 일관성을 동시에 확보한다. ## 프로토타입이 PRD보다 먼저 올 수 있다 - Maven Clinic 사례에서는 프로토타입을 먼저 만든 뒤, 실제로 잘 작동한 부분과 부족한 부분을 바탕으로 제품 요구사항 문서(PRD)를 작성했다. - Figma Make 결과물은 추상적인 요구사항을 구체적인 사용자 흐름으로 바꿔준다. - 팀은 “무엇을 만들 것인가”뿐 아니라 “어떤 상호작용이 필요한가”, “어디서 사용성이 떨어지는가”를 초기에 논의할 수 있다. - 따라서 프로토타입이 요구사항을 검증하는 산출물을 넘어, 요구사항 자체를 구체화하는 출발점이 될 수 있다. ## 디자이너의 역할 변화 Figma Make는 디자이너의 역할을 실행 중심에서 판단과 방향 설정 중심으로 이동시킨다. - 반복적인 화면 제작보다 다양한 가능성을 빠르게 비교한다. - 팀의 논의를 시각적이고 조작 가능한 결과물로 전환한다. - 초기 단계에서 사용자 경험과 세부 상호작용을 검증한다. - 최종적으로는 생성된 결과물을 그대로 사용하는 것이 아니라, 디자이너의 취향과 전략적 판단으로 다듬는다. 실무에서는 Figma Make를 완성품 생성 도구로 보기보다, 아이디어를 빠르게 구체화하고 팀의 피드백을 모으는 탐색 도구로 활용하는 것이 효과적이다. 특히 장기간 보류된 기능이나 이해관계자의 동의를 얻기 어려운 아이디어를 실제로 경험 가능한 프로토타입으로 만들어 검증하는 데 유용하다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

디자인 맥락에 관심을

디자인 파일은 단순한 시각적 결과물이 아니라 개발자와 AI 코딩 도구가 이해하는 실행 가능한 맥락이어야 한다. Figma의 Dev Mode MCP 서버가 디자인을 코드로 변환할수록, 디자인 시스템과 파일 구조를 명확히 관리하는 일이 정확하고 빠른 구현의 핵심이 된다. 따라서 디자이너는 디자인 시스템을 코드와 연결하고, 개발자가 소비하기 쉬운 형태로 파일을 구성해야 한다. ## 디자인 시스템을 코드와 연결하기 - 색상, 간격, 크기, 타이포그래피를 **컴포넌트와 변수**로 표준화하면 반복 가능한 패턴과 일관성을 확보할 수 있다. - **Code Connect**를 사용하면 Figma 컴포넌트와 실제 코드 컴포넌트를 연결할 수 있다. - Dev Mode에서 실제 코드 스니펫을 제공한다. - Figma의 컴포넌트 속성 및 변형이 코드에서 어떻게 대응되는지 문서화한다. - **변수의 code syntax**를 지정하면 색상·타이포그래피·상태 등의 값이 웹과 네이티브 코드에서 어떤 문법으로 표현되는지 명확해진다. - Dev Mode MCP 서버는 이 정보를 AI 에이전트에 전달한다. - AI가 전체 코드베이스를 검색하지 않고도 적절한 컴포넌트와 변수 정보를 가져올 수 있다. - 디자인 시스템에 연결된 카드 컴포넌트라면, 정확한 간격·색상·타이포그래피와 실제 코드 구조를 반영한 코드를 생성할 수 있다. - 이러한 맥락을 Figma 라이브러리에 구축하면 조직 전체에서 재사용할 수 있어, 새로운 UI를 만드는 사람과 AI 도구 모두 같은 기준을 활용하게 된다. ## 개발자가 이해하기 쉬운 파일 구조 만들기 - 페이지 계층, 프레임, 레이어의 이름을 의도적으로 구성하면 디자인 작업뿐 아니라 개발자와 MCP가 디자인을 해석하는 데도 도움이 된다. - 파일 구조를 정리할 때는 다음 원칙이 중요하다. - **주요 반응형 브레이크포인트별 프레임을 만든다.** - 화면 크기에 따라 시각적 변화가 큰 경우 별도 프레임으로 표현한다. - 예를 들어 데스크톱 내비게이션이 모바일에서 메뉴 아이콘으로 바뀌는 동작을 명시할 수 있다. - **Auto Layout을 적극 활용한다.** - 다양한 화면 너비, 브레이크포인트, 텍스트 길이에 따라 레이아웃이 어떻게 변하는지 구조적으로 표현할 수 있다. - 단순히 픽셀 위치를 지정하는 것보다 실제 구현 방식에 가까운 정보를 제공한다. - 프레임과 레이어에 의미 있는 이름을 부여해 각 요소의 역할과 계층을 분명히 한다. - 잘 정리된 파일은 개발자가 디자인 의도를 추측하는 시간을 줄이고, AI 에이전트가 레이아웃과 컴포넌트 관계를 오해할 가능성도 낮춘다. ## 디자인 맥락이 AI 코딩의 정확도를 좌우한다 - 에이전트형 코딩 도구가 널리 사용되면서 디자인 파일의 구조와 명확성이 과거보다 중요해졌다. - AI는 시각적 결과만 보는 것이 아니라 다음과 같은 구조화된 정보를 활용해야 정확한 코드를 만들 수 있다. - 컴포넌트와 코드의 연결 관계 - 변수의 이름과 코드 문법 - 레이아웃 규칙과 반응형 동작 - 프레임 및 레이어의 계층 구조 - 디자인 시스템과 MCP 서버를 함께 사용하면 AI가 브랜드에 맞고 재사용 가능한 코드를 생성할 가능성이 높아진다. - 결과적으로 디자이너의 역할은 화면을 설계하는 데서 끝나지 않고, 개발과 AI가 활용할 수 있는 디자인 맥락을 구축하는 것까지 확장된다. 디자인을 전달할 때는 완성된 화면만 공유하기보다 컴포넌트·변수·코드 연결·반응형 구조를 함께 관리하는 것이 좋다. 특히 공통 라이브러리에 이러한 정보를 표준화해두면 개발자와 AI 모두 더 빠르고 일관되게 프로덕션 코드를 작성할 수 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

디자인 맥락, 제품을

Figma는 디자인 파일에 담긴 레이아웃, 상호작용, 디자인 시스템, 코드 구조 등의 맥락을 개발 환경 전반에서 활용할 수 있도록 Figma MCP 서버와 Code Connect를 확장했다. 원격 MCP 접속으로 IDE·AI 코딩 에이전트·브라우저에서 Figma에 연결할 수 있고, Figma Make의 실제 코드와 Code Connect의 프로덕션 컴포넌트 정보도 AI가 활용할 수 있다. 이를 통해 디자인에서 코드로 전환하는 과정의 마찰을 줄이고, 더 일관되고 효율적인 코드 생성을 지원한다. ## 디자인 맥락을 어디서나 공유 - AI 기반 코드 생성은 프롬프트만으로는 충분하지 않으며, 디자인 시스템 구조와 코드베이스 작성 방식 같은 추가 맥락이 필요하다. - Figma 파일에는 반응형 레이아웃, 인터랙션 세부사항, 시각적 프로그램 등 단순한 이미지 이상의 정보가 담겨 있다. - Figma는 이러한 팀의 축적된 디자인·개발 지식을 Figma 캔버스 밖에서도 사용할 수 있도록 만드는 것을 목표로 한다. ## 원격 Figma MCP 서버 - 기존에는 Dev Mode의 로컬 MCP 서버를 통해 개발자의 편집기에서 Figma 디자인 정보를 가져왔다. - 새 원격 접속 기능을 사용하면 데스크톱 앱 없이도 다음 환경에서 Figma에 연결할 수 있다. - IDE - AI 코딩 에이전트 - 브라우저 기반 AI 모델 - Android Studio, Replit, Warp 등 다양한 파트너 도구에서 Figma 디자인 맥락을 사용할 수 있다. - Figma MCP 파트너 카탈로그에서 사용하는 IDE나 에이전트를 찾아 쉽게 연동할 수 있다. - 디자인 시스템 규칙을 생성하는 기능 등 MCP 서버의 기능과 파트너 지원을 계속 확대할 예정이다. - Affirm은 MCP 서버를 사용해 주요 제품 플로우를 이틀 이내에 재구축했으며, 개발 속도가 “몇 배가 아니라 orders of magnitude” 향상됐다고 평가했다. ## Figma Make와 MCP의 연결 - Figma Make 파일을 MCP 클라이언트에서 사용하면 AI 모델이 렌더링된 프로토타입이나 이미지만 보는 것이 아니라 underlying code를 직접 확인할 수 있다. - MCP 서버는 Make 파일의 코드를 색인하고, 사용자가 요청한 파일이나 코드 일부를 선택적으로 제공한다. - 개발자와 AI 에이전트는 다음 방식으로 Make의 정보를 활용할 수 있다. - 특정 파일의 코드를 직접 재사용 - 구현 로직과 디자인 패턴을 참고 - 기존 코드 구조를 기반으로 새로운 기능 생성 - Anthropic, Cursor, Windsurf, VS Code와 협력해 해당 기능을 제공한다. - 향후에는 외부 파트너의 MCP 서버를 Figma Make 안에서도 연결할 계획이다. ## Code Connect의 컴포넌트 매핑 개선 - Code Connect는 Figma 디자인 컴포넌트와 실제 코드베이스의 컴포넌트를 연결하는 기능이다. - 기존에는 터미널에서 매핑을 수동으로 설정해야 했지만, 이제 Figma 내부에서 직접 매핑할 수 있다. - Figma에서 컴포넌트 탐색 - 연결할 코드와 파일 선택 - 연결 완료 또는 누락된 항목 확인 - 기존 Code Connect CLI도 계속 사용할 수 있으며, 다양한 프레임워크에 대해 속성(prop)과 변형(variant)이 매핑된 프로덕션 코드 스니펫을 Dev Mode에 제공한다. - MCP 서버와 Code Connect를 함께 사용하면 AI 에이전트가 다음 정보까지 얻을 수 있다. - 실제 코드 컴포넌트의 위치 - 컴포넌트 사용 지침 - 디자인과 코드 간의 연결 관계 - 내부 평가와 초기 고객 테스트에서 다음과 같은 개선이 확인됐다. - 더 일관된 코드 생성 - 코드 파일 탐색 속도 향상 - AI 에이전트의 토큰 사용량 감소 ## 연동 검토와 사용량 제한 - Figma는 외부 도구와의 연결이 확대되는 만큼 연동의 안정성과 기반 시스템도 강화하고 있다고 밝혔다. - 글에서 해당 섹션의 세부 내용은 제공된 본문이 중간에 끊겨 있어 확인할 수 없다. Figma를 사용하는 개발팀이라면 원격 MCP 서버로 IDE나 AI 에이전트에 디자인 정보를 연결하고, Code Connect로 핵심 UI 컴포넌트를 실제 코드와 매핑하는 방식이 효과적이다. 특히 Figma Make를 프로토타이핑 도구에 그치지 않고 코드 재사용과 AI 기반 구현의 출발점으로 활용할 수 있다는 점이 이번 업데이트의 실질적인 변화다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

Intercom AI 서밋의

Intercom의 AI 서밋 ‘Pioneer’ 브랜딩은 AI의 발전을 씨앗이 꽃피는 과정에 비유한 ‘외계적 슈퍼블룸’ 콘셉트로 제작됐다. Intercom Creative Studio는 꽃, 꽃가루 입자, 점묘 스타일, 3D 모션을 결합해 웹·영상·무대·인쇄물·굿즈까지 확장 가능한 시각 언어를 구축했다. 제작 전 과정을 Figma에서 협업하며 아이디어 탐색부터 프로토타이핑과 QA까지 하나의 작업 공간에서 진행한 점이 핵심이다. ## 인터콤의 브랜드를 확장하는 디자인 시스템 - Intercom의 Creative Studio는 일반적인 브랜드 가이드라인을 넘어, Intercom과 AI 고객 서비스 에이전트 Fin, 캠페인, 제품 출시, 웹사이트, 이벤트별 하위 디자인 시스템을 구축한다. - 약 30명으로 구성된 글로벌 팀은 Figma를 디자인 시스템과 협업의 중심, 즉 ‘핵심 허브’로 사용한다. - Pioneer 2025의 브랜드는 웹사이트와 디지털 캠페인뿐 아니라 다음 행사 요소에도 적용되어야 했다. - 무대 디자인 - 대형 디지털 스크린 - 안내 표지와 동선 표시 - 기념품 - 정적 이미지와 모션 콘텐츠 - 전년도 Pioneer의 ‘잠망경’ 콘셉트가 AI의 미래를 바라보는 시선을 표현했다면, 올해는 지난 아이디어가 성장하고 새로운 가능성으로 피어나는 모습을 표현하는 방향으로 전환했다. ## 폭넓은 크리에이티브 영역 탐색 - 팀은 Figma Design에서 다양한 무드보드를 제작하며 여러 시각적 방향을 폭넓게 실험했다. - 무드보드에는 다음 자료를 함께 배치했다. - 모션 에셋 - 정지 이미지 - 벡터 파일 - 로고 - 영상 레퍼런스 - 모션 디자이너, 브랜드 디자이너, 카피라이터가 같은 작업 공간에서 이미지 편집, 드로잉, 콜라주를 즉시 주고받았다. - 영상 임베드 기능을 활용해 초기 단계부터 모션 원칙을 검토했다. - 영상 위에 로고 스케치를 얹어 실제 커뮤니케이션에서 어떻게 보이는지 확인 - 메시지와 움직임이 함께 작동하는지 조기에 테스트 - 최종적으로 ‘AI 슈퍼블룸’이라는 콘셉트가 선택됐다. - 지난해 뿌린 씨앗이 올해 꽃으로 피어난다는 서사 - 꽃을 AI 발전과 새로운 아이디어의 상징으로 활용 - 꽃가루 입자를 연상시키는 점묘 스타일로 발표자 초상과 이미지를 표현 - 이해관계자에게 콘셉트를 공유할 때는 긴 아트보드에 설명과 시안을 배치했다. - 발표 슬라이드처럼 넘기지 않고 스크롤하며 탐색 가능 - 각 보드에 직접 댓글 작성 가능 - 피드백 단계별로 별도 페이지를 만들어 검토 과정과 결과물을 체계적으로 관리 ## 꽃과 꽃가루를 활용한 모션 언어 - 추상적인 콘셉트를 구체화하기 위해 3D 꽃 렌더링을 제작했다. - 꽃은 현실적인 식물보다는 다음과 같은 ‘외계적’ 특성을 갖도록 디자인됐다. - 비현실적인 크기 - 과장된 개화 속도 - 낯설고 변형되는 형태 - 이는 빠르게 변화하는 AI 기술의 성격과 연결된다. - 팀은 사실적인 표현 대신 꽃가루 입자에 집중해 차별화된 시각 언어를 만들었다. - 입자 밀도와 움직임을 조절해 풍부한 화면 구성 구현 - Pioneer 로고와 정적 이미지에도 입자 기반 스타일 적용 - 모션에서는 역동적으로, 인쇄물에서는 절제된 형태로 활용 가능 - 외부 스튜디오 Colors and the Kids와 협업해 꽃의 종류와 개화 애니메이션을 탐색했다. - Figma Draw로 영상의 특정 프레임 위에 직접 주석과 드로잉을 추가했다. - 움직임의 방향과 속도 표시 - 꽃잎 형태가 어떻게 바뀌어야 하는지 설명 - 별도 프로그램으로 파일을 옮기지 않고 반복 수정 ## Figma에서 진행한 웹 경험 프로토타이핑 - Pioneer 웹사이트의 디자인, 프로토타입 제작, QA를 모두 Figma 안에서 진행했다. - 플랫폼을 오가며 작업할 필요가 없어 디자인과 검수 과정이 단순해졌다. - 실시간 댓글 기능을 통해 디자이너와 협업자가 수정 중인 화면에 바로 의견을 남겼다. - Slack 등 별도 커뮤니케이션 도구로 맥락을 옮길 필요 감소 - 변경 사항과 피드백을 같은 화면에서 확인 - 개발자와 디자이너가 인터랙션을 조기에 검증 - 웹사이트 프로토타입은 브랜드가 정적인 그래픽에 머물지 않고 실제 사용자 경험으로 어떻게 작동하는지 확인하는 수단이 됐다. ## 실용적인 시사점 - 대규모 브랜딩 프로젝트에서는 초기 탐색, 모션 실험, 이해관계자 피드백, 웹 프로토타이핑을 하나의 협업 환경에 연결하면 작업 속도와 일관성을 높일 수 있다. - 콘셉트를 꽃이나 입자처럼 명확한 시각적 요소로 정의하되, 모션·인쇄·웹·공간 디자인에 모두 적용할 수 있도록 밀도와 움직임을 조절 가능한 시스템으로 설계하는 것이 중요하다. - 특히 초기 단계부터 정적 이미지와 모션을 함께 검토하면 최종 결과물에서 브랜드 경험이 매체별로 분리되는 문제를 줄일 수 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

제12호: 새로운 역할

AI와 빠른 반복 작업으로 제품 개발자의 역할 경계가 빠르게 흐려지고 있다. PM이 프로토타입을 만들고, 개발자가 디자인을 수정하며, 디자이너가 코드 기반 결과물을 생성하는 등 역할이 확장되는 만큼 협업 방식과 업무 규칙도 함께 바뀌어야 한다. Figma는 공동 제작, 실험, 디자인 시스템, AI 활용을 통해 이러한 변화를 관리하는 사례들을 소개한다. ## 역할의 확장과 변화 - 제품 개발자의 **64%가 두 개 이상의 역할**을 맡고 있다고 답했다. - 디자이너가 아닌 사람의 **56%가 디자인 관련 업무**를 수행한다. - AI 도구와 짧아진 반복 주기는 개인이 기존 직무 범위를 넘어 더 넓은 제품 개발 과정에 참여하도록 만든다. - 역할이 겹치는 환경에서는 전통적인 직무 구분보다 시간 관리와 협업 규칙을 새롭게 설계하는 것이 중요하다. ## 직접 만들어 설명하는 프로토타이핑 - Figma 제품 디자이너 Natasha Tenggoro는 Figma Buzz의 동영상 재생 동작을 말로 설명하기 어려워 Figma Make로 직접 프로토타입을 제작했다. - 여러 프로토타입을 통해 팀이 기능을 직관적으로 이해하는 세 번의 “아하” 순간을 만들었다. - 핵심은 완성된 사양서를 전달하는 것이 아니라, 작동하는 결과물을 빠르게 보여주며 논의를 구체화한 점이다. - AI 기반 제작 도구는 디자이너가 아이디어를 설명하는 데서 그치지 않고 직접 검증 가능한 형태로 구현하도록 돕는다. ## 음악에서 영감을 얻은 브러시 디자인 - Figma Draw의 새로운 산포 브러시는 음악의 장르와 표현 방식에서 영감을 받았다. - 브러시의 간격, 흔들림, 불규칙성은 음악의 템포·질감·볼륨을 조정하는 과정과 유사하게 다뤄졌다. - 두왑, 베이퍼웨이브, 컨트리풍 음악인 혼키통, 스크리모 등 **10개 장르**를 시각적 브러시 스타일로 해석했다. - 기능 설계에 다른 분야의 감각과 비유를 적용하면 단순한 도구 추가를 넘어 창작 가능성을 확장할 수 있다. ## Duolingo의 공동 제작 방식 - Duolingo의 Math 팀은 전통적인 디자인-개발 핸드오프 대신 디자인과 엔지니어링의 공동 제작을 강조한다. - “보여주고 설명하지 말라”는 원칙과 “v1과 MVP를 구분하라”는 태도를 바탕으로 빠르게 실험한다. - 스크래피한 프로토타입을 함께 만들고, 아이디어를 반복적으로 수정하며 제품 방향을 정한다. - 역할별 산출물을 순차적으로 넘기는 방식보다 문제를 함께 해결하는 방식이 더 빠른 실행과 재창작을 가능하게 한다. ## 에이전시와 프리랜서의 협업 변화 - 변화는 기업 내부 팀에만 국한되지 않고, 크리에이티브 에이전시와 프리랜서의 고객 협업 방식에도 나타난다. - 에이전시는 전통적인 클라이언트-공급자 경계를 줄이고 프로젝트 전 과정에서 고객과 함께 작업한다. - Figma 같은 협업 도구를 활용해 고객을 초기 아이디어, 시안 검토, 제작 과정에 지속적으로 참여시킨다. - 고객과의 공동 제작은 결과물의 품질뿐 아니라 의사결정 속도와 이해도도 높일 수 있다. ## 디자인 시스템과 AI 에이전트 - AI 에이전트에게 코드 생성을 맡길 때는 프롬프트만 개선하기보다 입력의 기준이 되는 디자인 시스템을 먼저 정비해야 한다. - 디자인 시스템과 MCP 서버를 결합하면 AI가 브랜드에 맞고 실제 제품 맥락에 적합한 결과물을 생성할 가능성이 높아진다. - 디자인 토큰, 컴포넌트, 패턴 같은 구조화된 정보가 AI의 출력 품질을 좌우한다. - 디자인 시스템은 사람을 위한 일관성 도구를 넘어 AI 생산성을 높이는 기반이 된다. ## 실무에 적용할 때의 시사점 - 직무 경계를 고정하기보다 팀원이 문제 정의부터 프로토타이핑과 구현까지 유연하게 참여하도록 한다. - 말로 설명하기 어려운 아이디어는 빠른 프로토타입으로 대체한다. - 디자인과 개발을 분리된 핸드오프로 운영하기보다 초기부터 공동 제작한다. - AI 활용 전 디자인 시스템과 브랜드 규칙을 구조화해 신뢰할 수 있는 입력을 마련한다. - 새로운 역할에는 새로운 협업 규칙이 필요하므로, 책임 범위와 검토 절차도 함께 재정의해야 한다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

역할과 책임은 이제 과거의

제품 개발 조직에서 역할과 책임의 경계가 점점 흐려지고 있다. 디자이너뿐 아니라 PM, 개발자, 마케터 등 다양한 직군이 디자인과 프로토타이핑에 참여하며, 응답자의 64%가 두 개 이상의 역할을 수행한다고 답했다. 이러한 변화는 협업과 의사결정을 빠르게 만들지만, 도구의 과잉과 역할 혼선이라는 새로운 문제도 낳고 있다. ## 제품팀의 역할 경계가 흐려지는 현상 - Figma는 Factworks와 Fusion Hill을 통해 51건의 정성 인터뷰와 1,199명 대상 설문을 진행했다. - 응답자의 64%가 자신을 두 개 이상의 역할로 인식했으며, 3분의 1 이상은 세 개 이상의 역할을 수행한다고 답했다. - 비디자이너의 56%는 적어도 하나의 디자인 관련 업무에 “많이” 또는 “매우 많이” 참여한다고 응답했다. - PM이 프로토타입을 만들고, 개발자가 초기 디자인을 검토하며, 마케터와 콘텐츠 담당자가 Figma 파일에 직접 의견을 남기는 방식이 일반화되고 있다. ## 디자인은 디자이너만의 업무가 아니다 - 비디자이너의 디자인 관련 업무 참여는 전년보다 10% 증가했다. - PM의 70%가 저충실도 목업이나 와이어프레임을 만들고 있으며, 59%는 인터랙티브 프로토타이핑도 수행한다고 답했다. - 제품 개발자 4명 중 1명은 최근 새로운 디자인 도구를 도입했다. - 아직 디자인 도구를 사용하지 않는 사람 중 42%는 1년 안에 사용할 계획이라고 밝혔다. - 마케터는 소셜 미디어용 시각 자료를 만들고, PM은 디자이너의 작업을 기다리기 전에 아이디어를 시각화하는 식으로 업무가 확장되고 있다. ## 역할 중첩이 협업을 개선하는 방식 - PM이 초기 아이디어를 목업으로 만들면 디자이너가 더 일찍 방향을 조정하고 불필요한 수정 왕복을 줄일 수 있다. - 개발자가 구현 전에 Figma 목업을 검토하면 기술적 제약이나 실현 가능성 문제를 조기에 발견할 수 있다. - 초기 시각화는 문제와 해결책에 대한 공통 이해를 형성하고, 직군 간 커뮤니케이션을 구체화한다. - 절약된 시간은 사용자 조사, 전략 수립, 디자인 시스템 유지·확장, 전문 역량 강화에 재투자할 수 있다. - 다만 역할 확장이 전문 디자이너의 가치를 대체한다기보다, 각 직군이 더 효과적으로 협업하기 위한 수단으로 활용되어야 한다. - 이를 위해서는 팀 내 신뢰 관계, 이른 단계의 비전 정렬, 새로운 도구를 배우는 동료에 대한 개방성이 중요하다. ## 도구 확산과 AI가 역할 변화를 가속한다 - 응답자의 72%는 AI 도구를 역할 변화의 가장 큰 원인으로 꼽았다. - Figma Make, Claude Code, GitHub Copilot 등을 활용하면 몇 가지 프롬프트만으로 프로토타입이나 실행 가능한 코드를 빠르게 만들 수 있다. - Notion, Figma Buzz, Airtable 같은 도구는 마케팅 자산 제작과 프로젝트 관리도 간소화한다. - 기술이 특정 직군의 전유물이 되기보다, 여러 직군이 직접 결과물을 만들 수 있도록 진입 장벽을 낮추고 있다. ## 도구 과잉이 만드는 마찰 - 역할 변화의 결과로 더 많은 소프트웨어를 사용하게 되었다고 답한 응답자는 71%였다. - 조사 대상은 스프레드시트, 프로젝트 관리, 그래픽 디자인, 코딩 보조 등 16개 도구 범주를 사용했다. - 제품팀은 평균 7.6개 범주의 도구를 함께 사용하고 있어, 개별 도구의 효과가 분산될 수 있다. - 새로운 도구가 빠르게 등장하면서 구성원이 이를 모두 학습하고 업무 흐름에 통합하기 어려워지고 있다. - 따라서 도구를 무조건 추가하기보다 팀의 협업 방식과 목적에 맞는 도구를 선택하고, 중복되는 워크플로를 줄이는 접근이 필요하다. 역할의 경계가 사라지는 흐름은 피하기보다 효과적으로 관리해야 한다. 각 직군이 초기 단계에서 시각화와 프로토타이핑에 참여하도록 장려하되, 전문성을 존중하고 도구 수를 체계적으로 관리하면 협업 속도와 제품 품질을 함께 높일 수 있다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

여름 캠페인의 해부:

Instacart는 1990년대의 향수를 자극하는 간식과 디자인을 활용해 “Summer Like It’s 1999” 캠페인을 진행했다. 1999년 가격으로 Bagel Bites, Capri-Sun, Otter Pops 등을 판매하고, 뉴욕에서 Third Eye Blind 무료 콘서트를 열어 온라인과 오프라인을 연결했다. 캠페인의 성공 요인은 여러 팀과 파트너가 Figma를 중심으로 실시간 협업하며 일관된 디자인 시스템을 구축한 데 있었다. ## 1990년대 향수를 되살린 캠페인 - 버터플라이 클립, 초커, 헐렁한 청바지, 버킷햇 등 당시 유행을 현대적으로 재해석했다. - “단순하고 carefree했던 시절”에 대한 향수를 캠페인의 정서적 기반으로 삼았다. - 대표적인 1990년대 간식을 당시 가격으로 제공해 과거의 여름 경험을 재현했다. - 앱 아이콘과 스플래시 화면부터 TV 광고, 옥외 광고, 콘서트까지 수십 개의 접점을 하나의 캠페인으로 연결했다. ## 브랜드와 복고풍 사이의 균형 - Instacart의 자체 브랜드 정체성을 유지하면서도 1990년대 분위기를 강하게 표현하는 것이 핵심 과제였다. - 청키한 타이포그래피, 선명한 색상, 피시 아이 렌즈 사진을 주요 시각 요소로 사용했다. - 팀은 다양한 1990년대 디자인 자료를 폭넓게 탐색한 뒤, 브랜드와 캠페인을 연결하는 핵심 요소만 추려냈다. - 크리에이티브 스튜디오는 타이포그래피, 색상, 일러스트레이션, 사진, 로고와 락업 표현을 매일 논의하며 방향을 조정했다. ## 확장 가능한 디자인 툴킷 - 캠페인 툴킷에는 다음 요소가 체계적으로 정리됐다. - 기본 및 보조 색상 팔레트 - 일러스트레이션 스타일 - 타이포그래피와 문구 배치 - 제품 패키지 표현 방식 - 사진 및 질감 활용법 - 로고와 캠페인 락업 규칙 - 툴킷은 단순한 가이드 문서가 아니라 내부 팀과 외부 파트너가 계속 활용하는 ‘살아 있는 파일’로 운영됐다. - 캠페인 진행 중 새로운 요구사항이 생겨도 기존 규칙 안에서 자유롭게 변형할 수 있었다. - Venmo 파트너십 광고처럼 예상하지 못한 확장 프로젝트도 기존의 글꼴, 일러스트, 사진 지침을 활용해 빠르게 제작할 수 있었다. ## Figma를 중심으로 한 협업 방식 - 브랜드, 퍼포먼스, 커머셜 마케팅, 앱 제작팀이 Figma를 공동 작업 공간으로 사용했다. - 마케터도 파일에 직접 접근해 작업 진행 상황을 확인하고, 제작 중간에 의견을 제시할 수 있었다. - 완성물을 마지막에 전달하는 방식 대신, 작업 과정의 ‘중간 상태’를 공유하며 지속적으로 수정했다. - 다양한 팀과 외부 이해관계자가 빠르게 움직이는 캠페인에서는 개방성과 유연성이 중요하다는 점을 보여준다. - Figma는 디자인 제작 도구이자 캠페인의 일관성을 유지하는 단일 기준점 역할을 했다. ## 세밀하게 설계한 사진 브리프 - 사진 브리프는 무엇을 촬영할지뿐 아니라 어떤 방식으로 촬영할지도 구체적으로 규정했다. - 캠페인의 핵심 CPG 제품이 사진 속에서 어떻게 보여야 하는지 명확히 지정했다. - 여러 이해관계자의 검토를 거쳐야 했기 때문에 제품 노출 방식과 촬영 구도가 세밀하게 정의됐다. - 사진 위에 일러스트레이션, 타이포그래피, 질감을 추가해 모든 소재가 동일한 캠페인처럼 보이도록 설계했다. - 낮은 앵글, 피시 아이 효과, 햇살이 느껴지는 야외 공간 등을 활용해 1990년대의 과장되고 낙관적인 분위기를 표현했다. ## 실용적인 시사점 대규모 캠페인에서는 완성된 결과물을 일방적으로 전달하기보다, 모든 팀이 접근할 수 있는 공유 툴킷과 실시간 리뷰 구조를 마련하는 것이 효과적이다. 특히 복고풍처럼 강한 스타일을 활용할 때는 시각적 요소를 무작정 늘리기보다 브랜드와 연결되는 핵심 규칙을 먼저 정하고, 그 안에서 다양한 실행물을 확장하는 방식이 유용하다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

회복 탄력성 있는 디자인 팀

빠르게 변하는 기술 환경과 AI의 확산 속에서 회복탄력적인 디자인 팀을 만들려면 팀의 심리적 안전과 건강을 먼저 확보해야 한다. 동시에 실험과 역할 확장을 장려하고, 디자인 완성도를 경쟁력으로 삼아 변화에 적응하면서도 높은 품질을 유지해야 한다. 글은 Figma, Twitter, 37signals에서의 경험을 바탕으로 리더가 고정된 해법보다 원칙에 기반해 팀을 운영해야 한다고 강조한다. ## 팀의 건강과 심리적 안전을 우선하기 - 스트레스, 과로, 번아웃, 발언에 대한 두려움이 있으면 구성원은 역량을 충분히 발휘하기 어렵다. - 서로 신뢰하고 공동의 목표를 공유하는 환경이 창의적인 협업의 기반이 된다. - 다양한 의견이 반영되도록 실시간 회의뿐 아니라 비동기 채널도 운영해야 한다. 그래야 회의에서 가장 목소리가 큰 사람만 의사결정을 주도하지 않는다. - 프로젝트의 초기 스케치부터 최종 디자인까지 모든 단계의 결과물을 자유롭게 공유하도록 장려한다. - 1:1 미팅, 커리어 대화, 팀 설문을 정기적으로 진행해 문제가 커지기 전에 팀의 상태를 파악한다. - 실제 가용 시간과 업무량을 고려해 과도한 약속을 피해야 한다. - 리더가 모르는 점이나 어려움을 솔직하게 드러내면 구성원도 취약함과 의견을 안전하게 공유할 수 있다. ## 실험과 역할의 유연성 장려하기 - 디자이너마다 강점과 성장 영역이 다르므로, 서로 보완적인 역량을 가진 사람들을 함께 배치하면 팀의 균형과 학습 효과가 커진다. - 리서치, 디자인, 제품, 엔지니어링의 경계가 점점 흐려지는 만큼 전통적인 직무 범위에만 머물지 않도록 해야 한다. - 디자이너가 실제 구현과 가까워지도록 AI 프로토타이핑이나 코드 실험을 장려한다. - 실제 작동하는 결과물을 빠르게 평가하면 더 나은 디자인 결정을 내릴 수 있고, 결과적으로 생산성이 높아지는 선순환이 생긴다. - 실험 결과와 학습 내용을 공유할 공간을 마련한다. Figma의 `#design-wip` 채널처럼 미완성 아이디어, 스케치, 작동하는 프로토타입도 공유할 수 있어야 한다. - 디자인 크리틱에 제품·엔지니어링 등 협업 직군을 참여시켜 새로운 관점과 포용적인 작업 방식을 만든다. - 현재 제품을 계속 출시하는 실행과 미래의 작업 방식을 탐색하는 발명을 동시에 진행해야 한다. ## 완성도를 차별화 요소로 삼기 - 경쟁이 치열한 시장에서는 유용하고 잘 실행된 제품이 사용자 충성도와 추천을 높이고 성장을 이끈다. - 특히 엔터프라이즈 소프트웨어에서는 디자인 완성도가 뒤로 밀리는 경우가 많기 때문에 세심한 품질 관리가 차별점이 될 수 있다. - 완성도 높은 결과물을 만들려면 시각적 일관성, 인터페이스의 명확성, 세부적인 사용자 경험에 주의를 기울여야 한다. - 빠른 출시와 품질 사이에는 trade-off가 발생할 수 있으며, 때로는 새 기능 추가보다 UX 개선을 우선해야 한다. - 속도를 중시하는 상황에서도 품질을 자동으로 희생하지 않도록 팀 차원의 기준과 우선순위를 명확히 해야 한다. 결국 리더는 안전하게 의견을 낼 수 있는 문화를 만들고, 실험과 직무 간 협업을 지원하며, 속도와 품질 사이의 균형을 관리해야 한다. 정기적인 팀 상태 점검과 현실적인 업무량 조정, 작게라도 지속적인 프로토타이핑이 회복탄력적인 디자인 팀을 만드는 실용적인 출발점이다.

원문 읽기(새 탭에서 열림)
figma3분 읽기큐레이션 요약

Forrester가 분석한 Dev Mode의

Figma의 Dev Mode는 디자인-개발 간 핸드오프와 반복적인 확인 작업을 줄여 개발자의 생산성과 출시 속도를 높인다는 내용이다. Forrester는 이를 바탕으로 3년간 개발자 생산성이 20~30% 향상되고, 개발자 1인당 매주 90분 이상을 절약할 수 있다고 분석했다. 복합 기업 모델에서는 약 1,000만 달러의 시간 절감 효과와 출시 기간 단축으로 인한 200만 달러의 추가 이익을 추정했다. ## Forrester의 분석 범위와 방법 - Figma는 Dev Mode 출시 2년 후 경제적 효과를 검증하기 위해 Forrester Consulting에 연구를 의뢰했다. - Forrester의 **Total Economic Impact(TEI)** 방법론을 활용했다. - Dev Mode를 사용하는 조직의 의사결정자 4명을 인터뷰했다. - 인터뷰 결과를 바탕으로 디자이너와 개발자 100~1,000명 규모의 복합 조직을 모델링했다. - 분석 대상의 핵심 문제는 다음과 같다. - 비효율적인 디자인-개발 핸드오프 - 디자인 의도 확인을 위한 반복적인 커뮤니케이션 - 중복 작업과 문서 탐색 - 개발 과정에서 발생하는 컨텍스트 전환 ## 개발자 생산성과 경제적 효과 - Dev Mode 사용으로 개발자 산출량이 **20~30% 증가**할 것으로 추정됐다. - 개발자 1인당 매주 **90분 이상**의 시간을 절약할 수 있는 것으로 나타났다. - 한 기업이 개발자 200명을 대상으로 조사한 결과, 평균 절감 시간은 **주 98분**이었다. - 복합 조직 모델에서는 3년 동안 개발자 효율성 향상으로 약 **1,000만 달러의 시간 절감 효과**를 추산했다. - 제품을 더 빠르게 출시함으로써 약 **200만 달러의 추가 이익**이 발생할 수 있다고 분석했다. - 효과는 단순히 코딩 속도 향상에만 있지 않고, 개발자가 실제 구현에 집중할 수 있도록 방해 요소를 줄이는 데서 비롯된다. ## 하나의 진실 공급원으로서의 Dev Mode - 디자이너와 개발자가 동일한 Figma 파일을 기준으로 작업하면서 디자인 정보가 분산되는 문제를 줄인다. - 개발자는 파일에서 다음 정보를 직접 확인할 수 있다. - 디자인 변수 - 정확한 치수와 사양 - 사용된 에셋 - 관련 문서 - 코드 스니펫 - Slack 메시지, 회의, 별도 문서 검색을 통해 디자인 의도를 확인할 필요가 줄어든다. - 시간대가 다른 글로벌 팀에서도 별도의 실시간 미팅 없이 필요한 정보를 스스로 확인할 수 있다. ## 핸드오프 방식에서 동시 협업 방식으로 - 기존 방식에서는 디자인이 완성된 뒤 개발로 넘기는 순차적인 핸드오프가 일반적이었다. - 이 과정은 디자인 의도 확인과 수정 요청이 반복되면서 출시까지 매우 오래 걸릴 수 있었다. - 한 피트니스 업계 기업은 Dev Mode를 통해 디자인과 개발이 진행 중인 상태에서 지속적으로 협업했다. - 그 결과 “코드가 전혀 없는 상태에서 출시까지” 걸리는 시간이 **2~3년에서 6~8개월**로 단축됐다고 보고했다. - 디자이너와 개발자가 작업 중간부터 피드백을 주고받으면 후반부의 대규모 재작업을 줄일 수 있다. ## 커뮤니케이션과 수작업 감소 - 개발자는 과거에 디자인 의도를 확인하기 위해 디자이너에게 질문하거나 별도 미팅을 요청해야 했다. - 디자이너 역시 수동으로 주석을 달고 사양을 설명하는 데 시간을 써야 했다. - Dev Mode는 필요한 정보를 디자인 파일 안에서 직접 제공해 이런 반복 작업을 줄인다. - 한 시스템 디자이너는 개발자가 변수, 사양, 코드 정보를 직접 확인할 수 있어 더 자율적으로 작업한다고 설명했다. - 결과적으로 다음과 같은 변화가 가능하다. - 불필요한 메시지와 회의 감소 - 수동 주석 작성 감소 - 디자인 확인을 위한 대기 시간 단축 - 개발자의 정신적 부담과 컨텍스트 전환 감소 - 구현과 제품 완성도에 더 많은 집중 ## 실용적인 시사점 Dev Mode 같은 협업 도구의 ROI는 기능 자체보다 핸드오프 과정에서 발생하는 대기·질문·중복 작업을 얼마나 줄이는지로 평가하는 것이 적절하다. 도입을 검토하는 팀이라면 개발자당 절감 시간, 디자인 확인에 소요되는 커뮤니케이션량, 재작업 횟수, 출시까지의 기간을 도입 전후로 측정하는 것이 좋다.

원문 읽기(새 탭에서 열림)
figma4분 읽기큐레이션 요약

디자인 시스템과 AI: MCP 서버

디자인 시스템은 AI가 브랜드와 팀의 표준에 맞는 코드를 생성하도록 만드는 핵심 맥락이며, MCP 서버는 이 맥락을 디자인 도구와 개발 환경 사이에서 전달하는 연결 고리다. Figma MCP 서버는 컴포넌트, 스타일, 변수, Code Connect 정보 등을 AI 에이전트에 제공해 생성 코드의 정확도와 일관성을 높인다. 결과적으로 디자인 시스템과 AI는 서로를 강화하는 선순환을 만들며, 더 빠르면서도 품질 높은 제품 개발을 가능하게 한다. ## 디자인 시스템과 AI의 선순환 - 디자인 시스템은 디자인과 엔지니어링 팀이 확장된 환경에서도 일관된 결정을 내리도록 돕는 기반이다. - 성공적인 디자인 시스템의 요소인 문서화, 공통 언어, 재사용 패턴, 브랜드 가이드는 AI 활용에도 필수적인 맥락이 된다. - AI가 디자인 시스템을 이해하면 단순히 “작동하는 결과물”이 아니라 팀의 표준과 의도에 맞는 결과물을 생성할 수 있다. - AI가 디자인 시스템을 활용해 더 나은 코드를 만들면, 디자인 시스템의 활용도와 품질도 다시 향상되는 선순환이 형성된다. ## MCP 서버가 제공하는 역할 - Figma MCP 서버는 Figma의 디자인 정보를 IDE와 AI 에이전트에 전달한다. - AI가 활용할 수 있는 정보에는 다음이 포함된다. - 컴포넌트와 스타일 - 디자인 변수와 변수의 코드 문법 - Code Connect를 통해 연결된 실제 코드 리소스 - 디자인 요소가 코드와 연결되어 있을수록 AI는 기존 컴포넌트와 구현을 재사용할 수 있어 더욱 정확한 코드를 생성한다. - 디자인 시스템이 아직 충분히 구축되지 않은 조직에서도 토큰과 컴포넌트 구현을 시작하는 데 MCP 서버를 활용할 수 있다. ## 디자인 시스템은 디자인과 AI의 공통 언어 - LLM을 통해 아이디어를 실행으로 옮기기 쉬워질수록, 기능뿐 아니라 시각적 완성도와 브랜드 정체성이 차별화 요소가 된다. - 디자인 시스템은 다음과 같은 기반을 제공한다. - **확장 가능한 기반:** 색상, 간격, 타이포그래피 등의 토큰을 정의해 플랫폼 전반의 일관성을 유지 - **재사용 가능한 컴포넌트:** 다양한 사용 사례에 대응하면서도 단일한 기준점 유지 - **내장된 접근성:** 처음부터 포용적이고 사용 가능한 인터페이스 설계 - 디자인 시스템이 없으면 AI가 생성한 결과가 비슷하고 일반적인 UI의 조합으로 수렴할 수 있다. - 디자인 시스템은 AI를 조직의 브랜드, 품질 기준, 개발 관행에 연결하는 매개체가 된다. ## 속도와 정확도를 높이는 디자인 맥락 - 글에서 인용한 Figma AI 보고서에 따르면 개발자의 68%가 코드 작성에 AI를 사용하지만, 생성 결과를 신뢰하는 디자이너와 개발자는 32%에 그친다. - AI가 디자인 시스템 없이 코드를 생성하는 것은 팀의 온보딩을 거치지 않은 신입 개발자에게 바로 코드를 배포하게 하는 것과 비슷하다. - 디자인 시스템 맥락이 제공되면 AI는 다음을 수행할 수 있다. - 기존 컴포넌트와 패턴을 재사용해 중복과 불일치 감소 - 디자인 토큰을 자동 적용해 브랜드 및 접근성 기준 준수 - 개발자가 바로 개선할 수 있는 품질 높은 초기 코드 제공 - 디자인과 개발 사이의 오해 및 QA 시간을 줄여 피드백 주기 단축 ## Figma MCP 서버의 코드 생성 방식 - Figma 프레임을 검사하면 MCP 서버가 해당 화면의 컴포넌트, 스타일, 변수 등의 맥락을 AI 에이전트에 전달한다. - Code Connect와 변수 코드 문법이 설정되어 있으면 AI는 실제 코드베이스의 컴포넌트와 리소스를 직접 활용할 수 있다. - 연결 정보가 없더라도 MCP 서버는 색상, 스타일, 레이아웃 등 디자인 정보를 제공해 AI가 디자인에 맞는 코드를 새로 작성하도록 돕는다. - 자동 디자인 시스템 규칙 생성 기능은 코드베이스를 분석해 다음 내용을 포함한 구조화된 규칙 파일을 만들 수 있다. - 토큰 정의 - 컴포넌트 라이브러리 - 스타일 계층 구조 - 명명 규칙 - 이 규칙 파일은 AI 에이전트의 시스템 수준 지침으로 작동해, 개발자가 매번 간격·토큰·이름 규칙을 상세히 프롬프트하지 않아도 팀의 기본값을 적용하게 한다. - 주석(annotations)을 사용하면 접근성 요구사항, 상호작용 방식, 콘텐츠 관련 추가 맥락도 AI에 전달할 수 있다. ## 실용적인 적용 방향 - AI 코드 생성 전에 디자인 토큰, 컴포넌트, 변수의 이름과 구조를 정리한다. - Figma 컴포넌트와 실제 코드 컴포넌트를 Code Connect로 연결한다. - 코드베이스의 규칙과 명명 체계를 AI가 참조할 수 있는 규칙 파일로 관리한다. - 접근성, 상호작용 동작, 콘텐츠 제약은 주석으로 명시한다. - MCP 서버는 AI를 대체하는 도구라기보다, 조직의 디자인 시스템을 AI가 활용할 수 있도록 변환하는 인프라로 보는 것이 적절하다.

원문 읽기(새 탭에서 열림)