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처럼 디자인 변경 사항과 구현 정보를 같은 작업 흐름에서 제공하면 핸드오프 비용을 줄이고 개발 생산성을 높일 수 있다.

design-handofffigmadesign-systemsdesign-tokens+2

figma2020년 4월 28일

새로운 Zeplin 연동 (새 탭에서 열림)

Figma는 Zeplin과의 통합을 네이티브 플러그인으로 전면 재구축해 디자인과 개발 간 핸드오프를 개선했다. 사용자는 Figma에서 프레임·컴포넌트·색상 스타일·텍스트 스타일을 몇 번의 클릭만으로 Zeplin에 내보낼 수 있으며, 개발자는 정확한 스펙·에셋·코드 스니펫을 자동으로 생성할 수 있다. 새 통합은 대형 파일 처리 성능과 해상도 문제를 해결하고, 향후 Figma 컴포넌트 변경 사항을 Zeplin에 자동 반영하는 기능도 검토한다. ## Figma와 Zeplin 통합의 배경 - Zeplin은 디자인 결과물을 개발자와 제품 팀에 전달하는 협업 및 핸드오프 도구다. - Figma의 기존 Zeplin 통합은 Figma가 공식 출시되기 전부터 제공됐다. - 기존 통합을 통해 매달 30만 개 이상의 Figma 파일이 Zeplin으로 내보내졌다. - 재택근무 확산으로 온라인 협업 수요가 커지면서 사용량이 추가로 30~40% 증가했다. ## 네이티브 플러그인으로 재설계 - 두 번째 버전에서는 내보내기 경험과 성능 문제를 개선하는 데 초점을 맞췄다. - Figma용 네이티브 플러그인으로 다시 구축해 다음을 가능하게 했다. - 더욱 매끄러운 사용자 workflow - 통합 기능의 유지보수 간소화 - 새로운 기능을 추가하기 쉬운 구조 - 대용량 Figma 파일과 프레임을 내보낼 때 발생하던 성능 저하와 해상도 문제도 개선됐다. ## Figma에서 Zeplin으로 내보내는 디자인 요소 - 사용자는 Figma에서 다음 요소를 몇 번의 클릭으로 Zeplin에 export할 수 있다. - 프레임 - 컴포넌트 - 색상 스타일 - 텍스트 스타일 - 디자인 요소가 Zeplin으로 전달되면 개발자와 제품 팀은 이를 기반으로 작업할 수 있다. - 내보낸 에셋은 Zeplin의 스타일 가이드에서도 직접 확인할 수 있다. ## 개발자 핸드오프 기능 - Zeplin은 전달받은 디자인을 바탕으로 다음 정보를 자동 생성한다. - 정확한 디자인 스펙 - 필요한 이미지 및 기타 에셋 - 개발에 활용할 수 있는 코드 스니펫 - 이를 통해 디자인 파일을 직접 분석하거나 치수를 수동으로 확인하는 부담을 줄인다. - Figma에서 만든 디자인과 실제 개발 결과물 사이의 커뮤니케이션을 표준화하는 역할을 한다. ## 웹 기반 Figma의 확장 가능성 - Figma가 웹에서 동작한다는 점은 다른 디자인 도구와 차별화되는 장점으로 제시됐다. - 웹 기반 구조를 활용하면 Figma의 변경 사항을 외부 서비스와 더 긴밀하게 연결할 수 있다. - 향후 Figma 컴포넌트가 수정되면 해당 변경 사항을 Zeplin에 자동으로 전송하는 기능이 검토되고 있다. - 이 기능이 구현되면 매번 수동으로 다시 export하지 않아도 디자인과 개발 사양을 최신 상태로 유지할 수 있다. ## 이용 방법과 혜택 - 새 Zeplin 플러그인은 Figma Community에서 설치할 수 있다. - 기존 사용자도 개선된 성능과 해상도로 대형 파일을 export할 수 있다. - Figma 고객이 Zeplin을 시험해 볼 수 있도록 Zeplin Organization 플랜 3개월 무료 혜택이 제공됐다. 실무에서는 Figma를 디자인의 원본으로 유지하고, Zeplin을 개발 사양·에셋·스타일 가이드 전달 도구로 활용하면 효과적이다. 특히 컴포넌트와 스타일을 체계적으로 관리하는 팀이라면 export 규칙을 정하고 변경 사항을 정기적으로 동기화하는 것이 좋다.

design-handofffigmadeveloper-toolszeplin+2

figma2018년 9월 25일

마이크로소프트, 피 (새 탭에서 열림)

Microsoft Dynamics 365 for Talent 디자인팀은 Figma API와 웹훅을 활용해 디자인-개발 핸드오프를 자동화했다. 디자이너가 파일의 새 버전을 저장하면 자동으로 Pull Request가 생성되고, 디자인·개발팀의 검토와 승인 후 변경 사항이 제품에 반영된다. 그 결과 기존 업무 흐름을 약 70% 줄이고, 디자이너와 엔지니어가 각자의 핵심 업무에 더 집중할 수 있게 됐다. ## 대규모 조직에서 발생한 디자인 핸드오프 문제 - Microsoft는 사내 해커톤인 **OneWeek**를 매년 개최하며, 직원들이 기존 업무에서 벗어나 업무 개선 아이디어를 실험하도록 지원한다. - Dynamics 365 for Talent 팀은 Fluent Design System을 확장하면서 새로운 기능보다 시각적 디자인 요소를 확장하고 정교화하는 데 집중했다. - 디자이너와 엔지니어 비율을 약 **1:10**으로 유지하려 했지만, 디자인 변경 사항을 개발에 전달하는 과정이 병목이 됐다. - 디자이너는 작은 변경 사항을 반영하기 위해 요청을 설명하고 우선순위를 확보해야 했고, 엔지니어는 대규모 기업 업무 속에서 각 요청의 처리 순서를 조정해야 했다. - 이 때문에 단일 디자인 요소를 실제 제품에 배포하는 데 **최대 일주일 이상**이 걸리기도 했다. ## Figma API를 활용한 OneWeek 프로젝트 - 팀은 Figma를 적극적으로 사용하고 있었기 때문에, Figma의 웹 기반 API가 핸드오프 문제를 해결할 수 있다고 판단했다. - OneWeek 기간 동안 디자인 파일의 변경을 개발 워크플로와 연결하는 자동화 시스템을 구축했다. - 핵심은 Figma 파일의 변경을 감지하는 **Figma 웹훅(webhook)** 이었다. - 디자이너가 파일의 새 버전을 저장하면 웹훅이 이를 감지하고 후속 개발 프로세스를 자동으로 시작한다. ## 변경 사항을 Pull Request로 자동 전환 - 새 디자인 버전이 저장되면 자동으로 디자인·개발팀의 검토를 위한 **Pull Request**가 생성된다. - 양 팀은 Pull Request를 통해 변경 내용을 확인하고 승인할 수 있다. - 승인된 변경 사항은 엔지니어가 커밋하고 제품에 반영한다. - 기존처럼 디자이너가 개별 요청을 전달하고 엔지니어가 수동으로 우선순위를 정하는 대신, 디자인 변경이 코드 협업 흐름에 직접 연결된다. - 디자인 파일의 버전 관리와 코드 리뷰 프로세스를 결합해 책임과 승인 절차도 명확해졌다. ## 자동화가 가져온 효과 - 팀에 따르면 새로운 프로세스는 전체 업무 흐름을 **약 70% 단축**할 수 있었다. - 디자이너는 반복적인 설명과 요청 조율보다 디자인 작업에 더 많은 시간을 쓸 수 있게 됐다. - 엔지니어는 단순한 핸드오프 처리에서 벗어나 개발과 기술적 문제 해결에 집중할 수 있었다. - 디자인 변경 사항의 배포 속도가 빨라져, 조직 규모가 큰 환경에서도 디자인 시스템을 효율적으로 확장할 수 있는 기반이 마련됐다. 디자인과 개발 사이의 반복적인 전달 업무가 병목이라면, 디자인 도구의 API·웹훅을 코드 저장소 및 Pull Request 흐름과 연동하는 방식을 고려할 만하다. 특히 자동화만 도입하기보다 버전 저장, 검토, 승인, 커밋까지의 책임과 절차를 함께 정의해야 효과를 안정적으로 유지할 수 있다.

design-handoffdesign-systemspull-requestsfigma-api+2

figma2017년 10월 25일

그마, 이제 제 (새 탭에서 열림)

Figma는 UI 디자이너와 프런트엔드 개발자 간 협업을 개선하기 위해 Zeplin과의 연동을 지원한다고 발표했습니다. 디자이너는 Figma의 프레임을 Zeplin으로 내보내 개발자 중심의 방식으로 공유할 수 있으며, 기존 업무 흐름을 유지하면서 두 서비스를 seamless하게 사용할 수 있습니다. 다만 원본 디자인이 변경되면 Zeplin으로 다시 내보내야 합니다. ## Figma와 Zeplin 연동의 목적 - 팀마다 디자인·프로토타이핑·개발 방식이 다르다는 점을 고려해 다양한 협업 시스템을 지원합니다. - Zeplin은 UI 디자이너와 프런트엔드 개발자 간 핸드오프에 특화된 도구입니다. - 개발자에게 디자인 데이터를 직관적으로 제공해 구현 과정의 이해와 협업을 돕습니다. - Figma 사용자의 요청이 많았던 기능으로, Zeplin을 중심으로 작업하던 팀도 Figma를 도입하기 쉬워졌습니다. ## Figma와 Zeplin의 역할 차이 - Figma는 디자인 제작과 협업, 프로토타이핑을 위한 플랫폼입니다. - Zeplin은 개발자 경험에 초점을 맞춘 핸드오프 도구입니다. - Figma의 코드 모드와 달리, Zeplin으로 내보낸 디자인은 자동으로 최신 상태가 되지 않습니다. - Figma에서 디자인을 수정한 경우 변경 사항을 반영하려면 Zeplin으로 다시 내보내야 합니다. ## 연동 설정 및 사용 방법 - Zeplin을 설치하고 프로젝트를 생성합니다. 실험용 프로젝트도 사용할 수 있습니다. - Figma의 왼쪽 상단 메뉴에서 **Integrations > Zeplin**을 선택해 연동을 활성화합니다. - Figma에서 개발자에게 전달할 프레임을 만듭니다. - 해당 프레임을 선택한 뒤 **Export > Export to Zeplin**을 실행합니다. - 자동으로 열린 Zeplin 앱에서 **Import**를 선택합니다. - 이후 Zeplin에서 Figma 디자인을 확인하고 개발 핸드오프에 활용할 수 있습니다. ## 협업 생태계 확장 - 디자인 도구와 개발 도구 간 통합은 팀의 업무 전환 비용을 줄이고 협업 흐름을 매끄럽게 만듭니다. - Figma는 Zeplin 같은 외부 파트너와의 연동을 통해 플랫폼 생태계를 확장하려고 합니다. - 글에서는 새로운 협업 도구와 파트너십 제안을 계속 환영한다고 밝힙니다. 실무에서는 Figma를 디자인의 원본으로 관리하고, 변경이 완료된 시점에 프레임을 Zeplin으로 재내보내는 운영 방식을 권장합니다. 이를 통해 Zeplin에 전달된 화면이 실제 디자인과 불일치하는 문제를 줄일 수 있습니다.

design-handofffigmaprototypingui-design+2