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

Figma 커뮤니티

Figma Community는 사용자들이 디자인 시스템, 아이콘, 와이어프레임, 일러스트, 프로토타입 등을 공개하고 서로 탐색·재사용·리믹스할 수 있는 공간이다. 2020년 8월부터 전체 Figma 사용자에게 단계적으로 공개되었으며, 검색과 태그 탐색, 프로필 핸들, 좋아요, 파일 복제 기능을 제공한다. 글은 베타 기간 동안 커뮤니티가 만든 다양한 리소스와 그 제작 배경을 소개하며, Figma Community가 협업과 지식 공유의 기반으로 성장할 가능성을 강조한다. ## Figma Community의 공개와 기능 - 수천 명의 제작자가 베타에 참여해 파일과 프로필을 공개했다. - 사용자는 다음과 같은 자료를 검색하고 탐색할 수 있다. - 디자인 시스템 - 아이콘 팩 - 와이어프레임 - 일러스트레이션 - 애니메이션 프로토타입 - 보드게임 등 실험적인 작업물 - 주요 기능은 검색, 태그 탐색, 프로필 핸들 선점, 좋아요, 파일 복제다. - 초기 공개 단계에서는 모든 사용자가 파일과 프로필을 볼 수 있지만, 파일을 직접 게시하려면 여전히 베타 참여가 필요했다. - Microsoft, Google Material Design, Mixpanel 같은 조직과 개인 디자이너들이 실용적인 리소스를 공개했다. ## Material Design Baseline Kit: 디자인 시스템의 출발점 - Google Material Design 팀의 Jessie Z가 제작한 리소스다. - 디자인 시스템을 처음부터 구축하는 부담을 줄이고, 다양한 프로젝트에서 활용할 수 있도록 설계됐다. - 두 부분으로 구성된다. - **Material Theme**: 타이포그래피와 색상 팔레트를 수정하고, 변경 사항이 컴포넌트·상태·예시 레이아웃에 미치는 영향을 빠르게 확인한다. - **Sticker sheet**: 기존 컴포넌트를 조합하고 활용하는 전통적인 UI 리소스 모음이다. - 사용자는 이 키트를 기반으로 Material 가이드라인을 학습하거나, 제품과 브랜드에 맞는 테마를 시각화할 수 있다. ## Open Figures: 재사용 가능한 일러스트 라이브러리 - Bonnie Kate Wolf가 제작한 일러스트레이션 라이브러리다. - 특정 회사의 브랜드 가이드에 얽매이지 않고 독립적인 스타일을 만들 수 있었던 프로젝트다. - 제품 화면, 프레젠테이션, 개인적인 창작 활동 등 다양한 목적에 사용할 수 있도록 구성됐다. - 모듈형 일러스트를 설계하면서 접근성과 포용성을 고려했다. - 휠체어를 사용하는 캐릭터의 의상 교체가 가능하도록, 드레스나 긴 재킷처럼 다른 요소와 충돌하는 형태를 조정했다. - 단순히 보기 좋은 그림을 제공하는 것을 넘어, 다양한 사용자를 표현할 수 있는 디자인 구조를 보여준다. ## Spotify Ways of Working: 팀 협업 방식의 공유 - Spotify의 Barton Smith, Cliona O’Sullivan과 Figma 워킹 그룹이 제작했다. - Figma에서 팀의 업무를 조직하고 협업하는 방식을 외부 커뮤니티에 공개한 자료다. - Spotify는 회사마다 Figma 파일과 프로젝트를 정리하는 표준 방식이 없고, 이를 어려워하는 팀이 많다는 점에서 출발했다. - 이 파일은 특정 도구 사용법보다 실제 조직이 업무를 구조화한 사례를 보여주는 데 목적이 있다. - Spotify 팀 역시 운영 과정에서 얻은 학습을 바탕으로 기존 결정을 계속 수정하고 있다고 설명한다. ## 커뮤니티가 만드는 공유 생태계 - Figma Community는 완성된 결과물뿐 아니라 제작자의 문제의식과 작업 방식을 공유하는 장으로 기능한다. - 대기업의 디자인 시스템부터 개인 창작자의 일러스트, 팀 운영 문서까지 자료의 범위가 넓다. - 공개된 파일을 복제해 자신의 프로젝트에 맞게 수정할 수 있어 학습과 실무 적용이 동시에 가능하다. - Figma는 초기 출시를 완성된 제품이 아니라 앞으로 확장될 기반으로 설명하며, 사용자들이 무엇을 만들고 어떻게 활용하는지에 따라 발전시킬 계획을 밝혔다. 실무에서는 Material Design Baseline Kit처럼 구조화된 시스템을 출발점으로 삼고, Open Figures처럼 재사용 가능한 시각 자산을 활용하며, Spotify 사례처럼 팀의 파일 관리 규칙을 문서화하는 방식으로 Figma Community를 활용할 수 있다.

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

design-collaborationFigma디자인 시스템프로토타이핑+2

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

BT가 통신 산업을 계속

174년 역사의 통신 기업 BT는 빠르게 변화하는 기술과 높아진 사용자 기대에 대응하기 위해 제품 개발 방식을 전환했다. 제품·엔지니어링·디자인 인력을 소규모 제품 스쿼드로 재편하고 Figma를 도입하면서 협업과 의사결정의 속도, 투명성을 높였다. 그 결과 도구 비용을 50% 절감하고, 원격근무 상황에서도 혁신을 지속할 수 있었다. ## 제품 스쿼드 모델로의 전환 - BT는 제품, 엔지니어링, 디자인 조직을 제품 스쿼드 중심으로 재구성했다. - 각 스쿼드는 특정 제품의 기획부터 출시까지 전 과정을 책임지는 소규모·유연한 팀으로 운영됐다. - 디자이너는 더 이상 디자이너끼리만 일하지 않고, 제품 담당자, 엔지니어, 콘텐츠 디자이너와 함께 협업했다. - 그러나 기존에는 문서, Sketch, InVision, Jira 등 여러 도구를 병행해야 했다. - 파일 이동과 여러 피드백 채널 관리에 시간이 소요되어 실제 디자인 작업과 팀 간 소통이 비효율적이었다. ## Figma 도입과 협업 방식 개선 - 180명 이상의 디자이너가 있는 만큼, BT는 먼저 한 제품 스쿼드에서 2개월간 Figma를 시험 운영했다. - 몇 주 만에 실시간 협업, 디자인 핸드오프, 파일 관리가 쉬워졌다는 긍정적인 피드백을 얻었다. - 디자인, 프로토타이핑, 발표를 하나의 도구에서 처리하면서 Sketch와 InVision 사이에서 파일을 옮길 필요가 줄었다. - 제품 담당자와 엔지니어도 진행 중인 디자인을 직접 확인하고 초기 단계부터 의견을 제시할 수 있게 됐다. - Figma 파일 링크만 공유하면 임원과 외부 이해관계자도 기기와 장소에 관계없이 디자인을 보고 댓글을 남길 수 있었다. - 파일럿 이후 BT는 모든 제품 스쿼드에 Figma를 확대 적용했다. ## 협업을 넘어선 효과 - **비용 50% 절감:** Sketch와 InVision을 Figma로 대체하고 디자인 도구를 통합했다. - **디자인의 의사결정 참여 확대:** 이해관계자가 디자인 과정에 더 잘 접근하게 되면서 디자인이 사업 의사결정과 투자 논의의 핵심 요소가 됐다. - **디자인 일관성 강화:** 브랜드, 제품, 여러 사업부를 아우르는 중앙화된 디자인 시스템 구축의 기반을 마련했다. - **업무 연속성 확보:** 코로나19로 재택근무가 시행된 뒤에도 구성원들이 Figma에서 함께 아이디어를 공유하고 문제를 해결할 수 있었다. - **발표 방식 변화:** 완성된 프레젠테이션을 만드는 대신 CEO와 라이브 디자인 파일을 함께 보며 ‘경험 walkthrough’를 진행했다. - **투명성과 효율 향상:** 팀 전체가 동일한 작업물을 실시간으로 확인해 공동의 이해를 빠르게 형성하고, 제품과 기능을 더 자신 있게 출시할 수 있었다. ## 실용적인 시사점 협업 도구 도입만으로 변화가 완성되는 것은 아니며, 먼저 조직을 제품 중심의 소규모 팀으로 재편하고 팀 간 공동 책임 구조를 만들어야 한다. 이후 파일럿 운영으로 효과를 검증한 뒤 도구를 확산하면 구성원의 수용성을 높이면서 비용 절감, 의사결정 가속화, 원격 협업 강화까지 함께 달성할 수 있다.

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

design-collaborationFigma디자인 시스템프로토타이핑+3

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

더 이상 고민하지 마

Figma는 팀과 작업 규모가 커질수록 디자인 파일을 찾기 어려워지는 문제를 해결하기 위해 **Universal Search**를 도입했다. 또한 파일 내부의 페이지·프레임과 외부 문서를 연결하는 **Links** 기능을 제공해, 협업자가 디자인의 위치와 배경을 쉽게 이해하도록 했다. 두 기능의 목표는 디자이너뿐 아니라 개발자·기획자·마케터 등 다양한 구성원이 Figma를 더 직관적으로 탐색하고 협업하도록 만드는 것이다. ## Universal Search로 작업 찾기 - 기존에는 주로 파일 이름을 기준으로 검색해야 했지만, 이제 파일명을 몰라도 작업을 찾을 수 있다. - 워크스페이스에서 다음 항목을 통합 검색할 수 있다. - 파일 - 프로젝트 - 팀 - 사용자 - 비공개 플러그인 - 검색어를 입력하는 즉시 여러 범주의 결과가 표시된다. - 특정 범주만 보도록 결과를 필터링할 수 있다. - Figma Community 베타 사용자는 커뮤니티 파일, 퍼블리셔, 플러그인까지 검색 결과에서 확인할 수 있다. - 팀과 Figma 사용량이 커질수록 증가하는 탐색 비용을 줄이고, 디자이너와 협업자가 최신 작업을 더 빠르게 찾도록 설계됐다. ## 디자인 파일에 맥락과 탐색 경로 추가 - **Links** 기능을 사용하면 파일 안의 특정 페이지나 프레임으로 바로 이동하는 링크를 만들 수 있다. - 여러 페이지를 연결해 클릭 가능한 목차를 만들 수 있다. - 신규 참여자가 파일 구조를 빠르게 파악하도록 안내용 인덱스를 구성할 수 있다. - 최신 디자인, 초기 아이디어, 브레인스토밍 결과 등 서로 다른 작업 영역을 명확히 연결할 수 있다. ## 외부 문서와 디자인 연결 - 디자인은 제품 요구사항, 사양서, 사용자 페르소나 같은 외부 자료와 함께 이해해야 하는 경우가 많다. - Links를 활용하면 Figma 파일 안에 다음 자료를 연결할 수 있다. - 제품 요구사항 문서(PRD) - 기능 명세 및 스펙 - 사용자 조사 자료 - 사용자 페르소나 문서 - 관련 프로젝트 링크 - 디자인 파일을 관련 정보가 모이는 단일 기준점(single source of truth)으로 활용할 수 있다. - 협업자는 별도의 문서 저장소를 찾아다니지 않고 디자인과 관련 맥락을 한곳에서 확인할 수 있다. ## 개방적인 협업 환경을 위한 변화 - Figma 사용자의 절반 이상이 디자이너가 아닌 구성원이라는 점을 배경으로 한다. - Figma는 폴더와 파일명 중심의 탐색에서 벗어나 사람, 팀, 프로젝트와 같은 맥락 중심의 워크스페이스를 지향해 왔다. - Universal Search는 이러한 맥락 중심 접근을 검색 기능으로 확장한다. - Links는 디자인 파일을 단순한 결과물 저장소가 아니라 협업과 지식 공유의 중심으로 만든다. 실무에서는 Universal Search로 관련 작업을 빠르게 찾고, 각 파일에 목차·최신안 링크·PRD와 명세서 링크를 함께 배치하는 방식이 효과적이다. 이렇게 하면 디자인 파일을 처음 접하는 구성원도 별도의 설명 없이 작업의 구조와 배경을 파악할 수 있다.

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

design-collaborationFigmapluginsweb-applications+1

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

개방형 플랫폼의 확장:

Figma는 사용자의 데이터가 특정 서비스에 갇히지 않아야 한다는 철학을 바탕으로 개방형 플랫폼과 외부 도구 연동을 확장해 왔다. 이 글에서는 Figma에서 협업 디자인을 진행한 뒤 Framer Web로 파일을 가져와 더 표현력 있는 프로토타입을 제작할 수 있는 통합 기능을 소개한다. 결론적으로 Figma는 모든 기능을 독점하기보다 다양한 전문 도구와 연결되어 사용자가 자신의 디자인 워크플로를 자유롭게 구성하도록 하는 방향을 강조한다. ### 데이터 잠금을 피하는 개방형 플랫폼 - Figma는 창립 초기부터 사용자가 자신의 데이터를 서비스 안에 가둬두지 않아야 한다고 주장했다. - 웹 기반으로 서비스를 구축하고, 외부 개발자가 활용할 수 있는 API를 제공한 것도 이러한 철학의 일부다. - 2018년 Figma API 공개 이후 Uber와 GitHub 같은 기업은 Figma 파일 데이터를 사내 도구로 가져와 활용했다. - 일부 사용자는 Figma를 콘텐츠 관리 시스템(CMS)처럼 사용하기도 했다. - 플러그인 API를 통해 개발자가 데이터를 Figma로 가져오거나 외부로 내보내는 자동화 도구를 만들 수 있게 했다. ### 커뮤니티 피드백으로 방향을 수정한 API 전략 - Figma는 생태계 확장을 위해 Sketch 변환기를 만드는 API 챌린지를 개최하고 상금을 제공하려 했다. - 그러나 커뮤니티는 이 방식이 디자이너의 작업을 무상으로 활용하는 ‘스펙 워크’처럼 보일 수 있다고 지적했다. - Figma는 피드백을 받아 해당 계획이 적절하지 않았음을 인정하고 철회했다. - 이는 개방성을 추구하더라도 개발자와 디자이너 커뮤니티의 이해관계 및 작업 가치를 고려해야 한다는 사례로 제시된다. ### 어떤 디자인 워크플로에도 맞는 생태계 - Figma 하나로 브레인스토밍, 와이어프레임, 디자인, 프로토타이핑, 사용자 조사, 핸드오프까지 수행하는 사용자도 있다. - 하지만 고급 프로토타이핑이나 개발자 핸드오프처럼 특정 영역에서는 전문 도구가 더 적합할 수 있다. - 예를 들어 일부 고객은 Figma보다 Zeplin의 개발자 핸드오프 방식을 선호한다. - Figma는 모든 기능을 직접 제공하려 하기보다, 외부 파트너와 협력해 각 도구의 강점을 연결하는 전략을 택한다. - 사용자가 선호하는 도구를 선택하고 필요에 따라 오갈 수 있도록 하는 것이 핵심이다. ### Framer Web에서 Figma 파일 프로토타이핑 - Framer Web의 Figma 임포터를 이용하면 Figma 파일을 Framer Web로 가져올 수 있다. - 디자인 팀은 Figma에서 실시간 협업으로 화면을 설계한 뒤, Framer Web에서 더 복잡하고 표현력 있는 상호작용을 구현할 수 있다. - 이를 통해 Figma는 협업 디자인에, Framer는 고급 프로토타이핑에 집중하는 역할 분담이 가능해진다. - 당시 Framer Web는 베타 단계였으며, 사용자는 대기자 명단에 등록해야 했다. - Figma는 연동 방법을 안내하는 별도 문서도 제공했다. ### 디자인 기술 스택 전반으로 확장되는 통합 - 프로토타이핑 및 사용자 테스트: - Flinto - Principle - ProtoPie - Maze - 개발자 핸드오프 및 문서화: - Avocode - Storybook - ZeroHeight - Zeplin - 협업과 커뮤니티 연계: - Coda - Dribbble - Dropbox - Jira - Notion - Slack - Trello - Figma는 향후에도 여러 파트너와 새로운 통합 기능을 출시하고, 사용자가 원하는 연동에 대한 의견을 수렴하겠다고 밝혔다. Figma를 중심 도구로 사용하되 모든 작업을 Figma 안에서 끝내려 하기보다, 목적에 맞는 전문 도구와 연결하는 방식이 효율적이다. 특히 협업 디자인은 Figma에서 진행하고, 고급 인터랙션과 프로토타입은 Framer Web 같은 도구로 분리하면 각 서비스의 장점을 활용할 수 있다.

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

design-collaborationFigma프로토타이핑figma-plugins+3

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

피그마 시간 여행 | 피

Figma의 “Time Travel”은 버전 기록에서 과거의 디자인 상태로 한 번에 이동할 수 있도록 만든 만우절 기념 기능이다. 사용자는 버전 기록 화면에서 특정 연도의 시각적 분위기를 반영한 네 가지 옵션을 선택해 디자인을 과거 스타일로 되돌려 볼 수 있다. 실질적인 협업 기능이라기보다 Figma의 버전 관리 기능과 이스터 에그를 재미있게 보여주는 프로젝트다. ## 버전 기록을 활용한 시간 여행 - Figma의 **Version History**에서 과거 디자인으로 이동할 수 있다. - 새로운 시간 여행 옵션 네 가지가 추가되었으며, 각 옵션은 서로 다른 시대의 색상 팔레트를 표현한다. - 한 번의 클릭으로 디자인을 특정 역사적 시기의 분위기로 바꿔 볼 수 있도록 구성했다. - 글에서는 이를 Figma의 ‘DeLorean’에 빗대어, 영화 *백 투 더 퓨처*처럼 과거로 이동하는 경험으로 소개한다. ## 시대별 색상 팔레트와 복고풍 연출 - 1973년 스타일 등 특정 연도를 연상시키는 팔레트가 제공된다. - 낡은 회색 사무실, 기계식 키보드 같은 당시의 시각·문화적 이미지를 유머러스하게 활용했다. - 디자인 도구 안에서 역사적 스타일을 체험하도록 해, 단순한 기능 소개보다 엔터테인먼트 요소를 강조했다. ## 만우절 이스터 에그 - Figma는 2019년 4월 1일을 맞아 이 기능을 공개했다. - 일반적인 만우절 장난 대신, 실제로 사용해 볼 수 있는 작은 프로젝트를 선보였다는 점을 강조한다. - 버전 기록이라는 기존 기능에 재미있는 인터랙션을 더해 Figma의 브랜드와 제품 문화를 보여준다. - 기능 자체보다는 사용자에게 새로운 달의 시작을 즐겁게 만들어 주는 데 목적이 있다. ## 실용적인 의미 - 버전 기록 기능이 단순한 복구 도구를 넘어 디자인의 시간성과 변화를 탐색하는 공간이 될 수 있음을 보여준다. - 제품의 핵심 기능을 유머와 이스터 에그로 포장하면 사용자의 관심과 참여를 높일 수 있다. - 다만 이 글의 시간 여행 기능은 정식 디자인 워크플로보다는 Figma의 실험적·홍보성 기능에 가깝다.

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

design-collaborationFigmadesign-toolsversion-history

figma·2018년 12월 18일·3분 읽기큐레이션 요약

코인베이스에서 개방

Coinbase는 암호화폐의 복잡성을 낮추고 개방형 금융 시스템을 만들기 위해, 누구나 참여할 수 있는 개방형 디자인 문화를 구축했다. Figma를 도입하면서 디자인·제품·엔지니어링·경영진이 하나의 공간에서 협업하고 실시간으로 피드백을 주고받을 수 있게 되었으며, 그 결과 의사소통과 제품 출시 속도가 개선되었다. 글은 적절한 협업 도구가 디자인을 폐쇄적인 작업이 아닌 조직 전체의 공동 창작 과정으로 바꿀 수 있다고 강조한다. ## 암호화폐를 대중화하는 디자인 - Coinbase는 2,000만 명 이상의 사용자가 디지털 통화를 쉽게 사고팔고 관리하도록 지원한다. - Coinbase Consumer와 Wallet은 블록체인의 복잡한 개념을 추상화해 암호화폐를 일반 사용자에게 전달한다. - 디자인 팀은 다음 네 가지 원칙을 바탕으로 제품을 만든다. - 안내한다(guide) - 역량을 부여한다(empower) - 인간적으로 만든다(humanize) - 단순화한다(simplify) - 기술적 아이디어를 대중이 이해하고 사용할 수 있도록 교육, 안내, 실제 사용 사례를 디자인에 포함하는 것이 중요하다고 본다. ## 개방형 금융 시스템과 개방형 디자인 - Coinbase의 금융 비전처럼 디자인 과정도 개방적이고 투명해야 한다고 주장한다. - 디자인은 디자이너만의 전유물이 아니라 제품 관리자, 엔지니어, 경영진 등 다양한 직군이 참여하는 협업 과정이다. - 기존에는 디자인, 프로토타이핑, 개발 handoff에 서로 다른 도구를 사용했다. - 도구 간 전환으로 인해 다음 문제가 발생했다. - 작업 맥락을 계속 바꿔야 함 - 파일 버전 관리가 어려움 - 피드백과 산출물이 여러 플랫폼에 분산됨 - 디자인 팀의 작업이 다른 구성원에게 보이지 않음 ## Figma 도입으로 사라진 협업 장벽 - 브라우저 기반인 Figma는 별도 설치나 복잡한 배포 없이 링크 하나로 팀에 도입할 수 있었다. - 모든 파일을 온라인에 중앙 저장하고 여러 사람이 같은 공간에서 동시에 작업할 수 있었다. - 디자이너들은 작업을 공개한 상태에서 피드백을 받고 즉시 반복 개선할 수 있게 되었다. - 디자인, 프로토타입, 의견 수렴, 개발 전달 과정이 하나의 환경에 통합되었다. - 다양한 직군이 동일한 파일과 맥락을 보면서 제품에 의견을 남길 수 있어 정보 손실과 커뮤니케이션 비용이 줄었다. ## 하나의 공간에서 이루어지는 공동 작업 - 디자이너, PM, 엔지니어, 리더십이 최신 디자인 파일을 확인하고 의견을 제시할 수 있었다. - 디자인이 더 이상 “블랙박스” 안에서 진행되지 않아 진행 상황과 의사결정이 투명해졌다. - 의견이 Figma 안에 기록되고 추적되면서 이해관계자 간 커뮤니케이션 주기가 짧아졌다. - 모든 구성원이 같은 장소에서 같은 언어로 대화하게 되어 불필요한 관료적 절차가 줄었다. - 공식적인 제품 작업뿐 아니라 굿즈, 포스터 같은 즉흥적인 요청에도 디자인 팀이 함께 파일을 만들고 빠르게 협업했다. ## 더 빠르고 포용적인 디자인 문화 - Figma 도입 후 팀은 더 빠르고 유연하게 움직이며 조직 전체의 정렬 상태도 좋아졌다. - 디자인 팀은 제품을 함께 만들고 더 신속하게 출시할 수 있게 되었다. - 도구의 변화는 단순한 생산성 향상을 넘어, 구성원이 자유롭게 참여하는 조직 문화 형성에 영향을 주었다. - Coinbase는 앞으로도 포용적이고 다양한 문화를 유지하면서 디자이너가 복잡한 도구가 아닌 적절한 환경의 지원을 받아 역량을 발휘하도록 해야 한다고 본다. 실무적으로는 디자인 도구를 직군별로 분리하기보다, 파일·피드백·의사결정·개발 전달을 한곳에 모으는 협업 환경을 구축하는 것이 효과적이다. 특히 참여자를 디자이너로 제한하지 않고 관련된 모든 구성원이 초기 단계부터 의견을 남기게 하면 제품 완성도와 출시 속도를 함께 높일 수 있다.

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

design-collaborationFigma프로토타이핑blockchain+4

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

Figma 디자인 팀을 구축한 방법

Figma는 소규모 디자인팀을 빠르게 확장하면서도 채용 기준과 팀 문화를 체계적으로 정립하는 데 집중했다. 채용 역량을 명확히 정의하고, 인터뷰 피드백을 표준화하며, 채용 담당자를 디자인팀에 밀접하게 참여시킨 결과 1년 만에 1명 중심의 팀을 8명 규모로 성장시켰다. 글은 디자인을 공개적으로 수행한다는 Figma의 철학과 팀 구축 과정을 공유한다. ## 빠른 성장 속에서도 신중한 팀 확장 - 1년 전 Figma에는 핵심 제품 디자이너가 한 명뿐이었고, 일부 구성원이 파트타임으로 기능 개발을 지원했다. - 엔지니어 수가 늘면서 디자인 수요를 따라가기 어려웠지만, 초기 소규모 팀에서는 새 구성원 한 명이 업무 방식과 문화에 큰 영향을 미친다고 판단했다. - 1년 뒤 디자이너 8명으로 성장했고, 협업 크리틱과 명확한 목표·담당 영역을 갖춘 팀의 기반을 마련했다. - 내부 문화를 먼저 투명하게 정비한 뒤, 그 방법을 외부 디자인 커뮤니티와 공유하기로 했다. ## 채용 기준을 학습·분석·발전시키기 Figma는 Joel Califa의 디자인팀 구축 강연에서 얻은 방법을 바탕으로 채용 프로세스를 정리했다. - **Learn** - 다양한 디자인 직무 기술서를 검토한다. - 디자인팀을 구축한 리더들에게 조언을 구한다. - 팀에 필요한 기술과 태도를 폭넓게 파악한다. - **Analyze** - 필요한 역량을 종합적으로 목록화한다. - 회사 전체에 필요한 역량, 디자인팀이 책임져야 할 역량, 모든 디자이너의 기본 역량으로 세분화한다. - 실제로 필요한 기준과 있으면 좋은 기준을 구분한다. - **Evolve** - 팀에 새롭게 생긴 역량 공백과 변화한 회사 요구사항을 반영한다. - 가능하다면 외부 채용보다 내부 성장을 통해 역량을 보완한다. ## 역할 기대치와 문화적 적합성의 명문화 - 팀원들이 각자 다음 디자이너에게 원하는 조건을 작성한 뒤, Figma에서 함께 통합하며 합의점을 찾았다. - 모든 것을 잘하는 디자이너는 드물기 때문에, 반드시 필요한 역량과 타협 가능한 조건을 구분하는 데 초점을 맞췄다. - 제품 디자이너의 핵심 역량뿐 아니라 Figma의 가치인 **대담함(Be Bold), 포용성(Be Inclusive), 즐거움(Have Fun)**과 관련된 문화적 요소도 별도로 정리했다. - 팀원 스스로 같은 기준으로 평가해 보며, 자신들이 실제로 평가할 수 있는 역량만 후보자에게 요구하도록 했다. - 이 자기평가는 팀의 강점과 약점을 확인하고, 비현실적인 채용 기준을 줄이는 데 도움이 됐다. ## 구조화된 인터뷰와 편향 완화 - 초기에는 역할 기대치가 불명확했고, 면접 질문과 후보자 논의 방식도 일관되지 않았다. - 다양성과 포용성 워크숍을 통해 면접관이 무의식적으로 기존 편견에 맞춰 평가 기준을 바꿀 수 있다는 점을 인식했다. - 예를 들어 ‘좋은 디자이너는 자기주장이 강해야 한다’는 선입견이 팀의 합의된 기준보다 우선할 수 있다. - 이를 방지하기 위해 정리한 역량과 자질을 채용 도구인 **Lever**의 피드백 양식에 직접 반영했다. - 자유로운 서술만 받는 대신, 각 면접관이 합의된 기준에 근거해 구체적이고 비교 가능한 피드백을 남기도록 했다. ## 채용 담당자를 팀 안으로 참여시키기 - 명확한 기준만으로는 적합한 인재가 자동으로 찾아지지 않으므로 소싱, 추천, 네트워킹이 여전히 중요했다. - 채용 담당자 Korin을 디자인팀에 밀접하게 참여시켜 크리틱과 팀 미팅에 함께 참석하게 했다. - 이를 통해 채용 담당자가 팀의 실제 업무와 문화를 직접 이해하고, 후보자에게 업무를 더 정확하게 설명할 수 있었다. - 디자인팀과 채용팀의 긴밀한 협업이 적합한 인재를 찾는 데 큰 도움이 됐다. ## 팀 구성원의 다양한 배경 - **Lucy** - 시각 디자인과 모션 탐구가 돋보이는 포트폴리오를 통해 합류했다. - 웹사이트와 에이전시 업무부터 휴대용 CNC 기기의 인터페이스 디자인까지 다양한 영역을 경험했다. - 사물의 작동 이유를 끊임없이 질문하고 탐구하는 태도가 강점으로 소개된다. - **Marcin** - Google, Medium, Code for America에서 일한 UI 디자인 경력을 가진 베테랑으로 소개된다. - Google 기념일 로고로 Pac-Man을 재현할 만큼 구현 세부사항에 강하고, 링크 밑줄 같은 작은 인터페이스 요소까지 세심하게 다루는 인물로 묘사된다. Figma의 사례는 팀이 커질수록 채용을 개인의 감이나 인상에 맡기기보다, 필요한 역량을 명시하고 평가 기준을 표준화해야 한다는 점을 보여준다. 특히 채용 기준을 팀 내부에서 먼저 검증하고, 채용 담당자가 실제 업무 문화를 경험하게 하는 방식은 초기 스타트업과 소규모 조직에도 실용적인 접근이다.

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

design-collaborationFigma사용자 경험프로덕트 디자인+1

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

런던 예술 대학교의 디자인 시스템

UAL은 6개 단과대학의 독립적인 정체성 때문에 디지털 경험이 일관되지 않았지만, 웹사이트 개편 과정에서 협업 도구를 Figma로 전환하며 자연스럽게 디자인 시스템을 구축했다. 실시간 공동 편집과 중앙화된 라이브러리는 디자인·개발·외부 에이전시 간의 소통을 개선했고, 결과적으로 웹사이트를 더 빠르고 일관되게 제작할 수 있게 했다. 디자인 시스템은 단순한 컴포넌트 모음이 아니라 여러 채널과 대학 조직을 연결하는 공통 언어로 발전했다. ## 조직 구조가 만든 디자인 일관성 문제 - UAL은 2004년 공식 연합체가 되었으며, 현재 6개 대학으로 구성되어 있다. - 각 대학은 오랜 역사와 고유한 브랜드 정체성을 가지고 있어, 웹사이트마다 서로 다른 스타일을 적용하려는 경향이 있었다. - 그 결과 UAL의 디지털 경험은 채널과 대학별로 분리되고 일관성이 부족했다. - 2017년부터 UX 팀은 디지털 트랜스포메이션 프로그램의 일환으로 사용자 중심의 핵심 디지털 경험을 재설계했다. ## Sketch 협업의 한계와 Figma 전환 - 기존 Sketch 기반 작업에서는 여러 사람이 같은 파일에서 원활하게 협업하기 어려웠다. - 14개 캠퍼스에 흩어진 내부 구성원과 외부 에이전시가 함께 일하면서 다음 문제가 발생했다. - 파일 버전 관리 혼란 - 파일 동기화에 소요되는 시간 - 반복적인 커뮤니케이션과 확인 절차 - 디자인 팀과 개발 팀 사이의 단절 - Figma는 브라우저만 있으면 어디서든 접근할 수 있고, 실시간 공동 편집을 지원했다. - Sketch 파일을 간단히 가져올 수 있어 웹사이트 프로젝트 중간에도 도구를 전환할 수 있었다. - 모든 이해관계자가 하나의 중앙 파일을 기준으로 작업하면서 투명성이 높아지고, 디자인과 개발 간 협업이 개선되었다. ## 웹사이트 개편에서 디자인 시스템으로 확장 - 팀은 웹사이트를 처음부터 구축해야 했기 때문에, 반복 작업을 줄이기 위해 디자인 시스템을 우선적으로 만들기로 했다. - Figma의 컴포넌트와 협업 기능 덕분에 디자인 시스템 구축이 별도의 대형 프로젝트가 아니라 웹사이트 제작 과정에서 자연스럽게 진행되었다. - 디자인 시스템은 웹사이트용 컴포넌트뿐 아니라 여러 채널에 동일한 스타일과 기능을 적용하기 위한 기반으로 정의되었다. - 목표는 대학별로 달랐던 컴포넌트를 조화시키고 제작 프로세스를 표준화하는 것이었다. ## 워크숍을 통한 요구사항과 불일치 파악 - UX 팀은 학생과 비즈니스 파트너를 대상으로 워크숍을 진행했다. - 워크숍의 목적은 다음과 같았다. - 디자인 시스템에 필요한 핵심 기능 파악 - 사용 중인 모든 UI 컴포넌트 목록화 - 대학과 채널별 디자인 차이 및 불일치 발견 - 기존 스타일 가이드를 실제 디지털 자산과 재사용 가능한 컴포넌트로 변환했다. ## 유연한 브랜드 시스템 구축 - UAL의 복잡한 브랜드 구조 때문에 디자인 시스템은 하나의 고정된 스타일만 강제할 수 없었다. - 서로 다른 색상, 타이포그래피, 브랜드 개성을 수용할 수 있도록 유연하게 설계했다. - Figma 팀 라이브러리를 활용해 모든 구성원이 기기나 위치에 관계없이 최신 브랜드 가이드와 자산을 사용할 수 있게 했다. - Figma Styles를 사용하면 색상, 텍스트, 효과 스타일을 분리해 관리할 수 있어 브랜드 변형을 더 유연하게 적용할 수 있었다. - 결과적으로 디자인 시스템은 정적인 문서가 아니라 지속적으로 업데이트되는 ‘살아 있는’ 브랜드 가이드가 되었다. ## 컴포넌트 기반의 빠른 개발 - 디자인 시스템의 컴포넌트를 조합해 기본 페이지를 템플릿으로 만들었다. - 개발 팀은 이 템플릿을 활용해 새로운 페이지를 빠르게 생성할 수 있었다. - Figma에서 디자인과 컴포넌트 구조를 함께 확인할 수 있어, 개발자는 디자인이 코드로 어떻게 구현될지 즉시 파악할 수 있었다. - 디자이너와 개발자가 동일한 시스템을 기준으로 작업하면서 구현 속도와 협업 효율이 높아졌다. ## 실용적인 시사점 - 디자인 시스템은 처음부터 별도의 거대한 프로젝트로 계획하지 않아도, 반복되는 문제를 해결하는 과정에서 자연스럽게 시작할 수 있다. - 여러 조직이나 브랜드가 공존하는 환경에서는 일관성만 강제하기보다 공통 기반과 개별 표현의 유연성을 함께 설계해야 한다. - 최신 컴포넌트와 스타일을 중앙 라이브러리로 관리하고 디자인·개발·이해관계자가 함께 사용하면, 제작 속도와 결과물의 일관성을 동시에 높일 수 있다.

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

design-collaborationFigma디자인 시스템사용자 경험+2

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

Figma의 디자인 사전을 소개

디자인 업계는 예술·인쇄·출판의 역사에서 비롯된 전문 용어가 많아, 디자이너뿐 아니라 엔지니어·기획자·카피라이터·이해관계자에게도 협업 장벽이 될 수 있다. Figma는 구성원 간 원활한 소통을 돕기 위해 70개 용어로 시작한 오픈소스 **Design Dictionary**를 공개했다. 이 사전은 업계 변화에 맞춰 계속 확장되며, 커뮤니티의 제안으로 더욱 포괄적인 자료가 되는 것을 목표로 한다. ## 디자인 용어가 협업을 어렵게 만드는 이유 - 전문 산업에는 각 분야만의 고유한 언어가 있으며, 이는 전문가에게는 정밀한 소통 수단이 된다. - 반면 업계에 새로 들어온 사람에게는 전문 용어가 위압적이고 혼란스럽게 느껴질 수 있다. - 디자인은 사용성, 타이포그래피, 시각 요소 등 세부 개념이 많아 특히 복잡한 어휘 체계를 갖고 있다. - 디지털 인터페이스 제작에서는 조직의 여러 직군이 디자인에 관여한다. - 엔지니어는 디자인을 실제 코드로 구현한다. - 카피라이터나 편집자는 화면에 문구를 추가한다. - 제품 관리자는 전체 작업을 조율한다. - 이해관계자는 디자인을 검토하고 승인한다. - 이들이 같은 용어를 서로 다르게 이해하면 요구사항 전달과 의사결정이 어려워진다. ## Figma Design Dictionary의 목적 - 디자인 관련 기본 용어와 개념을 쉽게 찾아볼 수 있는 용어집이다. - 디자인을 처음 배우는 사람뿐 아니라 디자이너와 협업하는 비디자이너를 대상으로 한다. - Figma가 다양한 배경의 인재를 채용하면서 실제로 겪은 커뮤니케이션 문제에서 출발했다. - 비즈니스, 데이터 분석, 고객 지원, 엔지니어링 등 디자인 비전공자도 디자인 업무에 참여하면서 공통 언어의 필요성이 커졌다. - 용어를 통일해 직군 간 협업과 디자인 관련 논의를 더 명확하게 만드는 것이 핵심 목표다. ## 오픈소스와 커뮤니티 기반 확장 - 사전은 처음 70개 용어로 공개됐으며, 완성된 결과물이 아니라 지속적으로 발전하는 작업으로 소개됐다. - 디자인 업계의 변화와 새로운 개념에 맞춰 항목을 계속 추가할 계획이다. - Figma는 더 포괄적인 자료를 만들기 위해 커뮤니티의 참여를 요청했다. - 특히 다음과 같은 용어와 사용 사례에 대한 의견을 받으려 했다. - White Space - Stroke - Lorem Ipsum - 팀 내 협업을 방해하거나 자주 오해되는 표현 - 디자인 용어가 잘못 사용되는 상황 - 이용자는 사전 하단의 제안 링크를 통해 새로운 항목이나 수정 의견을 제출할 수 있다. ## 실용적인 활용 방법 - 디자인 협업을 시작할 때 팀에서 자주 사용하는 용어를 사전으로 확인하고 정의를 맞추는 것이 좋다. - 회의나 문서에서 모호한 용어가 나오면 개인의 해석에 의존하지 말고 공통 정의를 확인해야 한다. - 비디자이너 구성원의 온보딩 자료나 직군 간 협업 가이드에 용어집을 포함하면 커뮤니케이션 비용을 줄일 수 있다. - 조직에서 자주 혼동하는 표현은 자체 용어집에 추가하고, Figma처럼 지속적으로 갱신하는 방식이 효과적이다.

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

design-collaborationFigma디자인 시스템사용자 경험+2

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

Figma 플랫폼을 소개합니다

Figma는 디자인 파일을 다른 도구·스크립트·웹 앱과 연결하는 **Figma Platform**을 공개하며, 전문 디자인 도구 최초의 웹 API를 지향했다. API를 통해 디자인 데이터를 실시간으로 읽고, 댓글을 주고받고, 이미지로 렌더링할 수 있어 조직 맞춤형 협업 자동화가 가능해진다. 이를 기반으로 디자인을 고립된 파일이 아니라 조직 전체가 공유·검색·활용하는 개방형 데이터로 전환하는 것이 글의 핵심 결론이다. ## Figma Platform의 목표 - Figma를 외부 도구, 사내 스크립트, 웹 애플리케이션과 연결하는 플랫폼을 제공한다. - 기존 데스크톱 디자인 도구는 운영체제, 로컬 파일 경로, 특정 소프트웨어 버전에 종속되어 통합이 어려웠다. - Figma는 웹 기반이므로 서로 다른 컴퓨터나 웹 서비스에서도 디자인의 최신 상태에 접근할 수 있다. - 기업은 조직별 업무 방식에 맞춘 검색, 공유, 모니터링, 자동화 도구를 직접 만들 수 있다. ## 초기 Web API의 세 가지 기능 - **디자인 파일 읽기** - 디자인을 개방형 JSON 형식으로 제공한다. - 도형, 텍스트, 컴포넌트, 프로토타입 링크, 전환 효과, 제약 조건 등 디자인을 구성하는 트리 구조를 확인할 수 있다. - 파일 URL에 포함된 고유 키를 사용해 특정 디자인의 실시간 스냅샷을 가져온다. - **댓글 읽기·쓰기** - 외부 서비스가 Figma 디자인의 댓글을 조회하거나 작성할 수 있다. - 디자인 검토와 협업 프로세스를 다른 업무 도구와 연결할 수 있다. - **이미지 렌더링** - 전체 파일 또는 파일의 일부를 JPG, PNG, SVG 등 표준 이미지 형식으로 변환한다. - 별도의 수동 내보내기 없이 외부 서비스에서 최신 디자인 이미지를 활용할 수 있다. ## 개방형 웹 API가 제공하는 장점 - 특정 운영체제나 설치된 디자인 프로그램에 의존하지 않는다. - 별도의 독점 플러그인 언어나 프레임워크 대신 일반적인 웹 개발 기술을 사용할 수 있다. - 잘 정의된 API를 사용하므로 사내 자동화와 외부 서비스 통합을 빠르게 구현할 수 있다. - 통합 기능을 유지·보수하고 최신 상태로 업데이트하기가 상대적으로 쉽다. - 디자인 데이터를 이미지뿐 아니라 구조화된 정보로 활용할 수 있어 새로운 형태의 협업 도구를 만들 수 있다. ## 실제 활용 사례: Uber와 GitHub - **Uber** - 여러 도시에 분산된 디자인 팀의 작업을 조직 전체에 보여주기 위해 API를 활용했다. - 진행 중인 디자인을 사무실 TV에 실시간으로 표시하는 피드를 만들고 있다. - Dribbble과 유사한 내부 디자인 저장소에서 프로젝트를 탐색하는 기능도 계획했다. - **GitHub** - 아이콘 제작 과정 일부를 자동화해 반복 작업을 줄이고 효율성을 높였다. - 이러한 사례는 API가 단순한 파일 내보내기를 넘어 조직 내부의 가시성, 검색, 자동화 문제를 해결할 수 있음을 보여준다. ## 오픈소스 프로젝트와 외부 통합 - Figma는 커뮤니티가 활용할 수 있도록 여러 데모 프로젝트를 오픈소스로 공개했다. - 예시: - Figma 디자인 맞춤법 검사기 - 생성형 아트 도구 - 디자인을 Ethereum 블록체인에 기록하는 방법 - Avocode, Haiku, Zeplin, Pagedraw 등 다른 디자인·개발 도구와의 통합도 강화했다. - 플랫폼의 가치는 Figma가 모든 기능을 직접 제공하는 데보다 커뮤니티와 기업이 각자의 문제를 해결하는 데 있다. ## 향후 공개 예정 기능 - **Webhooks** - 파일이나 팀에 연결해 디자인 변경 이벤트를 콜백 형태로 전달한다. - 디자인 업데이트를 감지해 외부 시스템을 자동으로 갱신할 수 있다. - **Write API** - 초기 버전은 주로 디자인 데이터를 읽는 데 초점을 맞췄다. - 이후 외부 애플리케이션이 Figma 디자인 자체를 수정할 수 있는 쓰기 API를 제공할 계획이다. - **Extensions** - 인앱 확장 기능은 강력하지만 품질, 안정성, 예측 가능성을 떨어뜨릴 수 있다. - Figma는 개발자 자유와 제품 안정성을 함께 확보할 수 있는 모델을 마련한 뒤 확장 기능을 도입하려 했다. - 당시에는 구체적인 출시 일정이 정해지지 않았다. ## 대규모 협업에서 해결하려는 문제 - 디자인은 UI 디자이너만 사용하는 산출물이 아니라 카피라이터, 엔지니어, 연구자, 마케터, 경영진 등 여러 부서가 함께 다루는 정보가 되었다. - 전통적인 데스크톱 도구에서는: - 파일을 내보내고 업로드해야 공유할 수 있다. - 원본이 변경되면 공유된 파일이 즉시 오래된 버전이 된다. - 경영진이 실시간 작업을 보고 의견을 남기기 어렵다. - 엔지니어가 필요한 최신 에셋을 찾는 데 많은 시간을 쓴다. - 다른 팀이 이미 해결한 문제와 해결책을 발견하기 어렵다. - Figma API는 조직 전체에서 디자인을 실시간으로 공유하고, 검색하고, 모니터링하는 맞춤형 워크플로를 구축하는 기반이 된다. Figma Platform은 디자인 도구를 폐쇄적인 제작 환경에서 개방형 협업 플랫폼으로 확장하려는 시도다. 실제 도입 시에는 API로 최신 디자인 조회·렌더링·댓글 연동부터 시작하고, Webhooks와 자동화 기능을 결합해 사내 디자인 검색 및 배포 시스템으로 발전시키는 접근이 실용적이다.

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

design-collaborationjsonsvgwebhooks+3

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

Figma로부터 사랑을 담아:

Figma는 디자인 협업을 효율화하기 위해 파일 정렬 기능과 `@멘션` 기능을 추가했다. 파일을 최근 수정일뿐 아니라 생성일과 이름순으로 정렬할 수 있게 되었고, 댓글에서 특정 팀원을 멘션하면 이메일과 Figma 알림으로 즉시 전달된다. 이를 통해 필요한 파일과 피드백을 더 빠르게 찾고, 비동기 협업에서 담당자에게 정확히 의견을 전달할 수 있다. ## 파일 정렬로 작업 흐름 정리 - 기존 Figma의 파일 목록은 대부분 **최근 수정일(Last Modified)** 기준으로 자동 정렬됐다. - 최근 작업한 파일을 찾는 데는 유용하지만, 오래된 파일이나 특정 프로젝트의 파일을 찾을 때는 한계가 있었다. - 새로 다음 정렬 기준을 선택할 수 있게 되었다. - 파일 생성일 - 파일 이름 알파벳순 - 기존의 최근 수정일 기준 - 파일이 많아질수록 원하는 디자인 파일을 탐색하는 시간이 줄어들고, 작업 공간을 체계적으로 관리할 수 있다. ## `@멘션`을 통한 대상 지정형 협업 - 디자인 협업은 실시간으로만 이루어지지 않고, 댓글을 통한 비동기 방식으로도 자주 진행된다. - 다음과 같은 상황에서 특정 사람에게 직접 알림을 보낼 수 있다. - 디자이너가 PM에게 특정 화면의 피드백을 요청할 때 - 엔지니어가 프로토타입 구현 중 질문이 생겼을 때 - 카피 에디터가 문구 수정 완료 사실을 디자이너에게 알릴 때 - 사용자는 댓글에 `@`와 팀원의 이름을 입력해 해당 사용자를 멘션할 수 있다. - 멘션된 사용자는 다음 두 방식으로 알림을 받는다. - Figma 내부 알림 - 댓글 내용이 포함된 이메일 - 댓글을 찾으라고 문서 링크만 보내거나, 문서 안에서 직접 댓글을 찾아보라고 안내할 필요가 없어졌다. ## 댓글 알림과 이메일 답장 - 기존에는 특정 사용자를 위한 댓글을 작성해도 상대방에게 이를 원활하게 알릴 방법이 부족했다. - `@멘션`은 댓글의 수신 대상을 명확히 해 “어떤 댓글에 집중해야 하는지” 쉽게 알려준다. - 댓글 알림 이메일에 직접 답장하면, 답변이 Figma의 해당 댓글 스레드에 새 댓글로 추가된다. - 따라서 간단한 피드백이나 답변을 위해 Figma를 다시 열지 않아도 협업을 이어갈 수 있다. ## 사용자 요청을 반영한 기능 개선 - 두 기능 모두 Figma 사용자들이 오랫동안 요청해 온 기능이었다. - 작은 기능이지만 파일 탐색과 피드백 전달이라는 반복적인 작업을 줄여 디자인 업무 시간을 절약하는 데 목적이 있다. - Figma는 사용자들의 지속적인 피드백과 기능 요청이 제품 개선의 중요한 동력이라고 강조했다. 실무에서는 파일 수가 많은 프로젝트에 생성일·이름순 정렬을 활용하고, 특정 담당자의 확인이 필요한 댓글에는 항상 `@멘션`을 사용하는 것이 효과적이다.

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

design-collaborationFigma사용자 경험프로토타이핑+3

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

더 많은 시간, 더 많은

Unfold는 Figma를 도입해 디자인 파일 버전 충돌, 피드백 분산, 개발자 핸드오프 문제를 크게 줄였다. 클라우드 기반 협업과 브라우저 접근성 덕분에 커뮤니케이션에 쓰는 시간이 약 30% 감소했고, 더 빠르게 프로젝트를 진행하며 더 많은 고객을 맡을 수 있게 됐다. 이 글은 에이전시 업무를 하나의 협업 플랫폼으로 통합하는 것이 시간과 비용 절감으로 이어진다는 점을 보여준다. ## 여러 버전과 협업 문제의 해소 - Unfold는 디자이너, 개발자, 마케터, 프로젝트 매니저, 고객 등 다양한 관계자가 참여하는 프로젝트를 진행했다. - 서로 다른 컴퓨터와 운영체제, 각기 다른 디자인 도구를 사용하면서 파일 덮어쓰기와 버전 충돌이 자주 발생했다. - 문제를 해결하기 위해 여러 플러그인을 조합했지만, 단순한 작업에도 복잡한 도구 체계가 필요했다. - Figma는 클라우드에서 작동하므로 모든 사람이 같은 최신 파일에 접근할 수 있고, URL 하나만 공유하면 협업이 가능했다. - Unfold는 버전 관리와 피드백 과정이 단순해지면서 커뮤니케이션에 소요되는 시간이 최소 30% 줄었다고 평가했다. ## 하나의 공간으로 통합된 디자인 프로세스 - Figma는 디자인, 프로토타이핑, 피드백, 개발자 전달을 한 플랫폼 안에서 처리한다. - 기존 Sketch 파일은 Figma의 Sketch importer로 가져올 수 있어 기존 프로젝트를 이전하기 쉬웠다. - 새로운 프로젝트에서는 Figma의 multiplayer 기능을 활용해 팀과 고객이 하나의 문서에서 동시에 아이디어를 스케치했다. - 여러 사람이 실시간으로 참여할 수 있어 초기 브레인스토밍 속도가 빨라졌다. - 무드 보드에는 색상 팔레트, 글꼴 후보, 시각적 레퍼런스를 함께 배치할 수 있었다. - 웹에서 이미지를 문서로 바로 드래그 앤 드롭할 수 있어 파일을 저장하고 다시 업로드하는 과정이 사라졌다. ## 문맥을 유지하는 피드백 - 디자인 파일은 항상 같은 URL에서 최신 상태로 공유됐다. - 디자이너가 파일을 내보내거나 고객에게 새 버전을 업로드할 필요가 없었다. - 고객은 Figma의 댓글 기능으로 원하는 시점에 피드백을 남길 수 있었다. - 댓글이 관련 디자인 프레임에 고정되므로 Slack이나 이메일에 흩어진 피드백보다 맥락을 파악하기 쉬웠다. - 고객 입장에서도 “모든 작업이 한곳에 있다”는 점이 Figma 도입을 설득하는 간단한 장점이 됐다. ## 개발자 핸드오프의 간소화 - 기존에는 Mac을 사용하지 않는 고객의 개발자에게 별도 도구나 구독을 요구해야 했다. - 디자인 파일을 PSD로 변환하기 위해 Illustrator를 거치면서 레이어가 손상되는 문제도 발생했다. - Figma에서는 운영체제와 관계없이 브라우저로 디자인을 확인할 수 있다. - 개발자는 코드 모드에서 에셋과 CSS, Android, iOS 관련 정보를 확인하거나 내보낼 수 있다. - 클라우드의 최신 디자인과 개발자에게 제공되는 정보가 자동으로 연결되어 별도의 동기화가 필요 없다. - 개발자는 보기 전용 권한만으로도 필요한 정보를 확인할 수 있어 고객의 추가 비용 부담도 줄었다. ## 더 많은 프로젝트를 맡을 수 있게 된 효과 - Figma 도입 후 Unfold는 전체 프로세스의 마찰과 반복 작업이 줄어 프로젝트를 더 빨리 완료할 수 있었다. - 작업 흐름이 자연스러워져 팀원들이 도구 자체보다 디자인과 문제 해결에 집중할 수 있었다. - 시간 절약뿐 아니라 협업 경험이 편해진 점도 생산성 향상의 중요한 요인으로 작용했다. - 결과적으로 같은 인력으로 더 많은 업무를 수용할 수 있다는 자신감을 얻었다. 에이전시처럼 내부 팀과 외부 고객, 개발자가 동시에 참여하는 환경에서는 파일 형식보다 **접근성, 단일 최신본, 문맥 기반 피드백, 개발자용 정보 제공**이 중요하다. 따라서 협업 도구를 선택할 때는 개별 기능보다 전체 업무 흐름을 얼마나 하나로 연결하고 반복 커뮤니케이션을 줄이는지 평가하는 것이 좋다.

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

design-collaborationFigma프로토타이핑Android+4

figma·2017년 8월 29일·2분 읽기큐레이션 요약

피그마 + 드롭박

Figma와 Dropbox Paper의 통합으로 Figma 디자인과 프로토타입을 Paper 문서에 실시간 임베드할 수 있게 되었다. 문서에 삽입된 콘텐츠는 최신 디자인으로 자동 업데이트되므로, 팀원들이 오래된 파일을 찾거나 버전을 확인하는 번거로움이 줄어든다. URL을 복사해 붙여넣기만 하면 빠르고 가벼운 라이브 임베드가 생성되는 것이 핵심이다. ## Figma와 Dropbox Paper의 통합 - 2017년 8월 30일부터 Figma 콘텐츠를 Dropbox Paper에 라이브 임베드할 수 있게 됐다. - Figma 디자인과 프로토타입이 Paper 문서 안에서 직접 표시된다. - 원본 Figma 파일이 변경되면 임베드된 콘텐츠도 즉시 최신 상태로 반영된다. - 프로젝트 매니저, 엔지니어, 제품 디자이너가 동일한 최신 디자인을 확인할 수 있다. ## 버전 관리와 협업 문제 해결 - 팀 협업에서는 최신 디자인 파일을 찾기 어렵거나 오래된 버전을 참조하는 문제가 발생하기 쉽다. - 라이브 임베드를 사용하면 문서에 고정된 이미지나 수동으로 갱신해야 하는 링크 대신 항상 최신 디자인을 볼 수 있다. - 디자인이 공유 문서의 맥락 안에 유지되므로, 별도의 도구를 오가며 내용을 확인할 필요가 줄어든다. - Figma가 지향해 온 협업 중심 디자인 환경을 디자인 직군 외의 팀원까지 확장한다. ## Dropbox Paper의 협업 문서 기능 - Dropbox Paper는 팀이 함께 문서를 작성하고 협업하는 문서 플랫폼이다. - Dropbox 계정이 있는 사용자는 이용할 수 있다. - YouTube, GitHub, Facebook 등 여러 외부 서비스와의 통합을 지원한다. - Figma 임베드를 통해 디자인 작업도 문서 기반 협업 흐름에 자연스럽게 포함된다. ## 간단한 사용 방법과 기술적 특징 - Figma 프로젝트 URL을 복사한다. - Dropbox Paper 문서에서 `Command + V`로 붙여넣는다. - 별도의 복잡한 설정 없이 즉시 라이브 문서가 표시된다. - 임베드에 불필요한 애플리케이션 요소를 제거해 코드 크기를 줄였으며, 빠르게 로드되도록 설계했다. ## 실용적인 활용 - 기획 문서에 최신 디자인 시안을 삽입해 기획자와 디자이너가 같은 내용을 확인할 수 있다. - 개발 문서나 이슈에 프로토타입을 임베드해 구현 대상과 상호작용을 쉽게 공유할 수 있다. - 프로젝트 회의 문서에 디자인을 포함하면 별도의 파일 첨부나 버전 안내 없이 최신 상태를 유지할 수 있다. - 디자인 변경이 잦은 프로젝트일수록 정적 이미지보다 라이브 임베드가 유용하다.

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

design-collaborationFigma프로토타이핑github+2

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

한 디자이너가 내

Pivotal의 디자이너와 개발자 간 인수인계는 디자인 파일을 이미지로 내보내고 프로젝트 카드에 반복 업로드하는 방식이라 비효율과 오류가 많았다. Figma를 도입한 뒤에는 최신 디자인을 링크 하나로 공유하고 디자인 위에 직접 댓글을 남길 수 있어, Colby는 프로젝트마다 약 이틀의 문서 관리 시간을 절약했다. 또한 맥락이 포함된 실시간 리뷰가 가능해져 협업과 결과물의 품질에도 긍정적인 영향을 주었다. ### 반복적인 이미지 내보내기와 업로드의 문제 - Colby는 디자인 프레임을 이미지로 export한 뒤 Pivotal Tracker의 개발 카드에 업로드했다. - 프로젝트마다 이 작업을 15~20회 반복해야 했다. - 프로젝트 하나에 수백 개의 카드가 있어 최신 카드를 찾는 데도 많은 시간이 들었다. - 이미지를 업데이트하지 않고 잊어버리면 개발자가 오래된 디자인을 기준으로 작업할 수 있었다. - 이 과정은 디자이너뿐 아니라 개발자의 시간도 낭비하고, 잘못된 구현으로 이어질 위험이 있었다. ### 브라우저 기반 디자인 공유 - Figma 파일은 브라우저에서 관리되므로 별도 프로그램 설치 없이 접근할 수 있었다. - 링크를 공유하면 모든 협업자가 동일한 최신 파일을 확인할 수 있었다. - 디자인이 변경되어도 개발 카드를 매번 이미지로 갱신할 필요가 없었다. - Colby는 카드를 처음 만들 때 Figma 링크만 추가하면 되었고, 프로젝트마다 약 이틀의 작업 시간을 절약했다. - Figma는 단순한 디자인 제작 도구를 넘어 파일 공유와 변경 관리까지 지원하는 “디자인 관리 도구”로 활용되었다. ### 디자인 위에 남기는 맥락 있는 댓글 - 기존 디자인 리뷰에서는 엔지니어들이 포스트잇에 의견을 적고 차례로 구두 공유했다. - 포스트잇은 어떤 디자인 요소에 대한 의견인지 맥락이 분리되어 이해하기 어려웠다. - Figma에서는 댓글을 특정 프레임이나 디자인 영역에 직접 연결할 수 있었다. - 리뷰 참여자는 의견이 적용되는 위치를 즉시 확인할 수 있어 피드백이 더 명확해졌다. - 결과적으로 주간 디자인 리뷰가 더 짧고 효율적으로 진행되었다. ### 실시간 협업과 리뷰 조정 - 엔지니어가 파일을 검토하는 동안 Colby는 각자의 커서와 활동을 실시간으로 확인할 수 있었다. - 특정 컴포넌트처럼 이미 스타일 가이드로 정해진 부분에 리뷰가 집중되면, Colby가 피드백 방향을 조정할 수 있었다. - 리뷰를 받는 디자이너가 어떤 영역에 피드백을 원하는지 직접 안내할 수 있었다. - 디자이너와 개발자가 같은 파일을 보며 의견을 주고받아 정보 전달의 누락을 줄였다. ### 협업 품질 향상 - Figma는 디자인에서 개발로 넘어가는 인수인계 과정의 반복적인 관리 작업을 줄였다. - 팀은 파일 버전과 피드백을 추적하는 데 쓰던 시간을 제품의 완성도에 더 투자할 수 있었다. - Pivotal은 개발자와 디자이너를 포함한 다양한 구성원의 의견이 더 나은 제품을 만든다고 보았고, Figma가 이를 지원한다고 평가했다. 실무에서는 디자인 파일을 이미지로 복사해 전달하기보다 최신 원본 링크를 단일 기준으로 삼고, 피드백은 해당 디자인 요소에 직접 남기는 방식이 효과적이다. 이를 위해 프로젝트 관리 카드에 Figma 링크와 버전 규칙을 명확히 기록하면 오래된 시안으로 작업하는 문제를 줄일 수 있다.

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

design-collaborationFigma디자인 시스템사용자 인터페이스+2

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

Figma를 이끌 새로운 얼굴

Figma는 디자인 협업 도구에 대한 수요가 커지는 가운데, 사업의 다음 단계로 성장하기 위해 핵심 리더 두 명을 영입했다고 발표했다. Atlassian 출신 Eric Wittman은 첫 COO로서 운영·수익·시장 진출 전략을 맡고, Asana 출신 Kris Rasmussen은 엔지니어링 부사장으로 기술 조직과 제품 개발을 이끈다. 이들의 합류를 통해 Figma는 협업 중심의 제품 비전을 강화하고 회사 확장에 필요한 조직 역량을 갖추려 한다. ## 디자인 협업 도구 시장의 성장 - 기술 산업이 성숙하면서 고객이 사랑하는 제품을 만들기 위한 디자인의 중요성이 커지고 있다. - IBM과 GE 같은 대기업이 디자이너를 적극적으로 채용하고, Facebook은 엔지니어 4~5명당 디자이너 1명을 두는 방향을 추진하고 있다. - 그러나 디자이너가 실제 업무에서 사용하는 기술과 도구는 이러한 수요를 충분히 따라가지 못하고 있다. - Figma는 여러 사람이 함께 작업할 수 있도록 협업을 쉽게 만드는 것을 제품 전략의 핵심 기준으로 삼고 있다. ## Eric Wittman의 COO 합류 - Eric Wittman은 Atlassian에서 개발자 도구 사업을 이끌었으며, Bitbucket 운영 경험을 보유하고 있다. - Figma의 첫 COO로서 다음 업무를 담당한다. - 채용과 재무 등 회사 운영 프로세스 확장 - 시장 진출(GTM) 전략 - 매출과 수익 모델 관리 - 회사 전략 및 가치 정립 - 합류 초기부터 Figma의 가격 정책을 출시하고 회사 전략과 가치를 구체화하는 데 기여했다. - Macromedia 고객지원에서 시작해 Flash 제품관리 책임자까지 성장했으며, Songbird CEO와 Atlassian 개발자 도구 총괄을 거쳤다. - 운영과 사업 전문가이면서도 제품에 깊은 관심을 가진 인물이라는 점이 Figma와 잘 맞는다고 평가받았다. ## Kris Rasmussen의 엔지니어링 리더십 - Kris Rasmussen은 처음에는 주 2일 근무하는 파트타임 계약자로 Figma에 합류했다. - 짧은 근무 시간에도 팀 내에서 자연스럽게 리더 역할을 하며 다음과 같은 기여를 했다. - 논쟁이나 의견 충돌이 있을 때 핵심 쟁점을 제시 - 팀이 결정을 내리고 업무를 진전시키도록 지원 - 조용하지만 영향력 있는 방식으로 팀을 이끔 - Asana 초기 엔지니어링 조직을 이끌며 협업 제품의 인프라 구축과 팀 운영을 경험했다. - Aptana에서 웹 애플리케이션 개발자 도구의 엔지니어링 확장을 담당했고, 개인 프로젝트로 3D 그래픽 애플리케이션도 개발했다. - Figma에서는 세계적 수준의 기술 조직을 구축하고 여러 엔지니어링 프로젝트를 총괄한다. ## 성장 단계에 맞춘 조직 확장 - Figma는 제품을 만드는 것뿐 아니라, 빠르게 성장할 수 있는 운영·수익·기술 조직을 함께 구축하려 한다. - COO 영입으로 사업 전략과 운영 체계를 강화하고, 엔지니어링 부사장 영입으로 기술 인프라와 개발 조직의 확장을 추진한다. - 두 리더 모두 협업형 소프트웨어 기업에서 성장 경험을 쌓았다는 공통점이 있다. - 회사는 엔지니어, 디자이너, 작가, 제품 관리자 등 디자인에 열정을 가진 인재를 추가로 채용할 계획이다. Figma의 사례는 제품 비전이 명확한 초기 기업이 성장 국면에 진입할 때, 제품을 이해하는 사업 리더와 협업 기술에 경험이 있는 엔지니어링 리더를 함께 영입하는 전략을 보여준다.

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

design-collaborationFigmasaasdeveloper-tools+2