figma2021년 7월 6일

News UK가 멀티 (새 탭에서 열림)

News UK는 서로 다른 역사와 요구사항을 가진 여러 브랜드를 하나의 디자인 시스템으로 통합했다. 기존에는 Sketch, Abstract, Zeplin, InVision을 조합하면서 라이브러리 유지보수와 브랜드별 변형 관리가 복잡해졌지만, Figma로 전환해 도구와 라이브러리를 중앙화했다. 또한 교육, 문서화, 디자이너 옹호자 제도를 통해 조직의 참여를 이끌어내면서 확장 가능한 시스템을 구축했다. ## 여러 브랜드를 하나로 통합해야 했던 배경 - News UK는 인쇄 매체뿐 아니라 온라인, 라디오, TV까지 사업을 확장했다. - The Times, The Sun 등 각 브랜드는 독립적인 디자인 조직, 제품 팀, 도구를 사용하고 있었다. - 브랜드마다 고유한 역사와 시각적 요구사항이 있어 단순히 동일한 디자인을 강제할 수 없었다. - 여러 브랜드와 제품에서 디자인·개발을 확장하려면 공통 요소를 재사용하면서도 브랜드별 차이를 유지할 수 있는 시스템이 필요했다. ## 기존 도구 조합의 문제점 - Sketch, Abstract, Zeplin, InVision을 함께 사용했지만 결과적으로 작업 흐름이 분절됐다. - 디자인 시스템 팀이 라이브러리 업데이트와 유지보수에 며칠에서 몇 주씩 소요됐다. - 브랜드별 변형을 지원하기 위해 수천 개의 텍스트 스타일과 컴포넌트 스타일이 생겼다. - 기존 테마 기능은 제품과 브랜드 요구가 늘어날수록 지나치게 복잡하고 경직됐다. - The Times의 라디오 사업처럼 새로운 유형의 제품이 시스템을 사용하기 시작하면서, 디자인 시스템 팀이 각 팀을 직접 지원해야 하는 부담이 커졌다. - 사용하기 어려운 시스템은 팀의 채택을 이끌어내지 못했기 때문에, 도구와 운영 방식 모두를 재검토해야 했다. ## Figma로 도구와 라이브러리 통합 - News UK는 Sketch와 여러 보조 도구를 Figma로 전환했다. - 전환의 목표는 다음과 같았다. - 여러 도구를 하나로 통합 - 라이브러리 관리의 중앙화 - 디자이너의 실제 사용과 기여 촉진 - Figma 도입 후 디자이너들은 디자인 시스템을 업무를 방해하는 제약이 아니라 효율을 높이는 기반으로 인식하기 시작했다. - 전체 마이그레이션은 약 몇 주 만에 진행됐다. ## 채택을 유도한 교육과 참여 방식 - 새로운 시스템을 배포하고 “사용하라”고 지시하는 것만으로는 충분하지 않다고 판단했다. - 디자인 시스템 팀이 각 디자이너의 Figma 작업 공간을 직접 설정하고 온보딩했다. - 다음과 같은 주제의 맞춤형 워크숍과 문서를 제공했다. - Sketch 파일 마이그레이션 - 파일 구조화와 관리 - 컴포넌트 사용법 - 댓글 작성과 디자인 검사 - Jira 등 외부 도구와의 연동 - 디자이너들과 함께 컴포넌트 사양과 재사용 가능한 디자인 패턴을 만들고 조직 전체에 공유했다. - 특정 상황에서 어떤 컴포넌트를 선택해야 하는지 안내하는 Figma 기반 도구와 프로토타입도 제작했다. ## 디자이너 옹호자 제도 - 각 제품 영역에서 디자인 시스템을 홍보할 디자이너 옹호자(designer advocate)를 모집했다. - 옹호자는 다음 역할을 맡았다. - 팀 내 디자인 시스템 사용 촉진 - 우수 사례와 사용법 공유 - 디자인 시스템 팀과 현업 팀 사이의 주요 연락 창구 - 시스템 변경 사항을 제품 팀에 전달 - 중앙 조직이 모든 팀을 직접 지원하는 대신, 각 조직 안에서 시스템이 확산되도록 만든 방식이다. ## 브랜드별 테마를 지원하는 시스템 - 동일한 컴포넌트에 서로 다른 브랜드 테마를 적용할 수 있도록 구성했다. - News UK는 자체 Themer 플러그인을 개발해 여러 브랜드에 적용할 컴포넌트를 쉽게 실험하고 구축했다. - 이를 통해 공통 컴포넌트의 구조와 동작은 재사용하면서도 색상, 스타일 등 브랜드별 표현을 유지할 수 있었다. - 디자인 시스템이 모든 브랜드에 억지로 동일하게 적용되는 대신, 각 브랜드에 맞게 제작된 것처럼 느껴지도록 했다. ## 확장 이후의 효과 - 디자이너들이 더 이른 시점에 협업하고 피드백을 주고받을 수 있게 됐다. - 팀 간 고립과 기존 솔루션의 중복 제작이 줄었다. - 모든 제품·디자인 팀에 시스템을 배포한 뒤 내부 NPS가 첫 분기에 23포인트 상승했다. - 제품 팀이 시스템에 실제로 참여하고, 업무 효율 향상과 재사용의 이점을 체감하기 시작했다. - 디자인 시스템은 완성된 결과물이 아니라 지속적으로 개선되는 확장 기반으로 자리 잡았다. ## 실용적인 결론 다중 브랜드 디자인 시스템의 성공은 컴포넌트와 도구만으로 결정되지 않는다. 브랜드별 차이를 수용할 수 있는 테마 구조, 중앙화된 라이브러리, 체계적인 온보딩, 현업 디자이너의 참여와 옹호자 네트워크를 함께 구축해야 한다. 특히 시스템을 일방적으로 배포하기보다 사용자가 이해하고 기여할 수 있도록 만드는 운영 체계가 중요하다.

zeplinfigmadesign-systemsjira+4

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 규칙을 정하고 변경 사항을 정기적으로 동기화하는 것이 좋다.

zeplinfigmadeveloper-toolsdesign-handoff+2

figma2018년 11월 27일

Zoom, Figma로 디자인 워크 (새 탭에서 열림)

Zoom은 Sketch, InVision·Framer, Zeplin으로 분리된 디자인 workflow를 Figma로 통합해 반복 작업과 협업 마찰을 줄였다. 실시간 공동 편집, 디자인 문서 내 댓글, 공유 라이브러리를 통해 디자이너뿐 아니라 엔지니어·PM·데이터 과학자까지 같은 맥락에서 참여할 수 있게 되었고, 피드백의 양과 품질도 크게 향상됐다. Figma는 Zoom의 단일 기준 문서이자 디자인 시스템 구축의 기반으로 자리 잡았다. ## 분산된 디자인 도구가 만든 비효율 - Zoom의 디자인팀은 여러 국가와 시간대에 걸쳐 원격으로 협업했다. - 디자이너 1명이 엔지니어 약 10명을 지원하는 구조였기 때문에, 디자인 의도를 일일이 설명하기 어려웠다. - Sketch에서 디자인하고, InVision이나 Framer에서 프로토타입을 만들고, Zeplin으로 개발자에게 전달하는 방식이었다. - 디자인 수정 때마다 여러 도구 간 파일을 동기화해야 했다. - 한 프로젝트에서 수정본을 10~20회씩 각 도구에 반영하고, 버전과 이해관계자별 리뷰를 따로 관리해야 했다. - 이 과정은 창의적인 작업보다 파일 관리와 수동 반복 작업에 시간을 쓰게 만들었다. ## Figma를 통해 발견한 전환점 - 디자이너 Steven Crosby는 Figma의 빠른 렌더링과 높은 프레임 속도에 주목했다. - 여러 사람이 하나의 디자인 파일에서 동시에 작업할 수 있는 실시간 협업 기능이 핵심적인 장점으로 평가됐다. - 댓글 기능을 통해 디자인 문서 안에서 직접 피드백을 남길 수 있었다. - 정적인 스크린샷을 공유하는 방식과 달리, 전체 화면 흐름과 해당 요소가 사용되는 맥락을 유지한 채 의견을 주고받을 수 있었다. - 별도의 다운로드, 파일 동기화, 정적 파일 공유 없이 링크만으로 협업할 수 있었다. ## 디자이너와 다른 직군의 협업 강화 - Figma는 디자이너뿐 아니라 프로젝트 매니저, 제품 매니저, 엔지니어까지 동일한 문서에 참여하게 했다. - 디자인 의사소통이 구두 설명이나 이미지 첨부 중심에서 문서 내 직접 피드백 중심으로 바뀌었다. - Zoom은 이전보다 피드백의 양과 품질이 크게 향상됐다고 평가했다. - 실시간으로 같은 화면을 보며 작업하므로, 원격 근무자와 다른 시간대의 팀원도 협업하기 쉬워졌다. ## 단일 기준이 된 디자인 시스템 - Figma를 팀의 단일 기준 문서로 사용하면서 디자인 시스템의 기반을 마련했다. - Team Libraries를 통해 여러 프로젝트에서 공통 컴포넌트를 공유할 수 있었다. - 아이콘 세트와 다양한 UI 컴포넌트를 마스터 파일에 모아 지속적으로 업데이트했다. - 라이브 업데이트를 통해 모든 디자이너가 최신 컴포넌트를 사용할 수 있었다. - Constraints 기능을 활용해 화면 크기가 바뀌어도 요소가 특정 방향에 고정되도록 만들고, 일관된 디자인 패턴을 구축했다. - 컴포넌트 중심의 작업 방식은 디자인 재사용성과 유지보수성을 높였다. ## 비디자이너도 참여한 브레인스토밍 - Zoom은 데이터 과학팀과 투자회사 소속 디자인 파트너를 제품 메시지 브레인스토밍에 초대했다. - 참가자들은 Figma를 처음 사용했지만 별도의 긴 교육 없이 바로 디자인 파일에 참여했다. - 각자 화면의 영역을 맡아 문구와 요소를 직접 배치하고, 다른 사람의 아이디어를 참고하거나 변형했다. - 실시간으로 서로의 커서를 확인하며 아이디어를 발전시킬 수 있었다. - Figma의 낮은 학습 곡선 덕분에 디자인 작업이 특정 직군만의 활동이 아니라 공동 창작 과정으로 확장됐다. ## 실용적인 결론 여러 도구와 파일 형식으로 나뉜 디자인 프로세스는 반복적인 동기화와 맥락 손실을 만든다. 팀 규모가 작거나 원격 협업이 많다면, 디자인·프로토타이핑·피드백·개발 전달을 하나의 공유 문서와 컴포넌트 라이브러리로 통합하는 방식이 효율적이다. Figma의 강점은 단순한 디자인 도구가 아니라 모든 직군이 같은 맥락에서 협업하는 공통 작업 공간을 제공한다는 데 있다.

zeplinfigmadesign-systemsprototyping+3

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에 전달된 화면이 실제 디자인과 불일치하는 문제를 줄일 수 있습니다.

zeplinfigmaprototypingui-design+2