figma2026년 6월 24일

Figma Motion 소개: 이제 캔버스에 타임라인이 생겼습니다 | Figma 블로그 (새 탭에서 열림)

Figma는 디자인 캔버스에 타임라인 기반의 네이티브 애니메이션 기능인 **Figma Motion**을 도입했다. 이제 컴포넌트·변수·팀 협업 환경과 애니메이션을 같은 파일에서 다룰 수 있으며, Figma Agent와 Dev Mode를 통해 제작과 핸드오프의 장벽을 낮춘다. 모션을 특정 전문가의 작업이 아니라 디자인 시스템의 일부로 만들겠다는 것이 글의 핵심이다. ## 캔버스에 통합된 애니메이션 작업 - Design, Draw, Dev 모드와 나란히 Motion 모드가 제공된다. - 프레임을 Motion 모드로 전환하면 디자인 옆에 타임라인이 표시된다. - 외부 애니메이션 도구나 플러그인으로 이동하지 않고 같은 파일에서 디자인과 모션을 제작할 수 있다. - 모션에 익숙하지 않은 디자이너도 Figma Agent에 프롬프트를 입력해 애니메이션 아이디어와 개선점을 얻을 수 있다. - 이를 통해 모션 제작을 전문 모션 디자이너만의 업무가 아니라 팀 전체의 작업으로 확장한다. ## 타임라인과 키프레임 제어 - 레이어를 타임라인에서 드래그해 애니메이션의 시작과 지속 시간을 조정할 수 있다. - 플레이헤드를 이동하거나 스크럽해 특정 시점의 결과를 미리 볼 수 있다. - 위치, 크기, 회전, 불투명도를 각각 독립적으로 키프레임화할 수 있다. - 자동 키프레임 기능을 켜면 플레이헤드가 움직이는 동안 변경한 값이 자동으로 기록된다. - 페이드, 이동, 확대·축소 같은 프리셋 애니메이션 스타일을 빠르게 적용할 수 있다. - 여러 스타일을 동시에 겹쳐 실행하거나 타임라인에서 순차적으로 배치할 수 있다. - 사용자 정의 애니메이션 스타일을 만들어 저장하는 기능도 제공될 예정이다. ## 시간 기반 협업과 핸드오프 - 캔버스에 시간 기반 댓글을 남겨 애니메이션의 특정 순간을 직접 지적할 수 있다. - 모션 리뷰에서 “어느 프레임의 어떤 움직임”을 수정해야 하는지 명확하게 전달할 수 있다. - Dev Mode에서도 타임라인과 관련 기능에 접근할 수 있어 개발자와의 협업이 쉬워진다. - 디자인 단계부터 팀 전체가 모션을 검토하므로, 개발 단계에서 뒤늦게 애니메이션을 전달하는 병목을 줄인다. ## 디자인 시스템에 포함되는 모션 - 컴포넌트에 애니메이션을 포함할 수 있으며, 해당 컴포넌트가 다른 화면과 협업자의 파일로 복제될 때 모션도 함께 이동한다. - 모션을 매번 새로 만드는 대신 디자인 시스템의 재사용 가능한 구성 요소로 관리할 수 있다. - 팀이 정의한 모션 원칙과 스타일을 여러 파일에 일관되게 적용할 수 있다. - 결과적으로 모션이 개인의 작업 속도나 전문성에 따라 달라지는 문제를 줄인다. ## 모션 변수와 모드 - 모션 변수에 easing 같은 애니메이션 값을 저장할 수 있다. - 하나의 변수에 여러 모드를 정의해 상황별 애니메이션 동작을 관리할 수 있다. - 페이지 수준에서 모드를 변경하면 해당 변수를 참조하는 모든 애니메이션이 한꺼번에 업데이트된다. - 디자인 토큰처럼 모션의 속도감과 전환 방식을 중앙에서 통제할 수 있다. ## 셰이더 속성의 애니메이션 - 셰이더가 노출하는 속성도 Motion 타임라인에서 키프레임화할 수 있다. - 기존에는 Figma에서 애니메이션화할 수 있는 속성이 제한적이었지만, 이제 슬라이더나 입력 필드로 조정 가능한 셰이더 값까지 시간에 따라 변화시킬 수 있다. - 이를 활용하면 시각 효과와 인터랙션 표현의 범위를 넓힐 수 있다. ## 실용적인 결론 Figma Motion은 애니메이션을 별도 제작·핸드오프 단계가 아닌 디자인 시스템과 협업 과정의 기본 요소로 통합하려는 기능이다. 팀은 컴포넌트와 모션 변수를 함께 정의하고, 타임라인 댓글과 Dev Mode를 활용해 디자인 초기부터 개발자와 움직임을 조율하는 방식으로 활용하는 것이 좋다.

dev-modedesign-systemsfigma-motionanimation-timeline+3

figma2025년 11월 11일

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

피그마(Figma)는 인도 벵갈루루에 새로운 허브를 설립하며 세계에서 두 번째로 큰 시장인 인도 내 제품 개발 커뮤니티에 대한 투자를 본격화했습니다. 이번 확장은 AI 기술 도입이 활발한 인도 시장의 특성을 반영하여, 피그마가 단순한 디자인 도구를 넘어 제품 개발 전 과정을 아우르는 AI 기반 협업 플랫폼으로 진화하려는 전략적 움직임입니다. 이를 통해 피그마는 글로벌 사용자의 85%를 차지하는 해외 시장에서의 영향력을 강화하고 사용자 중심의 기술 혁신을 가속화할 방침입니다. **인도 시장의 전략적 가치와 AI 도입 현황** * 인도는 월간 활성 사용자(MAU) 기준 피그마의 세계 2위 시장이며, BSE100(인도 상장사 100대 기업) 기업의 40% 이상이 이미 피그마를 도입했습니다. * 현지 리서치 결과, 인도 디자이너의 93%가 업무에 AI를 활용하고 있으며, 개발자의 81%는 AI 기반 제품의 성공에 디자인이 과거보다 더 중요해졌다고 응답했습니다. * Flipkart, Zomato, Swiggy 등 인도의 대표적인 유니콘 기업들이 피그마를 통해 디자인과 개발의 간극을 줄이고 제품 출시 속도를 높이고 있습니다. **글로벌 네트워크 확장 및 커뮤니티 성장** * 피그마는 매출의 약 50%가 미국 외 시장에서 발생함에 따라 도쿄, 싱가포르, 런던, 파리, 베를린 등에 이어 벵갈루루에 신규 거점을 마련하며 글로벌 운영을 강화하고 있습니다. * 인도 내 'Friends of Figma' 커뮤니티 멤버는 약 25,000명에 달하며, 이들은 전 세계에서 가장 활발하게 디자인 시스템과 협업 툴을 활용하는 집단 중 하나로 꼽힙니다. **Figma Weave와 AI 중심의 제품 혁신** * 생성형 AI 플랫폼인 'Weavy'를 인수하여 'Figma Weave'를 새롭게 선보였으며, 이를 통해 캔버스 내에서 이미지, 비디오, 애니메이션, VFX 등 미디어 자산의 생성 및 전문적 편집이 가능해집니다. * **Figma Make**: 텍스트 프롬프트나 간단한 디자인 초안을 즉시 프로토타입이나 실제 앱 형태로 변환해 주는 기능을 지원합니다. * **영역별 특화 도구**: 개발 생산성을 높이는 'Dev Mode', 동적 웹사이트 제작을 돕는 'Figma Sites', 마케팅 에셋을 대량 생산하는 'Figma Buzz' 등 제품군을 확장했습니다. * **협업 도구 고도화**: 인터랙티브 프레젠테이션 툴인 'Figma Slides'와 고급 벡터 드로잉 도구인 'Figma Draw'를 통해 기획부터 실행까지의 워크플로우를 통합했습니다. 피그마는 이제 디자인 도구를 넘어 기획자, 디자이너, 개발자가 AI를 매개로 소통하는 통합 제품 개발 플랫폼으로 완전히 탈바꿈하고 있습니다. 기업들은 피그마의 새로운 AI 기능들을 활용해 아이디어를 실제 제품으로 구현하는 시간을 단축하고, 디자인 시스템의 일관성을 유지하면서도 창의적인 실험을 지속할 수 있는 환경을 구축할 것을 권장합니다.

dev-modefigmaaidesign-systems+4

figma2025년 10월 13일

Figma에서 접근성을 개선하는 (새 탭에서 열림)

Figma는 키보드만으로 캔버스와 댓글을 조작하고, 스크린 리더로 파일 내용을 더 정확히 이해할 수 있도록 15가지 이상의 접근성 기능을 출시했다. 제품별 키보드 단축키, 더 논리적인 포커스 이동, 풍부한 객체 설명과 서식 정보, 향상된 색상 대비가 포함된다. 이를 통해 장애가 있는 사용자뿐 아니라 장시간 작업하거나 다양한 환경에서 Figma를 사용하는 모든 사용자의 탐색성과 작업 흐름을 개선하는 것이 목표다. ## 캔버스 조작을 위한 키보드 기능 확대 - 키보드만으로 캔버스 객체를 이동·조정·정렬할 수 있는 기능이 제품 전반으로 확대됐다. - **Figma Slides** - 발표자 노트 크기 조정 - AI를 활용한 글쓰기 톤 변경 - **FigJam** - 표의 행과 열 추가·삭제·순서 변경 - 스탬프, 투표, 와시 테이프 추가 및 조정 - AI 요약, 임베드 링크·동영상 같은 캔버스 객체 탐색 - 마커 선과 형광펜 스트로크 선택 및 조정 - **Figma Design** - 선 추가·선택·조정 - 룰러 가이드 추가·삭제·편집 - 타원에서 호(arc) 생성 및 편집 - **공통 기능** - 편집 모드와 보기 전용 모드에서 링크 열기 - 키보드로 링크 사이를 이동 ## 댓글과 Dev Mode 주석 탐색 - 댓글을 추가하고, 위치를 옮기고, 댓글 간 이동을 키보드 단축키로 처리할 수 있다. - Dev Mode 주석도 키보드로 추가·이동·탐색할 수 있다. - 피드백을 확인하거나 답변할 때 포커스가 흐트러지지 않도록 설계되어 협업과 핸드오프 과정이 개선된다. - 댓글 관련 기능은 베타 제품에서는 제공되지 않을 수 있다. ## 사용자 설정을 통한 조작 방식 개인화 - 입력 중 Figma 전용 단축키가 동작하지 않도록 설정할 수 있다. - 다른 사용자가 스포트라이트를 사용할 때 자동으로 따라가는 기능을 켜거나 끌 수 있다. - 사용자는 작업 방식이나 보조기술 사용 환경에 맞춰 키보드 동작을 조정할 수 있다. ## 스크린 리더 지원 강화 - 버튼, 메뉴, 패널 등 인터랙티브 요소를 Tab 키로 이동할 때 더 논리적인 순서를 따른다. - 메뉴 열기, 버튼 실행, 툴바 옵션 선택 등 특정 동작으로 바로 이동할 수 있다. - 객체를 읽을 때 유형, 이름, 상태 등 더 자세한 정보가 제공된다. - 새 댓글이나 파일 변경 사항 같은 중요한 업데이트가 더 일관되게 안내된다. - 굵게, 기울임, 목록, 링크 등 서식 있는 텍스트 구조를 스크린 리더가 보존해 읽는다. - Buzz와 Slides의 캔버스 객체도 스크린 리더가 인식하고 안내한다. - 이러한 개선은 캔버스의 객체 순서를 파악하고 파일 변경 사항을 놓치지 않도록 돕는다. ## 향상된 색상 대비 - 간단한 토글로 라이트 모드와 다크 모드 모두에서 인터페이스의 색상 대비를 높일 수 있다. - 접근성 설정, Actions 메뉴, General 설정에서 기능을 활성화할 수 있다. - 텍스트와 아이콘의 가독성이 높아지고, 버튼과 외곽선이 더 뚜렷하게 표시된다. - 인터페이스 구조를 파악하고 필요한 요소를 빠르게 찾기 쉬워진다. - 햇빛이나 강한 조명 아래에서도 화면을 보기 쉬우며, 장시간 화면을 사용하는 경우 눈의 부담을 줄일 수 있다. ## 실용적인 활용 키보드 중심으로 작업하는 사용자는 Figma의 전체 키보드 컨트롤 목록을 확인해 자주 쓰는 캔버스·댓글 단축키를 익히는 것이 좋다. 스크린 리더 사용자는 객체 설명과 서식 있는 텍스트 지원을 활용하고, 일반 사용자도 색상 대비 설정을 활성화하면 장시간 작업이나 밝은 환경에서 더 편하게 Figma를 사용할 수 있다.

dev-modefigmafigjamaccessibility+4

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

dev-modefigmaprototypinggen-ai+3

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

dev-modefigmafigjamdesign-to-code+4

figma2025년 3월 26일

피그마, 스페인 시장 (새 탭에서 열림)

피그마(Figma)는 일본어에 이어 두 번째 현지화 언어로 스페인어를 채택하고, 제품 인터페이스부터 기술 지원까지 아우르는 본격적인 스페인 시장 공략에 나섰습니다. 이번 현지화는 단순한 번역을 넘어 스페인 기업과 제품 팀의 고유한 설계 및 개발 요구사항을 깊이 이해하고 대응하기 위한 전략적 결정입니다. 피그마는 이를 시작으로 올해 말까지 더 많은 언어로 현지화 서비스를 확대하여 전 세계 사용자의 접근성을 높일 계획입니다. **스페인 시장 내 영향력 및 커뮤니티 성장** * IBEX 35(스페인 주요 상장 주가지수) 기업의 절반 가까이가 이미 피그마를 도입했으며, Telefonica, Cabify, SEAT, Amadeus 등 주요 기업들이 이를 핵심 설계 인프라로 활용하고 있습니다. * 2024년 한 해 동안 스페인에서만 150만 개 이상의 피그마 파일이 생성되었으며, 매일 평균 3만 4천 개의 파일이 활발하게 수정되고 있습니다. * 바르셀로나의 'Friends of Figma(FoF)' 챕터는 2,000명 이상의 활동 멤버를 보유하며 피그마의 전 세계 커뮤니티 중 최대 규모로 성장하여 현지 사용자들의 높은 결집력을 보여줍니다. **글로벌 사용자 기반과 현지화 전략의 배경** * 피그마 월간 활성 사용자(MAU)의 85%가 미국 이외의 지역에 거주하며, 전체 매출의 약 50%가 해외 시장에서 발생하고 있어 글로벌 대응의 중요성이 커지고 있습니다. * 전체 사용자 중 개발자가 약 1/3을 차지하는 등 사용자 구성이 다양해짐에 따라, 언어 장벽을 제거하여 디자이너와 개발자 간의 협업 속도를 높이는 데 주력하고 있습니다. * 이번 현지화는 FigJam(화이트보드), Dev Mode(개발 모드), Figma Slides(프레젠테이션) 등 제품 포트폴리오 확장과 맞물려 제품 개발 전 과정을 지원하는 도구로서의 입지를 강화합니다. **출시 일정 및 향후 전망** * 스페인어 현지화 서비스는 3월 27일부터 단계적으로 배포를 시작하여 4월 17일까지 모든 사용자에게 완료될 예정입니다. * 피그마는 이번 스페인어 출시를 기점으로 올해 안에 다른 주요 언어들에 대한 현지화 작업을 순차적으로 진행할 계획입니다. * 오는 5월 샌프란시스코와 런던에서 개최되는 연례 컨퍼런스 'Config'를 통해 제품 개발 프로세스를 혁신할 새로운 AI 기능과 제품 업데이트를 공개할 예정입니다. 글로벌 협업 툴로서 피그마의 행보는 단순한 기능 업데이트를 넘어, 비영어권 사용자들의 접근성을 높여 전 세계적인 디자인 생태계를 통합하려는 의도로 풀이됩니다. 특히 개발자와 기획자 등 비디자이너 직군의 참여가 늘어나는 추세인 만큼, 한국어를 포함한 향후 추가 언어 지원 향방에도 주목할 필요가 있습니다.

dev-modefigmafigjamproduct-design+4

figma2025년 3월 25일

정부를 위한 피그마에 대해 (새 탭에서 열림)

Figma는 미국 연방정부의 보안·개인정보 기준인 FedRAMP Moderate 인증을 획득하고, 공공기관용 서비스인 Figma for Government를 제공한다. 이를 통해 연방기관은 FigJam, Figma, Dev Mode를 활용해 시민 대상 웹사이트와 애플리케이션을 안전하게 기획·설계·개발할 수 있다. 글은 부서 간 협업과 디자인 시스템을 강화해 더 일관되고 접근성 높은 디지털 공공서비스를 만드는 것이 이 서비스의 목표라고 설명한다. ## FedRAMP Moderate 인증과 Figma for Government - Figma for Government는 미국 연방정부의 엄격한 보안 및 개인정보 보호 기준을 충족하는 FedRAMP Moderate 인증을 받았다. - 제공 대상 제품은 다음과 같다. - **Figma**: 인터페이스 설계, 프로토타이핑, 디자인 리뷰 - **FigJam**: 브레인스토밍, 프로젝트 계획, 사용자 여정 맵 작성 - **Dev Mode**: 디자인과 개발 간 협업 - **Figma Slides**: 추후 제공 예정 - 인증을 통해 연방기관이 민감한 공공서비스를 설계하고 구축할 수 있는 보안 환경을 제공한다. ## 공공서비스 디지털화의 필요성 - 시민들은 의료, 정부 지원, 여권·비자 등 공공서비스를 온라인에서 쉽고 빠르게 이용하기를 기대한다. - 연방 정책에 따라 디지털 서비스는 다음 조건을 갖춰야 한다. - 간결하고 사용하기 쉬운 경험 - 접근성 - 일관된 디자인 - 적절한 도구가 없으면 디자인, 개발, 기획 업무가 조직별로 분리되어 효율성과 결과물의 사용성이 떨어질 수 있다. - 따라서 무엇을 출시하는지뿐 아니라, 여러 팀이 **어떻게 협업하고 출시하는지**도 중요하다고 강조한다. ## Figma for Government가 해결하는 문제 - 100개가 넘는 정부기관과 계약업체가 이미 Figma를 활용해 업무를 현대화하고 있다. - 아이디어 구상부터 디자인 반복 작업, 프로토타이핑, 최종 구현과 개선까지 하나의 플랫폼에서 연결할 수 있다. - 링크 하나로 조직 내 구성원이 작업물을 확인하고, 수정하고, 피드백을 남길 수 있다. - 이를 통해 부서 간 사일로를 줄이고 최신 작업물을 공유하는 단일 기준점(single source of truth)을 만든다. - 정부기관이 민간의 선도적인 조직과 유사한 협업 도구를 보안 환경에서 사용할 수 있도록 설계됐다. ## 공공기관 활용 사례 - **미국 국립공원관리청(NPS)**은 431개 국립공원과 기념물 정보를 제공하는 앱을 제작했다. - 기존 공원 안내 책자의 디자인 언어를 디지털 인터페이스에 적용했다. - **Amtrak**은 2만 명 이상의 직원과 2,800만 명의 승객을 지원하는 시스템을 효율화했다. - 미국 웹 디자인 시스템(USWDS)의 공식 Figma 디자인 키트도 제공된다. - 변수(variables)와 스마트 레이아웃을 활용한 42개 컴포넌트로 구성됐다. - 국무부의 여권·비자 시스템, 국세청의 온라인 납세 서비스, 시민권·이민 서비스국의 시민권 업무 등에도 활용되고 있다. ## FigJam을 활용한 공동 기획 - 여러 지역과 시간대에 분산된 팀이 실시간 또는 비동기 방식으로 협업할 수 있다. - FigJam에서 다음 작업을 한곳에서 진행할 수 있다. - 브레인스토밍 - 프로젝트 로드맵 작성 - 사용자 여정 맵 작성 - 전략 및 정보 공유 - 모든 구성원이 의견을 남기고 다른 사람의 생각을 확인할 수 있어 초기 아이디어를 정렬하는 데 유용하다. ## Figma를 활용한 디자인 협업과 표준화 - 최신 디자인 파일을 모든 이해관계자와 공유해 와이어프레임, 프로토타입, 리뷰, 수정 과정을 단축한다. - 디자이너뿐 아니라 개발자, 제품 관리자, 경영진 등도 디자인 과정에 참여할 수 있다. - 조직은 디자인 시스템을 만들고 관리해 다음을 달성할 수 있다. - 화면 간 일관성 유지 - 높은 품질의 인터페이스 제작 - 기관의 브랜드 정체성 강화 - 시민에게 신뢰감 있는 경험 제공 ## Dev Mode를 통한 디자인-개발 연결 - 디자인과 엔지니어링 팀 간 소통이 부족하면 디자인 의도 확인, 변경사항 비교, 디자인과 코드 연결에 불필요한 시간이 든다. - Dev Mode는 디자이너와 개발자가 같은 작업 공간에서 협업하도록 지원해 이러한 단절을 줄이는 역할을 한다. - 전체 개발 과정에서 디자인 결과물을 구현 단계로 원활하게 전달하는 것이 핵심이다. ## 실용적인 결론 공공기관은 Figma for Government를 활용해 아이디어 구상부터 개발까지의 협업 흐름을 하나로 통합하고, 디자인 시스템으로 서비스의 일관성과 접근성을 높일 수 있다. 특히 여러 부서와 지역에 걸쳐 운영되는 시민 서비스라면 FedRAMP Moderate 인증 환경, 공동 편집, 단일 작업 기준점이 업무 효율과 서비스 품질 향상에 도움이 된다.

dev-modefigmadesign-systemsprototyping+4

figma2025년 1월 22일

도입을 이끄는 문서화 (새 탭에서 열림)

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

dev-modefigmadesign-systemsdesign-tokens+3

figma2025년 1월 8일

이제 디자인의 정의를 확장할 때 (새 탭에서 열림)

디자인은 디자이너라는 직함을 가진 사람만의 업무가 아니라, 마케팅·제품·영업 등 다양한 직군이 시각적으로 문제를 해결하고 소통하는 과정이라는 것이 글의 핵심 주장이다. Figma는 전문 디자이너를 위한 도구라는 정체성을 유지하면서도, 모든 협업자가 자신 있게 디자인에 참여할 수 있도록 도구와 조직 문화를 확장해야 한다. 이를 위해 템플릿, 단순화된 기능, 브랜드 자산 관리와 승인 지원 같은 장치가 필요하다. ## 디자인의 경계를 넓혀야 하는 이유 - 오늘날 더 많은 사람이 일상 업무에서 디자인을 활용하고 있다. - 마케터, 제품 관리자, 개발자, 운영 담당자 등은 썸네일, 전단, 초대장, 소개 카드, 원페이저 등을 직접 제작한다. - 이들은 공식적인 디자이너는 아니지만, 정보를 시각적으로 전달하고 사용자의 관심을 끌며 협업의 품질을 높이는 역할을 한다. - 따라서 디자인은 직함이나 소속보다 실제로 문제를 시각적으로 해결하는 활동을 기준으로 정의해야 한다. ## 비디자이너가 느끼는 진입 장벽 - 비디자이너에게 Figma 파일은 전문 예술가의 갤러리처럼 느껴질 수 있다. - 무엇을 어떻게 만져야 할지 모르고 - 실수로 작업물을 망칠까 걱정하며 - 자신의 결과물을 전문 디자이너가 평가할까 부담을 느낀다. - 실제로 많은 비디자이너가 디자인 요청이 밀리는 상황을 해결하기 위해 직접 결과물을 만들지만, 자신이 도구를 “제대로” 사용하고 있는지 확신하지 못한다. - 도구 사용법의 문제뿐 아니라 “디자인은 전문가의 영역”이라는 조직 내 인식도 참여를 어렵게 만든다. ## 협업 도구가 만드는 소속감 - 회의나 팀 활동뿐 아니라 도구 자체도 조직 내 소속감을 형성할 수 있다. - Figma는 원래 디자이너를 위해 만들어졌지만, 협업자가 참여할 때 더 큰 가치가 발생한다. - FigJam, Dev Mode, Figma Slides 등은 마케팅 담당자, 개발자, 기타 협업자가 디자인 과정에 더 자신 있게 참여하도록 돕는다. - 다만 기능을 제공하는 것만으로는 충분하지 않으며, 누구나 디자인에 기여할 수 있다는 개인적·조직적 관점의 변화가 필요하다. ## 일상적 디자이너를 지원하는 방법 - 디자이너는 팀원이 쉽게 시작할 수 있도록 목적별 템플릿을 제공할 수 있다. - 더 많은 사용자가 접근할 수 있도록 복잡한 기능과 작업 흐름을 단순화해야 한다. - 비디자이너가 자주 겪는 문제를 제품 차원에서 해결할 필요가 있다. - 브랜드 가이드에 맞는 결과물 만들기 - 적절한 이미지와 디자인 자산 찾기 - 카피 문구를 수정하거나 발전시키기 - 검토와 승인 요청하기 - 새로운 사용자의 실력을 교육하고, 시도 자체를 인정하며, 성장한 결과를 적극적으로 격려해야 한다. ## 2025년의 디자인과 협업 - 업무 속도가 빨라지고 여러 업무 흐름이 동시에 진행되면서 협업 접점은 더욱 중요해지고 있다. - 마케팅과 제품 분야의 구성원도 자신의 업무가 디자인의 일부라는 점을 인식해야 한다. - 디자인 품질은 전문 디자이너의 결과물뿐 아니라, 조직 구성원 모두가 만드는 다양한 커뮤니케이션 자료에 의해 결정된다. - Figma는 전문성을 유지하면서도 더 넓은 사람들이 디자인에 참여할 수 있는 환경을 만들고자 한다. 실무적으로는 비디자이너에게 작업을 맡길 때 빈 파일보다 템플릿과 명확한 브랜드 규칙을 제공하고, 검토·승인 절차를 간소화하는 것이 효과적이다. 디자인을 특정 직군의 전유물이 아닌 조직 전체의 협업 역량으로 바라볼 때 더 빠르고 포용적인 결과를 만들 수 있다.

dev-modefigmadesign-systemsfigjam+2

figma2024년 12월 4일

요점 정리: 제 (새 탭에서 열림)

피그마의 2024년 업데이트는 사용자 커뮤니티와의 상호작용을 바탕으로 제품과 브랜드를 함께 확장한 과정이었다. 180개의 신규 릴리스, 1만 명이 참석한 Config, 전 세계 220개 이상의 Friends of Figma 그룹을 통해 피그마는 디자인뿐 아니라 개발·마케팅·제품팀 전체를 위한 도구로 영역을 넓혔다. 글은 주요 제품 출시와 브랜드 개편, 커뮤니티 콘텐츠를 되돌아보며 “피그마가 만들고 사용자가 완성한다”는 메시지를 강조한다. ## 제품 기능과 워크플로 확장 - UI3를 개선해 사용자가 인터페이스를 더 세밀하게 제어할 수 있도록 했다. - AI 도구를 재정비해 기능을 무작정 늘리기보다 의도와 활용성을 중심으로 발전시켰다. - Dev Mode를 강화해 디자인과 코드 사이의 연결을 원활하게 만들었다. - 프레젠테이션 제작 도구인 Figma Slides를 출시해 디자인 결과물을 발표하고 공유하는 단계까지 지원했다. - 2024년에는 대규모 기능 출시뿐 아니라 사용성을 높이는 작은 업데이트까지 총 180개의 릴리스를 진행했다. ## Config를 통한 커뮤니티 확장 - 2024년 Config에는 1만 명 이상이 샌프란시스코에 모여 제품 개발의 미래를 논의했다. - 피그마는 Config 2025의 얼리버드 티켓을 소개하며 행사를 지속적으로 확대하고 있다. - 발표자들의 강연에서 영감을 얻는 방법과 기억에 남는 세션을 만드는 방식을 공유했다. - 전 세계 220개 이상의 Friends of Figma 그룹이 커뮤니티 기반 학습과 교류를 뒷받침했다. ## 새로운 도구에 맞춘 브랜드 개편 - 개발자, 마케터, 제품팀 등 더 넓은 사용자를 지원하게 되면서 브랜드 정체성도 함께 개편했다. - 새로운 시각적 아이덴티티와 서체를 도입했다. - 피그마 자체 도구를 사용해 웹 시스템을 재설계했다. - 컴포넌트를 점검하고 정리해 일관성을 높였으며, 변수·색상·타이포그래피 스타일을 활용해 향후 확장 가능한 디자인 시스템을 구축했다. - 웹 제작 워크플로를 간소화하고 팀 간 협업 효율을 높이는 데 초점을 맞췄다. ## 커뮤니티가 만든 활용 방식 - Figma Slides에서는 커뮤니티 템플릿을 활용해 발표의 완성도와 표현력을 높이는 사례를 소개했다. - Ableton Note 앱 디자이너 Pablo Sánchez는 예상 밖의 경험을 만드는 7가지 디자인 원칙을 공유했다. - 핵심은 사용자를 놀라게 하는 요소를 설계하기 전에 디자이너 스스로 작업 과정에서 즐거움과 호기심을 느끼는 것이다. - One North의 Nick Villapiano는 개발자도 디자인 과정에 적극 참여해야 한다고 주장했다. - Dev Mode를 단순한 개발 전달 도구가 아니라 개발자가 디자인 의사결정에 기여하는 협업 공간으로 바라본다. ## 사용자 피드백을 통한 제품 발전 - 피그마의 업데이트는 커뮤니티의 작업 방식과 제작 결과물에 대한 관찰에서 출발한다. - 새로운 기능은 출시 자체보다 사용자가 실제 프로젝트에서 어떻게 활용하고 변형하는지가 중요하다고 설명한다. - 제품, 행사, 브랜드 시스템, 교육 콘텐츠를 함께 발전시키며 피그마 생태계를 확장하는 전략을 보여준다. 피그마를 사용하는 팀이라면 2024년 기능을 단순히 추가된 도구로 보기보다, UI3·AI·Dev Mode·Slides를 현재 협업 프로세스에 어떻게 연결할지 점검하는 것이 유용하다. 특히 개발자를 초기 디자인 논의에 참여시키고, 디자인 시스템을 실제 제품과 웹 경험에 일관되게 적용하는 방식이 실질적인 개선으로 이어질 수 있다.

dev-modefigmadesign-systemsui-design+2

figma2024년 12월 3일

피그마 2024 (새 탭에서 열림)

2024년 피그마(Figma)는 전 세계 커뮤니티의 피드백을 바탕으로 180회 이상의 업데이트를 진행하며 디자인 도구를 넘어 협업 플랫폼으로서의 완성도를 높였습니다. UI3로 불리는 대대적인 인터페이스 개편부터 AI를 활용한 워크플로우 효율화, 그리고 새로운 프레젠테이션 도구인 '피그마 슬라이즈(Figma Slides)' 도입까지, 사용자의 제작 과정을 더 빠르고 정교하게 만드는 데 집중했습니다. 결과적으로 피그마는 단순히 화면을 그리는 도구에서 아이디어 구상부터 개발 전달까지 전 과정을 아우르는 에코시스템으로 진화했습니다. **사용자 피드백으로 완성된 UI3와 인터페이스 혁신** * 2019년 이후 가장 큰 규모의 디자인 개편인 UI3를 출시했으며, 베타 기간 중 접수된 피드백을 반영해 플로팅 패널 대신 고정 및 크기 조절이 가능한 패널 시스템으로 최종 조정했습니다. * 디자인 캔버스의 공간 확보를 위해 레이어 패널을 숨길 수 있게 개선하고, 타이포그래피 및 아이콘 시스템을 현대적으로 일신했습니다. * 스포이드 도구를 개선하여 스타일과 변수(Variables)를 쉽게 재사용하고 여러 컬러 포맷을 탭으로 전환하며 빠르게 관리할 수 있도록 했습니다. **핵심 기능 고도화 및 성능 최적화** * **멀티 에디트(Multi-edit):** 여러 프레임에 걸친 디자인 요소를 한 번에 편집할 수 있는 기능을 도입하여 반복 작업 시간을 획기적으로 단축했습니다. * **고급 타이포그래피:** 텍스트 스타일 내에서 기울임꼴, 굵게, 밑줄 등을 개별적으로 재정의(Override)할 수 있으며, 단일 텍스트 노드 내에서 혼합 단락 간격을 설정할 수 있습니다. * **성능 향상:** 대규모 파일을 효율적으로 관리하기 위해 동적 페이지 로딩(Dynamic page loading)과 메모리 최적화 시스템을 도입했으며, 유럽 지역 로컬 파일 호스팅을 통해 인프라 안정성을 강화했습니다. * **오토 레이아웃 제안:** 복잡한 디자인을 반응형으로 더 쉽게 변환할 수 있도록 오토 레이아웃 추천 기능을 강화했습니다. **워크플로우의 마찰을 줄이는 AI 기능** * **비주얼 및 에셋 검색:** 이미지 업로드나 영역 선택을 통해 필요한 컴포넌트를 찾고, 이름이 일치하지 않아도 맥락에 맞는 에셋을 찾아주는 AI 검색 기능을 도입했습니다. * **콘텐츠 생성 및 편집:** 더미 데이터를 채워주는 텍스트 생성, 다국어 번역, 이미지 배경 제거 기능을 캔버스 내에서 즉시 실행할 수 있습니다. * **First Draft:** 기존의 'Make Designs'를 개선한 기능으로, 아이디어를 시각화하는 첫 단계에서 디자인 초안을 빠르게 생성하여 디자이너의 초기 탐색 과정을 돕습니다. * **레이어 정리:** AI가 레이어 이름을 자동으로 정리해주는 기능을 통해 파일 관리의 번거로움을 줄였습니다. **협업의 확장: 개발 생산성과 프레젠테이션** * **데브 모드(Dev Mode):** 코드 커넥트(Code Connect)를 통해 디자인 시스템의 컴포넌트를 실제 코드와 연결하여 개발자가 문맥 전환 없이 디자인을 구현할 수 있도록 지원합니다. * **피그마 슬라이즈(Figma Slides):** 디자인과 프레젠테이션의 경계를 허물어, 피그마의 정교한 디자인 툴을 그대로 활용하면서 고품질의 발표 자료를 제작하고 공유할 수 있게 했습니다. 실무 디자이너와 팀은 새롭게 도입된 AI 기반 검색과 레이어 정리 기능을 활용해 관리 리소스를 줄이고, 코드 커넥트를 도입해 개발자와의 협업 효율을 극대화하는 것을 권장합니다. 특히 UI3의 변경된 패널 시스템에 익숙해진다면 더 넓은 작업 영역에서 창의적인 업무에 몰입할 수 있을 것입니다.

dev-modefigmaaidesign-systems+4

figma2024년 11월 18일

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

Figma의 Dev Mode는 개발자를 디자인의 수동적 구현자가 아니라 제품 설계에 참여하는 협업자로 바라보게 한다. 개발자가 디자인 도구를 적극적으로 사용하고 필요한 개선을 직접 제안하면, 디자인 파일 탐색의 불안과 반복적인 탭 전환을 줄이고 디자이너와의 공통 언어를 만들 수 있다. 글은 Dev Mode 도입을 조직에 요구하는 일이 개발자 경험과 생산성, 협업 품질을 개선하는 실질적인 방법이라고 결론짓는다. ## 개발자는 디자인 과정의 참여자다 - 기존에는 디자인 도구를 디자이너만 사용하는 것으로 여겨 개발자가 파일을 조심스럽게 열어보거나 여러 브라우저 탭을 오가며 사양을 확인했다. - 이런 역할 분리는 디자인과 구현 사이의 소통 비용을 키우고, 개발자가 제품 결정에 기여할 기회를 줄인다. - Dev Mode는 개발자에게 별도의 작업 공간과 기능을 제공해 기획부터 출시까지 디자인 과정에 참여할 수 있게 한다. - 개발자가 Dev Mode의 필요성을 조직에 설명하고 도입을 주도해야 더 나은 협업 환경을 만들 수 있다. ## 공유 도구가 만드는 공통 언어 - Dev Mode는 개발자가 디자인을 단순히 구현하는 사람이 아니라 적극적인 협업자라는 전제를 바탕으로 한다. - Figma의 오토 레이아웃은 개발자에게 CSS Flexbox와 유사하게 느껴져 디자인의 레이아웃 동작을 웹 구현 방식과 연결해 주었다. - 이러한 공통 개념은 디자이너와 개발자가 서로의 작업 방식을 이해하는 접점이 된다. - Dev Mode는 특정 기능 하나를 넘어, 양쪽 직군이 같은 파일과 개념을 바탕으로 소통하는 협업 프레임워크를 제공한다. ## 개발자가 직접 도입을 제안해야 하는 이유 - 관리자는 실제 작업에서 한 단계 떨어져 있어 개발자가 겪는 불편과 생산성 저하를 놓칠 수 있다. - 개발자는 GitHub 이슈, 풀 리퀘스트 의견, Stack Overflow 답변처럼 필요한 개선을 직접 제안하는 데 익숙하다. - 같은 방식으로 1:1 미팅, 스프린트 회고, 팀 회의에서 디자인 도구와 개발자 경험의 문제를 구체적으로 제기할 수 있다. - 단순히 “새 도구가 필요하다”고 말하기보다, 현재의 반복 작업과 협업 비용을 어떤 기능이 어떻게 줄이는지 설명해야 설득력이 높아진다. ## 두려움 없이 디자인 파일 탐색하기 - Dev Mode는 기본적으로 읽기 전용이므로 개발자가 실수로 디자인 파일을 수정하거나 다른 사람의 작업을 덮어쓸 위험을 줄인다. - 개발자는 여백, 컴포넌트, 레이아웃 등을 자유롭게 클릭하며 파일 구조를 탐색할 수 있다. - 이는 Git의 `main` 브랜치 보호와 비슷한 안전장치로, 파일을 망칠까 봐 지나치게 조심하는 상황을 없앤다. - 결과적으로 디자인 파일을 이해하는 데 필요한 탐색 시간이 줄고, 개발자의 사용 자신감이 높아진다. ## 변경 사항을 명확하게 비교하기 - Dev Mode의 버전 기록과 변경 사항 비교 기능은 GitHub의 커밋 기록이나 풀 리퀘스트와 유사한 방식으로 동작한다. - 디자인의 여러 버전을 시각적으로 비교해 무엇이 언제, 누구에 의해 변경되었는지 확인할 수 있다. - 문구 변경, 여백 수정, 컴포넌트 변형 추가처럼 변경 항목을 구체적인 작업 목록으로 파악할 수 있다. - 이를 통해 개발자는 최신 디자인을 빠르게 이해하고, 구현 과정에서 누락된 변경 사항을 줄일 수 있다. ## 디자인 사양과 코드 사이의 탭 전환 줄이기 - 기존 개발자는 디자인 사양, 문서, 코드 저장소를 오가며 정보를 확인해야 했고, 이 과정에서 많은 시간이 소모됐다. - Dev Mode와 Code Connect 같은 기능은 디자인 정보와 실제 코드 구현 사이의 거리를 줄이는 방향으로 설계됐다. - 디자인 확인과 개발에 필요한 정보를 한 작업 흐름 안에서 연결하면 반복적인 검색과 컨텍스트 전환을 줄일 수 있다. - 이는 단순한 편의 기능을 넘어 개발자의 집중력과 전체 개발 속도에도 영향을 준다. ## 실용적인 적용 방향 - 현재 디자인 파일을 확인할 때 발생하는 실수, 정보 탐색, 탭 전환 시간을 구체적으로 기록한다. - Dev Mode의 읽기 전용 탐색, 버전 비교, 코드 연결 기능이 각각 어떤 문제를 해결하는지 사례로 제시한다. - 디자인 시스템 개편이나 원격·하이브리드 협업처럼 여러 직군의 긴밀한 조율이 필요한 프로젝트에서 먼저 적용한다. - 도구 도입 자체보다 디자이너와 개발자가 공유할 수 있는 언어와 작업 방식을 만드는 데 초점을 둔다.

dev-modefigmadesign-systemsgithub+3

figma2024년 10월 16일

요점만 말하자면: (새 탭에서 열림)

Figma의 「Building better」는 개발자 경험(DX)이 특정 팀이나 도구만의 문제가 아니라, 조직 전체의 문화·원칙·프로세스에서 결정된다고 주장한다. 글은 VS Code, Atlassian, Linear 등의 사례를 통해 개발자의 몰입을 보호하고, 개발자 만족을 측정하며, 명확한 제품 철학과 디자인·개발 협업 체계를 구축하는 방법을 소개한다. 결론적으로 더 나은 개발 환경은 도구 도입보다 조직 차원의 일관된 운영 방식에서 출발한다. ## 개발자의 몰입을 지키는 ‘이너 루프’ VS Code는 개발자가 코드 작성에 집중하는 시간을 “이너 루프”, 버그 관리·티켓 응답·회의 같은 협업 활동을 “아우터 루프”로 구분한다. - 생산성을 가장 크게 떨어뜨리는 요인은 작업 자체보다 잦은 컨텍스트 스위칭이다. - 코드 편집과 디버깅처럼 집중력이 필요한 작업을 보호해야 한다. - 협업 활동을 완전히 제거하기보다, 이너 루프와 아우터 루프 사이의 전환 횟수를 줄이는 것이 핵심이다. - 개발 도구는 개발자가 여러 업무 시스템을 오가며 흐름을 잃지 않도록 지원해야 한다. ## 개발자 경험을 넘어선 ‘개발자 기쁨’ Atlassian은 개발자 경험을 넘어 “developer joy”를 조직의 중요한 기준으로 삼는다. - 개발자 기쁨은 단순한 편의성이나 만족도보다, 좋은 소프트웨어를 만드는 과정의 완성도와 장인정신에 초점을 둔다. - 이를 추상적인 구호로 남기지 않고 조직의 가치와 업무 방식에 반영한다. - 개발자 경험 개선이 생산성, 업무 만족도, 비즈니스 성과에 어떤 영향을 주는지 측정하려 한다. - 특정 팀의 활동에 그치지 않고 조직 전체로 확장하려면 공통된 원칙과 운영 체계가 필요하다. ## 강한 의견을 반영한 소프트웨어 Linear는 모든 사용자의 요구를 수용하기보다, 제품이 지향하는 명확한 관점을 바탕으로 기본적인 업무 흐름을 설계한다. - 좋은 도구는 기능을 무작정 늘리기보다 사용자가 따라갈 수 있는 강한 기본값을 제공한다. - 제품의 철학은 인터페이스뿐 아니라 우선순위 설정, 협업 방식, 내부 프로세스에도 반영된다. - 일반적인 관행과 다르더라도 일관된 원칙이 사용자 경험을 단순하고 예측 가능하게 만들 수 있다. - 다만 독단적인 설계가 아니라, 어떤 문제를 해결하려는지에 대한 분명한 판단이 전제되어야 한다. ## Dev Mode 도입에서 얻은 10가지 교훈 Decathlon의 엔지니어링 매니저는 1년간 Dev Mode를 디자인 시스템과 개발 workflow에 적용한 경험을 공유한다. - 처음부터 조직 전체에 도입하기보다 작은 범위에서 시작하는 것이 좋다. - 빠르게 효과를 확인할 수 있는 작은 개선부터 추진한다. - 디자인과 개발 사이의 전달 과정에서 반복되는 혼선을 찾아 해결한다. - Dev Mode를 단순한 기능 도입이 아니라 디자인 시스템 운영 방식의 일부로 활용한다. - 실제 사용 경험을 바탕으로 팀에 맞는 규칙과 협업 방식을 점진적으로 정립한다. ## 대규모 제품의 복잡성 관리 Crunchyroll은 웹, 모바일, 게임 콘솔 등 15개 플랫폼과 12개 언어를 지원하기 위해 Universal Design System을 활용한다. - 플랫폼과 언어가 늘어날수록 디자인 일관성과 개발 전달 과정이 복잡해진다. - 공통 컴포넌트와 디자인 시스템을 통해 여러 접점에서 동일한 사용자 경험을 유지한다. - Dev Mode는 디자인 사양을 확인하고 개발에 필요한 정보를 전달하는 과정을 간소화한다. - 디자인 시스템의 채택률을 높이려면 문서화뿐 아니라 실제 workflow 안에서 쉽게 사용할 수 있어야 한다. - 복잡성을 줄이는 핵심은 개별 화면을 관리하는 것이 아니라 재사용 가능한 시스템을 구축하는 데 있다. ## 디자인과 코드 사이의 연결 글의 ‘Rabbit hole’에서는 Figma의 Code Connect와 Simple Design System 사례를 통해 디자인과 실제 코드의 연결을 다룬다. - Simple Design System은 실제 코드 기반을 갖춘 UI 키트로, 디자인 결과물과 구현 결과 사이의 간극을 줄이는 것을 목표로 한다. - 디자인 시스템은 시각적 컴포넌트 모음에 그치지 않고 코드에서 어떻게 사용되는지까지 연결되어야 한다. - Code Connect 같은 접근은 디자인 컴포넌트와 실제 코드 컴포넌트의 관계를 명확히 하는 데 도움을 준다. - 디자인과 개발의 연결은 단순히 협업 편의성을 높이는 것뿐 아니라 구현 품질과 일관성을 관리하는 수단이기도 하다. 조직은 새로운 도구를 도입하는 데 그치지 말고, 집중 업무 보호, 명확한 제품 원칙, 측정 가능한 개발자 만족도, 디자인 시스템과 코드의 연결을 함께 설계해야 한다. 작은 workflow 개선부터 시작해 실제 효과를 검증하고, 검증된 방식을 조직 전체의 문화와 프로세스로 확장하는 접근이 현실적이다.

dev-modefigmadesign-systemscode-connect+2

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

dev-modefigmadesign-systemsdesign-to-code+4

figma2024년 7월 29일

HP, 개발자 모드로 디자인 (새 탭에서 열림)

HP는 100개가 넘는 제품군과 여러 사업부가 각기 다른 방식으로 디지털 경험을 만들던 문제를 해결하기 위해 디자인 시스템 Veneer와 Figma Dev Mode를 도입했다. Veneer는 디자인 언어, 컴포넌트, 문서화, 거버넌스를 통합하고, Dev Mode는 디자인과 개발 사이의 전달 과정을 간소화했다. 그 결과 HP는 디자인 일관성을 높이고 일부 프로젝트의 개발 시간을 50% 줄였으며, 대규모 조직에서 디자인 시스템의 채택 효과를 정량적으로 측정할 수 있었다. ## 복잡한 제품 생태계를 위한 다층 디자인 시스템 - HP는 프린터, 노트북, 게이밍 시스템 등 100개 이상의 다양한 제품군을 운영한다. - 각 제품과 사업부가 독립적으로 움직이면서 디지털 경험의 시각적·사용자 경험적 일관성을 유지하기 어려웠다. - 초기에는 단순한 프런트엔드 컴포넌트 라이브러리였던 Veneer가 다음 요소를 포함하는 종합 디자인 시스템으로 발전했다. - HP 브랜드에 기반한 디자인 언어 - 디자인 및 개발용 컴포넌트와 패턴 - 사용 지침, 원칙, 모범 사례, 코드 표준, 코드 스니펫 - 디자이너와 개발자의 피드백을 반영하는 커뮤니티와 거버넌스 - HP의 여러 서브 브랜드를 하나의 획일적인 시스템으로 지원하기는 어렵기 때문에, Veneer는 공통 기반을 유지하면서도 브랜드별 차이를 수용할 수 있는 다층 구조로 설계됐다. ## 채택률과 효율성 측정 - HP는 Veneer의 효과를 사용량 같은 정량 지표와 구성원 피드백 같은 정성 지표를 함께 활용해 평가한다. - 아이콘 라이브러리의 경우: - 320개 팀이 사용 - 915개의 아이콘 컴포넌트 제공 - 주당 평균 8만 5천 회 삽입 - 디자인 시스템을 활용하면 처음부터 구현하는 것보다 개발 속도가 크게 향상된다. 글에서는 IBM 연구의 단순 폼 개발 속도 47% 향상 사례도 언급한다. - 2023년 1월부터 12월까지 Veneer를 통해 프로젝트가 절약한 시간이 시스템 제작에 투입된 시간보다 500% 많았다. - HP 엔지니어링 리더십에 따르면 일부 프로젝트에서는 개발 시간이 50% 단축됐다. - 다만 디자이너들은 자신이 담당하는 제품과 사용자 경험에 강한 책임감을 갖고 있어, 외부 시스템의 도입을 제품의 창의성을 제한하는 일로 받아들일 수 있었다. - HP는 Veneer가 반복적인 작업을 줄이고 디자이너가 제품 고유의 문제와 창의적인 부분에 집중하도록 돕는다는 점을 보여주며 채택을 유도했다. ## Dev Mode로 디자인과 개발 연결 - Dev Mode는 개발자가 Figma 안에서 디자인 사양을 직접 확인하도록 해 디자인 핸드오프를 간소화했다. - 이로 인해 사양을 확인하기 위한 회의와 디자이너·개발자 간의 반복적인 질의응답이 줄었다. - HP가 특히 유용하게 활용한 기능은 다음과 같다. - **변경 사항 비교**: 기존 제품을 업데이트할 때 디자인 버전 간 변경점을 빠르게 확인할 수 있다. - **개발 준비 완료 표시**: 디자이너가 구현할 영역을 명시해 개발자가 작업 범위를 명확히 파악할 수 있다. - **변수**: 프리미티브 토큰이나 시맨틱 토큰과 연결된 변수를 활용해 여러 테마와 모드에 대응하고 디자인 시스템을 확장할 수 있다. - Dev Mode는 단순히 디자인 파일을 개발자에게 전달하는 도구가 아니라, Veneer의 컴포넌트와 토큰을 실제 코드 구현으로 연결하는 협업 환경으로 활용됐다. HP의 사례는 대규모 조직에서 디자인 시스템을 성공적으로 운영하려면 공통 컴포넌트만 제공하는 것보다 브랜드별 유연성, 명확한 문서화, 거버넌스, 채택 지표가 함께 필요하다는 점을 보여준다. 또한 Dev Mode처럼 디자인 변경 사항과 구현 정보를 같은 작업 흐름에서 제공하면 핸드오프 비용을 줄이고 개발 생산성을 높일 수 있다.

dev-modefigmadesign-systemsdesign-tokens+2