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

Decagon이 AI를 활용해 디자인 시스템을 포화시키는 방법 | Figma 블로그

Decagon은 빠르게 성장하는 AI 고객지원 플랫폼의 품질과 개발 속도를 함께 확보하기 위해 Deco라는 디자인 시스템을 구축했다. Figma 라이브러리, Storybook, 코딩 에이전트, Figma MCP를 연결해 디자인과 코드가 지속적으로 일치하도록 만들었고, 그 결과 반복적인 해석과 수정 작업을 줄였다. 핵심은 디자인 시스템을 단순한 컴포넌트 모음이 아니라 사람과 AI 에이전트가 함께 사용하는 공통 언어로 만든 데 있다. ## 빠른 성장에 대응하는 디자인 시스템 구축 - Decagon은 초기에는 디자인 시스템 없이 빠르게 제품을 개발했지만, 플랫폼과 팀이 커지면서 화면 간 불일치와 완성도 저하가 나타났다. - 기업 고객을 대상으로 제품을 제공하기 위해서는 일관된 UI와 높은 품질이 필요했으며, 디자인과 개발 사이의 반복적인 수정 작업도 줄여야 했다. - 디자이너와 엔지니어가 처음부터 함께 Deco를 설계해 다음과 같은 세부 사항을 미리 정의했다. - 포커스 상태 - 비활성화, 읽기 전용, 오류, 경고 상태 - 플레이스홀더 사용 여부 - 기존 코드에 이미 존재하는 컴포넌트와의 관계 - 현재 Deco는 수백 개의 컴포넌트·스타일·변수를 포함하며, 여러 팀과 제품 영역의 대부분의 사용 사례를 다룬다. - Figma 라이브러리에서 30일 동안 수만 건의 컴포넌트 삽입이 발생해 조직 전반에서 실제로 활용되고 있음을 확인했다. ## 디자인 시스템이 만든 공통 언어 - 디자이너는 기존 컴포넌트로 화면을 조합할 수 있어 매번 UI를 처음부터 만들 필요가 없어졌다. - 개발자는 어떤 버튼이나 테이블을 사용해야 하는지 명확히 알 수 있어 구현상의 판단과 논쟁이 줄었다. - 디자인과 코드가 동일한 프리미티브를 기준으로 소통하면서 제품 흐름과 요구사항을 설명하기 쉬워졌다. - Deco는 조직 전체에 공개된 단일 진실 공급원(single source of truth)으로 작동해 빠른 출시와 일관된 디자인을 동시에 지원한다. ## 디자인과 코드 사이의 반복 작업 줄이기 - 기존 방식에서는 디자이너가 명세를 전달하면 개발자가 해석하고, 리뷰 단계에서 불일치를 발견한 뒤 다시 수정하는 과정이 반복됐다. - 코딩 에이전트는 개발자처럼 암묵적인 의도를 추론하지 않고 제공된 정보만 바탕으로 작업하므로, 디자인 파일과 명세가 불명확하거나 일관되지 않으면 결과물도 부정확해진다. - Decagon은 디자인 시스템 컴포넌트를 Storybook으로 옮겨 코드에서도 동일한 컴포넌트를 확인할 수 있게 했다. - 코딩 에이전트가 구현할 때 정확한 Deco 컴포넌트를 사용하도록 별도의 skill을 만들었다. - 디자이너가 새로운 컴포넌트를 추가할 때 사용하는 skill도 구축해 Figma와 코드의 동기화를 유지했다. ## Figma MCP를 통한 에이전트 활용 - Figma MCP를 사용하면 코딩 에이전트가 Figma의 디자인 문맥과 명세를 직접 읽을 수 있다. - 디자이너는 Figma 링크를 코딩 에이전트에 전달하는 것만으로 다음 작업을 수행할 수 있다. - 디자인의 구조와 세부 명세 파악 - Deco의 적합한 컴포넌트와 매핑 - 디자인에 가까운 고충실도 구현 생성 - 디자인 캔버스, 코드, 컴포넌트 명세가 하나의 작업 흐름으로 연결되어 파일을 내보내고 다시 해석하는 수동 왕복이 줄었다. - 에이전트가 기존 디자인 시스템을 활용하므로 빠른 프로토타이핑과 반복 수정이 가능하면서도 브랜드와 UI 일관성을 유지할 수 있다. ## 실용적인 결론 AI 코딩 도구를 도입할 때는 에이전트의 성능만 높이기보다, 먼저 재사용 가능한 디자인 시스템과 명확한 컴포넌트 문맥을 마련해야 한다. Figma와 Storybook을 연결하고, MCP와 에이전트 skill을 통해 동일한 컴포넌트를 사용하게 하면 디자인-개발 간 불일치를 줄이면서 빠른 개발 속도와 품질을 함께 확보할 수 있다.

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

storybookFigma디자인 시스템AI 에이전트+2

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

Framework 2024

Figma는 디자인 시스템 구축보다 더 어려운 과제인 조직 전체의 도입과 활용을 지원하기 위해 Framework 2024에서 세 가지 기능을 공개했다. Code Connect는 디자인과 실제 코드 사이의 간극을 줄이고, 타이포그래피·그라디언트 변수는 디자인 토큰의 범위를 확장하며, Library Analytics API는 디자인 시스템 사용 현황을 측정하도록 돕는다. 결론적으로 Figma는 디자인 시스템을 만드는 도구를 넘어, 개발자 adoption과 조직 내 확산까지 지원하는 방향으로 발전하고 있다. ### 디자인 시스템의 핵심 과제: 조직 전체의 도입 - 디자인 시스템은 일관성, 효율성, 확장성을 제공하지만 실제 효과는 팀 전체가 이를 사용할 때 발생한다. - 시스템이 강력하고 정교해질수록 복잡성도 커지며, 디자이너와 개발자의 적극적인 참여를 이끌어내는 일이 어려워진다. - Figma는 변수, 테마와 상태 관리, 고급 프로토타이핑, Dev Mode 등을 통해 디자인과 코드의 연결을 강화해 왔다. - 이번 발표의 중심 목표는 디자인 시스템을 “구축”하는 데서 나아가 조직 전반에서 “채택”되도록 만드는 것이다. ### Code Connect: 디자인과 코드의 연결 - Code Connect는 Dev Mode에서 디자인 시스템 컴포넌트에 대응하는 실제 코드 스니펫을 제공한다. - 개발자는 별도의 문서나 저장소를 검색하지 않고 Figma에서 필요한 코드를 확인하고 복사할 수 있다. - 이를 통해: - 구현 시간을 줄일 수 있다. - 디자인과 코드의 불일치를 완화할 수 있다. - 개발자가 디자인 시스템 컴포넌트를 사용하는 진입 장벽을 낮출 수 있다. - 임의로 유사한 컴포넌트를 새로 만드는 일을 줄일 수 있다. - Organization 및 Enterprise 요금제에서 베타로 제공되며, React·iOS·Storybook을 지원한다. - 향후 더 많은 프레임워크와 플랫폼으로 지원 범위가 확대될 예정이다. - Bumble, GitHub, HP 등의 팀은 디자인 시스템과 실제 프로덕션 코드 사이를 연결하는 문제와 Code Connect의 활용 가능성을 논의했다. ### 타이포그래피 변수: 디자인 토큰의 확장 - 기존 변수 기능만으로는 디자인 시스템의 중요한 영역인 타이포그래피를 충분히 표현하기 어려웠다. - 타이포그래피 변수를 사용하면 글꼴 크기, 행간, 글꼴 스타일 등 타이포그래피 속성을 변수와 토큰 체계 안에서 관리할 수 있다. - 주요 활용 방식: - 폰트 스케일을 한 번 정의하고 전체 시스템에 일관되게 적용 - 플랫폼별 타이포그래피 설정 조정 - 반응형 또는 테마별 텍스트 스타일 관리 - WCAG 기준을 고려한 접근성 높은 스케일 구성 - 디자인 시스템의 색상과 간격뿐 아니라 텍스트 표현까지 체계적으로 관리할 수 있게 된다. ### 그라디언트 변수: 더 풍부한 시각 스타일 관리 - 그라디언트도 변수로 정의하고 재사용할 수 있도록 지원한다. - 여러 화면과 컴포넌트에서 동일한 그라디언트 스타일을 일관되게 적용할 수 있다. - 브랜드 테마나 모드별로 그라디언트를 교체하기 쉬워진다. - 변수 기반 관리로 디자인 시스템이 단순한 색상 팔레트를 넘어 더 표현력 있는 시각 언어를 다룰 수 있다. ### Library Analytics API: 디자인 시스템 사용 현황 측정 - Library Analytics API는 조직 내 디자인 시스템 라이브러리와 컴포넌트의 사용 데이터를 분석할 수 있도록 제공된다. - 디자인 시스템 관리자는 다음과 같은 질문에 답할 수 있다. - 어떤 라이브러리와 컴포넌트가 실제로 사용되는가? - 어느 팀이나 프로젝트가 디자인 시스템을 적극적으로 채택하는가? - 사용되지 않거나 개선이 필요한 컴포넌트는 무엇인가? - 정량적인 사용 데이터를 바탕으로 문서화, 교육, 컴포넌트 개선, 도입 전략을 세울 수 있다. - 디자인 시스템의 성공을 단순히 “만들었는가”가 아니라 “얼마나 사용되는가”로 평가할 수 있게 한다. ### 실용적인 결론 디자인 시스템 팀은 컴포넌트와 토큰을 만드는 데 그치지 말고, 개발자가 실제 코드로 쉽게 사용할 수 있는 경로와 사용 현황을 측정할 방법까지 함께 마련해야 한다. Code Connect로 개발자 경험을 개선하고, 타이포그래피·그라디언트 변수로 토큰 범위를 확장하며, Analytics API로 채택률을 추적하는 접근이 효과적이다.

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

storybookFigma디자인 시스템React+3

figma·2024년 1월 8일원문

Razorpay가 개발자 워크플 (새 탭에서 열림)

인도 최대의 금융 서비스 기업인 Razorpay는 1,000만 개 이상의 비즈니스를 지원하기 위해 디자인 시스템 'Blade'를 구축하여 일관된 사용자 경험과 개발 효율성을 동시에 확보했습니다. 웹과 모바일을 아우르는 단일 API 구조를 통해 플랫폼 간 전환 비용을 최소화하고, 전용 플러그인과 Figma Dev Mode를 적극 활용해 디자이너와 개발자 간의 협업 마찰을 획기적으로 줄였습니다. 결과적으로 Blade는 단순한 가이드를 넘어 제품의 신뢰성을 높이고 시장 출시 속도를 앞당기는 핵심 동력으로 자리 잡았습니다. **크로스 플랫폼을 위한 단일 라이브러리 체계** * 웹, iOS, Android 등 다양한 플랫폼에서 동일한 API와 속성을 공유하는 단일 디자인 시스템을 운영하여 개발자가 플랫폼을 옮겨가더라도 기존 지식을 그대로 활용할 수 있게 했습니다. * 하드코딩으로 인해 발생할 수 있는 텍스트 필드의 에러 처리나 버튼 상태값 누락 등의 세부적인 오류를 방지하고, 모든 컴포넌트에 접근성(Accessibility)을 기본적으로 내장했습니다. * 디자이너와 개발자가 동일한 언어를 사용함으로써 커뮤니케이션 비용을 줄이고, 디자인에서 보는 결과물이 코드와 일치하도록 보장합니다. **지표 기반의 도입 전략과 조직 내 확산** * 새로운 기능을 개발할 때는 디자인의 70%, 기존 화면을 수정할 때는 50% 이상 Blade 컴포넌트를 사용하도록 KPI를 설정하여 디자인과 개발 팀이 공동의 목표를 추구하게 합니다. * 'Blade Coverage' 플러그인을 통해 디자이너가 시스템에서 얼마나 벗어나고 있는지 실시간으로 확인하게 함으로써, 핸드오프 단계 이전에 피드백을 주고받을 수 있는 환경을 조성했습니다. * 리더십의 지지를 바탕으로 전담 슬랙 채널 운영, 오피스 아워, 시연 영상 공유 등을 통해 내부 고객(직원)들의 채택률을 높이고 연간 NPS(순추천지수) 설문을 통해 만족도를 관리합니다. **RazorSharp와 Dev Mode를 통한 코드 자동화** * 개발자가 일일이 속성을 검사하던 비효율을 제거하기 위해 디자인을 코드로 자동 변환해주는 자체 플러그인 'RazorSharp'를 개발했습니다. * Figma의 Dev Mode를 도입하면서 기존 편집 권한이 필요했던 플러그인 제약을 극복했고, 개발자가 편집 권한 없이도 코드를 복사하고 Storybook 링크를 통해 바로 컴포넌트 환경으로 이동할 수 있게 했습니다. * VS Code 플러그인을 연동하여 개발 환경 내부에서 직접 디자인 사양을 확인하며 코드를 작성하는 워크플로우를 구축했습니다. **Variables를 활용한 토큰 관리 및 성능 최적화** * 기존의 복잡한 토큰 명명 규칙(surface/text/subtle)을 개발자 친화적인 구조(surface.text.subtle)로 변환하고, 간격(spacing) 토큰을 변수화하여 개발 편의성을 높였습니다. * 여러 테마와 라이트/다크 모드를 개별적으로 만들던 방식에서 변수(Variables) 기반 시스템으로 전환하여 메모리 소모를 대폭 줄이고 디자인 작업 속도를 개선했습니다. * 이를 통해 하나의 테마 안에서 다양한 모드를 유연하게 구현할 수 있게 되어 시스템의 복잡성을 낮추고 관리 효율을 극대화했습니다. **디자인 시스템 운영을 위한 실용적 제언** 디자인 시스템의 성공은 단순히 컴포넌트를 만드는 것에 그치지 않고, 개발자가 실제 작업 환경에서 얼마나 편리하게 코드를 추출하고 적용할 수 있느냐에 달려 있습니다. Razorpay처럼 자체 플러그인을 개발하거나 Dev Mode를 적극 활용하여 '디자인 검사'에 들어가는 시간을 줄이고, 정량적인 사용량 지표(Coverage)를 통해 팀의 성과를 객관화하는 접근 방식이 권장됩니다. 또한, 시스템의 복잡도가 커질수록 Variables 기능을 활용해 성능 저하를 방지하고 개발 생산성을 높이는 전략이 필수적입니다.

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

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

개발 모드: 개발자를 위해 더

Figma는 개발자를 단순한 디자인 파일 소비자가 아니라 제품 개발의 핵심 사용자로 보고 Dev Mode를 구축했다. 초기에는 디자인을 코드로 자동 변환하는 codegen 중심 접근을 택했지만, 실제 조직의 다양한 기술 스택과 협업 방식에는 한계가 있음을 발견했다. 결국 Dev Mode는 코드 생성만이 아니라 디자인 탐색, 변경 비교, 개발 도구 연동 등 개발자에게 맞춘 작업 환경을 제공하는 방향으로 확장됐다. ## 디자인과 개발의 경계를 줄이려는 Figma의 목표 - Figma는 처음부터 디자이너만을 위한 도구가 아니라 제품 관리자, 개발자 등 여러 직군이 함께 문제를 해결하는 공간을 지향했다. - 2017년 프로토타이핑과 개발자 핸드오프 기능을 선보이며 디자인과 코드 사이의 협업 흐름을 개선하려 했다. - 개발자들은 디자인 작업 중인 파일을 직접 확인하고 여러 핸드오프 방식을 실험했지만, 기존 Figma는 개발자 업무에 최적화된 도구는 아니었다. - Dev Mode는 디자인을 검사하고, 변경 사항을 비교하며, VS Code에서 작업하는 기능 등을 제공하는 개발자용 환경으로 출시됐다. ## 개발자 관점을 확보한 Visly 인수 - Figma 사용자 중 개발자가 약 3분의 1을 차지했지만, 개발자의 작업 방식과 도구 선호도에 대한 실질적인 직관은 부족했다. - 2021년 Figma는 React UI 컴포넌트 개발 도구를 만들던 Visly를 인수했다. - Visly 팀은 개발자 도구에 대한 연구와 실제 개발 경험을 Figma에 가져왔고, Dev Mode 개발을 가속했다. - 인수의 핵심 효과는 개발자를 대상으로 조사하는 것에서 나아가, 개발자처럼 생각하고 제품을 설계할 수 있는 팀을 확보한 데 있었다. ## 개발자를 2차 사용자가 아닌 핵심 사용자로 설계 - 기존 개발자들은 디자인 협업 때문에 Figma에 들어오지만, Figma가 자신들을 위해 만들어졌다고 느끼기 어려웠다. - Dev Mode 팀은 개발자가 디자인 모드의 복잡한 상호작용을 배울 필요 없이, 자신의 작업 방식에 맞는 인터페이스를 사용해야 한다고 판단했다. - 개발자 중심 기능으로 다음과 같은 아이디어를 검토했다. - 컴포넌트 플레이그라운드 - 코드 스니펫 - GitHub, Storybook 등 개발 도구와의 플러그인 연동 - 개발자 전용 리소스 - 중요한 관점은 개발자가 디자인 도구 안에서 장시간 생활한다는 전제가 아니라, 기존 개발 환경과 연결되는 보조 작업 공간을 제공하는 것이었다. - 베타 사용자 피드백과 고객 요청을 지속적으로 수집해 기능 우선순위에 반영했다. ## codegen 중심 접근의 출발과 한계 - **Codegen**은 정해진 규칙이나 명세를 바탕으로 디자인에서 코드를 자동 생성하는 방식이다. - Dev Mode 초기에는 디자인을 코드로 변환하면 개발 속도가 크게 빨라질 것이라고 보고 codegen을 핵심 방향으로 삼았다. - 자동 변환이 잘 작동하는 경우 프로젝트 작업 시간을 수시간에서 수일까지 줄일 수 있었다. - 그러나 테스트 환경에서 codegen이 작동하는 것과 실제 조직의 개발 프로세스에서 유용하게 작동하는 것은 달랐다. - 기업 규모, 팀 구조, 기술 스택, 개발 워크플로가 서로 다르기 때문에 모든 조직에 동일한 코드 생성 규칙을 적용하기 어려웠다. - 따라서 Dev Mode의 가치는 완성된 코드를 일괄 생성하는 데만 있지 않고, 개발자가 디자인 의도를 이해하고 자신의 코드베이스와 방식에 맞게 구현하도록 돕는 데 있다는 방향 전환이 필요해졌다. ## 실용적인 시사점 디자인-개발 협업 도구는 자동 코드 생성만으로 문제를 해결하기 어렵다. 조직별 기술 환경과 개발자의 실제 작업 흐름을 고려해 디자인 검사, 변경 추적, 코드 정보 제공, 기존 개발 도구와의 연동을 함께 지원해야 하며, 개발자를 제품의 부차적 사용자가 아닌 핵심 사용자로 설계하는 것이 중요하다.

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

storybookFigmaReactgithub+3

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

킴벌리클라크가 사랑

Kimberly-Clark은 변화하는 소비자 선호와 경쟁 심화에 대응하기 위해 디지털 경험과 디자인 업무 방식을 혁신했다. Figma를 단일 협업 플랫폼으로 도입하면서 디자이너, 마케팅, 브랜드, 개발자 간 협업이 빨라졌고, 실제로 한 웹사이트의 가입률을 71% 높였다. 이 사례는 디자인 도구 통합과 실시간 협업이 제품 출시 속도와 사용자 경험을 동시에 개선할 수 있음을 보여준다. ## 디지털 중심 성장 전략 - Kleenex, Scott, Huggies 등을 보유한 Kimberly-Clark은 전 세계 175개국에서 사업을 운영한다. - 400개 이상의 소비자 대상 웹사이트와 다양한 디지털 제품을 관리하고 있다. - 소비자 취향 변화, 경쟁 심화, 생산비 증가로 성장세가 둔화되자 2022년 창립 150주년을 목표로 성장 가속화 전략을 추진했다. - 가격 책정, 제조, 유통, 진열, 영업, 인사 등 거의 모든 업무 과정에 디지털 요소가 포함되어 있었다. - 코로나19 이후에는 수요 변화에 맞춰 생산량과 재고를 재배분했으며, 해당 분기 매출은 46억 1천만 달러를 기록했다. ## 기존 디자인 프로세스의 비효율 - 디자이너들이 독점적인 Mac 기반 애플리케이션에서 혼자 수주일 동안 작업했다. - 완성한 파일을 별도의 클라우드 프로토타이핑 도구에 업로드한 뒤 이해관계자의 피드백을 기다려야 했다. - 수정이 발생하면 같은 과정을 반복해야 했다. - 개발 단계에서는 Mac을 사용하지 않는 개발자에게 디자인 파일을 전달하는 과정에서 추가적인 문제가 생겼다. - 여러 브랜드와 국가에 맞춰 디자인을 현지화해야 했기 때문에, 이러한 단절이 제품 출시 속도를 더욱 늦췄다. ## Figma를 통한 실시간 협업 - Figma를 도입해 디자인, 프로토타이핑, 피드백 과정을 하나의 웹 기반 플랫폼으로 통합했다. - 파일을 로컬에 저장할 필요가 없고, 초대받은 사람이 쉽게 파일을 열어 보고 편집할 수 있었다. - Figma를 모든 팀이 참조하는 단일 정보원으로 활용하면서 파일 버전 관리와 전달 과정이 단순해졌다. - 피드백 회의가 일방적인 검토 자리가 아니라 브랜드·마케팅·디자인·기타 이해관계자가 함께 작업하는 실시간 협업 세션으로 바뀌었다. - 참여자들이 디자인 변경 사항을 즉시 확인하고 제작 과정에 직접 참여할 수 있게 되었다. ## 데이터로 검증한 디자인 개선 - 팀은 디자인 효율성뿐 아니라 실제 사용자 경험의 개선 여부도 측정했다. - 주요 지표로 이탈률, 재방문자, 사이트 체류 시간, 쿠폰·뉴스레터·보상 프로그램 가입률 등을 추적했다. - 한 웹사이트의 가입 양식에는 마케팅 목적으로 13개의 입력 필드가 포함되어 있었다. - 브랜드, 마케팅, 디자인 팀이 Figma에서 함께 논의해 입력 필드를 5개로 줄였다. - 양식 변경 후 가입률이 71% 증가했다. - 회의에서 장시간 논쟁하기보다 문제를 함께 시각화하고 즉시 수정한 것이 성과 향상에 기여했다. ## 다음 단계: 디자인 시스템과 개발 연계 - Kimberly-Clark은 Figma에서 Storybook과 코드 저장소까지 연결되는 새로운 디자인 시스템을 계획했다. - 이를 통해 디자인 요소와 개발 구현 사이의 일관성을 높이고, 여러 브랜드와 지역에 적용 가능한 재사용 체계를 구축하려 했다. - 디자인을 단순한 산출물 제작 과정이 아니라 비즈니스 성과와 제품 출시 속도를 높이는 핵심 업무로 자리매김하려는 방향이다. 실무적으로는 디자인 도구를 많이 사용하는 것보다, 하나의 공유 환경에서 관련 팀이 함께 문제를 해결하고 결과를 사용자 지표로 검증하는 것이 중요하다. 특히 입력 단계 축소처럼 작은 디자인 변경도 데이터로 효과를 확인하면 빠른 개선과 조직 내 합의를 동시에 이끌어낼 수 있다.

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

storybookFigma디자인 시스템사용자 경험+3

figma·2020년 5월 18일·2분 읽기큐레이션 요약

팀이 즐겨 사용하는 도구에

Figma는 팀이 사용하는 외부 도구에 비공개 디자인 파일을 실시간으로 임베드할 수 있는 기능을 출시했다. 이를 통해 디자이너와 개발자는 요구사항, 프로젝트 작업, 문서 안에서 최신 디자인을 직접 확인할 수 있으며, 스크린샷을 반복해서 갱신하거나 파일을 찾는 수고를 줄일 수 있다. Notion, Dropbox Paper, Jira, Trello, Storybook 등 다양한 협업 도구와 내부 문서 사이트에서 활용할 수 있다. ## 비공개 Figma 파일 임베드의 등장 - 기존에는 외부 도구에 공개 Figma 파일만 임베드할 수 있었다. - 실제 협업에 필요한 디자인은 조직 내부 정보이거나 아직 공개할 수 없는 경우가 많아 비공개 임베드 지원 요구가 컸다. - 이제 팀 전용 도구에서도 비공개 Figma 파일을 임베드해 권한을 유지한 채 디자인을 공유할 수 있다. - 임베드된 파일은 원본 변경 사항을 자동으로 반영하므로 별도의 스크린샷 교체가 필요 없다. ## 제품 사양과 요구사항 - Dropbox Paper, Coda, Notion 같은 문서 도구의 제품 요구사항 문서에 최신 디자인을 함께 삽입할 수 있다. - 개발자는 요구사항과 목업, 사용자 여정, 아이디어 보드를 같은 문서 안에서 맥락에 맞게 확인할 수 있다. - 스크린샷 대신 실제 Figma 파일을 사용하므로 문서와 디자인 사이의 불일치가 줄어든다. - Coda에서는 제품 요구사항과 로드맵 템플릿에 Figma 파일을 삽입하는 방식이 소개됐다. ## 프로젝트 및 작업 관리 - Jira와 Trello의 이슈, 작업 카드, 스프린트 관리 화면에 관련 디자인을 직접 추가할 수 있다. - 디자이너와 개발자가 작업 항목 안에서 최신 시안을 확인해 구현 방향을 맞출 수 있다. - 이를 통해 디자인 파일을 별도로 검색하거나 올바른 버전을 확인하는 시간이 줄어든다. - Jira에서는 Figma for Jira 앱을, Trello에서는 Figma Power-Up을 사용할 수 있다. ## 문서화와 단일 기준점 - Storybook에서 UI 컴포넌트 참고 자료로 비공개 Figma 파일을 임베드할 수 있다. - 사내 문서 사이트는 Figma Live Embed Kit을 이용해 비공개 임베드를 지원할 수 있다. - 디자인을 문서에 직접 연결하면 문서와 디자인이 항상 최신 상태를 유지한다. - 팀은 Figma 파일을 제품 UI와 컴포넌트에 대한 신뢰할 수 있는 단일 기준점으로 활용할 수 있다. ## 프로토타입 임베드 개선 - Figma는 프로토타입에서 툴바와 푸터를 숨기는 기능도 추가했다. - 이 설정은 다른 도구에 프로토타입을 임베드할 때도 유지된다. - Maze 같은 사용자 테스트 도구에 프로토타입을 삽입할 때 불필요한 Figma UI를 제거할 수 있다. 비공개 임베드는 디자인을 문서, 작업 관리, 개발 문서에 직접 연결해 협업 비용을 낮추는 기능이다. 팀은 스크린샷보다 실시간 Figma 임베드를 우선 사용하고, 제품 사양과 이슈, 컴포넌트 문서에 원본 디자인을 연결해 최신 상태를 유지하는 것이 좋다.

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

storybookFigmajiranotion+4