design-to-code

Codex와 Figma로 프론트 (새 탭에서 열림)

피그마는 디자인과 개발의 경계를 허물고, 캔버스와 코드가 하나로 통합되는 디자인의 미래를 제시합니다. 단순한 시각적 도구를 넘어 실제 프로덕션 코드와 긴밀하게 연결된 시스템을 통해 협업의 마찰을 줄이고 구현의 정확도를 높이는 것이 핵심입니다. 이를 위해 AI 기술을 워크플로우 전반에 도입하고 개발자 모드(Dev Mode)를 대폭 강화하여 디자인의 의도가 코드까지 매끄럽게 이어지는 생태계를 구축하고자 합니다. ### AI를 통한 디자인 워크플로우의 자동화와 확장 * **AI 기반 디자인 생성(Make Design):** 텍스트 프롬프트를 통해 모바일 및 웹 인터페이스의 초안을 빠르게 생성함으로써 디자이너가 빈 화면에서 시작하는 부담을 줄여줍니다. * **지능적인 에셋 관리:** AI가 레이어의 이름을 자동으로 지정하고 적절한 텍스트 콘텐츠를 채워넣으며, 이미지 배경 제거와 같은 반복적인 편집 작업을 자동화합니다. * **시각적 검색 및 탐색:** 팀 내 방대한 디자인 라이브러리에서 특정 컴포넌트나 화면을 시각적 유사성을 기반으로 빠르게 찾아내어 재사용성을 극대화합니다. ### 디자인과 코드의 실시간 동기화, Code Connect * **실제 코드 조각 연결:** 'Code Connect' 기능을 통해 디자인 시스템의 컴포넌트와 실제 개발에 사용되는 코드 라이브러리를 직접 연결하여, 개발자가 디자인 환경 내에서 즉시 구현 코드를 확인할 수 있습니다. * **개발자 모드(Dev Mode) 고도화:** 디자인 변경 사항을 더 명확하게 추적하고, 현재 작업 상태(In Progress, Done 등)를 공유하여 디자이너와 개발자 간의 소통 오류를 최소화합니다. * **컴포넌트 문서화 자동화:** 디자인 속성과 코드의 속성을 일치시켜 수동으로 가이드를 작성할 필요 없이 항상 최신 상태의 문서를 유지합니다. ### 정교한 프로토타이핑과 협업 환경 개선 * **강화된 프로토타이핑 기능:** 복잡한 변수(Variables)와 조건부 로직을 더 직관적으로 설정하여, 실제 제품과 거의 동일하게 작동하는 고충실도(High-fidelity) 프로토타입을 제작할 수 있습니다. * **UI 재설계 및 사용성 향상:** 피그마 인터페이스 자체를 더욱 간결하게 재구성하여 디자인 작업 공간을 넓히고, 도구 접근성을 높여 창의적인 작업에 집중할 수 있는 환경을 제공합니다. * **슬라이드 기능 도입:** 디자인 결과물을 별도의 도구 없이 피그마 내에서 바로 프리젠테이션으로 전환하여 이해관계자와의 공유 및 피드백 과정을 효율화합니다. 디자이너는 이제 개별 화면을 그리는 것을 넘어 디자인 시스템이 코드와 어떻게 상호작용하는지 이해해야 합니다. Figma가 제공하는 AI 도구를 워크플로우에 적극적으로 통합하여 단순 반복 작업 시간을 줄이고, Code Connect를 통해 개발 팀과 단일화된 진실 공급원(Single Source of Truth)을 구축함으로써 제품의 완성도를 높이는 전략이 필요합니다.

Gemini 3를 (새 탭에서 열림)

피그마는 디자이너와 개발자 간의 협업 간극을 줄이기 위해 디자인 의도를 개발 환경으로 직접 전달하는 '디자인 컨텍스트(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):** 이전 버전의 디자인과 현재 디자인의 차이점을 시각적으로 비교하여 변경된 부분만 골라내어 업데이트할 수 있도록 돕습니다. 디자인 컨텍스트를 개발 과정 곳곳에 배치하는 피그마의 전략은 단순히 도구를 제공하는 것을 넘어 조직 전체의 협업 문화를 바꾸는 데 목적이 있습니다. 개발자는 더 이상 디자인 해석에 시간을 쏟지 않고, 코드 스니펫과 실시간 동기화 도구를 활용해 더 높은 수준의 제품 구현에 집중하는 것이 권장됩니다.

두 매개변수 구조 (새 탭에서 열림)

피그마는 디자인과 실제 구현물 사이의 해상도 차이를 극복하기 위해 디자인 캔버스 내에 실제 코드를 결합하는 '코드 레이어(Code layers)' 기술을 도입했습니다. 이를 통해 사용자는 피그마에서 디자인한 결과물을 별도의 변환 과정 없이 실제 웹사이트로 즉시 게시할 수 있는 'Figma Sites'를 구축할 수 있게 되었습니다. 이번 변화는 단순히 디자인을 코드로 내보내는 수준을 넘어, 디자인 환경 자체가 웹 엔진의 원리와 동일하게 작동하도록 캔버스의 근본적인 구조를 재설계했다는 점에 의의가 있습니다. ### 디자인 캔버스와 웹 브라우저의 기술적 통합 * 기존 피그마 캔버스는 C++로 작성된 고유의 렌더링 엔진을 통해 그래픽을 처리했지만, Figma Sites를 위해 이를 웹 표준인 HTML/CSS와 정렬시켰습니다. * 피그마의 오토 레이아웃(Auto Layout) 개념을 CSS Flexbox 및 Grid와 직접 매핑하여, 디자이너가 캔버스에서 작업하는 방식이 브라우저의 렌더링 방식과 1:1로 대응되도록 구현했습니다. * 웹 어셈블리(WASM)를 기반으로 작동하는 피그마 엔진 내부에 리액트(React) 기반의 렌더링 계층을 통합하여, 디자인 요소가 실제 코드 노드로 기능할 수 있게 했습니다. ### 코드 레이어의 핵심 메커니즘 * '코드 레이어'는 캔버스 위에서는 일반 디자인 객체처럼 보이지만, 내부적으로는 실제 HTML 요소와 그에 따른 스타일 속성을 보유합니다. * 디자인 속성(색상, 간격, 폰트 등)을 단순한 메타데이터가 아닌 '라이브 코드' 상태로 유지함으로써, 게시 버튼을 누르는 즉시 실제 웹 환경에서 동일하게 재현됩니다. * 정적 자산을 넘어서 비디오, 입력 폼(Forms), 인터랙티브 요소와 같은 동적 컴포넌트를 디자인 캔버스에서 직접 제어할 수 있는 구조를 갖추었습니다. ### AI를 활용한 시맨틱 구조화 및 최적화 * 전통적인 디자인 파일은 계층 구조가 복잡하거나 논리적이지 않은 경우가 많으나, 피그마는 AI를 활용해 이를 깨끗하고 의미 있는(Semantic) 코드 구조로 변환합니다. * AI 모델은 디자이너가 구성한 레이어의 시각적 배치를 분석하여 적절한 HTML 태그(header, nav, section 등)를 추천하고, 반응형 레이아웃을 위한 미디어 쿼리 설정을 자동화합니다. * 비정형적인 디자인 데이터를 웹 표준에 맞는 정제된 코드로 변환하는 과정에서 발생할 수 있는 오류를 AI가 사전에 검사하고 최적화하여 성능을 높였습니다. ### 실무적 가치와 전망 피그마의 이러한 변화는 디자인 '핸드오프(Hand-off)'라는 개념 자체를 사라지게 만들 수 있습니다. 디자이너가 캔버스에서 내린 결정이 곧 최종 코드가 되는 환경은 개발 주기를 획기적으로 단축하며, 디자인의 의도가 실제 제품에서 훼손되지 않도록 보장합니다. 이제 피그마는 단순한 드로잉 도구가 아니라, 코드를 시각적으로 조작하는 '비주얼 개발 환경'으로 진화하고 있습니다.

MCP 서버 소개: 워크 (새 탭에서 열림)

Figma는 개발자가 LLM 기반 협업 도구에서 디자인 맥락을 실시간으로 활용할 수 있도록 지원하는 'Figma MCP(Model Context Protocol) 서버'를 베타 버전으로 출시했습니다. 이 서버는 단순한 이미지 전달을 넘어 디자인 시스템의 컴포넌트, 변수, 스타일링 정보를 AI에게 직접 제공함으로써, 개발자가 사용하는 코드베이스의 패턴에 최적화된 고품질 코드를 생성하도록 돕습니다. 결과적으로 Cursor, VS Code Copilot 등 AI 기반 코딩 도구에서 디자인 의도를 더욱 정확하고 효율적으로 구현할 수 있게 되었습니다. ### 디자인 의도를 코드로 전환하는 MCP 서버의 역할 * **표준화된 컨텍스트 제공**: MCP는 애플리케이션이 LLM에 맥락을 제공하는 표준 규격으로, 이를 통해 Figma의 디자인 데이터를 가공 없이 AI 에이전트(Cursor, Windsurf, Claude Code 등)에 직접 연결합니다. * **학습 데이터의 한계 극복**: LLM은 일반적인 코드는 잘 작성하지만 특정 팀의 고유한 코드 구조나 프레임워크 패턴은 알지 못합니다. MCP 서버는 팀 고유의 디자인 의도를 전달해 이 간극을 메웁니다. * **효율적인 워크플로우**: 단순히 디자인을 보고 코드를 짜는 단계를 넘어, AI가 디자인의 구조와 논리를 스스로 이해하고 멀티 레이어 애플리케이션 흐름을 구축할 수 있도록 지원합니다. ### 디자인 시스템 및 패턴 메타데이터 활용 * **정밀한 코드 매칭**: 디자인에 정의된 컴포넌트, 변수(Variable), 스타일 정보를 직접 전달합니다. AI가 단순히 비슷한 색상을 찾는 것이 아니라, 시스템에 정의된 정확한 토큰 이름과 변수명을 사용하게 합니다. * **Code Connect 연동**: Figma에 설정된 'Code Connect' 정보를 바탕으로 AI에게 해당 디자인이 구현된 실제 코드 파일의 경로를 정확히 안내하여 중복 컴포넌트 생성을 방지합니다. * **토큰 절약 및 정확도 향상**: 디자인 시스템의 패턴을 직접 참조함으로써 AI가 탐색에 소모하는 토큰 양을 줄이고, 디자인 시스템을 벗어난 코드를 생성할 확률을 낮춥니다. ### 시각적 정보와 상호작용의 결합 * **고수준 스크린샷 제공**: 텍스트 데이터로 설명하기 어려운 전체적인 화면 흐름, 반응형 레이아웃, 섹션 간의 관계를 스크린샷을 통해 AI에게 시각적으로 보완 설명합니다. * **인터랙션 및 의사 코드(Pseudocode)**: 복잡한 상태 변화나 UI 시퀀스를 설명하기 위해 '의사 코드' 형태의 프로토타입 데이터를 제공합니다. 이는 단순한 메타데이터 트리보다 AI가 컴포넌트의 동작 논리를 이해하는 데 훨씬 효과적입니다. * **선택적 컨텍스트 제어**: 사용자는 특정 도구가 반환하는 정보의 양을 설정하여, 현재 작업 중인 코드 구현에 가장 적합한 수준의 디자인 컨텍스트를 조절할 수 있습니다. ### 실용적인 활용 및 향후 계획 현재 Figma MCP 서버는 베타 단계로, VS Code의 Copilot이나 Cursor 같은 도구에 연결하여 즉시 디자인 기반 코드 생성을 테스트해 볼 수 있습니다. 향후 Figma는 원격 서버 기능 지원과 코드베이스와의 더욱 깊은 통합을 포함한 업데이트를 지속할 예정입니다. 디자인 시스템이 잘 구축된 팀일수록 이 서버를 통해 디자인과 코드 간의 일치성을 극대화하는 경험을 할 수 있을 것입니다.

Config 2025: (새 탭에서 열림)

피그마는 Config 2025를 통해 단순한 디자인 도구를 넘어 아이디어 구상부터 실제 제품 구현까지 전 과정을 아우르는 통합 플랫폼으로의 확장을 선언했습니다. AI 기술을 전면에 배치한 4개의 신규 제품과 강력해진 디자인 기능을 도입하여, 디자인과 개발 사이의 경계를 허물고 팀 전체의 생산성을 극대화하는 데 집중하고 있습니다. 이는 디자인이 비즈니스 차별화의 핵심이 되는 시대에 발맞추어, 모든 팀원이 제품 개발 프로세스에 더욱 깊이 기여할 수 있는 환경을 구축하려는 전략적 움직임으로 풀이됩니다. **AI 기반의 앱 및 웹 제작 솔루션** * **Figma Make**: 텍스트 프롬프트를 코드로 변환하거나 기존 디자인을 실제 작동하는 프로토타입 및 앱으로 제작해 주는 AI 도구로, 숙련도와 상관없이 아이디어를 빠르게 시각화하고 반복 수정할 수 있도록 돕습니다. * **Figma Sites**: 디자이너가 AI와 코드의 도움을 받아 역동적인 상호작용과 맞춤 설정이 가능한 웹사이트를 직접 구축하고 즉시 배포할 수 있는 환경을 제공합니다. **디자인 표현력과 브랜드 일관성 강화** * **Figma Draw**: 더욱 정교해진 벡터 편집 및 일러스트레이션 도구 세트를 통해 디자이너가 높은 수준의 공예적 완성도를 가진 시각 결과물을 만들 수 있도록 지원합니다. * **Figma Buzz**: 마케팅 및 브랜드 팀이 브랜드 가이드라인을 준수하면서도 AI를 활용해 대규모로 시각적 자산을 생성하고 관리할 수 있도록 설계된 전용 제품입니다. **개발 협업 및 AI 워크플로우 고도화** * **Grid**: 반응형 레이아웃 설정을 돕는 새로운 옵션으로, Dev Mode에서 즉시 활용 가능한 CSS 코드를 생성하여 디자인에서 개발로 이어지는 핸드오프 과정을 획기적으로 개선합니다. * **지능형 AI 기능**: 이미지 생성 및 편집 기능이 고도화되었으며, 작업 맥락을 이해해 다음 단계를 제안하는 자동 제안 기능과 FigJam 내 AI 보조 도구가 추가되어 워크플로우 속도를 높였습니다. **사용자 저변 확대와 글로벌 시장 최적화** * **사용자 구성의 변화**: 현재 피그마 사용자의 약 2/3가 비디자인 직군이며 그중 30%가 개발자인 점을 반영하여, 직군 간의 협업 효율을 높이는 도구(Dev Mode, Slides 등)를 지속적으로 강화하고 있습니다. * **글로벌 현지화**: 전체 사용자의 85%가 미국 외 지역에 거주하는 상황에 맞춰 브라질 시장을 위한 포르투갈어 전면 지원 및 UI 현지화를 진행하며 글로벌 확장세를 이어가고 있습니다. 이제 피그마는 디자이너만을 위한 도구를 넘어, 기획자, 개발자, 마케터가 하나의 캔버스에서 제품을 완성하는 '제품 개발 운영 체제'로 진화하고 있습니다. 팀 내 협업 효율을 높이고 AI를 통해 제작 단계를 단축하고자 한다면, 순차적으로 출시될 이번 신규 기능들을 워크플로우에 적극적으로 도입해 볼 것을 권장합니다.

피그마, 브라질 포 (새 탭에서 열림)

피그마(Figma)가 디자인의 접근성을 높이고 글로벌 사용자 커뮤니티와의 접점을 확대하기 위해 브라질 포르투갈어 현지화 버전을 공식 출시했습니다. 이는 일본어, 스페인어, 한국어에 이은 네 번째 현지화 사례로, 단순히 언어 번역을 넘어 문화적으로 적응된 UI와 전담 지원 서비스를 포함하여 브라질 내 550만 개의 프로젝트 파일을 생성하는 거대 시장을 공략하려는 전략입니다. 이번 업데이트는 미국 외 지역 사용자 비중이 85%에 달하는 피그마의 글로벌 성장세를 반영하며, 올해 말 라틴아메리카 스페인어 버전 출시로 이어질 예정입니다. **브라질 시장 내 피그마의 영향력과 현지화 배경** * **폭발적인 사용량:** 브라질에서는 작년 한 해 동안 약 550만 개의 피그마 파일이 생성되었으며, 매일 평균 85,000개 이상의 파일이 수정될 만큼 활발한 커뮤니티를 보유하고 있습니다. * **주요 기업의 채택:** iFood, Nubank, Itaú Unibanco 등 브라질 주요 기업과 스타트업은 물론, 브라질 주식시장(Ibovespa) 상장 기업의 1/3 이상이 협업 도구로 피그마를 사용 중입니다. * **디자인 민주화:** 현지 팀들은 이번 포르투갈어 지원이 업무 중 발생하는 마찰을 줄이고, 디자이너뿐만 아니라 다양한 직군이 디자인 프로세스에 참여하는 데 크게 기여할 것으로 기대하고 있습니다. **글로벌 사용자 지표와 제품 확장의 방향성** * **글로벌 매출 및 사용자 비중:** 2024년 기준 피그마 매출의 50% 이상이 미국 외 지역에서 발생하고 있으며, 월간 활성 사용자(MAU)의 대다수가 글로벌 시장에 포진해 있습니다. * **역할의 다양화:** 전체 사용자의 약 2/3가 전통적인 디자이너 역할 이외의 직군이며, 특히 개발자 비중이 30%에 달해 개발 모드(Dev Mode)와 같은 기능의 중요성이 커지고 있습니다. * **통합 개발 워크플로우:** 아이디어 구상(FigJam)부터 디자인(Figma Design), 개발 전달(Dev Mode), 프레젠테이션(Figma Slides)까지 제품 개발의 전 과정을 아우르는 도구로 진화하고 있습니다. **Config 컨퍼런스에서 발표된 주요 기술 업데이트** * **Figma Make:** AI 프롬프트를 통해 작성된 설명이나 기존 디자인을 실제 작동하는 프로토타입이나 앱 코드로 변환해주는 도구입니다. * **Figma Sites:** 디자이너가 AI와 코드를 활용해 동적인 웹사이트를 직접 구축하고 게시할 수 있는 기능을 제공합니다. * **Figma Draw & Buzz:** 강화된 벡터 편집 도구인 'Draw'와 마케팅 자산을 대규모로 생성하면서도 브랜드 일관성을 유지해주는 AI 기반의 'Buzz'가 추가되었습니다. * **Grid 및 반응형 레이아웃:** 디자인에 맞춰 유연하게 반응하는 레이아웃을 생성하고, 개발 모드에서 즉시 사용할 수 있는 CSS 코드를 생성하여 협업 효율을 높였습니다. 피그마의 이번 현지화와 신기능 업데이트는 디자인 도구가 단순한 제작 툴을 넘어, 전 세계 다양한 직군이 언어와 기술적 장벽 없이 협업할 수 있는 통합 플랫폼으로 거듭나고 있음을 보여줍니다. 특히 브라질과 같은 신흥 시장에서의 적극적인 행보는 글로벌 디자인 표준으로서의 입지를 더욱 공고히 할 것으로 보입니다.

피그마, 한국 시장 (새 탭에서 열림)

피그마(Figma)가 한국 시장을 위한 제품 현지화 및 지원 서비스의 오픈 베타 출시를 발표했습니다. 이번 한국어 지원은 일본어와 스페인어에 이은 세 번째 현지화 사례로, 한국 사용자들에게 더욱 직관적인 디자인 환경을 제공하고 디자인의 접근성을 전 세계로 확장하려는 피그마의 비전을 담고 있습니다. 이를 통해 국내 디자이너뿐만 아니라 개발자와 기획자 등 다양한 직군 간의 협업 효율이 극대화될 것으로 기대됩니다. **한국 시장 맞춤형 현지화 및 지원 확대** * 제품 인터페이스 전반에 걸친 완전한 한국어 번역과 한국 문화에 적합하도록 조정된 사용자 경험(UI)을 제공합니다. * 한국어 사용자를 위한 전담 고객 지원 체계를 구축하여 서비스 이용 중 발생하는 문제에 신속하게 대응합니다. * 이번 한국어 버전은 4월 16일부터 순차적으로 공개되는 오픈 베타를 통해 직접 체험할 수 있습니다. **국내 주요 기업의 활용 사례와 성과** * 카카오뱅크, 우아한형제들, 당근, 강남언니 등 국내 유수의 IT 기업들이 이미 피그마를 통해 제품을 개발하고 있습니다. * 카카오뱅크는 피그마 도입 이후 직원들의 업무 생산성이 약 30% 향상되었으며, 한국어 지원을 통해 언어 장벽 없이 핵심 프로젝트에 집중할 수 있게 되었다고 밝혔습니다. * 우아한형제들 또한 한국어 작업 환경이 비디자이너들의 디자인 프로세스 참여를 유도하여 협업의 질을 높였다고 평가했습니다. **데이터로 증명된 한국 내 피그마 생태계** * 한국 코스피 200 기업 중 약 3분의 1이 피그마를 사용하고 있으며, 국내 사용자들의 활발한 커뮤니티인 'Friends of Figma(FoF) 서울' 지부 멤버는 1,000명을 넘어섰습니다. * 지난 한 해 동안 한국에서 생성된 피그마 파일은 400만 개 이상이며, 매일 평균 75,000개 이상의 파일이 수정되고 있습니다. * 피그마의 글로벌 매출 50%가 미국 외 시장에서 발생하고 월간 활성 사용자(MAU)의 85%가 해외 거주자인 만큼, 한국은 피그마의 글로벌 확장 전략에서 핵심적인 위치를 차지합니다. **전체 제품 개발 공정을 아우르는 도구로의 진화** * 피그마는 단순한 디자인 도구를 넘어 화이트보드 협업 도구인 '피그잼(FigJam)', 개발자와의 원활한 소통을 돕는 '데브 모드(Dev Mode)', 프레젠테이션 제작을 위한 '피그마 슬라이드(Figma Slides)' 등 제품 개발의 전 과정을 지원합니다. * 2024년에는 AI 기능을 도입하여 팀의 창의적인 아이디어를 실제 제품으로 구현하는 속도를 한층 더 높였습니다. * 특히 월간 활성 사용자의 약 30%가 개발자인 만큼, 이번 현지화는 디자인과 개발 사이의 언어적 간극을 메우는 중요한 계기가 될 것입니다. 이번 한국어 현지화는 단순한 언어 번역을 넘어 국내 기업들이 디자인 중심의 제품 개발 문화를 구축하는 데 강력한 촉매제가 될 것으로 보입니다. 특히 디자인 비전공자나 개발자와의 협업이 잦은 팀이라면, 이번 오픈 베타 기간을 활용해 한국어 환경에서의 워크플로우를 최적화하고 팀 내 협업 장벽을 낮추는 기회로 삼기를 권장합니다.

디자이너와 개발자를 직장에서 (새 탭에서 열림)

디자인 핸드오프는 단순히 완성된 결과물을 전달하는 일회성 이벤트가 아니라, 디자이너와 개발자가 제품의 비전을 공유하고 기술적 실현 가능성을 조율하는 지속적인 협업 과정입니다. 효율적인 핸드오프를 위해서는 설계 단계부터 개발자의 피드백을 수용하고, 구현에 필요한 구체적인 명세와 자산을 체계적으로 준비하는 것이 필수적입니다. 이를 통해 개발 과정에서의 불필요한 재작업을 줄이고, 디자인 의도가 온전히 구현된 고품질의 제품을 완성할 수 있습니다. **개발자의 조기 참여와 기술적 정렬** * 기획 초기 단계부터 개발자를 참여시켜 디자인의 기술적 구현 가능성(Feasibility)을 검토받고 예산과 일정에 따른 제약 사항을 파악합니다. * 디자인 시스템이나 컴포넌트 라이브러리를 사전에 공유하여 코드와 디자인 간의 용어 및 구조적 일관성을 확보합니다. * 복잡한 기능을 설계하기 전, 개발자와 함께 로직과 데이터 흐름을 논의하여 구조적인 오류를 미연에 방지합니다. **명확한 문서화와 자산 관리** * 그리드 시스템, 타이포그래피 스케일, 컬러 팔레트 등 기본 스타일 가이드를 명확히 정의하고 개발 도구 내에서 쉽게 접근할 수 있도록 구성합니다. * 아이콘, 이미지 등 모든 에셋은 일관된 명명 규칙(Naming Convention)에 따라 정리하고 즉시 내보내기(Export)가 가능한 상태로 제공합니다. * 반응형 레이아웃의 경우, 각 중단점(Breakpoint)에서의 변화와 요소 간의 간격(Padding/Margin) 변화를 상세히 기술하여 모호함을 제거합니다. **상태 변화와 인터랙션의 상세 정의** * 정적인 화면뿐만 아니라 빈 화면(Empty State), 로딩 중, 에러 발생 시의 상태 등 모든 예외 케이스(Edge Case)를 누락 없이 포함합니다. * 버튼의 Hover, Active, Disabled 등 사용자 상호작용에 따른 컴포넌트의 다양한 상태(State)를 빠짐없이 설계합니다. * 애니메이션과 전환 효과(Transition)는 속도, 지속 시간, 이징(Easing) 곡선 등 구체적인 수치를 명시하여 개발자가 직관적으로 이해할 수 있게 합니다. **핸드오프 미팅 및 지속적인 커뮤니케이션** * 디자인 파일 전달 후에는 반드시 핸드오프 미팅을 진행하여 전체적인 사용자 흐름(User Flow)을 함께 짚어보고 질의응답 시간을 가집니다. * 개발 진행 중 발생하는 이슈에 대해 즉각적으로 소통할 수 있는 채널을 운영하고, 수정 사항은 디자인 파일에 실시간으로 업데이트합니다. * 구현된 결과물이 디자인 명세와 일치하는지 검토하는 디자인 QA 단계를 거쳐 최종 결과물의 완성도를 높입니다. 성공적인 핸드오프의 핵심은 서로의 전문성을 존중하는 '공감'과 이를 잇는 '공통 언어'입니다. Figma의 'Dev Mode'나 Storybook 같은 도구를 적극 활용하여 디자인과 코드 사이의 간극을 좁히고, 문서화 작업 자체를 협업의 수단으로 인식할 때 가장 효율적인 워크플로우를 구축할 수 있습니다.

개발자가 디자인에 적극적으로 참여 (새 탭에서 열림)

Figma의 Dev Mode는 단순한 디자인 뷰어 기능을 넘어 디자이너와 엔지니어 사이의 작업 흐름을 근본적으로 변화시켰습니다. 지난 1년 동안 이 기능을 도입한 결과, 코드와 디자인의 동기화를 강화하고 불필요한 커뮤니케이션 비용을 획기적으로 줄이는 데 성공했습니다. 이제 Figma는 단순한 디자인 전달 도구가 아니라, 엔지니어가 실제 개발 환경과 연동하여 활용할 수 있는 강력한 협업 플랫폼으로 진화했습니다. ### 코드 연결성 강화와 Code Connect * **Code Connect 활용**: Figma 컴포넌트와 실제 프로덕션 코드(React, SwiftUI 등)를 직접 연결하여, 엔지니어가 디자인을 클릭했을 때 디자인 속성 대신 실제 사용하는 코드 스니펫을 즉시 확인할 수 있습니다. * **일관성 유지**: 디자인 시스템의 라이브러리 코드를 직접 노출함으로써 엔지니어가 임의로 스타일을 구현하는 것을 방지하고, 코드베이스와 디자인 사이의 일관성을 높입니다. ### 명확한 워크플로우 상태 관리 * **개발 준비 완료(Ready for Dev) 표시**: 섹션별로 작업 상태를 지정할 수 있어, 엔지니어는 작업 중인 디자인과 구현을 시작해도 되는 디자인을 즉각적으로 구분할 수 있습니다. * **커뮤니케이션 효율화**: 디자인이 수정될 때마다 수동으로 알리는 대신, 상태 값을 통해 작업의 진척도를 공유함으로써 불필요한 회의와 확인 과정을 줄였습니다. ### 개발 리소스 및 컨텍스트 통합 * **Dev Resources 연결**: Jira 티켓, GitHub PR, Storybook 문서 등 해당 디자인과 관련된 외부 링크를 Figma 내부에 직접 첨부할 수 있습니다. * **정보 파편화 방지**: 엔지니어는 툴 사이를 이동할 필요 없이 Figma 한곳에서 프로젝트의 모든 맥락과 관련 문서를 파악할 수 있어 몰입도가 높아집니다. ### 정교한 속성 검사 및 변경 사항 추적 * **Annotation(주석) 기능**: 레드라인(수치 표기) 작업을 자동화하는 주석 기능을 통해 측정값이나 구체적인 속성 정보를 명확하게 전달하며, 이는 수동으로 수치를 기입하던 과거의 번거로움을 해결합니다. * **Compare Changes**: '변경 사항 비교' 기능을 통해 이전 버전과 현재 버전의 디자인 차이를 시각적으로 대조할 수 있어, 어떤 픽셀이 수정되었는지 추측할 필요가 없습니다. ### 디자인 토큰 및 변수(Variables) 활용 * **디자인 토큰 시각화**: 색상, 간격, 타이포그래피 등의 변수 값을 코드로 바로 확인할 수 있어 토큰 기반의 개발 환경 구축이 용이해집니다. * **다크 모드 및 모드 전환**: 하나의 디자인에서 변수를 통해 다크 모드나 모바일 뷰 등을 빠르게 전환하며 각 환경에 맞는 속성값을 신속하게 추출할 수 있습니다. --- Dev Mode의 성공적인 도입을 위해서는 기술적인 툴 사용법을 익히는 것만큼이나 **디자인 시스템과 실제 코드의 구조를 일치시키려는 팀 간의 협업 문화**가 중요합니다. 엔지니어링 매니저라면 단순히 엔지니어에게 Figma 계정을 부여하는 것에 그치지 말고, Code Connect를 통해 라이브러리를 동기화하고 개발 리소스를 문서화하는 프로세스를 정착시키는 것을 추천합니다.

개발 모드와 함께한 (새 탭에서 열림)

피그마는 'Dev Mode'를 정식 출시하며 베타 기간 수집된 피드백을 바탕으로 200개 이상의 기능 개선과 오류 수정을 단행했습니다. 이번 업데이트의 핵심은 디자인과 코드 사이의 물리적·심리적 간극을 좁혀 개발자가 디자인 의도를 더 정확하게 파악하고 구현할 수 있도록 환경을 고도화하는 데 있습니다. 이를 통해 협업의 마찰을 줄이고 제품 개발 주기를 획기적으로 단축하는 것을 최종 목표로 합니다. **변경 사항 추적과 워크플로우 가시성 확보** - 디자인 변경 이력을 시각적으로 비교할 수 있는 'Compare changes' 기능을 통해, 이전 버전과 현재 버전 사이에 어떤 요소가 수정되었는지 한눈에 파악할 수 있습니다. - 'Ready for dev' 상태 관리 기능을 강화하여 개발자가 어떤 화면이 구현 준비가 완료되었고, 어떤 부분이 수정 중인지 실시간으로 확인하며 작업 우선순위를 정할 수 있습니다. - 섹션 상태 알림 기능을 통해 특정 컴포넌트나 화면의 작업 완료 여부를 팀원들에게 즉각적으로 공유할 수 있는 체계를 마련했습니다. **Code Connect를 활용한 디자인-코드 동기화** - 'Code Connect' 기능을 도입하여 피그마 내 컴포넌트와 실제 프로덕션 코드(React, SwiftUI, Jetpack Compose 등)를 직접 연결할 수 있습니다. - 개발자는 디자인 가이드에서 단순히 속성값을 복사하는 것을 넘어, 실제 라이브러리에 정의된 코드 조각(Snippet)을 바로 확인하고 프로젝트에 적용할 수 있습니다. - 이를 통해 디자인 시스템의 일관성을 유지하고, 불필요한 커스텀 코드 작성을 방지하여 코드 품질을 상향 평준화합니다. **외부 도구 연동 및 플러그인 생태계 확장** - Jira, GitHub, Storybook 등 개발자가 주로 사용하는 외부 협업 도구와의 통합을 강화하여 피그마를 벗어나지 않고도 티켓 상태를 확인하거나 문서를 참조할 수 있습니다. - 개발자 중심의 플러그인을 통해 에셋 최적화, 코드 생성, 데이터 주입 등 반복적인 작업을 자동화할 수 있는 환경을 구축했습니다. - VS Code용 피그마 확장을 통해 편집기 내에서 디자인을 직접 검사하고 변경 사항을 즉시 반영하는 긴밀한 워크플로우를 제공합니다. **검사(Inspection) 성능 및 사용자 경험 개선** - 복잡한 레이아웃 구조에서도 속성값을 빠르고 정확하게 추출할 수 있도록 검사 도구의 성능과 UI를 대폭 개선했습니다. - 에셋 다운로드 시 파일 포맷 지정 및 해상도 설정을 더욱 세밀하게 조정할 수 있어 리소스 관리 효율이 높아졌습니다. - 박스 모델(Box model) 시각화 및 단위 변환 기능을 정교화하여 개발자가 디자인 의도에 맞는 CSS나 스타일 코드를 작성하기 용이해졌습니다. 단순히 디자인을 '보는' 도구에서 디자인을 '코드로 해석하는' 플랫폼으로 진화한 피그마의 Dev Mode를 적극 활용해 보세요. 특히 Code Connect를 도입하여 디자인 시스템과 실제 코드 저장소를 연결한다면, 디자인 전달 과정에서 발생하는 소통 비용을 획기적으로 줄일 수 있을 것입니다.

크런치롤이 개발자 (새 탭에서 열림)

글로벌 애니메이션 스트리밍 서비스인 크런치롤(Crunchyroll)은 15개의 플랫폼과 12개의 언어를 지원하는 복잡한 환경 속에서 디자인 일관성을 유지하기 위해 '유니버설 디자인 시스템(Universal Design System)'과 피그마의 '개발 모드(Dev Mode)'를 적극 도입했습니다. 과거 인수합병 과정에서 쌓인 파편화된 워크플로우와 기술 부채를 정리함으로써, 디자이너와 엔지니어 간의 협업 효율을 극대화하고 사용자에게 통일된 브랜드 경험을 제공하게 되었습니다. 이번 전환은 단순히 도구를 바꾼 것을 넘어, 복잡한 다중 플랫폼 환경에서 제품의 출시 속도와 품질을 동시에 잡는 전략적 선택이었습니다. **다중 플랫폼 환경에서의 복잡성과 레거시 문제** * 크런치롤은 웹, 모바일뿐만 아니라 게임 콘솔, 스마트 TV 등 9개의 거실용 기기를 포함해 총 15개의 플랫폼을 지원하며, 1,500만 명 이상의 글로벌 팬들에게 서비스를 제공합니다. * 과거에는 각 플랫폼별로 개별적인 디자인 시스템(iOS, Android, tvOS 등)을 운영했으며, 이는 협업 과정에서 심각한 불일치와 혼선을 초래했습니다. * 기존 워크플로우는 Jira 트리거와 Zeplin에 의존했으나, 아트보드 로딩에만 4~5분이 소요되거나 시차 문제로 인해 최신 디자인 사양을 실시간으로 공유하기 어려운 구조였습니다. **디자인 시스템을 통한 효율성 극대화: "식재료 준비(Meal Prepping)"** * 디자인 시스템을 '식재료 미리 준비하기'에 비유하여, 매번 새로운 기능을 만들 때마다 처음부터 설계하는 것이 아니라 준비된 컴포넌트를 재사용하여 리소스를 절약합니다. * 엔지니어링의 DRY(Don't Repeat Yourself) 원칙을 디자인에도 적용하여 중복 컴포넌트를 제거하고 일관된 타이포그래피, 그리드, 간격 시스템을 구축했습니다. * 이러한 표준화는 사용자의 인지 부하를 줄여 구독 전환율을 높이는 동시에, 제품 관리자가 아이디어를 빠르게 검증할 수 있는 속도 경쟁력을 제공합니다. **개발 모드(Dev Mode)를 활용한 협업 프로세스의 혁신** * 개발자가 피그마 링크를 통해 '개발 준비 완료(Ready for development)' 페이지에 접속하면, 수많은 아이데이션 과정은 생략하고 오직 구현에 필요한 최신 스펙과 코드 값만 바로 확인할 수 있습니다. * 기존에 5분씩 걸리던 데이터 파싱 속도가 획기적으로 개선되어, 엔지니어가 특정 결제 플로우나 컴포넌트의 상세 정보를 찾는 데 드는 시간을 대폭 단축했습니다. * 코드 커넥트(Code Connect) 베타 버전을 통합하여 디자인 시스템의 컴포넌트와 실제 코드를 더 밀접하게 연결함으로써 디자인과 코드 간의 괴리를 좁히고 있습니다. **디자인 시스템 운영의 철학과 변화 관리** * 디자인 시스템은 팀을 지원하기 위한 도구일 뿐, 프로세스의 포로가 되어서는 안 된다는 철학 아래 지속적인 교육과 온보딩 워크숍을 진행했습니다. * 과거의 복잡한 QA 단계나 불필요한 태그 시스템을 과감히 삭제하고, 개발자가 필요한 정보에 직접 접근할 수 있는 자율적인 환경을 조성했습니다. * 전문화된 디자인 원칙(계층 구조, 그리드 등)을 준수하는 '좋아 보이는 디자인'과 엣지 케이스까지 고려한 '잘 작동하는 디자인'을 디자인 성공의 핵심 지표로 삼고 있습니다. 디자인 시스템은 한 번 구축하고 끝나는 것이 아니라 팀의 성장에 맞춰 계속 진화해야 합니다. 크런치롤의 사례처럼 도구의 기능을 활용해 불필요한 단계를 제거하고, 개발자와 디자이너가 동일한 언어로 소통할 수 있는 환경을 만드는 것이 복잡한 글로벌 서비스를 운영하는 핵심 전략입니다.

Figma와 Jira로 디 (새 탭에서 열림)

피그마(Figma)는 디자인과 개발 사이의 간극을 좁히기 위해 도입된 Dev Mode의 정식 출시와 함께 생산성을 극대화할 수 있는 새로운 기능들을 대거 공개했습니다. 이번 업데이트는 개발자가 디자인 의도를 더 정확히 파악할 수 있도록 돕는 주석(Annotations) 기능, 변경 사항을 한눈에 파악하는 비교 도구, 그리고 개발 환경을 디자인 도구 안으로 가져오는 플러그인 생태계 확장에 초점을 맞추고 있습니다. 이를 통해 디자인에서 코드로의 전환 과정이 더욱 정교하고 효율적으로 개선되었습니다. ### 디자인 의도를 명확히 전달하는 주석(Annotations) - 디자이너가 개발자에게 필요한 측정값, 사양, 세부 지침을 디자인 요소 위에 직접 기록할 수 있는 기능을 제공합니다. - 기존 디자인 파일이 복잡해지는 문제를 해결하기 위해 개발자 모드에서만 활성화되는 오버레이 방식을 채택하여, 협업 시 불필요한 커뮤니케이션 비용을 줄여줍니다. - 개발자는 주석을 통해 폰트, 간격, 레이아웃에 대한 디자이너의 구체적인 의도를 즉각적으로 파악할 수 있습니다. ### 버전 관리 및 변경 사항 비교(Compare Changes) - 특정 프레임의 이전 버전과 현재 버전을 시각적으로 비교할 수 있는 기능을 도입하여 히스토리 추적을 용이하게 했습니다. - 사이드 바이 사이드(Side-by-side) 뷰를 통해 어떤 속성이나 레이어 구조가 변경되었는지 코드로 즉시 확인할 수 있어, 수정 사항을 놓칠 위험을 방지합니다. - 개발자는 마지막으로 확인한 시점 이후 무엇이 바뀌었는지 명확히 인지하고 구현에 반영할 수 있습니다. ### 작업 효율을 높이는 플러그인과 통합 환경 - Jira, Storybook, GitHub와 같은 외부 개발 도구를 Dev Mode 내에서 바로 사용할 수 있는 전용 플러그인을 지원합니다. - 개발자는 Figma를 벗어나지 않고도 티켓 상태를 확인하거나 기존 코드 컴포넌트와의 연결성을 검토할 수 있어 컨텍스트 스위칭(Context Switching) 비용을 최소화합니다. - 코드 스니펫(Code Snippet) 생성 기능이 강화되어 CSS, Tailwind, SwiftUI 등 다양한 프레임워크에 최적화된 코드를 제공합니다. ### 워크플로우 가시성 확보를 위한 상태 관리 - 'Ready for Dev' 상태 표시 기능을 통해 디자이너가 구현을 시작할 준비가 된 화면을 명확히 구분하여 전달할 수 있습니다. - 개발자는 수많은 페이지와 프레임 중에서 어떤 항목이 최종본인지 혼란을 겪지 않고 곧바로 작업에 착수할 수 있는 구조를 갖추게 되었습니다. Dev Mode는 단순한 뷰어 역할을 넘어 개발 프로세스의 핵심 허브로 진화하고 있습니다. 팀의 생산성을 높이기 위해서는 디자이너가 주석 기능을 적극 활용하여 소통 비용을 줄이고, 개발자는 조직의 기술 스택에 맞는 플러그인을 맞춤 설정하여 사용하는 것을 권장합니다. 특히 Dev Mode가 정식 서비스로 전환됨에 따라, 각 조직은 개발 효율성과 비용 사이의 균형을 고려하여 팀에 적합한 요금제와 시트(Seat) 구성을 검토할 필요가 있습니다.

개발 모드 어노테 (새 탭에서 열림)

피그마(Figma)는 디자인과 개발 사이의 간극을 좁히기 위해 도입된 '개발 모드(Dev Mode)'의 정식 출시를 앞두고, 협업 효율을 극대화할 수 있는 새로운 기능들을 대거 공개했습니다. 이번 업데이트는 개발자가 디자인 의도를 정확히 파악하고 변경 사항을 추적하는 과정을 단순화하여, 불필요한 커뮤니케이션 비용을 줄이는 데 초점을 맞추고 있습니다. 이를 통해 개발 모드는 단순한 디자인 뷰어를 넘어, 코드 구현에 필요한 모든 맥락을 제공하는 개발자 중심의 작업 공간으로 진화하고 있습니다. ### 어노테이션(Annotations)을 통한 명확한 기술 사양 전달 디자이너가 개발자에게 필요한 수치나 속성을 직접 지정하여 전달할 수 있는 기능이 강화되었습니다. * **측정값 및 속성 고정**: 디자이너가 특정 요소의 간격, 크기, 속성 정보를 주석 형태로 고정해 둘 수 있어, 개발자가 일일이 요소를 클릭하여 확인할 필요가 없습니다. * **디자인 의도 명시**: 텍스트 설명뿐만 아니라 레이아웃의 유연성이나 애니메이션 디테일 등 코드 구현 시 주의해야 할 사항을 명확하게 기록할 수 있습니다. * **맥락 유지**: 일반적인 협업 댓글과 분리된 기술 사양 전용 주석으로 관리되어, 개발 과정에서 정보의 휘발성을 방지합니다. ### 변경 사항 비교(Compare Changes) 및 버전 추적 디자인이 수정되었을 때 이전 버전과 현재 버전을 시각적으로 대조할 수 있는 도구가 도입되었습니다. * **비주얼 디프(Visual Diff)**: 프레임의 변경 전후 모습을 나란히 배치하거나 겹쳐서 비교함으로써, 어떤 픽셀이 수정되었는지 즉각적으로 파악할 수 있습니다. * **코드 변경 이력**: 시각적인 변화뿐만 아니라 속성 값의 변화를 코드 수준에서 확인하여, 업데이트된 내용만 정확히 코드에 반영할 수 있도록 돕습니다. * **편집 맥락 파악**: 누가, 언제, 무엇을 수정했는지에 대한 상세한 이력을 제공하여 변경 사유에 대한 추측을 배제합니다. ### 플러그인 생태계 확장 및 워크플로우 통합 개발 모드 전용 플러그인과 API를 통해 외부 개발 도구와의 연결성이 한층 강화되었습니다. * **전용 플러그인 UI**: 개발 모드 우측 패널에서 직접 실행되는 플러그인을 통해 Jira, GitHub, Storybook과 같은 도구와 데이터를 실시간으로 동기화할 수 있습니다. * **코드 생성 커스터마이징**: 기업 고유의 디자인 시스템이나 라이브러리에 맞게 코드를 생성하도록 플러그인을 최적화하여, 복사-붙여넣기 효율을 높였습니다. * **자동화 연동**: 새로운 API를 활용해 디자인 자산 추출이나 문서화 과정을 자동화하여 개발 생산성을 높일 수 있습니다. ### 개발 준비 상태(Ready for Dev) 관리 작업이 완료된 디자인을 명확하게 구분하여 개발자에게 신호를 보낼 수 있는 체계가 마련되었습니다. * **상태 표시기**: 특정 섹션이나 프레임을 '개발 준비 완료' 상태로 표시하여, 개발자가 진행 중인 작업(WIP)과 구현해야 할 최종안을 혼동하지 않게 합니다. * **알림 및 탐색**: 개발자가 피그마 파일에 접속했을 때 어떤 부분이 준비되었는지 요약된 목록을 제공하여, 작업의 우선순위를 즉시 파악할 수 있도록 돕습니다. 개발 모드가 베타를 마치고 정식 서비스로 전환됨에 따라, 팀의 워크플로우에 위 기능들을 적극적으로 도입해 보시길 권장합니다. 특히 어노테이션과 변경 사항 비교 기능은 디자이너와 개발자 간의 불필요한 확인 과정을 획기적으로 줄여줄 것이며, 맞춤형 플러그인을 통해 각 팀의 기술 스택에 최적화된 협업 환경을 구축할 수 있습니다.

개발 모드의 향후 계획 (새 탭에서 열림)

Figma는 디자이너와 개발자 사이의 협업 효율을 근본적으로 개선하기 위해 개발자 전용 작업 공간인 'Dev Mode'를 도입했습니다. 기존의 디자인 핸드오프 과정이 단순히 완성된 시안을 전달하는 데 그쳤다면, Dev Mode는 개발자가 디자인 의도를 정확히 파악하고 코드로 구현하는 데 필요한 정보를 직관적으로 제공하는 데 초점을 맞춥니다. 이를 통해 Figma는 디자인 도구를 넘어 제품 개발 프로세스 전반을 아우르는 협업 플랫폼으로 진화하고자 합니다. ### 개발자에게 최적화된 인터페이스와 정보 가독성 * **개발 중심 뷰(View):** 디자이너의 작업 공간과 분리된 개발자 전용 모드를 제공하여, 불필요한 레이어 정보 대신 치수, 패딩, 마진 등 구현에 필수적인 속성들을 우선적으로 노출합니다. * **박스 모델 가시화:** 웹 브라우저의 개발자 도구와 유사하게 요소의 크기와 간격을 시각적으로 보여주어, 디자인 시스템의 수치를 코드로 옮기는 과정을 단순화합니다. * **상태 표시 및 트래킹:** '개발 준비 완료(Ready for dev)' 상태를 명시적으로 표시하여 개발자가 어떤 시안을 기준으로 작업해야 하는지 혼란을 방지하고, 이전 버전과의 차이점을 비교할 수 있는 기능을 제공합니다. ### 코드 생성 및 디자인 시스템 연동 * **맞춤형 코드 스니펫:** CSS뿐만 아니라 SwiftUI, Jetpack Compose 등 플랫폼에 최적화된 코드를 생성하며, 개발자가 사용하는 라이브러리에 맞게 스니펫을 커스텀할 수 있습니다. * **디자인 토큰 지원:** 디자인 시스템에 정의된 토큰 이름과 값을 직접 확인할 수 있어, 하드코딩 대신 시스템 변수를 정확하게 사용하도록 유도합니다. * **에셋 추출 자동화:** 아이콘이나 이미지 등의 에셋을 일일이 내보내기 설정할 필요 없이, 개발자가 필요한 포맷으로 즉시 다운로드하거나 경로를 복사할 수 있습니다. ### 워크플로우 통합과 확장성 * **Figma for VS Code:** 디자인 파일을 보기 위해 브라우저나 앱을 오갈 필요 없이, VS Code 내에서 디자인을 확인하고 코드를 작성하며 속성을 검사할 수 있는 확장 프로그램을 지원합니다. * **외부 도구 연결:** Jira, GitHub, Storybook과 같은 외부 협업 도구와 플러그인을 통해 연결하여, 문서화된 사양이나 컴포넌트 라이브러리를 Figma 내부에서 바로 참조할 수 있습니다. * **플러그인 생태계:** 개발 과정에 특화된 플러그인들을 Dev Mode 내에서 실행하여 반복적인 작업을 자동화하거나 팀별로 최적화된 워크플로우를 구축할 수 있습니다. 성공적인 제품 구현을 위해 개발팀은 Dev Mode를 단순히 스펙을 확인하는 용도가 아닌, 디자인 시스템과 코드의 싱크를 맞추는 통합 지점으로 활용해야 합니다. 특히 VS Code 확장 프로그램을 활용해 컨텍스트 스위칭 비용을 최소화하고, 디자인 토큰 기반의 협업 환경을 구축한다면 커뮤니케이션 오류를 줄이고 배포 속도를 획기적으로 높일 수 있을 것입니다.

프로토타이핑 문화를 조성 (새 탭에서 열림)

피그마는 Config 2023을 통해 디자인과 개발 사이의 간극을 좁히고, 팀이 제품을 구축하는 방식을 근본적으로 재정의하고자 합니다. 단순한 디자인 도구를 넘어 개발자와 디자이너가 실시간으로 소통하며 제품을 완성해 나가는 통합 플랫폼으로의 진화를 선언했습니다. 이를 위해 개발자 전용 공간인 '데브 모드(Dev Mode)'와 디자인 시스템의 유연성을 극대화하는 '변수(Variables)' 기능을 도입하여 협업의 효율성을 극대화한 것이 이번 발표의 핵심입니다. ### 개발자를 위한 전용 공간, 데브 모드(Dev Mode) * **개발 중심 인터페이스:** 디자인 파일을 개발 언어로 해석해 주는 새로운 공간으로, 개발자가 디자인 시스템을 더 쉽게 이해하고 구현할 수 있도록 돕습니다. * **코드 검사 및 익스텐션:** CSS, iOS, Android 전용 코드를 제공하며, Jira나 GitHub, Storybook과 같은 기존 워크플로우 도구와 플러그인을 통해 연결할 수 있습니다. * **Figma for VS Code:** 디자인 파일을 보기 위해 브라우저를 오갈 필요 없이, 개발 환경인 VS Code 내에서 디자인을 확인하고 변경 사항을 즉시 반영할 수 있습니다. * **준비 상태 표시:** 디자이너가 특정 섹션을 "개발 준비 완료(Ready for dev)" 상태로 표시하여 개발자가 불필요한 커뮤니케이션 없이 작업을 시작할 수 있게 합니다. ### 디자인 시스템의 진화, 변수(Variables) * **디자인 토큰화:** 색상, 숫자, 문자열, 불리언(Boolean) 값을 변수로 정의하여 디자인 전반에 걸쳐 일관성을 유지하고 효율적으로 관리할 수 있습니다. * **모드(Modes) 기능:** 다크 모드, 라이트 모드, 혹은 모바일과 데스크톱 환경에 따른 수치 변화를 변수 세트로 묶어 클릭 한 번으로 전체 디자인 테마를 전환할 수 있습니다. * **고급 프로토타이핑과의 연동:** 변수와 논리 연산(if/else), 수학적 표현식을 결합하여 실제 제품과 유사하게 작동하는 고충실도(Hi-fi) 프로토타입을 제작할 수 있습니다. ### 코드의 논리를 담은 오토 레이아웃(Auto Layout) 업데이트 * **줄바꿈(Wrap) 지원:** 여러 요소를 가로로 배치하다가 공간이 부족하면 자동으로 다음 줄로 넘겨주는 기능이 추가되어 응답형 레이아웃 구현이 쉬워졌습니다. * **최소/최대 너비 및 높이 설정:** 요소의 크기가 특정 범위를 벗어나지 않도록 제한할 수 있어, 실제 개발 환경에서 CSS로 제어하는 방식과 동일한 설계가 가능해졌습니다. 피그마가 도입한 '데브 모드'와 '변수'는 단순한 편의 기능이 아니라, 디자인 산출물이 곧 코드로 이어지는 '디자인-코드 일원화'를 지향합니다. 팀의 생산성을 높이기 위해서는 디자이너가 변수 기능을 적극적으로 활용하여 시스템을 구축하고, 개발자는 VS Code 익스텐션을 통해 워크플로우를 통합하는 방식의 변화를 시도해 볼 것을 권장합니다.