figma·2026년 3월 24일·3분 읽기큐레이션 요약

에이전트, Figma 캔버스를 만나다 | Figma 블로그

Figma는 이제 AI 에이전트가 디자인 캔버스에서 직접 파일과 컴포넌트를 생성·수정할 수 있도록 지원한다. MCP 서버의 `use_figma` 도구와 Markdown 기반 스킬을 통해 에이전트가 팀의 디자인 시스템, 컴포넌트, 변수, 작업 규칙을 활용하게 되며, 결과적으로 코드와 디자인 사이의 단절을 줄이는 것이 목표다. 이 기능은 현재 베타 기간 동안 무료로 제공되지만 향후 사용량 기반 유료 기능으로 전환될 예정이다. ## AI 에이전트가 Figma 캔버스에서 작업 - Claude Code, Codex 등 MCP 클라이언트가 `use_figma` 도구를 통해 Figma 파일과 컴포넌트를 직접 생성하고 수정할 수 있다. - 에이전트는 색상, 버튼 패딩, 타이포그래피, 인터랙션 같은 팀의 디자인 결정을 Figma 안에서 참조한다. - 기존처럼 AI가 일반적이고 브랜드와 동떨어진 디자인을 만드는 대신, 조직의 디자인 시스템에 연결된 결과물을 생성할 수 있다. - 코드에서 시작한 작업도 Figma에서 검토·수정할 수 있고, Figma에서 결정한 내용을 다시 개발 과정에 반영할 수 있다. ## `generate_figma_design`과 `use_figma`의 역할 분담 - `generate_figma_design` - 실제 웹사이트나 애플리케이션의 HTML을 Figma 레이어로 변환한다. - 코드와 디자인이 달라졌을 때 최신 UI를 Figma로 가져오는 데 사용된다. - `use_figma` - Figma 캔버스에서 기존 디자인을 수정하거나 새로운 디자인 자산을 생성한다. - 팀의 컴포넌트, 변수, 자동 레이아웃 등 실제 디자인 시스템을 활용한다. - 두 도구를 함께 사용하면 코드의 최신 상태를 Figma로 가져온 뒤, 에이전트가 디자인 시스템에 맞춰 재구성하고 개선할 수 있다. ## Markdown으로 정의하는 Figma 스킬 - 스킬은 에이전트가 Figma에서 작업하는 방법을 설명하는 Markdown 파일 기반 지침이다. - 특정 작업의 순서, 적용해야 할 규칙, 팀의 디자인 관례와 품질 기준을 명시할 수 있다. - 플러그인을 개발하거나 별도의 코드를 작성하지 않아도 누구나 스킬을 만들 수 있다. - 기본 스킬인 `/figma-use`는 Figma의 구조와 핵심 원칙을 에이전트에게 알려주며, 팀은 이를 확장해 자체 업무 방식에 맞출 수 있다. - 스킬은 단순한 문서가 아니라 에이전트가 실제 작업 중 따라야 하는 실행 규칙으로 작동한다. ## 제공되는 스킬 사례 - `/figma-generate-library`: 코드베이스에서 Figma 컴포넌트 라이브러리 생성 - `/figma-generate-design`: 기존 컴포넌트와 변수를 사용해 새로운 디자인 생성 - `/create-voice`: UI 명세에서 VoiceOver, TalkBack, ARIA용 스크린 리더 사양 생성 - `/apply-design-system`: 기존 디자인을 디자인 시스템 컴포넌트와 연결 - `/rad-spacing`: 변수와 폴백을 사용해 계층적인 간격 적용 - `/sync-figma-token`: 코드와 Figma 변수 사이의 디자인 토큰 동기화 및 변경 감지 - `/multi-agent`: 여러 에이전트가 디자인 구현 작업을 병렬로 수행 - 커뮤니티 실무자가 만든 JSON 기반 컴포넌트 생성, 디자인 워크플로 오케스트레이션 등의 스킬도 제공된다. ## 구조 기반의 자기 수정 - 에이전트는 화면을 생성한 뒤 스크린샷을 찍고, 결과가 목표와 다른 부분을 확인해 반복적으로 수정할 수 있다. - 수정 대상이 단순한 픽셀이 아니라 실제 컴포넌트, 변수, 자동 레이아웃, 레이어 구조이므로 디자인 시스템과 상호작용하며 개선된다. - AI 모델의 비결정성 때문에 같은 프롬프트라도 결과가 달라질 수 있지만, 스킬이 작업 순서와 기준을 고정해 결과를 더 예측 가능하게 만든다. - 기존의 디자인 규칙과 팀 관례가 정적인 문서에 머무르지 않고, 에이전트가 작업 중 실제로 적용하는 규칙이 된다. ## 실용적인 의미 팀은 `use_figma`와 `/figma-use`를 기반으로 자체 디자인 스킬을 만들고, 컴포넌트·변수·토큰 사용 규칙을 명시하는 것이 좋다. 특히 코드와 Figma가 자주 어긋나는 조직이라면 `generate_figma_design`으로 최신 UI를 동기화한 뒤, `use_figma`와 스킬을 이용해 브랜드와 디자인 시스템에 맞게 다듬는 워크플로가 효과적이다.

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

디자인 토큰Figma디자인 시스템AI 에이전트+4

figma·2026년 3월 2일·3분 읽기큐레이션 요약

Config 2026 연사

AI 시대의 창의성은 인간을 대체하는 것이 아니라, 인간의 역할을 오케스트레이터·참여자·판단자로 확장하는 방향으로 발전한다. Config 2026 연사들은 AI를 예술과 제조를 연결하는 매체로 보고, 창작 과정의 품질과 의도, 그리고 인간의 감각과 책임을 더욱 중요하게 강조한다. 결론적으로 AI의 기회는 속도 자체보다 새로운 협업 방식과 실험적 제작 환경을 만드는 데 있다. ## AI 시대의 창작자 역할 변화 - Holly Herndon은 소프트웨어를 현대의 중요한 예술 매체로 바라본다. - AI를 활용하면 과거보다 복잡한 소프트웨어·예술 프로젝트를 만들 수 있으며, 창작자는 직접 모든 작업을 수행하기보다 전체 과정을 조율하는 “오케스트레이터”가 된다. - 이는 AI가 창작자를 대체한다기보다, 창작자가 다룰 수 있는 규모와 복잡성을 확장한다는 관점이다. ## 인간이 참여하는 AI 모델 - Herndon과 Mat Dryhurst의 프로젝트 **Starmirror**는 전시 관람객과 지역 합창단의 목소리를 수집해 새로운 AI 합창단을 학습시키는 작업이다. - 사람들은 단순히 AI 모델의 입력 데이터를 제공하는 데 그치지 않고, 생성된 결과물을 직접 경험하고 변형한다. - AI 모델을 기업이나 소수 전문가만의 도구가 아니라, 대중이 함께 만들고 실험하는 공동 창작물로 바라본다. - 따라서 AI 창작에서 중요한 요소는 모델의 성능뿐 아니라 데이터의 출처, 참여 방식, 결과물에 대한 인간의 개입이다. ## AI와 물리적 제작의 결합 - 3D 프린팅 패션을 개척한 Danit Peleg은 AI가 화면 속 디자인을 넘어 제조, 건축, 패션 등 현실 세계의 생산을 직접 움직일 것이라고 전망한다. - 그녀의 스튜디오는 AI 에이전트를 아이디어 구상부터 제작·가공까지의 전체 파이프라인에 참여시킨다. - AI와 Figma Weave 같은 도구를 활용하면 이미지·영상·애니메이션·모션 디자인·VFX 생성과 편집을 하나의 열린 캔버스에서 연결할 수 있다. - 디지털 창작과 실제 제조의 경계가 낮아지면서, 주문형 생산과 폐기물 감소 같은 새로운 제작 방식도 가능해진다. ## 창의성은 독창성보다 관심과 돌봄에 가깝다 - 디자이너이자 저자인 Vicki Tan은 창작과 의사결정이 모두 불확실한 상태에서 질문을 따라가며 전진하는 과정이라고 설명한다. - 창의성은 완전히 새로운 것을 만들어내는 능력만이 아니라, 이미 자신에게 의미 있게 느껴지는 요소를 세심하게 관찰하는 태도다. - 그녀는 창의성을 “독창성이나 재능”보다 “care 또는 attention”, 즉 관심과 돌봄에 가까운 것으로 본다. - 자신의 취향, 전문성, 본능을 신뢰하면서 의미가 드러날 때까지 아이디어를 발전시키는 과정이 중요하다. ## 속도보다 과정과 의도에 대한 재검토 - AI는 제작 속도와 생산량을 크게 높이지만, 빠르게 많은 결과물을 만드는 것만으로는 좋은 창작이 보장되지 않는다. - 연사들은 AI 시대에 오히려 다음 요소가 중요해진다고 본다. - 무엇을 만들 것인지에 대한 명확한 의도 - 결과물을 선택하고 다듬는 인간의 판단 - 데이터와 제작 과정에 대한 책임 - 새로운 도구를 실험하되 창작자의 고유한 감각을 유지하는 태도 - AI는 기존 작업 방식을 자동화하는 도구를 넘어, 창작 프로세스 자체를 다시 설계하게 만드는 계기가 된다. AI를 도입할 때는 단순히 생산성 향상만 목표로 삼기보다, 사람이 어디에 참여하고 어떤 결정을 내릴지 먼저 설계하는 것이 좋다. 생성 속도보다 의도·품질·참여 구조를 중시할 때 AI는 창작자의 역량과 영향력을 실질적으로 확장할 수 있다.

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

디자인 토큰AIAI 에이전트머신러닝+2

figma·2026년 1월 12일·4분 읽기큐레이션 요약

디자인 시스템을 위한 새로운

디자인 시스템은 더 이상 단순한 UI 컴포넌트 라이브러리가 아니라 매출 성장, 고객 충성도, 글로벌 확장, 제품 전략을 지원하는 비즈니스 자산이다. DXC 연구에 따르면 그 가치는 작업 효율뿐 아니라 고객 만족도·유지율·브랜드 경험·시장 확장성과 같은 경영 지표로도 측정할 수 있다. 따라서 디자인 시스템 팀은 재작업 감소보다 고객과 사업에 미친 구체적인 영향을 중심으로 투자 가치를 설명해야 한다. ## 생산성 중심에서 사업 성과 중심으로 - 기존에는 디자인 시스템의 ROI를 다음과 같은 운영 효율로 설명하는 경우가 많았다. - 재작업 감소 - 디자인·개발 핸드오프 단축 - 제품 제작 속도 향상 - 여러 팀 간 일관성 유지 - 그러나 현재 기업들은 디자인 시스템을 다음과 같은 전략적 목표에 활용한다. - 제품 포트폴리오 확장 - 고객 유지율과 충성도 개선 - 글로벌 시장 진출 - 제품 완성도와 브랜드 경험 향상 - 경우에 따라 매출 성장 측정 - 핵심은 디자인 시스템의 활동 자체가 아니라, 그 결과가 사업 지표에 어떤 변화를 만들었는지 연결하는 것이다. ## 고객 성과와 디자인 시스템의 연결 - 기업이 이미 관리하는 고객 지표를 디자인 시스템의 성과 측정 기준으로 활용할 수 있다. - 제품 도입률 - 유지율 - 참여도 - 고객 만족도 - 작업 완료율과 문제 해결 시간 - Freshworks는 새로운 디자인 시스템 도입 이후 고객 서비스 비용을 28% 줄이고 지원 티켓의 해결 시간을 개선했다고 설명한다. - SAP는 앱 내 설문을 통해 사용자 데이터 100만 건 이상을 수집하고, 이를 디자인 시스템 개선에 반영한다. - Freshworks는 온보딩 과정에서 사용자가 어디서 시작해야 할지 어려워한다는 피드백을 바탕으로 새로운 개선 작업을 추진했다. - 고객 경험 개선을 위해 다음 데이터를 활용한다. - CSAT 점수 - A/B 테스트 - 전환 퍼널 분석 - 온보딩 과정의 마찰 지점 - 이런 방식은 디자인 시스템이 단순히 컴포넌트를 제공하는 조직이 아니라, 고객의 불편을 발견하고 제품 경험을 개선하는 체계가 되도록 한다. ## 기업 가치와 제품 품질의 확장 - 디자인 시스템은 기업이 만든 브랜드와 제품 원칙을 여러 팀과 제품에 확산하는 수단이다. - Linear는 디자인 시스템을 통해 ‘완성도 높은 제품을 만든다’는 기업 가치를 규모가 커진 조직에서도 유지하고 있다. - Linear의 접근 방식은 엄격한 규칙과 수치만을 따르기보다 제품이 의도적으로 설계된 것처럼 느껴지는지를 중요하게 본다. - 이를 위해 디자인 시스템을 고정된 규격집이 아닌 살아 있는 시스템으로 운영한다. - 필요에 따라 컴포넌트를 업데이트 - 다양한 상황에 대응할 수 있도록 유연성 확보 - 품질 기준은 유지하되 제품 맥락에 따른 예외 허용 - 결과적으로 높은 제품 완성도는 사용자 경험을 차별화하고, 고객 충성도와 순매출 유지율에 영향을 줄 수 있다. ## 글로벌 확장을 지원하는 설계 기반 - 글로벌 확장에서 디자인 시스템의 역할은 제작 속도를 높이는 것에 그치지 않는다. - 여러 지역에서 일관된 브랜드 경험 제공 - 각 시장의 문화와 언어에 맞는 인터페이스 구현 - 다양한 하드웨어와 화면 크기 지원 - 브랜드별 고유성 유지 - 현대자동차그룹은 현대·기아·제네시스 3개 브랜드의 30개 이상 차량 모델을 하나의 일관된 기반으로 확장하면서도 각 브랜드의 정체성을 유지하려 한다. - Grammarly는 초기부터 현지화를 디자인 시스템 전략에 포함했다. - 사내 언어 전문가를 채용해 문화적 뉘앙스 반영 - 오른쪽에서 왼쪽으로 읽는 언어의 가독성 고려 - 언어별 레이아웃과 표현 차이를 시스템 입력값으로 관리 - 북미, 한국, 폴란드에 분산된 팀은 공통 디자인 시스템을 기반으로 지역별 차이를 조정한다. - 현대자동차그룹의 42dot은 다국어 UX를 검증하기 위해 맞춤형 Figma 플러그인도 활용한다. ## 디자인 시스템의 성과를 입증하는 방법 - 경영진이 중요하게 여기는 기존 비즈니스 지표와 디자인 시스템의 활동을 직접 연결해야 한다. - 예를 들어 다음과 같이 측정할 수 있다. - 디자인 변경 후 고객 만족도 변화 - 온보딩 퍼널의 이탈률 감소 - 지원 문의와 고객 서비스 비용 감소 - 기능 출시 기간 단축 - 글로벌 출시 시 지역별 일관성 및 현지화 품질 - 고객 유지율과 순매출 유지율 변화 - 정성적 사례와 정량적 데이터를 함께 제시하면 디자인 시스템의 기여도를 더 설득력 있게 설명할 수 있다. - 단순히 “컴포넌트를 몇 개 만들었는가”보다 “고객의 문제를 얼마나 줄였고 사업 결과를 어떻게 개선했는가”가 중요한 평가 기준이다. 디자인 시스템 팀은 운영 효율을 기본 성과로 제시하되, 고객 만족도·유지율·비용·매출·글로벌 확장성과 연결된 지표를 함께 관리하는 것이 좋다. 또한 시스템을 경직된 규칙 모음이 아니라 브랜드 가치와 사용자 피드백을 지속적으로 반영하는 살아 있는 제품으로 운영해야 한다.

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

디자인 토큰Figma디자인 시스템사용자 경험+2

toss·2025년 12월 14일원문

달리는 기차 바퀴 칠하기: 7년만의 컬러 시스템 업데이트 (새 탭에서 열림)

토스 디자인 시스템(TDS)은 서비스의 글로벌 확장과 다양한 플랫폼 대응을 위해 7년 만에 컬러 시스템을 전면 개편했습니다. 인지적으로 균일한 색공간인 OKLCH를 도입하여 시각적 일관성과 접근성을 확보하고, 디자이너가 직접 제어하는 자동화된 토큰 관리 체계를 구축했습니다. 이번 개편을 통해 TDS는 단순한 디자인 가이드를 넘어, 비즈니스 성장을 뒷받침하는 확장 가능한 기술 인프라로 진화했습니다. ### 기존 컬러 시스템의 한계와 부채 - **명도 불일치**: 동일한 명도 단계(예: 100)임에도 색상(Grey, Blue, Red 등)에 따라 실제 느껴지는 밝기가 달라 UI가 얼룩덜룩해 보이는 문제가 있었습니다. - **모드 간 이격**: 라이트모드와 다크모드의 명도 기준이 달라 다크모드에서 특정 색이 너무 튀거나 가독성이 떨어지는 현상이 발생했습니다. - **관리 체계의 파편화**: 웹, iOS, 안드로이드, 디자인 에디터 등 각 플랫폼에서 컬러를 개별 관리하면서 싱글 소스 오브 트루스(SSOT)가 무너지고 커뮤니케이션 비용이 증가했습니다. ### OKLCH 색공간을 통한 인지적 균일함 확보 - **지각적 평등성**: 수치상 명도와 인간이 느끼는 밝기가 다른 HSL 모델 대신, 인지적으로 균일한 OKLCH 및 HSLuv 색공간을 활용해 모든 색상의 명도를 통일했습니다. - **접근성 자동화**: 정의된 명도 체계를 바탕으로, 외부 브랜드 컬러를 입력하더라도 TDS 기준에 맞는 배경-텍스트 대비를 자동으로 추출하는 로직을 구현했습니다. - **디바이스 최적화**: RGB 환경에서 표현하기 어려운 OKLCH 색상을 위해 채도(Chroma)를 클램핑(Clamp)하여 색조와 명도를 유지하면서도 기기 호환성을 높였습니다. ### 심미성과 접근성을 위한 시각 보정 - **Dark Yellow 문제 해결**: 수치적으로만 맞춘 노란색은 탁해 보이거나 너무 진해 보일 수 있어, 노란색 계열에 한해 별도의 명도 진행 단계를 적용하는 시각 보정을 거쳤습니다. - **다크모드 시인성 강화**: 인간의 눈이 어두운 배경에서 대비를 더 낮게 인식하는 특성을 고려하여, 최신 명도대비 메트릭인 APCA를 참고해 다크모드의 대비를 더 강하게 설계했습니다. - **시맨틱 토큰 정비**: 색상의 값(Primitive)이 아닌 사용 의도(Semantic)에 집중한 토큰 체계를 정립하여 디자인 결정 시간을 단축하고 일관성을 보장했습니다. ### 디자이너 중심의 토큰 자동화 시스템 - **통합 파이프라인**: Figma 플러그인(Token Studio)과 GitHub를 연동하여 디자이너가 컬러를 수정하고 커밋하면 모든 플랫폼의 코드가 자동으로 생성되도록 구축했습니다. - **실험적 환경**: 개발자의 수동 작업 없이도 디자이너가 직접 토큰을 변경하고 빠르게 실험할 수 있는 환경을 만들어 디자인 시스템의 운영 효율을 극대화했습니다. 성공적인 디자인 시스템 개편을 위해서는 단순한 심미적 수정을 넘어, 데이터 기반의 색공간 설계와 엔지니어링 관점의 자동화가 필수적입니다. 특히 비즈니스가 확장되는 시점이라면 컬러 시스템을 개별 컴포넌트가 아닌, 모든 플랫폼을 관통하는 하나의 '코드'이자 '인프라'로 접근하는 태도가 필요합니다.

디자인 토큰Figma디자인 시스템접근성+4

naver·2025년 12월 8일원문

디자인시스템이 AI를 만났을 때: FE 개발 패러다임의 변화 (새 탭에서 열림)

디자인 시스템과 AI의 결합은 단순한 도구의 조합을 넘어 프론트엔드(FE) 개발의 마크업 작업 방식을 근본적으로 혁신하고 있습니다. 네이버파이낸셜은 체계적으로 구축된 디자인 시스템을 기반으로 AI를 활용해 마크업 과정을 자동화함으로써 반복적인 코딩 시간을 단축하고 개발 효율성을 극대화했습니다. 다만, AI가 생성한 결과물을 실무에 즉시 투입하기 위해서는 디자인 토큰의 정교한 관리와 개발자의 세밀한 조정 작업이 반드시 병행되어야 한다는 점을 시사합니다. **네이버파이낸셜 디자인시스템의 근간: 토큰과 컴포넌트** * 디자인 시스템의 핵심인 '디자인 토큰'을 통해 색상, 간격, 폰트 등의 시각적 요소를 정의하고 디자이너와 개발자가 동일한 언어를 사용하도록 환경을 구축했습니다. * 재사용 가능한 UI 컴포넌트 단위를 명확히 정의하여, AI가 일관성 있는 코드를 생성할 수 있는 구조적 토대를 마련했습니다. * 단순한 UI 라이브러리를 넘어, 디자인 시스템 자체가 AI가 학습하고 참조할 수 있는 '신뢰할 수 있는 단일 소스(Single Source of Truth)' 역할을 수행합니다. **AI 마크업 효율을 극대화하는 Code Connect와 인스트럭션** * Figma의 'Code Connect' 기능을 활용해 디자인 도구 내의 컴포넌트와 실제 리액트(React) 코드를 직접 연결하여 AI가 맥락에 맞는 코드를 제안하도록 설계했습니다. * 디자인 시스템의 고유한 규칙과 코딩 컨벤션을 담은 상세한 '인스트럭션(Instruction)'을 AI에게 제공함으로써, 범용적인 코드가 아닌 팀의 표준에 부합하는 결과물을 얻어냈습니다. * 이 과정을 통해 개발자는 빈 화면에서 시작하는 대신, AI가 생성한 초안을 바탕으로 비즈니스 로직 구현에 더 집중할 수 있게 되었습니다. **현실적인 개발 도입 과정에서의 한계와 극복** * AI가 존재하지 않는 컴포넌트를 만들어내거나 잘못된 속성을 사용하는 '할루시네이션(환각)' 현상이 여전히 발생하여 개발자의 검토 과정이 필수적입니다. * 복잡한 레이아웃이나 고도의 인터랙션이 포함된 화면의 경우, AI가 단번에 완벽한 마크업을 생성하기 어렵다는 점을 확인했습니다. * 마크업 자동화가 성공하기 위해서는 단순히 AI 툴을 쓰는 것을 넘어, 디자인 시스템의 코드 품질과 문서화 수준이 먼저 뒷받침되어야 함을 실증했습니다. **마크업 자동화 이후의 FE 개발자 역할 변화** * 과거에 직접 태그를 입력하고 스타일을 잡던 수동적인 마크업 작업의 비중이 줄어들고, 생성된 코드를 조립하고 검증하는 '오케스트레이터'로서의 역할이 강조됩니다. * 단순 반복 작업에서 벗어나 더 복잡한 비즈니스 문제 해결과 사용자 경험(UX) 고도화에 개발 자원을 투입할 수 있는 환경이 조성되었습니다. * 결과적으로 AI는 개발자의 대체제가 아니라, 디자인 시스템이라는 약속된 규칙 위에서 함께 협업하는 강력한 동료로서 기능하게 됩니다. 성공적인 AI 기반 개발 환경을 구축하려면 디자인 시스템을 단순한 가이드가 아니라 **AI가 읽을 수 있는 데이터 구조**로 정교화하는 선행 작업이 가장 중요합니다. AI에게 맡길 영역과 개발자가 직접 제어할 영역을 명확히 구분하고, 코드 리뷰 단계를 강화하여 코드 품질을 유지하는 전략이 권장됩니다.

디자인 토큰AI디자인 시스템code-connect+2

figma·2025년 11월 18일·3분 읽기큐레이션 요약

AI 시대의 디자인 시스템을

AI 시대의 디자인 시스템은 단순한 컴포넌트 라이브러리에서 팀의 취향·품질 기준·의사결정 맥락을 담는 살아 있는 프레임워크로 발전하고 있다. AI가 빠르게 결과물을 생성하더라도 디자인 시스템이 방향성과 제약을 제공해야 브랜드의 개성과 품질을 유지할 수 있다. 따라서 앞으로는 시스템을 더 풍부하게 문서화하고, AI가 활용할 수 있도록 구조화하며, 제품 제작 전반을 관리하는 역할까지 확장해야 한다. ## 디자인 시스템에서 ‘크래프트’를 전달하는 시스템으로 - AI는 결과물을 빠르게 만들지만, 기준이 없으면 팀의 비전과 어긋난 결과를 만들고 재작업을 늘릴 수 있다. - 디자인 시스템은 단순한 일관성 검사 도구가 아니라 팀의 취향과 창의적 정체성을 반복 가능하게 만드는 장치가 된다. - 컴포넌트, 레이아웃, 인터랙션에 디자이너의 판단 기준을 반영하면 AI가 제품 전반에 동일한 감각을 적용할 수 있다. - 목표는 속도를 높이면서도 제품의 인간적인 개성과 완성도를 잃지 않는 것이다. ## AI 탐색을 현실적인 선택지로 제한하기 - 기존에는 여러 디자인 방향을 검토하려면 각 시안을 수작업으로 제작해야 해 탐색 범위가 제한적이었다. - Figma Make 같은 프롬프트 기반 도구와 디자인 시스템을 결합하면 다양한 레이아웃, 색상, 컴포넌트 조합을 빠르게 생성할 수 있다. - 공유 컴포넌트와 검증된 스타일을 기반으로 하기 때문에 AI가 만든 시안도 실제 제품에 적용 가능한 수준에 가까워진다. - 여러 방향을 실험한 뒤 선택한 안을 처음부터 다시 구현하는 대신, 기존 시스템을 바탕으로 세부 조정만 하면 된다. - 즉, 디자인 시스템은 AI의 자유로운 탐색을 막는 제약이 아니라 유효한 탐색을 가능하게 하는 기반이다. ## AI가 이해할 수 있도록 시스템을 작성하기 - 기존 디자인 시스템은 브랜드와 조직을 잘 아는 디자이너·개발자가 암묵적인 맥락을 보완한다는 전제 아래 작성됐다. - AI는 조직의 브랜드, 비즈니스 목표, 제품 관습을 자동으로 추론하지 못하므로 명시적인 설명이 필요하다. - 토큰과 컴포넌트뿐 아니라 다음 내용을 문서화해야 한다. - 각 결정이 내려진 이유 - 사용 조건과 제약 사항 - 좋은 결과물과 나쁜 결과물의 사례 - 품질을 판단하는 기준 - 브랜드와 제품 맥락 - 문서, 코드, 디자인 전반의 빈틈을 줄이고 암묵지를 명시지로 바꾸는 것이 중요하다. - 시스템은 사람을 위한 참고 자료인 동시에 AI가 브랜드에 맞는 결과를 생성하기 위한 지식 기반이 된다. ## 컴포넌트 관리에서 제품 제작 거버넌스로 - AI 도구가 제품 제작 과정에 들어오면서 디자인 시스템 팀의 역할은 컴포넌트 라이브러리 유지보수를 넘어선다. - 전통적인 제품 직군이 아닌 구성원도 제품에 기여할 수 있게 되므로, 이들이 사용하는 AI 및 제작 도구까지 관리 범위에 포함된다. - 디자인 시스템 팀은 어떤 도구와 방식으로 제품이 만들어지는지, 결과물이 품질·브랜드 기준을 충족하는지 관리하는 역할을 맡게 된다. - 제공된 글은 이 부분에서 본문이 중단되어, 거버넌스의 구체적인 실행 방식과 다섯 번째 변화의 내용은 확인할 수 없다. AI를 도입할수록 디자인 시스템을 단순한 UI 자산 저장소로 취급해서는 안 된다. 컴포넌트와 토큰에 의사결정 맥락, 품질 기준, 사용 제약을 함께 기록하고, AI 생성 결과가 시스템 안에서 검증·개선되도록 운영하는 것이 실용적인 방향이다.

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

디자인 토큰FigmaAI디자인 시스템+2

figma·2025년 10월 27일·3분 읽기큐레이션 요약

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를 활용해 개발 핸드오프 전에 변수와 토큰 사용을 검수하면 디자인 시스템의 일관성과 구현 효율을 함께 높일 수 있다.

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

디자인 토큰FigmaAI디자인 시스템+1

figma·2025년 10월 20일·3분 읽기큐레이션 요약

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

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

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

디자인 토큰FigmaAI디자인 시스템+3

figma·2025년 8월 5일·4분 읽기큐레이션 요약

디자인 시스템과 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가 활용할 수 있도록 변환하는 인프라로 보는 것이 적절하다.

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

디자인 토큰Figma디자인 시스템AI 에이전트+2

figma·2025년 5월 4일·3분 읽기큐레이션 요약

폴라로이드가 다음 혁

폴라로이드는 디지털 사진 시대에 대응하기 위해 즉석카메라·포토프린터·모바일 앱으로 사업을 확장하고, 디자인·개발 프로세스도 현대화하고 있다. Figma를 중심으로 디자인 시스템을 구축해 브랜드 일관성과 협업 효율을 높였으며, 고도화된 프로토타입과 사용자 테스트로 제품의 완성도를 개선했다. 그 결과 폴라로이드는 전통적인 아날로그 감성을 유지하면서도 새로운 세대의 디지털 경험을 제공하고 있다. ## 아날로그 유산을 디지털 시대로 확장 - 폴라로이드는 1937년 에드윈 랜드가 설립한 뒤 1948년 즉석카메라를 선보이며 사진 문화를 바꿨다. - 앤디 워홀, 안셀 아담스, 데이비드 호크니 등 예술가들이 폴라로이드 카메라와 필름을 활용하면서 브랜드는 문화적 아이콘으로 자리 잡았다. - 디지털 사진의 확산으로 2008년 네덜란드의 마지막 필름 공장 폐쇄를 발표하는 등 존립 위기를 겪었다. - 이후 열성적인 즉석사진 애호가들이 설립한 임파서블 프로젝트가 공장을 인수하고 필름 화학식을 재개발해 필름 생산을 이어갔다. - 현재는 즉석카메라뿐 아니라 사진 프린터와 모바일 앱을 통해 디지털 시대에 맞는 제품군을 구축하고 있다. ## Figma를 통한 단일 디자인 기준 구축 - Figma 도입 전에는 디자이너들이 각자 별도의 파일과 도구를 사용해 중복 작업과 비효율이 발생했다. - 중앙화된 디자인 시스템과 재사용 가능한 컴포넌트가 없어 수정과 반복 작업이 느렸다. - 이런 제약 때문에 폴라로이드는 iOS 앱만 설계하고 Android 지원은 충분히 확장하지 못했다. - Figma의 클라우드 기반 환경을 통해 디자이너, 개발자, 다른 부서 구성원이 작업 과정 전반에 참여할 수 있게 됐다. - 원격 근무 환경에서도 디자인 파일과 논의를 공유할 수 있어 부서 간 투명성과 협업이 향상됐다. ## 디자인 토큰과 변수로 플랫폼·테마 확장 - 디자인 토큰과 변수를 활용해 색상, 글꼴, 컴포넌트 등의 규칙을 체계적으로 관리했다. - 라이트 모드와 다크 모드를 지원하고, iOS와 Android에 맞춰 기본 글꼴을 다르게 적용했다. - 카메라 연결 화면에서는 사용자가 보유한 기기만 표시하도록 사용자 경험을 단순화했다. - 앱 테마가 연결된 카메라의 색상 구성과 자동으로 맞춰지도록 개선했다. - Figma UI 키트를 초기 설계의 출발점으로 활용하고, Autoflow 플러그인으로 사용자 여정을 시각화해 설계 전에 흐름을 점검했다. ## 더 빠르고 현실적인 프로토타이핑 - Figma 프로토타입을 통해 디자인 초기 단계에서 사용자의 불편과 문제점을 발견할 수 있게 됐다. - 기존 방식보다 사용자가 설정을 변경하거나 화면을 자유롭게 이동하는 등 실제 제품에 가까운 상호작용을 테스트할 수 있었다. - 사용자 테스트를 통해 추측이 아니라 실제 행동을 바탕으로 제품을 검증했다. - 더 많은 프로토타입을 짧은 시간에 높은 품질로 제작할 수 있게 됐다. - 개발 후반에 발생할 수 있는 대규모 수정과 비용을 줄이고, 제품 완성도와 개발 효율을 함께 높였다. ## 실용적인 시사점 폴라로이드의 사례는 브랜드의 역사적 정체성을 유지하면서도 디자인 시스템, 변수, 재사용 컴포넌트, 프로토타이핑을 통해 디지털 제품을 확장한 사례다. 여러 플랫폼과 팀이 함께 제품을 만드는 조직이라면 Figma 같은 중앙화된 작업 환경과 조기 사용자 테스트를 도입하는 것이 일관성, 속도, 비용 절감에 효과적이다.

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

디자인 토큰Figma디자인 시스템사용자 경험+4

figma·2025년 4월 7일·3분 읽기큐레이션 요약

Figma에서 디자인 시스템 워

Figma의 디자인 시스템 구축은 색상·타이포그래피·간격·문서화·개발 전달을 반복해야 해 시간이 많이 걸리지만, 최신 기능과 커뮤니티 플러그인을 조합하면 작업을 크게 단축할 수 있다. 특히 모드와 컬렉션을 안전하게 재정렬하고, 변수·스타일·컴포넌트 관리를 자동화함으로써 디자인 시스템을 개념 설계부터 코드 변환까지 효율적으로 연결하는 것이 글의 핵심이다. ## 모드와 컬렉션을 안전하게 재정렬 - 라이브러리의 모드와 컬렉션을 드래그 앤 드롭으로 재배치할 수 있다. - 삭제 후 재생성할 필요가 없어 디자인이 다른 모드와 동기화되지 않는 문제를 줄인다. - 재정렬해도 모드 ID와 연결 정보가 유지된다. - 기본 모드도 간단히 변경할 수 있다. - 자주 사용하는 컬렉션을 위로 올리거나, 관련 모드를 그룹화하거나, 제품 라인 변경에 활용할 수 있다. ## 작업 흐름을 개선하는 9가지 업데이트 - 메인 컴포넌트로 바로 이동하는 단축키가 추가됐다. - 스타일을 복제하거나 복사해 반복 작업을 줄일 수 있다. - 변수 페인트를 숨기거나 다시 표시해 작업 공간을 정리할 수 있다. - 컴포넌트 설명 UI가 개선되어 내용을 빠르게 확인할 수 있다. - 변수 모달의 헤더 전체를 드래그할 수 있다. - 변수 변경 사항이 자동 저장된다. - 컴포넌트 이름에 마우스를 올리면 툴팁으로 추가 정보를 볼 수 있다. - 편집 버튼 정렬이 개선됐다. - 스타일 창에서 긴 이름이 잘리지 않도록 텍스트 오버플로 처리가 개선됐다. ## 색상 팔레트와 색상 토큰 만들기 - **CSS color-mix()** - CSS의 `color-mix()`를 활용해 색상 팔레트와 그라디언트를 생성한다. - **Colorbox** - 전체 색상 램프를 빠르게 만든다. - **The Genome Color Tool** - WCAG 접근성 기준을 만족하는 색상 스케일을 구축한다. - 색상 시스템을 수작업으로 하나씩 조정하는 대신, 다양한 명도 단계와 조합을 빠르게 실험할 수 있다. - 접근성 기준을 초기 단계부터 반영해 후속 수정 비용을 줄일 수 있다. ## 타이포그래피와 변수 문서화 - **Peppercorn** - 디자인 시스템 전체의 타입 시스템을 설정하는 데 사용된다. - **Print Variables** - 변수 컬렉션을 스티커 시트 형태로 캔버스에 출력한다. - **Auto Documentation** - 모든 변수를 시각적인 스티커 시트로 만들어 문서화한다. - **Variables and Styles List** - 변수와 스타일 목록을 캔버스 위젯으로 생성해 팀이 한눈에 확인하도록 돕는다. - 이러한 도구는 색상, 글꼴, 크기, 간격 등 토큰의 이름과 값을 시각적으로 검토하는 데 유용하다. ## 컴포넌트 구조와 스펙 정리 - **Propstar** - 컴포넌트의 프로퍼티와 가능한 변형 조합을 시각적으로 정리한다. - **Specs** - 컴포넌트 사양을 생성해 디자인 의도와 구현 정보를 전달한다. - **Similayer** - 특정 레이어나 속성을 기준으로 요소를 필터링한다. - **Style Finder** - 여러 페이지에 흩어진 스타일을 찾아 관리할 수 있게 한다. - 컴포넌트 변형이 많아질수록 어떤 조합을 지원하는지 파악하고 중복 또는 누락을 발견하는 데 도움이 된다. ## 변수와 디자인 토큰을 코드로 연결 - **CTRL Var** - 변수를 일괄적으로 이름 변경할 수 있다. - **Export Import Variables** - Figma 안팎으로 변수를 가져오고 내보낸다. - **Handoff** - CSS 변수를 즉시 복사해 개발 전달을 단순화한다. - **Variables Converter** - Figma 변수를 코드 형식으로 변환한다. - **Shaper** - 토큰 아키텍처를 관리하고 CSS 코드를 생성한다. - 디자인 토큰을 Figma에만 고립시키지 않고 개발 환경의 변수와 연결할 수 있다. ## 디자인 시스템 구축 단계별 접근 - **기초 설계** - 색상 팔레트, 색상 램프, 타이포그래피 스케일, 변수 컬렉션을 구성한다. - **문서화** - 변수와 스타일을 스티커 시트나 목록으로 정리해 팀이 쉽게 탐색하도록 만든다. - **구현과 핸드오프** - 컴포넌트 사양을 생성하고, 변수와 토큰을 CSS 등 코드로 변환한다. - Figma의 기본 기능과 플러그인을 각 단계에 맞게 조합하면 디자인 시스템을 처음부터 코드 전달까지 일관되게 관리할 수 있다. 실무에서는 먼저 모드·컬렉션 구조와 변수 명명 규칙을 정한 뒤, 색상·타이포그래피 플러그인으로 토큰을 만들고, 문서화 및 코드 변환 도구를 선택적으로 도입하는 방식이 효과적이다.

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

디자인 토큰Figma디자인 시스템CSS+4

figma·2025년 3월 24일·3분 읽기큐레이션 요약

UI3로의 전환:

Figma는 2025년 4월 30일부터 기존 UI2를 종료하고, 작업 영역을 넓히고 기능을 간소화한 UI3로 완전히 전환한다. UI3는 단순한 배치 변경이 아니라 변수 인식, 색상 선택, 메뉴 정리 등 실제 작업 흐름을 더 직관적이고 효율적으로 만드는 데 초점을 맞췄다. Figma는 사용자 피드백을 반영한 추가 개선을 거친 뒤, 향후에는 UI3에서만 제공되는 새로운 기능과 Properties 패널 개선에 집중할 계획이다. ## UI3 전환과 UI2 종료 - Figma는 4월 30일 기존 인터페이스인 UI2를 종료한다. - Config를 앞두고 UI3 전용 기능과 새로운 사용 경험을 제공하기 위해 전면 전환을 결정했다. - UI3의 주요 방향은 다음과 같다. - 캔버스와 작업물을 더 넓게 보여주기 - 인터페이스를 간결하게 만들기 - 반복적인 작업을 줄이고 기능 접근성을 높이기 - 향후 확장될 기능을 UI3를 기반으로 제공하기 ## 사용자 피드백을 반영한 개선 Figma는 UI3 공개 이후 사용자의 의견을 바탕으로 여러 세부 요소를 수정하고 있다. - 중복성이 있던 “Reset others” 아이콘을 교체한다. - Boolean 연산 관련 문구를 더 단순하게 정리한다. - Overflow 메뉴에서 중복으로 표시되는 액션을 제거한다. - 의미를 명확히 전달하도록 마스크 아이콘을 변경한다. - “Tidy up” 기능의 동작과 경험을 UI2에 더 가깝게 되돌린다. - 전환 이후에는 Properties 패널을 중심으로 추가 개선을 진행할 예정이다. ## 새로운 인터페이스에 대한 적응 - 기존 작업 흐름과 단축키에 익숙한 사용자는 처음에는 UI3 전환을 부담스럽게 느낄 수 있다. - 그러나 일부 사용자는 몇 시간 만에 자연스럽게 적응했다고 평가했다. - 다른 사용자는 기존의 근육 기억을 바꾸는 데 약 일주일이 걸렸지만, 이후에는 UI3를 선호하게 되었다고 전했다. - 글의 관점은 UI3가 단순히 “다른” 인터페이스가 아니라, 익숙해진 뒤에는 더 나은 작업 방식을 제공한다는 것이다. ## 스마트해진 Eyedropper 도구 UI3의 색상 추출 도구는 기존 단축키 `I`를 그대로 사용하면서 변수와 스타일을 인식하도록 개선되었다. - 캔버스를 살펴보는 동안 Eyedropper 도구가 계속 활성화된 상태로 유지된다. - `Tab` 키를 사용해 Hex, HSB, RGB 등 다양한 색상 모델 사이를 전환할 수 있다. - 단순한 색상 값뿐 아니라 다음 항목을 감지한다. - 색상 스타일 - 변수 - 특정 요소에 적용된 디자인 토큰 - 요소를 선택한 뒤 Eyedropper를 실행하고 캔버스의 색상 위에 마우스를 올리면, Figma가 해당 색상에 사용된 스타일이나 변수를 표시한다. - 작업 중인 위치에서 바로 변수를 생성할 수 있어, 색상을 확인하고 디자인 시스템에 연결하는 과정이 빨라진다. ## 실용적인 결론 UI3 전환을 앞둔 사용자는 미리 새 인터페이스에 적응하고, 특히 Eyedropper의 변수·스타일 인식 기능과 변경된 메뉴 구조를 익혀두는 것이 좋다. 기존 UI2의 위치와 동작을 그대로 찾기보다, 캔버스 중심 설계와 디자인 토큰 활용을 전제로 새로운 작업 흐름을 익히는 것이 전환에 효과적이다.

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

디자인 토큰Figma디자인 시스템프로토타이핑+1

figma·2025년 2월 10일·3분 읽기큐레이션 요약

의미 있는 지표 만들기 | 디자인

디자인 시스템은 컴포넌트와 문서를 만드는 데서 끝나지 않고, 사용 데이터로 실제 비즈니스 가치를 입증해야 한다. 적절한 지표를 추적하면 디자인 시스템이 작업 속도, 일관성, 확장성에 미친 영향을 정량화하고 투자와 개선의 근거로 활용할 수 있다. Figma의 실험에서는 디자인 시스템을 사용한 디자이너가 그렇지 않은 디자이너보다 작업을 34% 빠르게 완료했다. ### 디자인 시스템의 효과를 수치로 증명하기 - 디자인 시스템 사용으로 얻는 효과는 단순한 시간 절약을 넘어, 제품 전체와 일관된 디자인을 만든다는 자신감 향상으로도 나타난다. - 디자이너 7명이 주당 20시간씩 집중적으로 일하는 팀에서 34%의 효율 향상은 매주 약 3.5명의 디자이너를 추가한 것과 같은 효과다. - Vanguard는 디자인 시스템을 통해 디자인 업데이트 속도를 50% 높였다. - Headspace는 토큰과 변수를 활용해 단순한 작업에서 20~30%, 복잡한 프로젝트에서 최대 50%의 시간을 절약했다. - Swiggy는 체계적인 추적을 도입한 뒤 기능 출시 시간을 절반으로 줄였다. ### 어떤 신호를 측정할 것인가 - **라이브러리 및 컴포넌트 사용량** - 어떤 컴포넌트, 변수, 스타일이 가장 많이 사용되는지 확인한다. - 자주 사용되는 요소는 디자인 시스템의 핵심 자산으로 볼 수 있다. - 사용량이 낮은 요소는 개선하거나 폐기할 후보가 된다. - **도입률** - 팀과 프로젝트가 디자인 시스템을 실제로 얼마나 채택했는지 측정한다. - 시스템이 존재하는 것보다 실제 업무에 활용되는지가 중요하다. - **일관성 점수** - 제품 전반에서 컴포넌트와 스타일이 얼마나 일관되게 사용되는지 확인한다. - 일관성 지표는 디자인 품질과 유지보수성의 변화를 보여준다. - **절약된 시간** - 컴포넌트 재사용으로 줄어든 디자인 시간을 추적한다. - 시간 절약은 이해관계자에게 디자인 시스템의 투자 가치를 설명하기 좋은 지표다. ### 사용량 데이터가 알려주는 것 - 초기에는 컴포넌트 제작과 문서화 자체에 집중하기 쉽지만, 실제 영향력을 파악하려면 adoption과 usage를 함께 측정해야 한다. - 단순히 컴포넌트 수가 많다는 사실보다 어떤 요소가 실제 업무에서 반복적으로 사용되는지가 중요하다. - 데이터는 다음과 같은 개선 방향을 제시한다. - 자주 사용되는 요소의 품질과 문서 개선 - 사용되지 않는 요소의 원인 분석 - 중복 컴포넌트 통합 - 사용성이 낮은 요소의 재설계 또는 폐기 - 이러한 분석을 통해 디자인 시스템을 정적인 리소스가 아니라 지속적으로 개선되는 운영 체계로 만들 수 있다. ### 도구와 자동화의 활용 - 지표를 지속적으로 수집하려면 사용량과 도입률을 수작업으로 조사하기보다 도구와 자동화를 활용해야 한다. - 컴포넌트, 변수, 스타일의 사용 현황을 정기적으로 수집하면 변화 추이를 파악할 수 있다. - 자동화된 측정은 팀 규모가 커져도 동일한 기준으로 성과를 비교하고, 문제를 조기에 발견하는 데 도움이 된다. ### 데이터를 실행으로 연결하기 - 측정 자체가 목적이 아니라, 데이터를 바탕으로 디자인 시스템의 우선순위를 정하는 것이 중요하다. - 사용량이 높은 요소에는 안정성, 접근성, 문서화 개선을 우선 적용할 수 있다. - 도입률이나 일관성이 낮은 영역은 교육, 문서, 지원 프로세스를 보완해야 한다. - 시간 절약과 출시 속도 같은 지표는 디자인 시스템 팀의 활동을 제품 및 비즈니스 성과와 연결해준다. ### 확장을 고려한 측정 - 조직과 제품이 성장할수록 개인의 체감 효과보다 팀 전체의 반복 가능한 지표가 필요하다. - 사용량, 도입률, 일관성, 절약 시간 등을 지속적으로 기록하면 디자인 시스템이 확장 과정에서 효율성을 유지하는지 확인할 수 있다. - 지표는 단순한 보고용 숫자가 아니라, 디자인 시스템의 투자 방향과 운영 방식을 결정하는 기준으로 활용해야 한다. 실무에서는 모든 지표를 한꺼번에 도입하기보다 컴포넌트 사용량, 디자인 시스템 도입률, 작업 시간 절감처럼 측정하기 쉽고 의사결정에 직접 연결되는 지표부터 시작하는 것이 좋다.

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

디자인 토큰Figma디자인 시스템metrics+2

figma·2025년 1월 22일·3분 읽기큐레이션 요약

도입을 이끄는 문서화

디자인 시스템 문서는 컴포넌트 목록을 나열하는 자료가 아니라, 디자인 의도와 구현 방법을 연결해 팀의 실제 사용을 이끄는 제품이어야 한다. 좋은 문서는 디자이너와 개발자 사이의 언어 차이를 줄이고, 일관된 의사결정·효율적인 온보딩·플랫폼 간 품질 유지를 가능하게 한다. 이를 위해 조직에 맞는 단일 진실 공급원(source of truth)을 정하고, 시스템과 함께 계속 진화하는 문서로 운영해야 한다. ## 문서화가 필요한 이유 - Razorpay는 디자인 시스템 Blade를 도입하기 전 팀마다 버튼 상태나 텍스트 필드 오류 처리 방식을 놓치는 일이 있었다. - 문제의 본질은 단순한 품질 부족이 아니라 디자인 의도와 구현 방식이 제대로 전달되지 않는 커뮤니케이션 문제였다. - 개발자와 디자이너 사이의 언어 차이로 다음과 같은 불일치가 발생할 수 있다. - 컴포넌트와 속성의 명칭이 서로 다름 - 디자인의 상태와 실제 코드 구현이 다름 - 제품의 시각적·상호작용적 기대치가 어긋남 - 문서는 단순히 “무엇이 있는가”를 보여주는 데 그치지 않고, 각 결정의 **방법(how)** 과 **이유(why)** 를 설명해야 한다. - 효과적인 문서는 다음을 돕는다. - 디자인 원칙과 구현 세부 사항 이해 - 여러 제품과 플랫폼에서 일관된 결정 - 신규 팀원의 빠른 온보딩 - 디자이너와 개발자 간 협업 개선 ## 단일 진실 공급원 정하기 문서화를 시작할 때 가장 먼저 결정할 것은 무엇을 쓸지가 아니라 **어디에 둘지**다. - 디자인 시스템이 성장하고 조직이 커질수록 정보가 여러 도구에 분산되기 쉽다. - 공유 드라이브의 정적 PDF처럼 한 번 만들어 놓고 갱신하지 않는 방식은 빠르게 낡는다. - 전용 문서 사이트, 협업 워크스페이스 등 조직의 규모와 업무 흐름에 맞는 저장소를 선택해야 한다. - 중요한 것은 도구 자체보다 팀이 “최신 정보는 어디에 있는가”를 명확히 알 수 있게 하는 것이다. - 문서는 디자인 파일, 코드 저장소, 개발자 도구와 연결되어야 하며, 디자이너와 개발자가 같은 기준을 참조할 수 있어야 한다. ## 맞춤형 문서 사이트의 역할 본문은 대규모 조직의 경우 자체 문서 사이트가 디자인 시스템을 도구와 프로세스에 깊이 통합하는 데 유리하다고 설명한다. - 여러 제품과 플랫폼을 운영하는 조직은 전용 사이트를 통해 문서 구조와 탐색 경험을 직접 설계할 수 있다. - 컴포넌트의 시각적 예시뿐 아니라 사용법, 코드 구현, 상태, 접근성 지침까지 한곳에서 제공할 수 있다. - 디자인 시스템이 사용하는 도구와 개발 워크플로에 맞춰 문서를 확장할 수 있다. - 다만 자체 사이트를 구축하는 것만으로는 충분하지 않으며, 최신 상태를 유지하는 운영 체계가 함께 필요하다. ## 도입을 이끄는 살아 있는 문서 - 문서는 디자인 시스템과 별개로 관리되는 부가 자료가 아니라 시스템의 일부여야 한다. - 컴포넌트가 변경되면 관련 사용법과 코드 예시도 함께 갱신되어야 한다. - 문서에는 컴포넌트의 외형뿐 아니라 다음 정보가 포함되어야 한다. - 언제 사용하고 언제 사용하지 않는지 - 지원하는 상태와 속성 - 상호작용 및 오류 처리 방식 - 디자인 결정의 배경과 목적 - 개발자가 실제로 적용할 수 있는 구현 정보 - 사용자가 문서를 읽은 뒤 바로 디자인하거나 코드를 작성할 수 있어야 adoption으로 이어진다. ## 실용적인 결론 디자인 시스템 문서는 “보관용 설명서”가 아니라 팀의 공통 언어이자 제품 사용 경험의 일부로 운영해야 한다. 하나의 공식 출처를 정하고, 디자인·코드·문서의 변경을 연결하며, 각 컴포넌트의 사용법과 설계 이유까지 기록하는 방식이 가장 실용적이다.

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

디자인 토큰Figma디자인 시스템dev-mode+3

figma·2024년 11월 20일·4분 읽기큐레이션 요약

피그마 패턴 라이브

UI3 개편은 Figma 내부 디자인 시스템이 오랜 성장 과정에서 파편화되었다는 문제를 드러냈고, 이를 해결하기 위해 Figma Pattern Library(FPL)를 처음부터 다시 구축하게 만들었습니다. 디자이너와 엔지니어가 페어 프로그래밍에 가까운 방식으로 협업해 디자인 의도와 코드 구현을 연결하고, 변수·REST API·테마 모드를 기반으로 일관되고 접근성 높은 제품 개발의 기반을 마련했습니다. FPL은 단순한 컴포넌트 모음이 아니라 조직 전체의 공통 언어이자 UI3를 확장하기 위한 단일 진실 공급원으로 설계되었습니다. ## UI3가 드러낸 내부 디자인 시스템의 문제 - Figma는 다른 팀의 디자인 시스템 구축을 돕는 제품을 만들고 있었지만, 내부 시스템은 오랜 기간의 급속한 성장과 제품 확장으로 분리되어 있었습니다. - 동일해야 할 컴포넌트가 서로 조금씩 달랐고, 연결이 끊긴 컴포넌트 인스턴스가 누적되었습니다. - UI3를 모든 Figma 제품에 적용하려면 새로운 화면 디자인만으로는 부족했습니다. - 여러 팀이 일관되고 효율적으로 작업할 수 있는 견고한 기반 시스템이 필요했습니다. ## 디자이너와 엔지니어의 페어 협업 - Wayne Sun과 Tom Williams는 디자이너와 엔지니어로 구성된 5명의 소규모 팀을 만들었습니다. - 개발에서 한 사람이 코드를 작성하고 다른 사람이 실시간 검토하는 페어 프로그래밍처럼, 디자이너와 엔지니어가 긴밀하게 짝을 이루어 작업했습니다. - 디자이너는 시각적·사용자 경험 의도를 전달하고, 엔지니어는 이를 실제 컴포넌트와 토큰 시스템으로 구현했습니다. - 이 방식은 디자인 파일과 제품 코드 사이의 간극을 줄이고, 양쪽이 공유할 수 있는 시스템 언어를 만드는 데 목적이 있었습니다. - 그 결과 새로운 내부 디자인 시스템인 Figma Pattern Library(FPL)가 탄생했습니다. ## 스타일과 스프레드시트에서 변수 중심 구조로 전환 - 기존 시스템은 Figma의 변수 기능이 등장하기 전에 만들어졌습니다. - 디자이너는 Figma 스타일을 사용했지만, 엔지니어는 별도의 Google Sheets에서 색상 토큰을 관리했습니다. - 스프레드시트가 제품 변경 사항을 즉시 반영하지 못하면서 디자인 파일과 실제 코드의 색상이 달라지는 문제가 발생했습니다. - 팀은 Figma 변수와 REST API를 활용해 디자인과 코드가 자동으로 동기화될 수 있는 구조를 만들었습니다. - 타이포그래피 변수를 새로 만들고, 기존 타이포그래피 스타일이 이 변수들을 별칭으로 참조하도록 구성했습니다. - 색상 스타일은 중앙 관리가 가능한 색상 변수로 마이그레이션했습니다. - 색상 변수에 CSS 정의도 추가해 Dev Mode의 검사 패널에서 개발자가 올바른 변수명과 코드 표현을 확인할 수 있게 했습니다. ## Primitive와 Semantic 변수로 색상 체계 정리 - 색상은 밝기와 어두움이 체계적으로 이어지는 **color ramp**를 기반으로 구성했습니다. - 기본 색상 단위인 **Primitive 변수**는 색상 계열별로 정리하고, 100부터 1000까지 단계적으로 구분했습니다. - 실제 UI 용도를 나타내는 **Semantic 변수**는 Primitive 변수를 별칭으로 참조합니다. - 예를 들어 특정 색상값을 직접 사용하는 대신 배경, 텍스트, 테두리 같은 의미 기반 변수로 연결할 수 있습니다. - Semantic 변수는 다음과 같은 테마와 제품별 모드를 지원하도록 설계되었습니다. - 라이트 모드와 다크 모드 - Figma Design - FigJam - Slides - Dev Mode - 이 구조 덕분에 하나의 공통 컴포넌트가 제품이나 테마에 따라 색상만 자연스럽게 바꿀 수 있습니다. - Primitive 변수의 값을 수정하면 이를 참조하는 Semantic 변수와 컴포넌트에 변경 사항을 일괄 적용할 수 있습니다. ## FPL의 역할 - FPL은 UI3의 시각적 스타일을 정의하는 동시에, 이를 실제 제품에 일관되게 구현하기 위한 기술적 기반입니다. - 디자인과 엔지니어링을 분리된 단계로 처리하지 않고, 초기 설계부터 함께 검증하는 협업 모델을 채택했습니다. - 변수와 모드 기반의 구조는 여러 제품과 테마를 지원하면서도 공통된 사용자 경험을 유지하도록 돕습니다. - 중앙화된 토큰과 컴포넌트는 중복 구현과 미세한 시각적 차이를 줄이고, 향후 변경 사항을 더 빠르게 확산시킬 수 있습니다. FPL 사례는 디자인 시스템을 단순한 UI 컴포넌트 저장소가 아니라 디자인 토큰, 테마, 코드 연동, 협업 방식까지 포함하는 조직의 공통 인프라로 다뤄야 한다는 점을 보여줍니다. 특히 디자인 파일과 코드가 서로 다른 토큰을 관리하지 않도록 변수와 자동 동기화를 도입하는 것이 규모가 큰 제품 조직에 실용적인 출발점입니다.

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

디자인 토큰Figma디자인 시스템접근성+4