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

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

design-to-codeFigmaAI디자인 시스템+1

figma·2025년 6월 3일원문

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는 원격 서버 기능 지원과 코드베이스와의 더욱 깊은 통합을 포함한 업데이트를 지속할 예정입니다. 디자인 시스템이 잘 구축된 팀일수록 이 서버를 통해 디자인과 코드 간의 일치성을 극대화하는 경험을 할 수 있을 것입니다.

design-to-codeFigma대규모 언어 모델AI 에이전트+3

figma·2025년 5월 6일원문

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를 통해 제작 단계를 단축하고자 한다면, 순차적으로 출시될 이번 신규 기능들을 워크플로우에 적극적으로 도입해 볼 것을 권장합니다.

design-to-codeFigma프로토타이핑생성형 AI+4

figma·2025년 5월 6일원문

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

피그마(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 코드를 생성하여 협업 효율을 높였습니다. 피그마의 이번 현지화와 신기능 업데이트는 디자인 도구가 단순한 제작 툴을 넘어, 전 세계 다양한 직군이 언어와 기술적 장벽 없이 협업할 수 있는 통합 플랫폼으로 거듭나고 있음을 보여줍니다. 특히 브라질과 같은 신흥 시장에서의 적극적인 행보는 글로벌 디자인 표준으로서의 입지를 더욱 공고히 할 것으로 보입니다.

design-to-codeFigma프로토타이핑생성형 AI+3

figma·2025년 4월 14일원문

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

피그마(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%가 개발자인 만큼, 이번 현지화는 디자인과 개발 사이의 언어적 간극을 메우는 중요한 계기가 될 것입니다. 이번 한국어 현지화는 단순한 언어 번역을 넘어 국내 기업들이 디자인 중심의 제품 개발 문화를 구축하는 데 강력한 촉매제가 될 것으로 보입니다. 특히 디자인 비전공자나 개발자와의 협업이 잦은 팀이라면, 이번 오픈 베타 기간을 활용해 한국어 환경에서의 워크플로우를 최적화하고 팀 내 협업 장벽을 낮추는 기회로 삼기를 권장합니다.

design-to-codeFigma사용자 경험figjam+4

figma·2024년 8월 19일원문

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

글로벌 애니메이션 스트리밍 서비스인 크런치롤(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 단계나 불필요한 태그 시스템을 과감히 삭제하고, 개발자가 필요한 정보에 직접 접근할 수 있는 자율적인 환경을 조성했습니다. * 전문화된 디자인 원칙(계층 구조, 그리드 등)을 준수하는 '좋아 보이는 디자인'과 엣지 케이스까지 고려한 '잘 작동하는 디자인'을 디자인 성공의 핵심 지표로 삼고 있습니다. 디자인 시스템은 한 번 구축하고 끝나는 것이 아니라 팀의 성장에 맞춰 계속 진화해야 합니다. 크런치롤의 사례처럼 도구의 기능을 활용해 불필요한 단계를 제거하고, 개발자와 디자이너가 동일한 언어로 소통할 수 있는 환경을 만드는 것이 복잡한 글로벌 서비스를 운영하는 핵심 전략입니다.

design-to-codeFigma디자인 시스템사용자 경험+4

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

왜 우리는 코드가 범

AI가 디자인을 코드로 변환하고 반복적인 구현 작업을 자동화하더라도, 엔지니어의 역할 자체가 사라지는 것은 아니다. 코드 작성은 엔지니어링의 일부일 뿐이며, 사용자의 문제를 정의하고 제약 조건 속에서 적절한 추상화와 시스템을 설계하는 능력은 여전히 사람의 핵심 역량이다. 따라서 코드를 상품화의 대상으로 두려워하기보다, 자동화를 통해 창의성·문제 해결·제품 의사결정에 더 집중해야 한다는 것이 글의 결론이다. ## 디자인과 코드의 경계가 흐려지는 이유 - AI는 프로그래밍 언어 간 변환뿐 아니라 디자인 시안을 실제 코드로 변환하는 작업도 자동화할 수 있다. - Figma 같은 현대적인 디자인 도구는 내부적으로 디자인을 일종의 구조화된 코드 형태로 저장한다. - 따라서 디자인을 TypeScript·React 또는 Kotlin·Jetpack 코드로 바꾸는 일은 본질적으로 한 표현 방식에서 다른 표현 방식으로 번역하는 작업에 가깝다. - 그러나 목업을 코드로 바꾸는 능력이 곧 좋은 제품이나 시스템을 만드는 능력을 의미하지는 않는다. ## 코드 작성보다 중요한 엔지니어링의 본질 - 엔지니어링은 단순히 코드를 출력하는 일이 아니라 다음을 포함한다. - 어떤 문제를 해결해야 하는지 판단하기 - 문제를 해결할 적절한 방법 선택하기 - 복잡한 시스템을 이해하기 쉬운 추상화로 구성하기 - 정확하고 단순하며 유지보수 가능한 해법 만들기 - 뛰어난 엔지니어는 특정 언어·프레임워크·플랫폼의 세부 문법에만 의존하지 않고, 여러 기술에 공통된 원리를 바탕으로 사고한다. - React나 Jetpack 같은 특정 기술의 전문성은 시간이 지나면 가치가 감소할 수 있지만, 사용자의 요구와 시스템 제약을 해석하는 능력은 오래 지속된다. - AI가 부족한 영역은 사용자의 실제 필요, 제품 맥락, 기술적 제약을 종합해 우아하고 직관적인 시스템으로 설계하는 일이다. ## 반복 작업 자동화와 엔지니어의 창의성 - AI는 반복적이고 정형화된 작업을 줄여 엔지니어가 더 창의적인 문제에 집중하도록 도울 수 있다. - 하나의 기능을 구현하는 방법은 여러 가지일 수 있으며, AI는 기존에 고려하지 않았던 대안을 빠르게 제시할 수 있다. - 최종적으로 어떤 방식을 선택할지는 성능, 복잡도, 유지보수성, 사용자 경험 등의 트레이드오프를 평가하는 사람의 판단에 달려 있다. - 엔지니어의 창의성은 제약을 제거하는 데만 있지 않고, 제약을 활용해 더 나은 기술적·제품적 선택을 만들어내는 데 있다. - 기술 시스템의 구현은 단순한 코딩 작업이 아니라 팀의 제품 결정을 개선하는 창의적 활동이다. ## 구현자에서 문제 정의자·조정자로의 역할 변화 - Figma의 엔지니어들은 출근 후 곧바로 코드를 작성하기보다 팀원들과 사용자 문제를 논의하고 해결 우선순위를 정한다. - 무엇을 만들지, 왜 만들어야 하는지, 어떤 방식이 적절한지를 합의한 뒤에야 구현에 들어간다. - AI가 하위 수준의 기술 작업을 자동화할수록 엔지니어가 직접 신경 써야 할 구현 세부사항은 줄어든다. - 그 결과 엔지니어의 업무는 다음 영역으로 더 이동한다. - 사용자 문제의 발견과 해석 - 문제의 우선순위 설정 - 팀 간 정렬과 의사결정 - 시스템 구조와 품질 기준 설계 - 즉, 엔지니어의 추상화 수준이 높아지고 구현 자체가 전체 업무에서 차지하는 비중은 작아진다. ## 생산성보다 중요한 개발 속도와 가치 전달 - AI 도입의 효과를 단순히 “더 많은 코드를 더 빨리 작성하는 것”으로 측정해서는 안 된다. - 중요한 것은 코드 출력량이 아니라, 올바른 문제를 선택하고 사용자에게 가치 있는 결과를 얼마나 빠르게 전달하는가이다. - 잘못 정의된 문제를 AI로 빠르게 구현하면 오히려 불필요한 기능과 기술 부채가 빠르게 늘어날 수 있다. - 따라서 AI는 구현 자동화 도구이면서 동시에 여러 해결책을 탐색하고 제품 실험을 가속하는 도구로 활용해야 한다. AI 시대에 엔지니어는 특정 프레임워크의 코드 작성 능력보다 문제 정의, 시스템 사고, 트레이드오프 판단, 사용자 맥락 이해를 강화하는 것이 좋다. 반복 구현은 AI에 맡기되, 무엇을 만들지와 어떤 구조가 장기적으로 좋은지는 사람이 책임지는 방식이 바람직하다.

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

design-to-code생성형 AIReactTypeScript+2

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

Code Connect의 잠재력 활용

디자인과 개발의 간극을 줄이려면 두 팀이 공유할 수 있는 언어와 단일한 작업 흐름이 필요하다. Figma의 Code Connect는 디자인 시스템의 컴포넌트 구현 정보와 문서를 Dev Mode에서 직접 제공해 개발자가 맥락을 바꾸지 않고 올바른 코드를 사용할 수 있도록 돕는다. 패널 참가자들은 작은 컴포넌트부터 시작해 점진적으로 도입하고, 디자이너와 개발자의 전문성을 서로 존중해야 한다고 강조한다. ## 디자인과 개발이 함께 쓰는 언어 만들기 - 디자이너와 개발자는 컴포넌트 이름, 속성, 구현 방식에 대해 서로 다른 용어와 기대를 가질 수 있다. - 이 차이는 다음과 같은 문제로 이어진다. - 일관되지 않은 네이밍 - 디자인과 코드의 속성 불일치 - 팀 간 요구사항과 구현 결과의 불일치 - 디자인 시스템은 공통 컴포넌트, 패턴, 용어를 정의해 두 분야를 연결하는 “제3의 언어” 역할을 한다. - 단순히 규칙을 문서화하는 것뿐 아니라, 구성원이 쉽게 찾고 실제로 적용할 수 있게 만드는 것도 중요하다. ## 단일한 기준과 개발자 워크플로 연결 - Bumble의 Raul Menezes는 디자인과 코드에서 서로 다른 기준 문서가 사용되는 것이 일관성 저하의 주요 원인이라고 설명한다. - 같은 UI 패턴을 반복해서 직접 구현하면 다음 문제가 발생한다. - 중복 코드 증가 - 커스텀 구현 확산 - 유지보수 어려움 - 디자인 시스템과 실제 제품 간의 불일치 - 디자이너는 디자인 시스템 문서를 참고하지만, 개발자는 별도의 코드 저장소나 문서를 기준으로 삼는 경우가 많다. - Code Connect는 디자인 시스템의 코드 예시와 구현 정보를 Dev Mode 안에서 제공해 개발자가 기존 코드 편집 및 개발 흐름에서 바로 참고하도록 설계됐다. ## 도입 장벽을 낮추고 작은 규모로 시작하기 - 디자인 시스템을 구축했다고 해서 자동으로 팀 전체가 사용하는 것은 아니다. 개발자가 기존 작업 방식을 크게 바꿔야 한다면 adoption이 느려질 수 있다. - 기존에는 개발자가 디자인 구현 방식을 확인하기 위해 별도의 디자인 시스템 웹사이트로 이동해야 했다. - Code Connect를 사용하면 Dev Mode에서 특정 디자인이 코드로 구현되어 있는지, 어떤 방식으로 구현하는지 확인할 수 있어 컨텍스트 전환을 줄인다. - 처음부터 모든 컴포넌트를 연결하기보다 영향도가 높고 구조가 단순한 컴포넌트부터 시작하는 것이 권장된다. - 예: 토글 같은 작은 컴포넌트 - 디자인 속성과 코드 속성을 어떻게 매핑하는지 먼저 검증 - 팀이 도구의 효과와 운영 방식을 익힌 뒤 범위 확대 - Code Connect는 완성된 최종 해법이라기보다 더 큰 디자인-코드 통합을 위한 첫 단계로 제시된다. ## 서로의 전문성 존중하기 - 디자인과 개발의 간극을 줄인다는 것은 한쪽의 방식을 다른 쪽에 강요하는 것이 아니다. - 디자이너는 사용자 경험, 시각적 일관성, 패턴 설계에 강점을 가진다. - 개발자는 컴포넌트 구조, 재사용성, 기술적 제약, 유지보수성에 전문성이 있다. - 효과적인 디자인 시스템 운영을 위해서는 두 팀이 각자의 전문성을 인정하고, 공통 언어와 도구를 통해 협업해야 한다. - Code Connect는 디자인 시스템의 의도와 실제 코드 구현을 연결해 양쪽의 지식을 공유하는 매개 역할을 한다. ## 실용적인 적용 방법 - 디자인 시스템에서 자주 사용되고 영향도가 큰 컴포넌트를 우선 선정한다. - 디자인의 컴포넌트 속성과 코드의 props·API가 어떻게 대응하는지 정의한다. - Dev Mode에서 개발자가 별도 문서 검색 없이 구현 예시를 확인할 수 있도록 연결한다. - 초기 도입 후 다음을 점검한다. - 개발자가 실제로 재사용 컴포넌트를 선택하는지 - 중복·커스텀 구현이 줄었는지 - 디자인과 코드의 명명 및 속성이 일치하는지 - 검증된 운영 방식을 바탕으로 점차 복잡한 컴포넌트와 더 넓은 제품 영역으로 확대하는 것이 바람직하다.

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

design-to-codeFigma디자인 시스템dev-mode+2

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

디자인에서 코드로의 자동화를

Dev Mode의 코드 생성(codegen)은 디자인을 완성된 코드로 자동 변환하는 기능이라기보다, 개발자가 구현을 시작할 수 있도록 돕는 출발점이다. Figma는 기본 코드 스니펫을 제공하고, 팀의 디자인 시스템과 기술 스택에 맞춰 다양한 codegen 플러그인으로 확장할 수 있다고 설명한다. Anima, Builder, Figma to Code, Locofy.ai 같은 도구는 React·HTML·Tailwind부터 Flutter·SwiftUI까지 지원하며 반응형 구현과 컴포넌트화를 가속한다. ## Dev Mode와 codegen의 역할 - Codegen은 정해진 규칙이나 명세를 바탕으로 코드를 자동 생성하는 과정이다. - Figma Dev Mode에서 캔버스의 객체를 선택하면 Inspect 패널에 자동 코드 스니펫이 표시된다. - 사용자는 코드 언어와 단위 체계를 드롭다운에서 선택할 수 있다. - codegen은 디자인을 개발로 옮기는 작업을 완전히 대체하기보다, 매번 빈 화면에서 시작하지 않도록 구현의 출발점을 제공한다. - 성숙한 디자인 시스템을 운영하는 팀은 자체 규칙과 컴포넌트를 반영하기 위해 custom codegen 플러그인을 만들 수 있다. ## Anima를 활용한 디자인 코드 변환 - Figma의 레이어·컴포넌트·프레임을 React 또는 HTML 코드로 내보낼 수 있다. - CSS, SCSS, Tailwind 형식의 스타일 코드와 함께 인터랙티브하고 반응형인 결과물을 생성한다. - 반복되는 컴포넌트를 자동으로 감지해 코드 중복을 줄인다. - 팀이 사용하는 코드 스타일과 관례를 학습해 더 적절한 코드 스니펫을 제공한다. - Dev Mode에서 애니메이션을 추가하거나 특정 스타일에 맞게 코드를 조정하도록 요청할 수 있다. ## Builder의 AI 기반 코드 컴포넌트 활용 - React, Svelte, HTML 등의 코드를 AI로 생성한다. - 팀의 기존 코드 컴포넌트를 활용해 디자인과 실제 구현 사이의 간극을 줄인다. - 생성된 코드에 대해 대화형으로 수정 사항을 요청할 수 있다. - 팀의 코드 스타일에 맞도록 AI를 학습시키고, 디자인을 자동으로 반응형으로 변환할 수 있다. - Figma 밖의 별도 웹 인터페이스에서 생성 코드를 시험하고 수정할 수 있다. ## Figma to Code로 웹·모바일 코드 생성 - Figma Community에서 제공되는 무료 오픈 소스 플러그인이다. - 반응형 웹을 위해 HTML 또는 Tailwind 코드를 생성한다. - 모바일 앱 개발을 위해 Flutter와 SwiftUI 코드도 지원한다. - 플러그인에서 생성된 Tailwind 코드를 확인한 뒤 코드 에디터로 복사해 사용할 수 있다. - 별도의 유료 도구 없이 디자인을 여러 플랫폼의 코드로 빠르게 변환할 수 있다는 점이 특징이다. ## Locofy.ai를 통한 웹·모바일 프로토타입 구현 - React, HTML/CSS, Next.js, Gatsby, Vue 기반의 인터랙티브 코드를 생성한다. - 개별 컴포넌트뿐 아니라 전체 화면 단위의 코드 생성도 지원한다. - 자동 레이아웃과 프레임 그룹화 같은 디자인 최적화를 적용한다. - 시맨틱 HTML 요소, 라이브러리, 동작을 태깅해 인터랙션을 구성한다. - 화면 크기에 따른 반응형 동작을 지원한다. - 컴포넌트와 props를 생성해 결과물을 모듈화한다. - 사람이 이해하기 쉬운 문맥 기반 클래스명을 사용해 협업과 확장성을 높인다. - 생성 코드를 다듬은 뒤 프로토타입을 공유하고, 데이터를 연결하며, 코드나 Storybook 파일로 내보낼 수 있다. - GitHub와 직접 동기화하고 자동 병합 및 충돌 해결을 지원해 지속적 통합 흐름에 연결할 수 있다. 실무에서는 생성된 코드를 최종 결과물로 그대로 사용하기보다, 팀의 디자인 시스템·컴포넌트 구조·접근성·상태 관리·성능 기준에 맞게 검토하고 수정하는 것이 좋다. codegen 플러그인은 반복적인 초기 구현을 줄이고 협업을 빠르게 만드는 보조 도구로 활용할 때 가장 효과적이다.

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

design-to-codeFigmaReactHTML+3

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

Framework by Figma에 여러분을 초대합니다

Figma는 디자인 시스템을 단순한 스타일 가이드가 아니라 제품 설계와 개발을 지탱하는 기반으로 보고, 이를 주제로 한 글로벌 행사 ‘Framework by Figma’를 2024년 4월 16일 개최한다고 소개했다. 행사는 새로운 기능, 운영 모범 사례, 디자인-코드 연결, 디자이너와 엔지니어 간 협업을 다룬다. 이후 행사에서는 Code Connect, 타이포그래피·그라디언트 변수, Library Analytics API 등이 공개됐다. ## 디자인 시스템의 확장과 복잡성 - 디자인 시스템은 초기의 단순한 스타일 가이드에서 제품 개발 전반의 기반으로 발전했다. - 실제 도입과 운영 과정에서는 도구 선택, 자동화, 접근성, 조직 내 채택률 관리 등 다양한 문제가 발생한다. - Figma는 현재와 미래의 복잡한 요구를 지원하는 기능과 운영 전략을 행사에서 공유하려 했다. - 시스템을 미리 구조화한 경우뿐 아니라 자유롭게 작업하는 상황도 지원해야 한다는 철학을 강조했다. ## Framework 행사에서 다룬 내용 - 새로운 디자인 시스템 기능을 심층적으로 소개한다. - 디자인 시스템을 효과적으로 구축하고 유지하는 모범 사례를 공유한다. - Verizon 등 업계 기업의 디자인 시스템 구축 및 운영 경험을 소개한다. - Figma 제품팀이 향후 개발 방향을 설명한다. - Bumble, GitHub, Hewlett Packard가 참여하는 디자인-코드 연계 라운드테이블을 진행한다. - 참가자들의 실무 질문에 답하는 전문가 Q&A를 마련한다. ## 디자이너와 엔지니어의 연결 - 성공적인 디자인 시스템에는 디자인과 개발 조직의 긴밀한 협업이 필요하다고 설명한다. - 세션은 디자인 원칙부터 기술적 구현까지 두 직군의 공통 관심사를 다룬다. - 디자인 시스템을 코드와 더 가깝게 연결하는 새로운 기능도 소개 대상에 포함됐다. - 이는 디자인 산출물이 실제 제품 코드로 이어지는 과정의 간극을 줄이려는 방향이다. ## 행사에서 공개된 기능 - **Code Connect**: 디자인 시스템 구성 요소와 개발자가 사용하는 코드 컴포넌트를 연결한다. - **타이포그래피 변수와 그라디언트 변수**: 디자인 토큰의 표현 범위를 확장하고 일관된 스타일 관리를 돕는다. - **Library Analytics API**: 조직 내 라이브러리 사용 현황과 디자인 시스템 채택 정도를 분석할 수 있도록 지원한다. - 이러한 기능은 디자인 시스템의 구축뿐 아니라 개발 연계와 조직 전체의 활용도 측정까지 지원하는 데 초점을 둔다. ## 글로벌 디자인 시스템 커뮤니티 - 본 행사는 온라인으로 진행되며 전 세계 디자인 시스템 실무자를 대상으로 했다. - 아시아 지역 온라인 행사는 4월 18일, 도쿄 행사는 4월 23일에 별도로 진행될 예정이었다. - 런던 등 여러 도시에서는 현지 밋업도 계획됐다. - 온라인 스트림을 통해 지역과 관계없이 주요 발표와 세션에 참여할 수 있도록 했다. Figma가 제시한 방향은 디자인 시스템을 엄격한 규칙만으로 운영하기보다, 구조화된 관리와 자유로운 창작을 함께 지원하는 것이다. 조직에서는 디자인 토큰과 컴포넌트 표준화뿐 아니라 코드 연결, 사용량 분석, 디자이너·엔지니어 간 협업 체계까지 함께 구축하는 것이 실용적이다.

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

design-to-codeFigma디자인 시스템접근성+3

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

Dev Mode에 대해 알아

Figma는 디자이너와 개발자가 하나의 파일과 협업 공간에서 더 효율적으로 제품을 만들 수 있도록 Dev Mode를 개발했고, 2024년 1월 베타를 종료했습니다. Dev Mode는 개발자에게 필요한 정보와 도구를 별도 워크스페이스로 제공하면서도 디자인 맥락과 협업은 유지하는 것이 핵심입니다. Figma는 사용자 피드백을 바탕으로 주석, 변경점 비교 등 핸드오프와 구현을 지원하는 기능을 강화했습니다. ## 개발자 중심의 작업 공간이 필요한 이유 - 개발자는 Figma 주간 활성 사용자의 약 3분의 1을 차지했습니다. - 하지만 기존 Figma는 디자인 작업에 최적화되어 있어 개발자의 워크플로, 도구 체계, 선호 사항을 충분히 지원하지 못했습니다. - Figma는 프런트엔드 개발자, 디자인 시스템 엔지니어, 콘텐츠 레이아웃 및 에셋을 다루는 개발자 등 다양한 역할을 고려해 개발자 전용 경험을 만들고자 했습니다. - 핵심 방향은 개발자가 디자인 모드의 모든 상호작용을 학습하지 않아도 되도록, 개발자에게 필요한 방식으로 Figma를 맞추는 것이었습니다. ## Visly 인수와 개발자 직관 확보 - Figma는 2021년 React UI 컴포넌트 개발 도구를 만들던 Visly 팀을 인수했습니다. - 8명의 디자이너와 엔지니어로 구성된 Visly 팀은 개발자 도구에 대한 실무 경험과 연구 결과를 보유하고 있었습니다. - Figma는 개발자와 대화하는 것만으로는 부족하며, 실제 개발 환경에 몰입해 얻는 ‘개발자 직관’이 필요하다고 판단했습니다. - Visly 팀은 개발자가 Figma를 사용하는 실제 방식과 다양한 개발 환경에 대한 관점을 제공했습니다. ## 디자인과 개발을 연결하는 통합 모드 - Dev Mode의 형태를 결정하는 과정에서 디자인 파일과 개발 파일을 완전히 분리할지, 하나로 통합할지 오랜 기간 검토했습니다. - 최종적으로 Dev Mode를 Figma 안의 별도 공간으로 구현했습니다. - 개발자는 개발에 최적화된 인터페이스를 사용하면서도 디자인 파일, 변경사항, 디자이너의 의도 같은 중요한 맥락을 그대로 확인할 수 있습니다. - 별도 도구나 파일로 전환하지 않고 디자인 공간과 개발 공간을 오갈 수 있다는 점이 핵심입니다. ## 오픈 베타와 사용자 피드백 - Dev Mode는 Config 2023에서 오픈 베타로 공개되었습니다. - 베타 기간 동안 고객 요청을 적극적으로 수집했고, 처음 두 달 동안 가장 많이 요청된 업데이트와 수정 사항 200개 이상을 배포했습니다. - 사용자 피드백은 Dev Mode의 기능 우선순위와 제품 결정에 직접 반영되었습니다. - 이후 Dev Mode는 베타를 종료하고 정식 제품 단계로 이동했습니다. ## 디자인 의도를 명확히 전달하는 주석 - 기존에는 디자이너가 개발자에게 필요한 치수와 설명을 수동으로 만들고 디자인을 별도로 정리해야 했습니다. - Dev Mode의 주석 기능은 디자인에 직접 연결된 설명, 사양, 측정값을 제공합니다. - 디자인이 변경되면 주석도 실시간으로 업데이트되어 최신 상태를 유지할 수 있습니다. - 캔버스를 복잡하게 만들지 않으면서 중요한 세부사항을 강조할 수 있습니다. - 플러그인을 이용해 주석을 자동화하거나 사용자 지정할 수 있습니다. - 클릭하고 드래그하는 방식으로 요소 간 거리를 측정할 수 있습니다. ## 개발 준비 상태와 변경점 비교 - 디자이너는 섹션을 “개발 준비 완료(ready for development)”로 표시하고 별도의 페이지나 파일 없이 개발자에게 전달할 수 있습니다. - 변경점 비교(diff) 기능을 사용하면 서로 다른 버전의 프레임을 비교할 수 있습니다. - 이를 통해 디자인 변경 사항을 확인하고, 개발자가 최신 디자인을 기준으로 작업하도록 지원합니다. - 목적은 디자인 핸드오프 과정에서 누락되는 설명이나 변경사항을 줄이고 구현 정확도를 높이는 것입니다. Dev Mode를 효과적으로 활용하려면 디자인과 개발을 별도 도구로 분리하기보다, 디자인 파일 안에서 주석·측정값·준비 상태·변경 이력을 일관되게 관리하는 것이 좋습니다. 특히 개발 전달 전에 “개발 준비 완료” 상태와 변경점을 명확히 표시하면 커뮤니케이션 비용을 줄일 수 있습니다.

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

design-to-codeFigma디자인 시스템React+3

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

주목하고 좋아하게

피그마 Creator Fund는 커뮤니티를 위해 무료 위젯·플러그인·템플릿 등을 만드는 창작자를 지원하며, 13명에게 약 30만 달러를 지원했다. 이 글은 그중 실용적이고 어려운 문제를 해결한 프로젝트들을 소개하고, 창작자가 명확한 비전과 시각 자료를 바탕으로 자신이 관심 있는 아이디어를 발전시키라고 권한다. 제공된 본문에는 세 프로젝트 중 **Figma to Code** 사례가 중심적으로 포함되어 있다. ## Creator Fund의 목적과 성과 - Figma Community에서 누구나 사용할 수 있는 무료 리소스 제작을 지원한다. - 2023년 3월 시작 이후: - 수백 건의 지원서를 접수했다. - 9개국 13명의 창작자에게 약 30만 달러를 지원했다. - 디자인 시스템 튜토리얼, Figma 개발자 플랫폼 학습 플러그인 등 다양한 결과물이 나왔다. - Figma는 단순히 흥미로운 프로젝트보다 다음과 같은 프로젝트를 선호한다. - 해결하기 어려운 문제를 다루는 프로젝트 - 사용자의 시간을 절약하는 실용적인 도구 - 커뮤니티 전체가 무료로 사용할 수 있는 리소스 ## Creator Fund 지원서 작성 시 고려할 점 - 만들고 싶은 것이 무엇인지 명확한 비전을 제시해야 한다. - 몇 문장으로 급하게 작성하기보다 아이디어와 목표를 충분히 구체화해야 한다. - 추가 설명을 요청받을 수 있으므로 시각 자료를 준비하는 것이 좋다. - 심사위원이 원하는 것을 추측하기보다 자신이 실제로 관심 있는 문제를 선택해야 한다. - 지원 프로그램은 단순한 자금 제공을 넘어, 창작자가 프로젝트를 완성하도록 돕는 역할을 한다. ## Figma to Code: 디자인을 코드로 변환 - 브라질 쿠리치바의 Bernardo Ferrari가 만든 프로토타이핑 플러그인이다. - Figma 레이아웃을 다음 형식의 코드로 변환한다. - HTML - Tailwind - Flutter - SwiftUI - 디자인 시안을 실제 프론트엔드 코드로 빠르게 옮길 수 있어 프로토타이핑과 초기 개발 과정을 단축한다. - 디자인을 기반으로 제품을 만들고 사업화하려는 창작자에게 특히 유용하다. ## 코로나19 프로젝트에서 시작된 플러그인 - Bernardo는 코로나19 확산 정보를 제공하는 브라질 지역 웹사이트의 유지보수를 맡으며 플러그인을 구상했다. - 웹 개발 경험이 2015년 이후 거의 없었기 때문에 Figma에서 디자인한 화면을 직접 코드로 재현하는 방식으로 작업했다. - 기존 디자인-코드 변환 플러그인에는 다음과 같은 한계가 있었다. - 코드 생성 속도가 느림 - 여러 단계를 거쳐야 함 - 전체 기능을 사용하려면 유료 결제가 필요함 - Figma API 지원 범위가 좁고 오토 레이아웃 같은 기능이 빠짐 - 하나의 언어나 프레임워크만 지원함 - 반응형 디자인과 접근성을 충분히 고려하지 않음 - 이를 해결하기 위해 약 두 달 동안 플러그인을 개발했고, 2020년 7월 출시했다. ## Creator Fund를 통한 기능 개선 - 출시 후 몇 년 동안 Figma와 웹 프레임워크가 크게 바뀌었지만, 플러그인은 이를 따라가지 못했다. - 초기 버전은 다음과 같은 제한이 있었다. - 패딩을 수직·수평 방향으로만 설정 가능 - 오토 레이아웃에서 `min`과 `fixed` 정도만 지원 - Creator Fund 지원을 계기로 플러그인을 유료화하지 않고 대대적으로 개선할 기회를 얻었다. - Figma의 새로운 Dev Mode를 지원하는 작업도 진행했으며, 2023년 Config에서 업데이트를 공개했다. - 지원금은 기존 프로젝트를 유지하는 데 그치지 않고, 최신 Figma 기능과 개발 환경에 맞춰 제품을 발전시키는 촉진제가 되었다. ## 실용적인 시사점 - 디자인-코드 변환 도구는 단순한 코드 생성뿐 아니라 반응형 레이아웃, 접근성, 최신 Figma API 지원까지 고려해야 한다. - 무료 도구를 지속적으로 유지하려면 개발 비용과 기능 업데이트를 지원하는 구조가 필요하다. - Creator Fund에 지원하려는 창작자는 명확한 문제 정의, 구체적인 해결 방법, 실제 사용자가 얻는 이점을 함께 제시하는 것이 좋다. - 제공된 글 본문은 Figma to Code 사례 중간에서 끝나므로, 나머지 두 프로젝트의 구체적인 내용은 포함되어 있지 않다.

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

design-to-codeFigmaHTMLfigma-plugins+3

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

코드 생성이 (진짜)

코드 생성(codegen)은 디자인-개발 과정을 완전히 자동화하기보다, 개발자가 더 빠르고 정확하게 작업하도록 돕는 확장 도구로 활용할 때 가장 효과적이다. 특히 AI 코드 생성 결과는 정확성과 유용성에 한계가 있으므로, 개발자를 대체하기보다 적절한 컴포넌트·속성·코드 패턴을 제안해 초기 작업을 앞당기는 방향이 현실적이다. Figma는 이를 “0에서 1”이 아닌 “0에서 0.5”로 빠르게 이동시키는 도구로 설명한다. ### 코드 생성의 범위와 현실 - 코드 생성은 정해진 규칙이나 명세를 바탕으로 코드를 자동 생성하는 과정이다. - 범위가 넓으며 다음과 같은 형태를 포함한다. - IDE의 자동 완성 기능 - 반복적인 코드 패턴을 위한 스니펫과 템플릿 - Bubble 같은 비주얼 프로그래밍·노코드 도구 - GitHub Copilot, Replit Ghostwriter 같은 AI 기반 코드 생성 도구 - Stack Overflow 2023 조사에서 개발자의 82%가 AI 도구를 사용해 코드를 작성한다고 답했다. - 반면 AI 도구의 정확성을 매우 신뢰한다고 답한 비율은 3%에 불과했다. - 따라서 코드가 생성된다는 사실보다, 실제 프로젝트의 프레임워크와 코드베이스에 맞고 개발자가 유용하게 사용할 수 있는지가 더 중요하다. ### 디자인을 코드로 그대로 변환하기 어려운 이유 - Figma는 Dev Mode를 처음 개발할 때 디자인을 코드로 자동 변환하는 것을 목표로 했다. - 초기 결과는 가능성을 보였지만, 다양한 개발자의 요구와 프레임워크를 모두 만족하는 코드를 만들기는 어려웠다. - 자동 생성된 코드가 문법적으로 맞더라도 팀의 컴포넌트 구조, 네이밍 규칙, 상태 관리 방식과 맞지 않으면 실무에서는 유용하지 않을 수 있다. - 이에 따라 Figma는 디자인을 코드로 직역하는 방식보다, 디자인과 개발 사이의 해석과 협업을 보조하는 방식으로 방향을 전환했다. ### 개발자를 대체하는 도구가 아닌 지능 증폭 도구 - 코드 생성은 개발자를 대신하는 자동화 시스템보다 개발자의 능력을 확장하는 도구로 보는 편이 적절하다. - 글은 이를 **지능 증폭(Intelligence Amplification, IA)**으로 설명한다. - 복잡한 문제를 이해하고 - 필요한 정보를 빠르게 찾으며 - 해결책을 도출하는 인간의 능력을 강화하는 접근이다. - AI가 기술이 주도하는 미래를 상징한다면, IA는 사람이 주도권을 유지한 채 기술의 도움을 받는 방식이다. - 개발자는 최종 구조와 구현 방식을 결정하고, codegen은 탐색·반복·초기 작성에 드는 시간을 줄인다. ### “0에서 0.5”까지 빠르게 이동하기 - 디자인 시스템과 컴포넌트 라이브러리를 사용하는 제품에서는 codegen이 핸드오프 과정의 추측을 줄일 수 있다. - 디자인 요소에 대응하는 컴포넌트 이름이나 속성 값을 제안해 개발자가 어떤 도구를 사용할지 빠르게 판단하도록 돕는다. - 디자인 시스템을 공구 상자에 비유하면, codegen은 상황에 맞는 공구와 사용법을 추천하는 역할을 한다. - 완성된 코드를 제공하기보다는 빈 화면에서 작업을 시작할 수 있는 출발점을 만들어 준다. - 즉, “0에서 1”까지 완성하는 자동화보다 “0에서 0.5”까지 빠르게 진입하게 하는 보조 기능에 더 큰 가치가 있다. ### 팀과 코드베이스에 맞춘 구체적인 활용 - codegen의 효과는 일반적인 자동화 도구보다 특정 팀·회사·워크플로에 맞게 적용할 때 커진다. - 디자인 시스템과 컴포넌트 라이브러리가 이미 Figma에 있다면 별도의 완전 자동화 디자인-코드 변환 앱이 반드시 필요하지 않다. - 대신 다음 기능을 활용하는 편이 실용적이다. - 디자인 토큰과 변수 참조 - 컴포넌트 및 속성 문서 확인 - 팀 전용 codegen 플러그인 구축 - 프로젝트 규칙에 맞춘 사용자 정의 코드 스니펫 생성 - 이러한 정보와 힌트는 개발자가 디자인을 빠르게 해석하고 직접 코드를 작성하도록 돕는다. ### 실용적인 결론 codegen은 생성된 코드를 그대로 채택하는 자동화 수단이 아니라, 팀의 디자인 시스템과 개발 규칙을 이해한 상태에서 적절한 컴포넌트와 구현 방향을 제안하는 보조 수단으로 사용하는 것이 좋다. 특히 토큰, 문서, 컴포넌트 메타데이터, 사용자 정의 스니펫을 코드베이스와 연결하면 개발자의 판단을 유지하면서 반복 작업과 초기 탐색 시간을 크게 줄일 수 있다.

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

design-to-codeFigma디자인 시스템component-library+4

figma·2023년 6월 20일원문

Config 2023 다시 보기 (새 탭에서 열림)

Figma는 Config 2023을 통해 단순한 디자인 도구를 넘어 디자인과 개발의 경계를 허물고 전체 제품 개발 팀이 함께 협업할 수 있는 통합 플랫폼으로의 진화를 선언했습니다. 이를 위해 개발자 전용 워크스페이스인 '개발 모드(Dev Mode)'와 코드의 논리를 디자인에 이식하는 '변수(Variables)', 그리고 실질적인 제품 작동 방식을 구현하는 '고급 프로토타이핑' 기능을 새롭게 도입했습니다. 이번 업데이트는 디자인 결과물이 실제 제품 코드로 전환되는 과정을 가속화하고, 팀 간의 소통 방식을 근본적으로 재정의하는 데 목적이 있습니다. ### 개발자 경험을 최적화하는 개발 모드(Dev Mode) * **개발자 전용 워크스페이스:** 무한한 캔버스 내에서 개발자가 작업에 필요한 구조와 기능을 직관적으로 파악할 수 있는 별도의 모드를 제공합니다. * **코드 번역 및 검사:** 디자인 요소를 코드로 더 빠르게 변환할 수 있으며, Jira, GitHub, Storybook과 같은 주요 개발 도구 및 코드베이스와 플러그인을 통해 직접 연결됩니다. * **VS Code 통합:** 'Figma in VS Code'를 통해 개발 환경을 벗어나지 않고도 에디터 바로 옆에서 디자인 파일을 검사하고 협업할 수 있습니다. * **배포 추적:** 어떤 디자인 요소가 프로덕션에 반영되어야 하는지 상태를 추적하여 디자인과 개발 간의 누락을 방지합니다. ### 디자인 시스템의 유연성을 극대화하는 변수(Variables) * **디자인 토큰의 코드화:** 색상, 숫자, 텍스트, 불리언(Boolean) 값을 변수로 저장하여 디자인 시스템을 코드의 언어와 일치시킵니다. * **모드(Modes) 지원:** 라이트 모드와 다크 모드, 혹은 다양한 테마 간의 전환을 변수 값을 통해 손쉽게 토글하며 테스트할 수 있습니다. * **확장성 있는 관리:** 에일리어싱(Aliasing) 및 스코핑(Scoping)을 지원하며, REST API와 플러그인을 통해 변수 생성 및 관리 프로세스를 자동화할 수 있습니다. ### 논리적 흐름을 구현하는 고급 프로토타이핑 * **조건부 로직 및 표현식:** "특정 변수가 X일 때 프레임 2로 이동"과 같은 조건문이나 수학적 표현식을 활용하여 실제 앱과 유사한 복잡한 상호작용을 구현할 수 있습니다. * **효율적인 프로토타입 제작:** 수많은 화면을 직접 연결할 필요 없이 변수를 활용해 동적인 변화를 줄 수 있어 프로토타입 제작 시간이 단축됩니다. * **인라인 프리뷰:** 디자인 편집 화면과 프로토타입 미리보기 화면을 동시에 띄워두고 수정한 내용을 즉각적으로 확인할 수 있어 반복 작업의 효율이 높아졌습니다. ### 워크플로우 개선을 위한 편의 기능(Quality of Life) * **오토 레이아웃 고도화:** 요소가 넘치면 다음 줄로 넘겨주는 '줄 바꿈(Wrap)' 기능과 최소/최대 너비 및 높이 설정 기능이 추가되었습니다. * **글꼴 선택기 업그레이드:** 글꼴 이름을 해당 서체로 미리 볼 수 있는 기능과 검색 및 필터링 기능이 강화되어 원하는 폰트를 더 빠르게 찾을 수 있습니다. * **파일 브라우저 업데이트:** 외부 팀과 공유된 프로젝트나 파일을 더 쉽게 찾을 수 있도록 인터페이스가 개선되었습니다. ### AI 기술을 통한 디자인의 미래 확장 * **Diagram 인수:** AI 기반 디자인 도구를 개발해온 Diagram을 인수하여 Figma 플랫폼 전반에 AI 기능을 통합할 계획입니다. * **창작 보조 및 가속:** AI가 시각적 표현을 돕고 워크플로우를 가속화하며, 누구나 수준 높은 초안을 만들 수 있도록 지원함으로써 디자인의 진입장벽을 낮추고자 합니다. Figma의 이번 업데이트는 디자이너와 개발자가 서로 다른 언어를 사용하는 문제를 해결하는 데 집중하고 있습니다. 개발 모드를 통해 개발자는 디자인 의도를 명확히 파악하고, 디자이너는 변수와 로직을 활용해 실제 제품에 가까운 설계를 할 수 있게 되었습니다. 팀의 생산성을 높이기 위해 현재 베타 버전으로 제공되는 개발 모드를 프로젝트에 적극적으로 도입하고, 기존 디자인 시스템을 변수(Variables) 기반으로 전환하여 다국어나 테마 대응 효율을 높여보시길 권장합니다.

design-to-codeFigma디자인 시스템프로토타이핑+4

figma·2018년 4월 25일·2분 읽기큐레이션 요약

소개: Figma to React | 피

Figma는 API를 활용해 Figma 디자인을 React 컴포넌트와 코드로 변환하는 도구를 만들었다. 핵심 목표는 디자인을 Figma에서 계속 관리하면서도, 개발자가 작성한 기능 코드를 보존하고 여러 디자인에 재사용할 수 있도록 분리하는 것이다. 이를 통해 디자인 변경 사항을 웹사이트에 동기화하고, 기존 기능을 새로운 디자인에 쉽게 연결하려 했다. ## Figma 디자인을 React 코드로 변환 - Figma API 출시 이후 Figma 문서를 React 컴포넌트로 자동 변환하려는 시도가 꾸준히 있었다. - Pagedraw는 Figma 연동을 지원하는 제품을 만들었고, Figma 역시 자체적인 변환기를 개발해 공개했다. - 구현 코드는 GitHub에 오픈 소스로 공개되어 누구나 동작 방식을 확인하고 실험할 수 있다. - API를 직접 사용해 보고 싶은 개발자를 위해 Figma Developers 페이지도 제공한다. ## 디자인 코드와 기능 코드의 분리 - 생성되는 컴포넌트의 시각적 디자인은 가능한 한 Figma에서 관리하도록 설계했다. - Figma에서 디자인을 수정한 뒤 버튼 한 번으로 웹사이트의 디자인 변경 사항을 동기화하는 것이 목표다. - 동기화 과정에서 개발자가 작성한 이벤트 처리, 데이터 로직 등 기능 코드를 덮어쓰지 않아야 한다. - 따라서 Figma가 생성하는 디자인 코드와 애플리케이션의 기능 코드를 서로 독립적인 영역에 두는 구조가 필요하다. ## 기능 코드의 재사용 - 새로운 디자인을 만들 때마다 기능을 처음부터 다시 구현하지 않도록 하는 것도 주요 목표다. - 예를 들어 기존에 구현한 정렬 가능한 리스트의 기능을 새로운 리스트 디자인에 연결할 수 있어야 한다. - 기능 코드를 디자인과 분리하면 React 컴포넌트를 재사용하듯, 동일한 기능을 여러 시각적 디자인에 적용할 수 있다. - 이는 디자인 변경과 기능 개발이 서로의 작업을 방해하지 않도록 만드는 기반이 된다. ## Figma에서 CSS로 변환하기 - React 변환의 첫 번째 기술적 과제는 Figma 디자인과 동일하게 보이는 React 컴포넌트를 생성하는 것이다. - 단순히 HTML 구조만 생성하는 것이 아니라, 레이아웃과 스타일을 CSS로 재현해야 변환의 실질적인 가치가 생긴다. - 글에서는 정렬 가능한 리스트 예시를 사용해 디자인을 코드로 옮기는 과정을 설명하려 한다. - 동일한 시각적 결과를 구현하는 방법은 여러 가지가 있으므로, 어떤 CSS 구조와 속성을 선택할지가 중요한 설계 문제가 된다. 실무에서는 Figma를 디자인의 원천으로 활용하되, 변환된 코드를 그대로 최종 코드로 취급하기보다 시각적 구조와 기능 로직을 분리하는 초기 코드 생성 도구로 사용하는 것이 적절하다.

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

design-to-codeReactJavaScriptCSS+2