techlist.io
KREN

프로토타이핑

139 개의 포스트

figma2분 읽기큐레이션 요약

개편된 댓글 기능으로 작업 흐

Figma는 댓글 기능을 개선해 팀이 피드백을 더 쉽게 남기고, 이해하고, 반영할 수 있도록 했다. 댓글 접근성을 높이고, 짧고 구체적인 피드백을 유도하며, 디자이너가 작업 흐름을 유지한 채 댓글을 관리할 수 있게 만든 것이 핵심이다. 이를 통해 더 많은 협업자가 디자인 과정에 참여하면서도 피드백 과부하를 줄이는 것이 목표다. ## 댓글 접근성 향상 - 파일을 열어 보는 사람과 프로토타입 프레젠테이션 모드의 사용자가 댓글 사이드바를 쉽게 찾을 수 있도록 개선했다. - Figma에 익숙하지 않은 협업자도 댓글을 남기고 기존 피드백을 확인할 위치를 명확히 알 수 있게 했다. - 별도 도구를 사용하거나 피드백 자체를 생략하는 문제를 줄이고, 더 많은 구성원의 의견을 디자인 맥락 안에서 받을 수 있도록 했다. ## 더 구체적이고 이해하기 쉬운 피드백 - 댓글 작성창을 작게 만들어 한 댓글에 여러 질문을 섞기보다 짧고 명확한 의견을 남기도록 유도했다. - 리액션 기능을 추가해 간단한 동의나 감정을 빠르게 표현할 수 있게 했다. - 리액션은 댓글 스레드를 불필요하게 길게 만들지 않고, 다른 사람도 부담 없이 의견을 보탤 수 있도록 돕는다. - 여러 디자인이나 스티키 그룹처럼 넓은 범위에 대한 개념적 피드백은 캔버스 영역을 지정해 댓글로 남길 수 있다. - 특정 디자인 세부 사항부터 넓은 영역에 대한 의견까지, 피드백을 관련된 위치와 함께 확인할 수 있다. ## 작업 흐름을 유지하는 댓글 관리 - 댓글 핀이 기본적으로 표시되어 중요한 피드백을 놓치기 어렵게 했다. - 디자인을 수정하는 동안에도 관련 댓글을 열어 둔 채 작업할 수 있도록 개선했다. - 댓글 핀에는 작성자의 아바타와 댓글 미리보기가 표시되어, 누가 어떤 의견을 남겼는지 빠르게 파악할 수 있다. - 같은 영역에 댓글이 여러 개 있으면 클러스터로 묶어 캔버스가 댓글로 과도하게 복잡해지는 것을 방지한다. - 단순화된 화면 구성을 통해 피드백이 집중된 영역을 한눈에 확인할 수 있다. ## 많은 댓글을 빠르게 정리하는 기능 - 키워드나 작성자 이름으로 댓글을 검색할 수 있다. - 날짜를 기준으로 댓글을 정렬할 수 있다. - 즉시 답변하기 어려운 댓글은 ‘읽지 않음’으로 표시해 나중에 다시 확인할 수 있다. - 이러한 기능은 사일런트 크리틱, 디자인 스프린트 등 댓글이 많이 발생하는 협업 상황에서 피드백을 체계적으로 처리하도록 돕는다. 실무에서는 한 댓글에 여러 요청을 몰아넣기보다 질문과 요구사항을 나누고, 가능한 경우 관련 캔버스 영역에 댓글을 남기는 것이 좋다. 디자이너는 검색·정렬·읽지 않음 표시를 활용해 피드백을 우선순위별로 처리하면 작업 흐름을 유지하면서도 협업 의견을 놓치지 않을 수 있다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figma사용자 경험figjam+2
figma3분 읽기큐레이션 요약

Figma의 새로운 소식:

Figma의 2021년 10월 업데이트는 협업 방식을 유연하게 만들고, 반복적인 작업을 자동화하며, 아이디어를 더 빠르게 실험하도록 돕는 데 초점을 맞췄다. FigJam에는 위젯·플러그인·오픈 세션이 추가됐고, Figma 프로토타이핑에는 인터랙티브 컴포넌트와 상호작용 관리 기능이 도입됐다. 또한 대규모 디자인 시스템을 지원하기 위한 브랜칭도 소개됐다. ## FigJam 협업 기능 확장 ### 위젯으로 협업 공간 사용자화 - FigJam 파일에 위젯을 클릭해 추가하고, 팀의 협업 방식에 맞게 보드를 구성할 수 있다. - **Photo Booth**를 사용하면 보드에 셀카를 추가할 수 있다. - **Alignment Scale**로 팀원들의 현재 상태나 의견을 확인할 수 있다. - **Org Chart**를 활용해 팀 구조를 시각화할 수 있다. ### 플러그인으로 작업 속도 향상 - 위젯이 협업 자체를 위한 기능이라면, 플러그인은 아이디어를 표현하고 정리하는 작업을 빠르게 해준다. - **Tour Guide**는 FigJam 보드를 슬라이드 쇼 형식의 프레젠테이션으로 변환한다. - **Color Picker**는 스티커와 도형에 사용할 색상 선택지를 확장한다. - **Unsplash** 플러그인으로 이미지 자료를 바로 검색하고 삽입할 수 있다. ### 툴바와 오픈 세션 - FigJam 파일의 툴바에서 플러그인과 위젯을 직접 탐색할 수 있다. - 브레인스토밍, 워크숍, 리서치 등 목적별 **FigJam 템플릿**을 제공한다. - 개발자 협업을 위해 **코드 블록**과 새로운 도형 및 고급 다이어그램 기능을 추가했다. - **Open sessions**를 사용하면 방문자가 계정을 만들지 않아도 FigJam 파일에 참여할 수 있다. ## 인터랙티브 컴포넌트로 프로토타이핑 개선 ### 재사용 가능한 인터랙티브 컴포넌트 - **인터랙티브 컴포넌트**를 사용하면 재사용 가능한 UI 요소에 상호작용을 정의할 수 있다. - 동일한 요소의 상태와 동작을 반복해서 연결하는 작업이 줄어든다. - 프로토타입 제작에 드는 시간을 줄이고, 팀이 디자인 실험과 반복 개선에 더 집중할 수 있다. ### 상속된 상호작용 숨기기 - 컴포넌트 인스턴스에서는 메인 컴포넌트로부터 상속된 상호작용을 기본적으로 숨길 수 있다. - 복잡한 프로토타입에서도 현재 인스턴스에 직접 설정된 동작을 쉽게 파악할 수 있다. - 결과적으로 프로토타입 편집과 개발자 핸드오프의 가독성이 개선된다. ### 기타 프로토타이핑 업데이트 - `Shift + E` 단축키로 디자인 탭과 프로토타입 탭을 전환할 수 있다. - 캔버스에서 모든 사용자가 프로토타입 상호작용을 확인하고 탐색할 수 있다. - 사용자 테스트 시 뷰어의 기본 키보드 탐색을 비활성화할 수 있다. - 프로토타입 상호작용을 복사하고 붙여넣어 반복 설정을 줄일 수 있다. ## 대규모 디자인 시스템 지원 - Figma는 디자인 시스템의 일관성을 유지하면서도 새로운 아이디어를 실험할 수 있는 환경을 제공하는 것을 목표로 한다. - 이번 업데이트에서는 여러 디자인 방향을 독립적으로 실험하고 관리할 수 있는 **브랜칭(Branching)** 기능을 소개했다. - 브랜칭에 대한 구체적인 동작과 활용 방법은 별도의 상세 글에서 설명한다. 이번 업데이트는 FigJam에서는 협업 진입 장벽을 낮추고, Figma에서는 프로토타이핑 반복 작업을 줄이는 방향으로 구성됐다. 팀 단위로 작업한다면 FigJam의 템플릿·위젯·오픈 세션을 활용하고, 디자인 시스템을 운영한다면 인터랙티브 컴포넌트와 브랜칭을 도입하는 것이 실용적이다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figma디자인 시스템figjam+4
figma3분 읽기큐레이션 요약

인터랙티브 컴포넌

Figma는 인터랙티브 컴포넌트를 통해 시각 디자인과 프로토타이핑 사이의 간극을 줄이고, 더 적은 작업으로 실제 동작에 가까운 디자인을 만들 수 있도록 했다. 컴포넌트의 여러 variant 사이에 상호작용과 애니메이션을 정의하면 인스턴스가 프로토타이핑 모드에서 바로 작동하며, 팀 단위의 공유와 반복 작업도 쉬워진다. 또한 단축키, 캔버스 정리, 인터랙션 복사·붙여넣기 등 프로토타이핑을 빠르게 만드는 기능도 함께 제공한다. ## 인터랙티브 컴포넌트의 목적 - 기존에는 시각 디자인과 인터랙션 설계를 위해 도구를 전환하거나 프레임을 수동으로 연결해야 했다. - 이런 번거로움 때문에 프로토타이핑을 생략하면 개발 단계에서 추가 작업이 발생하거나 사용자 경험 목표를 놓칠 수 있었다. - 인터랙티브 컴포넌트는 디자인 과정에서 시각적 형태와 동작을 함께 탐색하도록 지원한다. - 2021년 10월 기준 베타를 종료하고 모든 사용자가 이용할 수 있게 되었다. ## 컴포넌트 variant 기반 상호작용 - 컴포넌트 세트 안의 여러 variant 사이에 전환, 상호작용, 애니메이션을 정의할 수 있다. - 해당 컴포넌트의 인스턴스는 프로토타이핑 모드에서 별도의 연결 작업 없이 즉시 동작한다. - 체크박스 선택, 아코디언 메뉴 열기 등 여러 UI 상태를 하나의 컴포넌트 구조로 표현할 수 있다. ## 프로토타입 복잡성 감소 - 과거에는 상태별로 여러 프레임을 만들어야 했지만, 인터랙티브 컴포넌트를 사용하면 하나의 프레임 안에서 상태와 동작을 관리할 수 있다. - 프레임 수가 크게 줄어들어 프로토타입을 만들고 수정하기 쉬워진다. - AWS 사례에서는 일부 프로젝트의 프레임 수가 10분의 1 이하로 감소했다고 설명한다. ## 프로토타입 제작 속도 향상 - 사용된 위치 바로 옆에서 인터랙티브 컴포넌트의 모든 상태를 편집할 수 있다. - 기존 작업 흐름을 벗어나지 않고 컴포넌트를 복제해 새로운 버전을 실험할 수 있다. - 동일한 버튼 수십~수백 개에 hover 상태를 반복 설정하는 대신, 컴포넌트에 동작을 한 번 정의해 재사용할 수 있다. ## 디자인 시스템과 팀 협업 - 인터랙티브 컴포넌트는 라이브러리를 통해 팀 전체에 공유할 수 있다. - 팀원은 라이브러리에서 컴포넌트를 한 번의 클릭으로 가져와 프로토타입에 사용할 수 있다. - 인터랙션이 디자인 시스템에 내장되므로 Figma에 익숙하지 않은 구성원도 적은 도움으로 동작하는 프로토타입을 만들 수 있다. - 베타 기간 동안 성능, 로딩 시간, 안정성이 개선되었고 관찰 모드와 오토 레이아웃 지원도 추가되었다. ## 일상적인 작업을 빠르게 만드는 기능 - **디자인·프로토타이핑 탭 전환** - `Shift + E` 단축키로 디자인 탭과 프로토타이핑 탭을 빠르게 전환할 수 있다. - 오브젝트 편집과 사용자 경험에 대한 동작 설계를 자연스럽게 오갈 수 있다. - **캔버스 정리** - 프로토타입 연결을 나타내는 파란색 화살표인 “noodle”이 지나치게 많아지는 문제를 개선했다. - 메인 컴포넌트에서 상속된 인스턴스의 인터랙션은 캔버스에서 숨겨 복잡한 프로토타입을 더 쉽게 파악할 수 있다. - **인터랙션 복사·붙여넣기** - 프로토타입 인터랙션을 복사해 다른 프레임에 붙여넣을 수 있다. - 반복적인 연결 작업을 줄여 프로토타입 제작 속도를 높인다. 실무에서는 자주 재사용되는 버튼, 입력창, 메뉴, 토글 등의 상태와 전환을 인터랙티브 컴포넌트로 라이브러리화하는 것이 효과적이다. 그러면 디자이너는 화면별 연결보다 사용자 흐름과 인터랙션 검증에 집중할 수 있고, 팀 전체가 일관된 동작을 사용하게 된다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figma디자인 시스템auto-layout+2
figma3분 읽기큐레이션 요약

Elsewhen이 고객을 위한 디지털 제품

Elsewhen은 Figma를 최종 화면을 만드는 도구가 아니라, 탐색·워크숍·프로토타이핑·협업 전 과정을 연결하는 공동 작업 공간으로 활용한다. 이를 통해 Spotify의 디자인 생산성을 체계적으로 분석하고, Inmarsat의 분산된 디자인 업무를 하나의 디자인 시스템으로 통합했다. 두 사례는 협업 환경과 공통 자산을 정비하면 반복 작업을 줄이고 창의성과 제품 출시 속도를 높일 수 있음을 보여준다. ## Figma를 중심으로 한 협업 방식 - 영국의 디지털 제품 컨설팅 회사 Elsewhen은 기업용·B2B 도구를 설계하며 고객사의 비효율적인 시스템과 업무 프로세스를 개선한다. - Figma를 디자인 결과물 제작에만 사용하지 않고 다음 전 과정에 활용한다. - 아이디어 탐색 - 워크숍과 인터뷰 - 고객과의 공동 작업 - 프로토타이핑 - 디자인 자산 공유 및 배포 - 에셋을 별도로 내보내고 업로드·배포하던 반복 단계를 줄여 팀이 문제 해결과 제품 설계에 더 집중할 수 있게 했다. ## Spotify의 디자인 생산성 개선 - Spotify는 디자인 생산성을 단순히 화면·컴포넌트 개수나 작업 시간으로 평가하는 방식에 한계가 있다고 보았다. - 창의적인 업무에서는 산출량보다 디자이너가 실제 디자인에 얼마나 집중할 수 있는지, 업무 흐름을 방해하는 요소가 무엇인지 파악하는 것이 중요했다. - Elsewhen과 Spotify는 현재의 업무 흐름을 분석하고 개선 기회를 찾기 위한 **Design Productivity Blueprint**를 공동 개발했다. - 이 자료는 공개된 Figma 파일 형태로 제공되며 다음을 포함한다. - 디자인 팀의 업무를 분석하는 워크숍 - 구성원 인터뷰 템플릿 - workflow의 문제점과 병목을 찾는 방법 - 목표는 반복적이고 부수적인 업무에 쓰는 시간을 줄이고, 디자이너가 실제 디자인과 창의적 문제 해결에 더 많은 시간을 쓰도록 하는 것이다. ## Inmarsat의 디자인 시스템 구축 - 위성 통신 기업 Inmarsat은 여러 지역에 분산된 조직과 외부 디자인 에이전시에 의존하는 구조 때문에 디자인 협업에 어려움을 겪었다. - 사내 디자인 팀이 없고 공통 디자인 자산의 단일 기준점도 없어 다음 문제가 발생했다. - 새 디자이너의 온보딩이 어려움 - 개발자와 외부 디자이너 사이에 제품 맥락이 단절됨 - 디자이너들이 컴포넌트를 반복해서 처음부터 제작함 - 제품 출시 과정이 지연됨 - Elsewhen은 Inmarsat의 기존 셀프서비스 포털 프로젝트를 기반으로 첫 번째 Figma 디자인 시스템을 만들었다. - 실제 제품에 사용되는 요소를 토대로 다음과 같은 공통 컴포넌트 체계를 구축했다. - 타이포그래피 - 버튼 - 아이콘 - 그리드 - 기타 반복적으로 사용되는 UI 요소 - Figma를 디자인 컴포넌트와 에셋의 단일 기준점으로 삼아 사내 디자이너, 개발자, 협력 에이전시가 동일한 자료에 쉽게 접근할 수 있도록 했다. - 그 결과 컴포넌트 재작업이 줄고, 새로운 제품을 더 빠르게 구축하며 기술 변화에도 대응하기 쉬워졌다. ## 두 사례에서 얻는 협업 원칙 - 생산성은 단순한 산출량이 아니라 업무 흐름의 마찰을 얼마나 줄였는지로 평가해야 한다. - 디자인 시스템은 추상적으로 한 번에 만드는 것이 아니라 실제 진행 중인 제품에서 출발하면 실용적인 기반을 마련하기 쉽다. - 디자인·개발·외부 파트너가 동일한 파일과 컴포넌트를 사용하면 정보 단절과 중복 작업을 줄일 수 있다. - 협업 도구는 결과물을 전달하는 수단을 넘어 탐색부터 검증까지 모든 참여자가 함께 작업하는 공간이 되어야 한다. 실무적으로는 팀의 반복 작업과 협업 병목을 먼저 조사한 뒤, 공통 컴포넌트와 워크숍 템플릿을 하나의 공유 공간에 축적하는 방식이 효과적이다. 이를 통해 디자인 품질뿐 아니라 팀의 작업 속도와 창의적 여유도 함께 개선할 수 있다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figma디자인 시스템collaborative-design+2
figma3분 읽기큐레이션 요약

피그마 인사이드: 더 협

Figma는 초기 아이디어 단계의 협업을 Figma 디자인 파일보다 FigJam에 맡기면서 더 개방적이고 포용적인 디자인 프로세스를 만들었다. FigJam은 완성도 높은 결과물보다 아이디어 발산, 비동기 피드백, 디자이너·PM·엔지니어 간 공동 설계에 집중하게 한다. 그 결과 팀은 기술적 제약과 사용자 경험을 함께 검토하며 더 빠르게 기능을 구체화할 수 있었다. ## 초기 단계의 완성도 집착 줄이기 - Figma는 세밀한 디자인과 빠른 반복에 강하지만, 아이디어를 발산해야 하는 초기 단계에는 지나친 픽셀 단위 수정으로 이어질 수 있다. - FigJam은 시각적 결과물을 쉽게 만들되 완성도에 얽매이지 않도록 해, 팀이 디자인보다 아이디어와 사용자 반응에 집중하게 한다. - FigJam 기능을 기획할 때 디자이너 Jenny Wen은 트윗과 Slack 메시지 형태의 컴포넌트를 준비했다. - 팀원들은 컴포넌트를 복제해 기능 출시 후 사용자가 보일 법한 반응을 자유롭게 작성했다. - 구체적인 문구보다 사용자가 느낄 감정과 긍정적인 반응을 탐색하는 데 초점을 맞췄다. - 워크숍의 범위를 제한한 덕분에 세부 사항에 빠지지 않고 더 많은 아이디어를 빠르게 수집할 수 있었다. - 이후 반응이 좋은 아이디어를 Figma 파일로 옮겨 실제 디자인으로 발전시켰다. ## 비동기 방식으로 의견과 의사결정 정리하기 - FigJam의 스티키 노트에 작성자 이름을 표시하는 기능을 설계하면서 다음과 같은 여러 문제가 생겼다. - 사용자가 자신의 이름을 수정할 수 있는가 - 다른 사람이 스티키 노트를 수정하면 이름은 어떻게 바뀌는가 - 스티키 노트를 복사·붙여넣기하면 작성자 정보는 어떻게 처리되는가 - Jenny는 알파 사용자와 팀원에게 받은 피드백을 FigJam에 시각적으로 모아 분류했다. - 분류된 의견을 바탕으로 의사결정 트리를 만들고, 제안한 해결책을 Slack으로 공유했다. - 협업자들은 회의에 참석하거나 별도의 문서를 읽지 않고도: - 설계자의 사고 과정을 따라가고 - 의견을 추가하며 - 스탬프로 선호하는 방안에 투표할 수 있었다. - FigJam은 단순한 브레인스토밍 도구가 아니라, 복잡한 상호작용 문제를 공유하고 합의하는 문서 역할도 했다. ## 디자이너와 엔지니어의 공동 설계 - 디자이너 Keeyen Yeo는 FigJam의 하이파이브 기능을 설계하며 실제 사람들의 하이파이브 동작을 기본 도형과 연결선으로 표현했다. - 이전에는 종이에 아이디어를 스케치했기 때문에 팀원들이 과정에 참여하기 어려웠지만, FigJam에서는 같은 파일에서 여러 탐색안을 함께 수정할 수 있었다. - 디자이너와 제품 파트너는 상호작용 흐름을 반복적으로 검토하며 기능을 공동 설계했다. - 엔지니어 Willy Wu는 하이파이브 모드가 활성화되는 조건과 커서 감지 로직 등 기술적 측면을 다이어그램으로 정리했다. - 한 공간에서 사용자 경험과 구현 가능성을 동시에 논의함으로써: - 기술적으로 실현 가능한 범위를 파악하고 - 사용자에게 자연스러운 상호작용을 찾으며 - 여러 차례의 반복을 통해 최종 흐름을 완성할 수 있었다. ## 실용적인 시사점 초기 디자인 협업에서는 완성도 높은 화면보다 아이디어를 쉽게 표현하고 수정할 수 있는 환경이 중요하다. 팀의 참여를 넓히려면 범위를 제한한 워크숍, 시각적인 의사결정 기록, 비동기 투표와 피드백을 활용하고, 아이디어가 구체화된 뒤에 Figma와 같은 고정밀 도구로 전환하는 방식이 효과적이다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figma사용자 경험figjam+2
figma3분 읽기큐레이션 요약

드롭박스의 일하는 방식 리

코로나19로 Dropbox는 사무실 중심 문화를 버리고 ‘virtual-first’ 업무 모델로 전환하면서, 온라인에서 협업과 창의성을 재현하는 방식을 다시 설계했다. 디자인팀은 Figma를 단순한 디자인 도구가 아니라 브레인스토밍, 리뷰, 핸드오프, 부서 간 커뮤니케이션이 이루어지는 업무의 중심 공간으로 활용했다. 또한 Figma 사용법을 전사적으로 교육해 디자인 외 조직까지 시각적 협업에 참여하도록 만들었다. ## 사무실 중심 문화에서 virtual-first로 - Dropbox는 12개 글로벌 오피스에 Maker Room과 협업 공간을 운영하며 대면 창의성을 업무 문화의 핵심으로 삼고 있었다. - 디자인팀은 포스트잇, 마커, 장난감 등을 활용해 디자인 스프린트와 즉석 브레인스토밍을 진행했다. - 원격근무에서는 우연히 만나 아이디어를 주고받거나 같은 공간에서 자연스럽게 몰입하는 일이 어려워졌다. - 따라서 기존의 물리적 협업 방식을 온라인 환경에 맞게 의도적으로 재설계해야 했다. ## Figma를 활용한 원격 협업 - Dropbox 디자인팀은 2018년 Sketch에서 Figma로 전환한 덕분에 브레인스토밍, 와이어프레임, 프로토타이핑, 댓글 작성 등 원격 협업의 기반을 이미 갖추고 있었다. - 대면 디자인 리뷰 대신 Figma의 **관찰 모드(Observation mode)** 를 사용해 발표자의 화면을 실시간으로 따라갔다. - 디자이너들은 책상 옆에서 함께 작업하는 대신 Figma 링크를 공유하고 같은 파일에 들어가 아이디어를 빠르게 수정했다. - 엔지니어와 PM도 Figma 기반 디자인 스프린트에 참여하면서 부서 간 협업이 쉬워졌다. - 디자인 파일 자체가 결과물뿐 아니라 논의와 의사결정이 기록되는 커뮤니케이션 공간이 되었다. ## 비동기 핸드오프로 커뮤니케이션 단순화 - Design System 팀과 Brand Studio 팀은 아이콘 전달 과정을 Figma 템플릿으로 표준화했다. - 브랜드 디자이너가 아이콘 작업을 완료하면 해당 페이지에 체크 표시를 남긴다. - 디자인 시스템 팀은 매주 월요일 파일을 확인해 새 아이콘을 마스터 라이브러리에 반영하고 게시한다. - 별도의 반복적인 메시지나 진행 상황 확인 없이 파일 상태만으로 업무 진행 여부를 알 수 있게 되었다. - 이 방식은 다른 협업 라이브러리에도 적용할 수 있는 효율적인 비동기 프로세스로 평가됐다. ## Figma를 전사 협업 도구로 확장 - 디자인팀은 다른 부서가 Figma를 사용할 수 있도록 댓글, 내보내기, 화면 보기 및 따라가기 기능을 중심으로 워크숍을 진행했다. - 워크숍에는 마케팅, 리서치, 데이터 사이언스 등 200명 이상의 구성원이 참여했다. - 교육의 목적은 원격 환경에서도 실제 사무실의 화이트보드처럼 함께 보고, 말하고, 아이디어를 발전시키게 하는 것이었다. - 디자인 외 조직도 Figma에서 다음과 같이 활용하기 시작했다. - QA: 디자인 플로우를 복제해 테스트 계획과 테스트 케이스 작성 - 디자인 리서치: 설문 데이터와 정성적 인사이트를 나란히 배치해 발표 - 여러 조직: 프레젠테이션 공동 제작 - 그 결과 Figma는 Dropbox 전체 구성원이 시각적으로 소통하고 공동 작업하는 공용 공간으로 자리 잡았다. ## 실용적인 시사점 원격 협업을 정착시키려면 기존 대면 업무를 화상회의로 단순히 옮기는 데 그치지 말고, 협업 산출물·상태·의사결정을 하나의 공유 공간에 남기는 방식으로 프로세스를 재설계해야 한다. 특히 명확한 템플릿, 상태 표시, 비동기 핸드오프 규칙을 마련하고 비디자이너까지 도구 교육에 참여시키는 것이 효과적이다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figma디자인 시스템remote-collaboration+2
figma3분 읽기큐레이션 요약

킴벌리클라크가 사랑

Kimberly-Clark은 변화하는 소비자 선호와 경쟁 심화에 대응하기 위해 디지털 경험과 디자인 업무 방식을 혁신했다. Figma를 단일 협업 플랫폼으로 도입하면서 디자이너, 마케팅, 브랜드, 개발자 간 협업이 빨라졌고, 실제로 한 웹사이트의 가입률을 71% 높였다. 이 사례는 디자인 도구 통합과 실시간 협업이 제품 출시 속도와 사용자 경험을 동시에 개선할 수 있음을 보여준다. ## 디지털 중심 성장 전략 - Kleenex, Scott, Huggies 등을 보유한 Kimberly-Clark은 전 세계 175개국에서 사업을 운영한다. - 400개 이상의 소비자 대상 웹사이트와 다양한 디지털 제품을 관리하고 있다. - 소비자 취향 변화, 경쟁 심화, 생산비 증가로 성장세가 둔화되자 2022년 창립 150주년을 목표로 성장 가속화 전략을 추진했다. - 가격 책정, 제조, 유통, 진열, 영업, 인사 등 거의 모든 업무 과정에 디지털 요소가 포함되어 있었다. - 코로나19 이후에는 수요 변화에 맞춰 생산량과 재고를 재배분했으며, 해당 분기 매출은 46억 1천만 달러를 기록했다. ## 기존 디자인 프로세스의 비효율 - 디자이너들이 독점적인 Mac 기반 애플리케이션에서 혼자 수주일 동안 작업했다. - 완성한 파일을 별도의 클라우드 프로토타이핑 도구에 업로드한 뒤 이해관계자의 피드백을 기다려야 했다. - 수정이 발생하면 같은 과정을 반복해야 했다. - 개발 단계에서는 Mac을 사용하지 않는 개발자에게 디자인 파일을 전달하는 과정에서 추가적인 문제가 생겼다. - 여러 브랜드와 국가에 맞춰 디자인을 현지화해야 했기 때문에, 이러한 단절이 제품 출시 속도를 더욱 늦췄다. ## Figma를 통한 실시간 협업 - Figma를 도입해 디자인, 프로토타이핑, 피드백 과정을 하나의 웹 기반 플랫폼으로 통합했다. - 파일을 로컬에 저장할 필요가 없고, 초대받은 사람이 쉽게 파일을 열어 보고 편집할 수 있었다. - Figma를 모든 팀이 참조하는 단일 정보원으로 활용하면서 파일 버전 관리와 전달 과정이 단순해졌다. - 피드백 회의가 일방적인 검토 자리가 아니라 브랜드·마케팅·디자인·기타 이해관계자가 함께 작업하는 실시간 협업 세션으로 바뀌었다. - 참여자들이 디자인 변경 사항을 즉시 확인하고 제작 과정에 직접 참여할 수 있게 되었다. ## 데이터로 검증한 디자인 개선 - 팀은 디자인 효율성뿐 아니라 실제 사용자 경험의 개선 여부도 측정했다. - 주요 지표로 이탈률, 재방문자, 사이트 체류 시간, 쿠폰·뉴스레터·보상 프로그램 가입률 등을 추적했다. - 한 웹사이트의 가입 양식에는 마케팅 목적으로 13개의 입력 필드가 포함되어 있었다. - 브랜드, 마케팅, 디자인 팀이 Figma에서 함께 논의해 입력 필드를 5개로 줄였다. - 양식 변경 후 가입률이 71% 증가했다. - 회의에서 장시간 논쟁하기보다 문제를 함께 시각화하고 즉시 수정한 것이 성과 향상에 기여했다. ## 다음 단계: 디자인 시스템과 개발 연계 - Kimberly-Clark은 Figma에서 Storybook과 코드 저장소까지 연결되는 새로운 디자인 시스템을 계획했다. - 이를 통해 디자인 요소와 개발 구현 사이의 일관성을 높이고, 여러 브랜드와 지역에 적용 가능한 재사용 체계를 구축하려 했다. - 디자인을 단순한 산출물 제작 과정이 아니라 비즈니스 성과와 제품 출시 속도를 높이는 핵심 업무로 자리매김하려는 방향이다. 실무적으로는 디자인 도구를 많이 사용하는 것보다, 하나의 공유 환경에서 관련 팀이 함께 문제를 해결하고 결과를 사용자 지표로 검증하는 것이 중요하다. 특히 입력 단계 축소처럼 작은 디자인 변경도 데이터로 효과를 확인하면 빠른 개선과 조직 내 합의를 동시에 이끌어낼 수 있다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figma디자인 시스템사용자 경험+3
figma4분 읽기큐레이션 요약

피그마의 첫 번째 학생

팬데믹으로 학생들의 캠퍼스 활동이 어려워지자 Figma는 지역별 온캠퍼스 프로그램 대신, 온라인에서도 확장 가능한 학생 지원 모델을 실험했다. 학생들을 프로그램 설계와 실행에 직접 참여시킨 결과, 10주 만에 수업 템플릿·학생 콘텐츠·Virtual Campus 커뮤니티·온라인 메이커톤 등을 만들며 큰 성과를 거뒀다. 이 펠로십은 단기 결과물뿐 아니라 향후 학생 앰배서더 및 커뮤니티 프로그램의 기반도 마련했다. ## 팬데믹에 맞춘 프로그램 방향 전환 - 처음에는 학생들을 위한 캠퍼스 내 밋업을 핵심 활동으로 계획했다. - 그러나 가을 학기에 많은 학생이 캠퍼스로 돌아가지 못할 가능성이 커지면서 계획을 재검토했다. - 학생들과 대화하며 다음과 같은 문제를 파악했다. - 가을 학기의 학교 운영 방식은 어떻게 달라지는가? - 온라인 수업에서 협업적인 교실 분위기를 어떻게 재현할 수 있는가? - 학생들이 교외 프로젝트를 함께 진행하려면 어떤 환경이 필요한가? - 이를 바탕으로 다음 네 가지 영역에 집중했다. - 수업용 리소스 - 학생들의 경험과 관점을 담은 콘텐츠 - Virtual Campus Slack 커뮤니티 - 온라인 해커톤 및 메이커톤 ## 학생이 직접 설계한 펠로십 - Figma는 학생들이 실제로 유용하고 즐겁게 사용할 수 있는 것을 직접 만들도록 프로그램에 참여시켰다. - 목표는 단순히 콘텐츠를 출시하는 것이 아니라 학생 커뮤니티에 장기적으로 영향을 줄 수 있는 협업 방식을 구축하는 것이었다. - 학생 커뮤니티뿐 아니라 Figma 내부 구성원과 더 넓은 디자인 생태계까지 연결하는 것을 지향했다. - 결과물은 학생들이 쉽게 접근할 수 있으면서도 성장 의욕을 자극하는 수준을 목표로 했다. - 여러 작업 흐름으로 나뉘어 일했지만, 참가자들은 하나의 cohesive한 팀으로 협력했다. ## 교실용 템플릿과 학습 자료 - 10주 동안 온라인 및 오프라인 수업에서 활용할 수 있는 템플릿 6개를 제작했다. - 대표적인 자료는 다음과 같다. - 리서치 프로젝트를 운영하기 위한 툴박스 - Figma 에디터에 익숙해지기 위한 플레이그라운드 파일 - 수업 과제를 배포하기 위한 템플릿 - 커뮤니티 곳곳에 흩어진 Figma 교육 자료도 선별해 교사와 학생이 학습·제작에 활용할 수 있도록 정리했다. - 특정 학교나 지역에 한정되지 않고 다양한 교실에서 사용할 수 있도록 범용성을 고려했다. ## 학생들의 현실적인 고민을 다룬 콘텐츠 - 학생들과 대화하면서 많은 학생이 “갭 이어를 선택해야 하는가?”라는 고민을 공유하고 있음을 발견했다. - 이에 따라 ‘Back To School?’ 영상 시리즈를 제작했다. - Figma CEO 딜런 필드가 마크 앤드리슨, 메이리 코, 칼리 클로스, 존 마에다, 로라 데밍 등을 인터뷰했다. - 인터뷰에서는 갭 이어의 의미와 교육의 가치, 각자의 진로 경험을 다양한 관점에서 다뤘다. - 학생 펠로우 Abigail Africa는 청중 분석, 자신감 있는 발표, 스토리텔링을 중심으로 피칭과 프레젠테이션 방법을 소개했다. ## Virtual Campus와 온라인 커뮤니티 - 여름 동안 1,000명 이상의 학생이 Slack 기반 Virtual Campus에 새로 참여했다. - 커뮤니티의 목적은 학생들이 서로 연결되고, 가르치고, 배우며 함께 즐길 수 있는 공간을 제공하는 것이었다. - 물리적인 캠퍼스를 이용할 수 없는 상황에서 온라인 커뮤니티가 소속감과 협업을 보완하는 역할을 했다. - 다양한 시간대의 학생 수백 명이 참여한 2일간의 온라인 메이커톤 ‘Camp Figma’도 개최했다. - 참가자들은 함께 제작 활동을 진행했으며, FigmAdventure와 Slice 같은 프로젝트가 우수작으로 선정됐다. ## 프로그램의 성과와 확장 가능성 - 이 프로그램은 학생 대상 지원을 단순한 교육 자료 제공에서 커뮤니티·콘텐츠·협업 경험을 포함한 종합적인 모델로 확장했다. - 학생들이 수혜자에 머무르지 않고 직접 문제를 정의하고 해결책을 제작했다는 점이 특징이다. - Figma는 이번 실험을 바탕으로 향후 펠로십 프로그램을 발전시키고, 캠퍼스 앰배서더 및 Friends of Figma와 연계할 기반을 마련했다. - 지역적 오프라인 활동이 어려운 상황에서도 온라인 리소스와 커뮤니티를 통해 더 넓은 학생층에 도달할 수 있음을 보여줬다. 학생 대상 프로그램을 만들 때는 일방적으로 콘텐츠를 제공하기보다 대상 학생을 초기 기획 단계부터 참여시키는 것이 효과적이다. 특히 재사용 가능한 템플릿, 지속적인 커뮤니티, 실제 고민을 다루는 콘텐츠를 함께 설계하면 일회성 행사를 넘어 장기적인 참여와 확장성을 확보할 수 있다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figmacollaborative-designslack+2
figma4분 읽기큐레이션 요약

코드와 디자인 사이의 긴

Figma는 디자인의 자유로운 탐색과 코드의 구조적·재사용 가능한 접근 사이의 긴장을 없애기보다 생산적인 협업 방식으로 받아들여야 한다고 주장한다. 이를 위해 디자인 시스템을 코드의 컴포넌트 구조와 가깝게 만들고, 디자이너와 개발자가 같은 시스템을 더 효율적으로 이해하고 활용할 수 있도록 Variants, Interactive Components, 개선된 Auto Layout, Inspect Tab 등을 발표했다. 궁극적으로 Figma는 디자인과 코드를 분리된 작업이 아니라 제품을 함께 만드는 연결된 과정으로 발전시키려 한다. ## 디자인과 코드 사이의 긴장 - 디자이너는 무엇을 만들지 결정하며 자유로운 시각적 탐색과 빠른 반복을 중시한다. - 개발자는 정해진 구조 안에서 실제 제품을 구현하며 재사용성, 일관성, 규칙을 중시한다. - 개발자에게 컴포넌트를 “깨는” 행위가 디자이너에게는 창의적인 실험일 수 있고, 개발자의 구조가 디자이너에게는 제약처럼 느껴질 수 있다. - Figma는 코드의 엄격성과 재사용성을 디자인에 적용하되, 디자인의 빠른 반복과 자유로운 탐색은 유지해야 한다고 본다. ## Variants로 코드와 디자인 컴포넌트 연결 - 프런트엔드의 하나의 컴포넌트는 상태와 맥락에 따라 여러 형태로 표현된다. - 예: 버튼의 기본형·보조형 - 작은 크기·큰 크기 - iOS·Android별 스타일 - 기존 Figma에서는 이런 변형을 각각 별도의 컴포넌트로 관리해야 해 코드 구조와 디자인 구조가 달라졌다. - **Variants**는 같은 컴포넌트의 여러 변형을 하나의 논리적 컴포넌트로 그룹화한다. - 이를 통해 에셋 패널을 단순화하고, 디자인 컴포넌트를 코드의 컴포넌트 모델에 더 가깝게 표현할 수 있다. - 발표 당시 2020년 11월 출시 예정으로 소개됐다. ## Interactive Components로 프로토타이핑 간소화 - Variants를 사용하면 버튼이나 입력 필드의 여러 상태를 하나로 묶을 수 있다. - 기존에는 상태 간 전환을 표현하려면 여러 프레임과 오버레이를 수동으로 연결해야 했다. - **Interactive Components**는 Variants 사이에 프로토타이핑 상호작용을 직접 설정할 수 있게 한다. - 컴포넌트 인스턴스를 프로토타이핑 모드에서 즉시 동작하는 요소처럼 사용할 수 있어, 반복적인 프레임 연결 작업을 줄인다. - 당시 2021년 1월 출시 예정으로 발표됐다. ## 코드처럼 설계하는 Auto Layout - Auto Layout은 텍스트가 바뀌어도 버튼이나 프레임 크기가 자동으로 조정되도록 해 반응형 UI 제작을 돕는다. - Figma는 Auto Layout을 웹의 CSS 박스 모델과 Flexbox에 더 가깝게 발전시키려 했다. - 개선 사항에는 다음이 포함된다. - 더 단순해진 사용자 인터페이스 - 가로·세로 양축에서 요소를 늘리는 기능 - 방향별로 독립적인 패딩 설정 - 내비게이션 아이콘처럼 자주 쓰이는 UI 패턴에 맞춘 간격 설정 - 디자이너가 수동으로 위치와 크기를 조정하는 대신, 코드의 레이아웃 규칙에 가까운 방식으로 디자인할 수 있게 하는 것이 목표다. ## 대규모 디자인 시스템을 위한 컴포넌트 탐색 - 수천 개의 컴포넌트를 사용하는 대규모 라이브러리에서는 정확한 이름을 기억하거나 긴 목록을 직접 찾아야 하는 불편이 있었다. - **Instance Swap Menu**가 개선되어 다음 기능을 제공한다. - 컴포넌트 썸네일 - 검색 - 키보드 단축키 - Variants와 함께 사용하면 여러 컴포넌트를 일일이 찾는 부담을 줄이고, 대규모 디자인 시스템에서도 적절한 인스턴스를 빠르게 교체할 수 있다. - 이 기능은 글 작성 당시 바로 사용할 수 있는 기능으로 소개됐다. ## Inspect Tab으로 개발자 전달 정보 강화 - 기존 Code 패널을 대체하는 **Inspect Tab**은 개발자가 구현에 필요한 정보를 더 쉽게 확인하도록 설계됐다. - 선택한 레이어의 이름을 상단에 표시해 디자이너와 개발자가 어떤 요소를 구현하는지 명확히 확인할 수 있다. - 다음과 같은 디자인 속성을 구분해 보여준다. - Variants - 색상 - 그림자 - 콘텐츠 - 타이포그래피 - 테두리 - 개별 값을 클릭해 클립보드로 복사할 수 있으며, 여러 `key:value` 값으로 구성된 코드 조각도 한 번에 복사할 수 있다. - 디자인 명세를 별도로 정리하거나 개발자가 값을 수동으로 옮기는 과정을 줄여 구현 전환을 효율화한다. Figma의 방향은 디자인을 코드처럼 획일화하는 것이 아니라, 코드의 구조성과 재사용성을 디자인 시스템에 도입하면서도 디자이너의 창의적 탐색을 보존하는 것이다. 실무에서는 Variants로 상태와 스타일을 체계화하고, Auto Layout으로 레이아웃 규칙을 정의하며, Inspect Tab을 통해 개발자에게 구현 정보를 명확히 전달하는 방식이 효과적이다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figma디자인 시스템CSS+4
figma4분 읽기큐레이션 요약

쇼피파이에서 협업을

Shopify는 Figma 파일을 팀 간 협업의 공용 작업 공간으로 활용하기 위해, 프로젝트 상태와 산출물을 일정한 구조로 정리하는 템플릿을 사용한다. 이 템플릿은 GSD(Get Sh*t Done)의 **Think–Explore–Build** 프로세스를 기반으로 하며, 실제로 구현할 결과물을 가장 앞에 배치해 필요한 정보를 빠르게 찾도록 설계됐다. 핵심은 파일마다 예측 가능한 구조와 상태 표시를 적용해 디자인·제품·엔지니어링 팀의 커뮤니케이션 비용을 줄이는 것이다. ## 일관된 파일 구조가 필요한 이유 - Figma는 협업을 쉽게 만들지만, 시간이 지나면서 파일과 산출물이 많아지면 다음과 같은 문제가 생긴다. - 어떤 디자인이 최신인지 파악하기 어렵다. - 특정 레이아웃이 승인됐는지 알기 어렵다. - 실제 구현 대상과 사용자 테스트용 프로토타입을 구분하기 어렵다. - 제품 관리자, 엔지니어, 다른 디자이너가 필요한 정보를 찾기 어렵다. - Shopify는 팀마다 다른 파일 정리 방식을 사용하는 문제를 해결하기 위해 공통 템플릿을 만들었다. - 일정한 형식은 여러 팀이 파일을 탐색할 때 기대할 수 있는 공통 규칙을 제공하고, 프로젝트 초기 설정 시간도 줄여준다. ## GSD 프로세스와 템플릿의 페이지 순서 - Shopify의 GSD 프레임워크는 세 단계로 구성된다. - **Think**: 문제와 배경을 이해한다. - **Explore**: 다양한 해결책을 탐색한다. - **Build**: 선택한 해결책을 구체화하고 출시한다. - 템플릿의 페이지는 이 순서와 반대로 구성된다. - 가장 중요한 구현 준비 상태의 결과물을 파일 앞부분에 둔다. - 사용자가 파일을 열었을 때 최근 작업과 실행 가능한 결과를 먼저 확인할 수 있다. - 새 파일을 만들 때는 표지와 프로젝트 개요를 먼저 작성한 뒤, Think 섹션의 정보를 채우는 방식으로 시작한다. - Explore 단계에서는 필요한 만큼 페이지를 만들고 자유롭게 실험한다. - Build 단계에 들어가면 Explore에서 선택된 페이지나 레이아웃을 Build 섹션으로 이동한다. ## 표지: 프로젝트의 현재 상태를 한눈에 표시 - 새 Figma 파일을 만들 때 표지를 먼저 구성한다. - 표지에는 다음과 같은 정보를 담는다. - 프로젝트명 - 담당 팀 - 프로젝트 상태 - Figma 프로젝트의 그리드 보기에서도 파일을 쉽게 식별할 수 있다. - 프로젝트가 진행될 때마다 상태 표시를 갱신해야 현재 단계가 혼동되지 않는다. ## 프로젝트 개요: 배경과 담당자 연결 - 개요 페이지에는 프로젝트를 이해하는 데 필요한 추가 정보를 제공한다. - 포함할 수 있는 내용은 다음과 같다. - 관련 문서와 리서치 링크 - 프로젝트 브리프 - 피드백을 줄 담당자 - 질문이나 문의를 전달할 연락처 - 필요에 따라 섹션과 항목을 추가하거나 삭제할 수 있다. - Figma 문서에 문서 링크나 Slack 프로필 링크를 붙여 넣으면 관련 앱을 바로 열 수 있어 탐색 과정이 단순해진다. ## Think: 문제 공간과 프로젝트 기반 정리 - Think 섹션은 탐색을 시작하기 전에 문제와 맥락을 정리하는 공간이다. - 다음과 같은 자료를 모을 수 있다. - 사용자 플로우 - 고객 여정 지도 - 잡 스토리(job story) - 디자인 스프린트 결과물 - 과거 디자인이나 영감을 위한 스크린샷 - 관련 외부 문서 링크 - 이 단계의 목적은 해결책을 바로 결정하는 것이 아니라, 탐색에 필요한 정보를 한곳에 모아 프로젝트의 기반을 만드는 것이다. ## Explore: 다양한 아이디어를 실험하고 피드백 수집 - Explore는 여러 해결책을 넓고 깊게 시도하는 작업 공간이다. - 협업과 댓글, 피드백이 가장 활발하게 발생하는 영역으로 활용한다. - 효과적인 정리를 위해 다음 규칙을 적용할 수 있다. - 태블릿·모바일처럼 기기나 화면 형태가 다르면 별도 페이지로 나눈다. - 탐색 결과와 사용자 플로우에 제목을 붙여 내용을 명확히 한다. - 진행 상태를 나타내는 배지를 추가한다. - 새 페이지마다 날짜를 기록해 최신 작업인지 확인할 수 있게 한다. - 사용자 테스트용 프로토타입은 별도 페이지로 관리한다. - 스티키 노트로 메모, 아이디어, 피드백, 후속 작업을 기록한다. - 이 단계에서는 가능한 접근법을 많이 시도한 뒤, 피드백을 바탕으로 구현할 방향을 좁혀 간다. ## Build: 선택된 결과물을 구현 단계로 이동 - Build는 탐색을 마친 뒤 적절한 해결책을 구체화하고 출시 및 피드백으로 연결하는 단계다. - Explore에서 검토한 여러 시안 중 실제로 진행할 페이지나 레이아웃만 Build 섹션으로 이동한다. - 이를 통해 실험 중인 아이디어와 구현 대상으로 확정된 결과물을 명확히 분리할 수 있다. - 파일 앞부분에 Build 관련 결과물이 배치되므로 다른 직군도 현재 구현 대상과 프로젝트 진행 상황을 빠르게 파악할 수 있다. 팀 단위로 Figma를 운영한다면 표지, 개요, Think–Explore–Build 섹션을 기본 템플릿으로 정하고, 날짜·상태 배지·담당자·관련 링크를 의무적으로 기록하는 방식이 실용적이다. 특히 Explore의 자유로운 실험 공간과 Build의 확정 산출물을 분리하면 최신 디자인과 구현 대상을 찾는 데 드는 커뮤니케이션 비용을 크게 줄일 수 있다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figma디자인 시스템design-collaboration+2
figma3분 읽기큐레이션 요약

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를 활용할 수 있다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figma디자인 시스템접근성+2
figma3분 읽기큐레이션 요약

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’를 진행했다. - **투명성과 효율 향상:** 팀 전체가 동일한 작업물을 실시간으로 확인해 공동의 이해를 빠르게 형성하고, 제품과 기능을 더 자신 있게 출시할 수 있었다. ## 실용적인 시사점 협업 도구 도입만으로 변화가 완성되는 것은 아니며, 먼저 조직을 제품 중심의 소규모 팀으로 재편하고 팀 간 공동 책임 구조를 만들어야 한다. 이후 파일럿 운영으로 효과를 검증한 뒤 도구를 확산하면 구성원의 수용성을 높이면서 비용 절감, 의사결정 가속화, 원격 협업 강화까지 함께 달성할 수 있다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figma디자인 시스템design-collaboration+3
figma4분 읽기큐레이션 요약

Clearstep이 온라인에서 진료를

Clearstep은 증상 확인부터 적절한 의료기관 선택, 보험 자격 확인, 비용 추정, 예약까지 이어지는 의료 탐색 과정을 직관적으로 단순화했다. 이를 위해 반복적인 사용자 흐름 테스트와 Figma의 협업·스타일 관리·개발 전달 기능을 활용해 정확하고 일관된 제품 경험을 만들었다. 최종 목표는 환자가 불안과 검색 시간을 줄이고 자신에게 맞는 진료를 빠르게 찾도록 돕는 것이다. ## 의료 탐색 과정을 하나의 흐름으로 통합 - 2018년 증상 확인 및 진료 경로 안내 플랫폼을 출시했다. - 사용자가 증상에 따라 진료가 필요한지, 어떤 의료 제공자를 찾아야 하는지 판단하도록 지원했다. - 사용자의 위치와 보험 네트워크를 고려해 적합한 의료 자원을 연결했다. - 보험 계획에 따른 예상 비용을 제공하고, 플랫폼 안에서 진료 예약까지 진행할 수 있도록 확장했다. - 증상 확인, 의료기관 비교, 보험 확인, 비용 투명성, 예약을 하나의 경험 안에 통합해야 했기 때문에 설계 과정에서 높은 정확성과 반복 검증이 필요했다. ## 정보는 많지만 오류가 허용되지 않는 설계 - 의료 선택지가 많은 상황에서 사용자가 다음 행동을 명확히 이해하도록 사용자 흐름을 여러 차례 개선했다. - Figma의 **Smart Selection**을 활용해 증상 확인 결과 화면의 진료 옵션 순서를 드래그 앤 드롭으로 빠르게 재배치했다. - 헤더와 본문 글꼴의 미세한 차이도 사용자의 탐색 방식과 진료 옵션 평가에 영향을 주므로 반복적인 테스트를 진행했다. - 버튼 텍스트가 자동으로 크기에 맞춰 조정되어 다양한 문구를 빠르게 실험할 수 있었다. - 이러한 기능을 통해 단순 반복 작업을 줄이고, 사용성처럼 더 높은 판단이 필요한 설계 문제에 시간을 쓸 수 있었다. ## 고객별 브랜드를 빠르게 적용 - Clearstep은 여러 의료 시스템에 화이트 라벨 형태로 플랫폼을 제공한다. - 고객마다 다른 색상 체계를 사용하기 때문에 짧은 시간 안에 맞춤형 디자인을 제작해야 했다. - 고객 브리프마다 새로운 Figma 파일을 만들고 브랜드 색상을 문서에 추가했다. - **Color Styles**를 사용하면 광고나 목업의 여러 색상을 한 번에 수정할 수 있다. - 검증된 색상 스타일은 Figma **Library**에 등록해 모든 편집자가 동일한 스타일을 사용할 수 있도록 했다. - 이를 통해 고객별 맞춤화와 디자인 일관성을 동시에 유지했다. ## 원격 환경에서의 실시간 협업 - Figma의 멀티플레이어 기능으로 디자이너와 엔지니어가 같은 파일에서 동시에 작업했다. - 엔지니어가 디자인 핸드오프를 진행하는 동안 디자이너가 UX 개선점을 표시하거나 직접 수정할 수 있었다. - 텍스트와 색상 스타일을 수정·게시하면 팀원이 파일에 다시 들어왔을 때 최신 상태를 확인할 수 있었다. - 색상과 이름이 표시되는 커서를 통해 화상회의나 화면 공유 없이도 각자의 작업 위치와 피드백을 파악했다. - 다른 팀원의 아바타를 클릭해 관찰 모드로 전환하면 해당 팀원이 기능을 검토하는 과정을 실시간으로 따라갈 수 있었다. - 댓글을 하나씩 검토하고 답변하거나, 반영 후 댓글을 해결 처리하는 방식으로 피드백을 관리했다. ## 디자인에서 구현까지 연결 - 최종 디자인은 Figma의 **Color Styles**, **Code 패널**, UI 요소 간 간격과 오프셋을 보여주는 레이블을 통해 개발팀에 전달됐다. - 개발자는 별도로 에셋을 다운로드하거나 복잡한 설명을 주고받지 않고 필요한 리소스에 바로 접근할 수 있었다. - Figma의 내보내기 기능을 사용해 구현 과정에서 디자인 에셋을 즉시 활용할 수 있었다. - 디자인과 개발 사이의 전달 비용을 줄이고, 최종 구현이 설계 의도와 일치하도록 했다. ## 의료 서비스 접근성을 높이는 제품 철학 - Clearstep은 의료 정보를 단순히 제공하는 데 그치지 않고 사용자가 실제로 다음 행동을 선택하도록 안내하는 것을 목표로 한다. - 불안한 상태에서 검색 결과를 무작정 비교하지 않고, 증상·위치·보험·비용을 바탕으로 실행 가능한 선택지를 얻도록 설계했다. - 디자인 시스템과 실시간 협업 도구를 활용해 작은 팀으로도 많은 환자에게 영향을 주는 기능을 빠르고 안정적으로 개선했다. 실용적으로는 복잡하고 오류 비용이 큰 서비스일수록 사용자 흐름을 반복 테스트하고, 색상·텍스트·컴포넌트를 재사용 가능한 스타일로 관리하는 것이 중요하다. 또한 디자인 도구와 개발 전달 과정을 하나로 연결하면 원격 협업에서도 변경 사항을 빠르게 공유하고 구현 오류를 줄일 수 있다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figma디자인 시스템사용자 경험+2
figma3분 읽기큐레이션 요약

목업 그 이상: 여정

디자인은 화면 목업을 만드는 일에 그치지 않고, 제품 경험·조직 프로세스·문화·커뮤니티를 함께 설계하는 활동이다. Segment는 디자이너뿐 아니라 리서처, PM, 엔지니어, 고객 성공 담당자 등과 Figma에서 공동 작업하며 고객 여정, 데이터 구조, 디자인 시스템, 조직 문화를 함께 만들어갔다. 이런 협업 산출물은 팀의 공통 기준이자 의사결정과 온보딩을 돕는 자료로 활용됐다. ## 고객 여정 공동 설계 - 디자이너와 UX 리서처가 고객의 전체 경험을 여정 지도로 정리했다. - 발견과 가입부터 제품의 대규모 도입까지, 고객 등급별 경험을 단계적으로 매핑했다. - 각 단계에 분석 데이터를 보완하고, 고객 사례를 클릭해 볼 수 있는 인터랙티브 프로토타입을 제작했다. - 완성된 파일은 Segment 구성원이 고객 경험을 확인할 때 참고하는 단일 기준점이 됐다. - 신규 구성원이 제품과 고객을 이해하는 온보딩 자료로도 활용됐다. ## 데이터 아키텍처 다이어그램 - 디자이너, 리서처, 고객 성공 관리자, 인프라 엔지니어가 함께 Segment의 데이터 흐름을 시각화했다. - 데이터가 플랫폼을 통과하며 어떻게 변환·보강·정제되는지 표현했다. - 복잡한 데이터 구조를 여러 직군이 공유할 수 있는 공통 언어로 바꿨다. - 다이어그램은 향후 제품을 설계할 때 활용하는 기반 자료가 됐다. - 현재 강점과 개선이 필요한 영역을 드러내 제품 전략과 우선순위 설정을 지원했다. ## 디자인 시스템 회고와 로드맵 수립 - 오픈소스 디자인 시스템인 Evergreen은 디자인 외의 여러 팀도 사용하므로, 엔지니어링 등 협업 부서의 피드백이 중요했다. - 원격 근무 상황에서 디자이너와 엔지니어가 Figma 파일에 가상 포스트잇을 작성했다. - 디자인 시스템의 문제점과 개선 기회를 함께 도출했다. - 회고 결과는 다음 분기 OKR의 틀을 만드는 데 활용됐다. - 단순한 피드백 수집을 넘어 디자인 시스템의 향후 로드맵을 공동 설계하는 계기가 됐다. ## 원격 환경에서 커뮤니티 만들기 - 공동 설계는 제품이나 업무 산출물뿐 아니라 소속감과 유대감을 만드는 데도 활용됐다. - 국제 여성의 날을 맞아 EPD 조직의 여성 구성원들에게 보낼 감사 카드를 Figma에서 함께 작성했다. - 동료에게 전하고 싶은 메시지와 서로에게 배우고 싶은 점을 공동으로 표현했다. - 대면 축하가 어려운 원격 환경에서 생일 카드 등 가상 이벤트에도 같은 방식을 적용했다. - 협업 도구를 조직문화와 관계 형성을 위한 공간으로 확장했다. ## 목업을 넘어선 공동 설계 - 공동 설계의 대상은 인터페이스뿐 아니라 고객 경험, 데이터 구조, 프로세스, 전략, 문화까지 포함할 수 있다. - 다양한 직군을 초기 단계부터 참여시키면 각자의 전문 지식이 결과물에 반영된다. - 시각화된 문서는 팀의 공통 기준점이 되어 커뮤니케이션 비용을 줄인다. - 원격 환경에서도 실시간 협업 도구를 활용하면 회고, 브레인스토밍, 축하와 같은 활동을 지속할 수 있다. 팀의 문제를 해결할 때 화면 설계만 생각하기보다, 어떤 경험과 관계를 함께 만들지 정의하고 관련된 사람들을 공동 설계 과정에 참여시키는 것이 효과적이다. Figma 같은 협업 공간을 공통 문서이자 토론의 장으로 활용하면 산출물의 재사용성과 조직 전체의 이해도를 높일 수 있다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figma디자인 시스템사용자 경험+3
figma2분 읽기큐레이션 요약

Figma의 시리즈 D 라운드

Figma는 2020년 4월, a16z의 피터 레빈과 마크 앤드리슨이 주도한 5,000만 달러 규모의 Series D 투자를 유치했다고 발표했다. 코로나19로 재택근무가 확산되면서 Figma는 인터페이스 디자인을 넘어 화이트보딩, 다이어그램, 슬라이드 제작 등 다양한 협업 도구로 활용되고 있었다. 확보한 자금은 핵심 디자인·프로토타이핑 플랫폼의 성능과 안정성을 강화하고, 시각적 커뮤니케이션과 창작을 위한 새로운 제품을 개발하는 데 사용될 예정이다. ## Series D 투자 유치 - Figma는 총 5,000만 달러의 Series D 투자를 유치했다. - 투자는 a16z의 피터 레빈과 마크 앤드리슨이 주도했다. - 기존 투자자인 Index, Greylock, KPCB, Sequoia, Founders Fund도 참여했다. - Durable Capital의 헨리 엘렌보겐과 여러 엔젤 투자자도 새롭게 투자자로 합류했다. ## 코로나19와 Figma 사용 확대 - 재택근무로 집과 직장의 경계가 흐려지면서 Figma의 사용량이 크게 증가했다. - 기존의 인터페이스 디자인과 프로토타이핑 외에도 다음과 같은 작업에 활용됐다. - 시각적 화이트보딩 - 다이어그램 작성 - 프레젠테이션 제작 - 온라인 환경에 맞춘 새로운 활용 사례도 등장했다. - 가상 디자인 스프린트 - 도시 설계 및 시각화 - Minecraft 스킨 제작 - 이는 Figma가 전문 디자이너만을 위한 도구가 아니라, 다양한 사용자가 시각적으로 생각하고 협업하는 플랫폼으로 확장되고 있음을 보여준다. ## 투자금의 활용 방향 - 핵심 디자인 및 프로토타이핑 플랫폼에 대한 투자를 확대한다. - 팀이 함께 작업할 수 있는 환경의 성능과 신뢰성을 강화한다. - Figma를 더욱 강력하고 안정적인 협업 도구로 발전시킨다. - 디자이너뿐 아니라 비디자이너까지 포함한 전 세계 커뮤니티를 지원한다. - 시각적 커뮤니케이션과 창작을 위한 새로운 용도의 전용 제품을 개발한다. ## Figma의 장기 비전 - Figma의 비전은 디자인을 모든 사람이 이용할 수 있도록 만드는 것이다. - 웹 기반 디자인 도구를 바탕으로 협업과 접근성을 확대하려 한다. - 디자인을 특정 직군의 전문 업무가 아니라, 아이디어를 표현하고 공유하는 보편적인 커뮤니케이션 방식으로 확장하려는 방향이 드러난다. - 회사는 이러한 목표를 추진하기 위해 추가 인재를 채용한다고 밝혔다. 이번 발표는 Figma가 단순한 디자인 소프트웨어를 넘어, 원격 협업과 시각적 사고를 지원하는 범용 창작 플랫폼으로 성장하려는 전략을 보여준다. 사용자라면 디자인 작업뿐 아니라 브레인스토밍, 문서 시각화, 발표 자료 제작 등 다양한 협업 용도로 Figma를 활용해볼 수 있다.

원문 읽기(새 탭에서 열림)
프로토타이핑Figmacollaborative-designweb-design+2