techlist.io
KREN

디자인 시스템

252 개의 포스트

figma3분 읽기큐레이션 요약

Kiwi.com이 Figma에서 프로젝트

Kiwi.com은 여러 도구를 조합한 Sketch 중심 workflow에서 발생하는 동기화 문제를 해결하기 위해 모바일 디자인 시스템을 Figma로 옮기기 시작했다. 소규모 디자인팀과 약 20명의 협업자가 함께 작업하는 환경에서는 디자인, 프로토타입, 개발 전달, 버전 관리가 하나의 협업 공간에서 연결되는 것이 중요하다고 판단했다. 이 글은 Figma 도입 배경과 디자인 라이브러리·컴포넌트·프로젝트 구조를 정리하는 방식을 소개한다. ## Kiwi.com의 디자인 환경과 과제 - 모바일 디자인팀은 디자이너 2명으로 구성되어 있지만, 약 20명이 다양한 방식으로 디자인에 참여한다. - 디자인 시안에 댓글을 남기는 사람 - 카피를 수정하는 사람 - 여러 플랫폼을 아우르는 기능을 설계하는 사람 - 기존 프런트엔드 디자인과 디자인 시스템인 **Orbit**는 Sketch를 기반으로 운영되고 있었다. - 그러나 Orbit의 모바일 버전은 시각적으로 차이가 커서, 별도의 모바일 디자인 시스템을 Figma에서 시험하게 되었다. ## Sketch 기반 도구 조합의 동기화 문제 - 기존 workflow에서는 목적별로 여러 도구를 사용했다. - **Sketch**: 디자인 제작 - **Zeplin**: 개발자 핸드오프 - **Abstract**: 버전 관리 - **Marvel**: 정적 프로토타입 제작 - **Dropbox Paper**: 디자인 이미지 공유 - 도구가 분리되어 있어 최신 상태가 서로 달라질 수 있었다. - 프로토타입이 최신 테스트 버전을 반영하지 못함 - 작업자가 Abstract에 커밋하는 것을 잊음 - 승인된 최종 시안이 Zeplin에 업데이트되지 않음 - 문서에 첨부된 PNG가 몇 주 전 버전으로 남아 있음 - 각 도구는 독립적으로 작동하기 때문에, 팀이 수동으로 상태를 맞추지 않으면 디자인 산출물이 쉽게 불일치한다. ## Figma를 선택한 이유 - Figma 도입의 핵심 기대 효과는 디자인 파일, 협업, 프로토타입, 버전 이력을 한 환경에서 연결하는 것이었다. - 여러 도구 사이에서 최신 파일을 확인하고 전달하는 관리 비용을 줄일 수 있다. - 다수의 참여자가 디자인 과정에 관여하는 Kiwi.com의 환경에서는 중앙화된 협업 방식이 특히 유용하다. - 저자는 초기에는 브라우저 기반 도구인 Figma의 가치에 회의적이었지만, 실제 팀의 협업 문제를 경험하면서 Figma 도입의 필요성을 재평가하게 되었다. ## 글에서 다루는 디자인 시스템 운영 범위 - 글은 단순한 Figma 사용 후기가 아니라 다음 운영 주제를 함께 다룬다. - 모바일 디자인 시스템을 Figma로 구축한 이유 - Figma 업데이트 이후 달라진 작업 방식 - 디자인 라이브러리 컴포넌트의 설계 원칙 - 컴포넌트와 프로젝트 파일의 구조화 - 버전 이력 관리와 파일 정리 - 특히 여러 사람이 컴포넌트를 재사용하는 환경에서 일관성을 유지하고, 최신 디자인 자산을 쉽게 찾도록 구성하는 방법에 초점을 둔다. 여러 협업자가 디자인에 참여하고 도구별 최신 상태를 수동으로 맞추고 있다면, Figma처럼 디자인·프로토타입·협업을 한 공간에 통합하는 방식을 검토할 만하다. 다만 도구를 바꾸는 것만으로 문제가 해결되지는 않으므로, 컴포넌트 명명 규칙과 파일 구조, 버전 관리 원칙을 함께 정립하는 것이 중요하다.

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

Figma의 디자인 사전을 소개

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

원문 읽기(새 탭에서 열림)
디자인 시스템Figma사용자 경험오픈 소스+2
figma2분 읽기큐레이션 요약

#FigmaTip 모음

이 글은 Figma 커뮤니티에서 공유된 실용적인 작업 팁을 모아, 반복적인 디자인 작업을 키보드 단축키와 컴포넌트 기능으로 더 빠르게 처리하는 방법을 소개한다. 여러 프레임 정렬, 좌우 반전 컴포넌트 제작, 오브젝트 이동 간격 조정 등을 활용하면 레이아웃 편집과 컴포넌트 관리의 효율을 높일 수 있다는 것이 핵심이다. ### 여러 프레임을 빠르게 정렬하기 - 여러 오브젝트나 프레임을 선택한 뒤 다음 단축키를 사용할 수 있다. - `Cmd + \``: 세로 방향으로 간격을 정리하는 **Pack Vertical** - `Cmd + Shift + \``: 가로 방향으로 간격을 정리하는 **Pack Horizontal** - 정렬 관련 단축키와 함께 사용하면 여러 요소의 배치 방향과 간격을 한 번에 조정할 수 있다. - 반복적으로 카드, 화면, 섹션 등을 배열할 때 마우스로 직접 이동하는 것보다 효율적이다. ### 변경 사항을 반영하는 좌우 반전 컴포넌트 만들기 - 기존 컴포넌트를 `Option` 키를 누른 채 드래그해 새로운 빈 컴포넌트 안에 배치한다. - 새 인스턴스를 선택하고 `Shift + H`를 눌러 좌우로 뒤집는다. - 이렇게 만든 반전 컴포넌트는 원본과 연결되어 있으므로 원본 컴포넌트의 변경 사항이 반영된다. - 좌우 대칭이 필요한 아이콘, 캐릭터, 방향성 UI 요소를 별도로 다시 만들지 않고 관리할 수 있다. ### “Nudge Amount”로 이동 간격 조정하기 - 방향키로 오브젝트를 이동할 때 적용되는 기본 이동 간격을 **Nudge Amount** 설정으로 바꿀 수 있다. - 작은 간격 조정에는 세밀한 값을, 큰 레이아웃 이동에는 더 큰 값을 설정해 작업 목적에 맞게 사용할 수 있다. - 반복적으로 일정한 간격을 맞추거나 픽셀 단위로 요소를 배치할 때 유용하다. - 정렬 및 간격 조정 기능과 함께 사용하면 디자인 시스템의 간격 규칙을 유지하기 쉽다. 실무에서는 자주 사용하는 정렬 단축키와 Nudge Amount 설정을 자신의 작업 방식에 맞게 지정하고, 좌우 변형이 필요한 요소는 반전 컴포넌트로 관리하는 것이 좋다.

원문 읽기(새 탭에서 열림)
디자인 시스템Figma사용자 인터페이스keyboard-shortcuts+1
figma3분 읽기큐레이션 요약

피그마 3.0 (!)

Figma 3.0은 데스크톱 중심의 파편화된 디자인 작업을 웹 기반 협업 환경으로 통합하려는 업데이트다. 프로토타이핑, 디자인 시스템 관리, 대규모 조직 운영 기능을 강화해 InVision 같은 별도 도구와 반복적인 파일 동기화·내보내기 작업을 줄이는 것이 핵심이다. 디자인과 프로토타입, 댓글, 개발자 전달을 하나의 최신 상태로 연결해 팀 전체의 작업 효율을 높이려 한다. ## 웹 기반 디자인 워크플로 통합 - 데스크톱 기반 작업에서는 다음과 같은 문제가 발생한다. - 어떤 프로토타입에 이해관계자의 댓글이 있는지 확인하기 어렵다. - 스타일 가이드가 최신 상태인지 보장하기 어렵다. - 팀원들이 같은 디자인 버전을 보고 있는지 관리해야 한다. - Figma는 디자인 파일과 프로토타입, 댓글, 공유 기능을 웹에서 연결해 별도 앱 간 전환을 줄이려 한다. - 결과적으로 중복 도구와 구독 비용을 줄이고, 팀의 작업 흐름을 Figma 중심으로 통합하는 것이 목표다. ## 프로토타이핑 기능 강화 Figma 3.0은 디자인 파일에서 바로 동작하는 프로토타입 기능을 강화했다. - **디바이스 프레임** - iPhone, Android, Apple Watch 등 다양한 기기 프레임을 적용할 수 있다. - 디자인이 실제 기기에서 어느 정도 크기로 보이는지 팀원들이 쉽게 이해할 수 있다. - **고정 오브젝트** - 상태 표시줄, 헤더, 푸터, 버튼 등을 화면의 위·아래·측면에 고정할 수 있다. - 제약 조건과 함께 사용해 스크롤 중에도 특정 요소가 유지되도록 만들 수 있다. - 배경 블러와 블렌딩 모드를 적용하면 고정 요소의 시각적 완성도를 높일 수 있다. - **스크롤 가능한 영역** - 프레임 내부의 개별 도형이나 영역에 스크롤 동작을 설정할 수 있다. - 부모 프레임 자체가 스크롤되는 중첩 구조도 지원한다. - 이미지 캐러셀, 세로 목록, 가로·세로 어느 방향으로든 스크롤하는 화면을 구현할 수 있다. - **화면 전환** - dissolve, slide, push 등의 전환 효과를 제공한다. - 네이티브 모바일 앱과 유사한 움직임을 구현해 프로토타입의 완성도를 높인다. ## 디자인과 프로토타입의 실시간 연결 - 디자인의 색상이나 글꼴 크기를 수정하면 프로토타입에도 실시간으로 반영된다. - 디자인 파일과 댓글이 분리되지 않아, 피드백을 확인하기 위해 다른 앱이나 탭으로 이동할 필요가 줄어든다. - 모바일 브라우저에서 프로토타입을 열고 휴대폰을 리모컨처럼 사용해 발표할 수 있다. - 프로토타입이 디자인과 직접 연결되어 있어 화면을 별도로 내보내거나 버전을 동기화하는 관리 작업이 필요 없다. - 다만 Figma는 모든 프로토타이핑 요구를 대체한다고 단정하지 않고, 다른 도구와의 연동을 위해 API 개발도 함께 추진한다. ## Figma Styles와 디자인 시스템 - Figma Styles를 모든 사용자에게 공개했다. - 텍스트와 레이어 속성을 스타일로 정의해 회사 전체에서 일관된 디자인 요소를 관리할 수 있다. - 새로운 Team Library 기능과 결합하면 색상, 글꼴, 효과 등 디자인 시스템의 구성 요소를 팀 단위로 공유하고 유지할 수 있다. - 스타일 기능은 비공개 베타와 사용자 조사를 거쳐 개발되었으며, 여러 팀이 동일한 디자인 기준을 적용하는 것을 목표로 한다. ## Organization 요금제 - 대규모 조직을 위한 새로운 Organization 등급을 미리 공개했다. - 조직 규모가 커질수록 필요한 디자인 관리와 운영 체계를 확장하는 데 초점을 둔다. - Figma는 이를 Styles, Team Library, 개발자 전달, 댓글, 공유 컴포넌트와 함께 기업용 디자인 운영 기반으로 제시한다. ## 실용적인 결론 Figma 3.0은 디자인 파일을 단순히 편집하는 도구에서 프로토타이핑과 디자인 시스템, 협업을 함께 처리하는 플랫폼으로 확장한 업데이트다. 팀이 여러 버전의 파일과 별도 프로토타이핑 도구를 관리하고 있다면, Figma의 실시간 연결·공유·스타일 라이브러리를 활용해 작업 단계를 줄이는 것을 검토할 만하다.

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

Sketch 사용자의 Figma 전환기 | 피

Figma는 Sketch의 기능을 대체하는 수준을 넘어, 실시간 협업과 웹 기반 작업 환경을 통해 디자인 프로세스 자체를 더 빠르고 단순하게 만든다는 것이 글의 핵심 주장이다. 자동 저장·공유, 프로토타이핑, 개발자 핸드오프, 버전 관리 등을 하나의 도구에 통합해 팀 간 동기화 비용을 줄인다. 특히 여러 지역에 분산된 제품 팀이라면 Sketch 중심의 기존 워크플로보다 Figma가 더 효율적이라는 결론이다. ## 웹 기반 실시간 협업 도구 - Figma는 브라우저에서 작동하는 디자인 도구이며, Sketch와 유사한 인터페이스와 기능을 제공한다. - 오프라인 작업을 위한 네이티브 앱도 지원한다. - 실시간으로 여러 명이 하나의 파일에서 작업할 수 있고, 서로의 커서와 변경 사항을 즉시 확인할 수 있다. - 파일이 클라우드의 공유 공간에 자동 저장되므로 별도의 저장·파일 정리 과정이 줄어든다. - 하나의 URL이 최신 디자인의 기준점이 되어 PNG 업로드, 파일 동기화, 링크 관리가 필요하지 않다. ## Sketch 생태계를 대체하는 통합 기능 글에서는 Figma가 Sketch뿐 아니라 Abstract, InVision, Craft, LiveShare, Freehand, Zeplin, Dropbox의 역할까지 상당 부분 통합한다고 설명한다. - **프로토타이핑**: 화면을 연결해 클릭 가능한 프로토타입을 만들 수 있다. - **댓글 기능**: 링크를 가진 사용자가 디자인의 특정 위치에 댓글을 남길 수 있으며, 사용자를 태그하거나 댓글을 해결 상태로 표시할 수 있다. Slack 연동도 가능하다. - **개발자 핸드오프**: 개발자가 URL을 통해 치수와 스타일을 확인하고 아이콘·이미지를 다운로드할 수 있다. - **버전 관리**: 모든 협업자의 변경 이력이 저장되며, 과거 버전으로 되돌리거나 해당 시점에서 새 작업을 시작할 수 있다. - **멀티플레이어 협업**: 여러 사람이 동시에 디자인을 수정하고 의견을 교환할 수 있다. - **화면 공유와 팔로우**: 특정 사용자의 아바타를 선택해 그 사람이 보고 있는 화면과 커서 움직임을 따라갈 수 있다. - **컴포넌트와 제약 조건**: Sketch의 심볼과 리사이징 기능에 해당하지만 더 유연하고 직관적으로 사용할 수 있다. - **팀 라이브러리**: 여러 프로젝트에서 컴포넌트 컬렉션을 공유하고 업데이트할 수 있다. - Dropbox Paper 문서에 Figma 프로젝트를 삽입할 수도 있다. ## 동기화 비용을 없애 더 빠르게 반복하기 - 디자인 리뷰 중에 수정하고, 수정 결과에 대한 피드백을 즉시 받을 수 있다. - 기존에는 디자인 파일 수정 후 InVision에 화면을 다시 업로드하거나, 프로토타입 순서를 재정렬하거나, 공유 링크를 다시 전달해야 했다. - Figma에서는 모든 참여자가 같은 파일을 보므로 이런 업로드·동기화·공유 과정이 사라진다. - 시간대가 다른 팀원이 작업물을 커밋하거나 업로드할 때까지 기다릴 필요가 없다. - 플러그인 업데이트로 기존 워크플로가 깨지는 문제도 줄어든다. - 결과적으로 디자인 반복 주기가 며칠 단위에서 몇 분 단위로 단축될 수 있다. ## 더 개방적이고 원활한 디자인 프로세스 - 디자인 파일 자체가 리뷰와 토론이 이루어지는 공동 작업 공간이 된다. - 디자이너뿐 아니라 개발자, 기획자 등 링크를 받은 팀원이 같은 화면에서 디자인을 확인하고 의견을 남길 수 있다. - 별도의 파일 전달이나 발표용 이미지 제작 없이 최신 상태의 디자인을 공유할 수 있다. - 실시간 협업과 댓글 기능은 원격·분산 팀이 디자인 논의에 참여하기 쉽게 만든다. ## 실용적인 결론 Sketch의 기존 기능과 플러그인에 크게 의존하는 팀이라도, Figma는 프로토타이핑부터 핸드오프·버전 관리·협업까지 하나의 환경에서 제공한다. 특히 여러 지역에 흩어진 팀이나 디자인 리뷰와 개발자 커뮤니케이션이 잦은 조직이라면, Figma 도입으로 파일 동기화와 반복적인 공유 작업을 우선 줄여볼 만하다.

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

Virta Health가 제2형 당

Virta Health는 제2형 당뇨병을 약물이나 수술 없이 치료하는 과정에서 디자인을 핵심 역량으로 삼고, Figma를 협업의 중심 도구로 활용했다. Figma의 실시간 협업, 컴포넌트, 공유 기능은 의료 서비스의 일관성과 안전성을 높였으며, 디자이너뿐 아니라 의사·마케터·개발자도 제품 제작에 참여하게 했다. 그 결과 의사결정과 피드백이 빨라지고, 디자인 및 콘텐츠 제작 주기도 단축됐다. ## 의료 서비스에서 디자인이 중요한 이유 - 건강관리 제품은 사용자의 행동 변화와 치료 결과에 직접 영향을 미치므로 일반적인 제품보다 설계의 책임이 크다. - Virta Health는 제2형 당뇨병과 만성 대사질환을 약물·수술 없이 치료하는 서비스를 제공한다. - 회사는 2025년까지 1억 명의 당뇨병을 역전시키겠다는 목표를 세웠다. - 소개된 성과에 따르면: - 1년 후 인슐린 사용자의 94%가 사용량을 줄이거나 중단했다. - 1년 후 환자의 60%가 제2형 당뇨병을 역전했다. - Virta의 UX 책임자 David Hatch는 디자인의 목표를 “다양한 사람들이 건강한 행동 변화를 이룰 수 있도록 돕는 것”이라고 설명한다. ## 실시간 협업으로 형성된 디자인 문화 - Virta의 디자인팀은 디자이너뿐 아니라 마케터, 개발자, 의사 등 전사 구성원과 연결되는 협업 허브 역할을 한다. - 팀은 초기부터 웹 기반 협업 도구인 Figma를 사용해 회사의 디자인 작업을 구축했다. - 모든 파일이 최신 상태로 유지되고 한곳에 모여 있어 새로 합류한 디자이너도 첫날부터 작업에 참여할 수 있었다. - 브라우저에서 어디서나 파일에 접근하고 댓글을 남길 수 있어 데스크톱 환경에 종속되지 않았다. - Slack에 Figma 링크를 공유하면 팀원들이 즉시 캔버스에 들어와 복제·수정·개선할 수 있었다. - 이러한 실시간 협업은 기존 도구보다 빠른 피드백과 높은 투명성을 제공했고, Virta의 디자인 문화를 발전시켰다. ## 일관된 디자인과 컴포넌트 시스템 - 의료 앱에서는 환자가 문제를 겪을 때 의사와 빠르고 예측 가능하게 소통해야 하므로, 사용자 흐름의 일관성이 특히 중요하다. - 한 화면에서 익숙한 방식이 다른 화면에서는 다르게 작동하면 사용성이 떨어지고 혼란이 생길 수 있다. - Virta는 반복적으로 사용하는 UI 요소를 Figma 컴포넌트로 만들어 디자인을 쉽게 복제했다. - 컴포넌트 하나에 데스크톱과 모바일 대응 방식을 함께 설계해 반응형 UI를 구축했다. - 시각적 컴포넌트 라이브러리는 다음과 같은 계층 구조로 발전했다. - 기본이 되는 구조적 컴포넌트 - 기본 컴포넌트를 조합한 중첩 컴포넌트 - 여러 화면에서 재사용되는 UI 패턴 - 컴포넌트를 사용하면 새로운 화면을 만들 때도 기존 패턴이 자동으로 유지되어, 디자이너가 실수로 일관성을 깨뜨릴 가능성이 줄어든다. - Virta는 이러한 구조적 컴포넌트 중심의 원칙을 코드에도 적용해 디자인과 구현 단계의 일관성을 높이려 했다. ## 비디자이너의 참여 확대 - Figma 파일은 Slack을 통해 공유되며, 마케터는 문구를 수정하고 의사는 프로토타입에 피드백을 남기며 개발자는 구현에 필요한 정보를 확인한다. - VirtaHealth.com 재출시 프로젝트는 아이디어 구상부터 개발자 전달까지 전체 과정이 Figma 안에서 진행됐다. - 제품팀, 마케팅팀, 경영진, 개발자가 같은 화면을 보면서 프로젝트 진행 상황을 실시간으로 확인할 수 있었다. - 마케팅팀은 직접 카피를 수정하고, 디자이너와 함께 결과물을 빠르게 조정할 수 있었다. - 첫 페이지를 한 달 만에 공개할 수 있었던 배경에는 이러한 투명한 협업 방식이 있었다. - Figma를 사용하면서 말로 설명하기보다 실제 시안을 보여주며 논의하는 비중이 늘었고, 최신 정보에 기반한 피드백과 반복 작업이 가능해졌다. ## 템플릿을 통한 셀프 서비스 모델 - Virta의 UX 디자이너들은 마케팅팀이 직접 사용할 수 있는 템플릿 파일을 제공했다. - 템플릿 대상에는 다음이 포함됐다. - 소셜 미디어 이미지 - 랜딩 페이지 - 마케팅 홍보물 - 마케터는 템플릿을 복제해 필요한 콘텐츠를 직접 만들고, 추가적인 일러스트나 수정이 필요할 때 디자이너를 댓글로 호출했다. - 이 방식은 디자인팀과 마케팅팀 사이의 반복적인 요청·수정 사이클을 최소 두 번 이상 줄였다. - 결과적으로 작업 기간이 수주 단축됐고, 비디자이너도 자신의 콘텐츠 제작 과정에 직접 참여할 수 있었다. Virta Health의 사례는 의료 서비스처럼 오류 비용이 큰 분야에서 디자인 시스템과 협업 도구가 단순한 생산성 개선을 넘어 서비스의 일관성·접근성·안전성에 기여할 수 있음을 보여준다. 특히 공유 가능한 컴포넌트 라이브러리와 역할별 템플릿을 구축하면 디자인팀의 병목을 줄이면서도 전체 조직의 제작 속도를 높일 수 있다.

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

머티리얼 디자인 +

Material Design은 일관된 UI 경험을 제공하지만, 모든 제품이 비슷해져 브랜드 개성이 약해질 수 있다. 글은 Figma Styles와 Components를 결합하면 Material Design의 규칙은 유지하면서 색상·타이포그래피·그림자·그리드·컴포넌트 형태를 브랜드에 맞게 전역적으로 테마화할 수 있다고 설명한다. 이를 통해 대규모 UI 키트도 효율적으로 관리하고 팀 전체에서 재사용할 수 있다. ## 플랫폼 디자인 시스템의 한계 - 디자인 시스템은 일반적으로 제품 내 일관성을 위해 컴포넌트, 패턴, 가이드라인을 통제한다. - Material Design은 Google 및 Android 생태계 전반에 사용성을 높이고 일관된 경험을 제공했다. - 그러나 동일한 컴포넌트를 여러 브랜드가 사용하면 제품이 비슷해지고, 브랜드만의 독특한 인상을 전달하기 어려워진다. - Material Design의 다음 단계는 기본 시스템을 유지하면서 브랜드별 테마와 시각적 개성을 허용하는 방향이다. ## Figma Styles를 활용한 Material 테마 - Figma Styles는 전역 텍스트, 색상 채우기, 선, 효과, 그리드 스타일을 정의한다. - 스타일을 수정하면 해당 스타일을 사용하는 문서 전체에 변경 사항이 즉시 반영된다. - 스타일은 팀 라이브러리에 게시해 여러 프로젝트에서 동일하게 사용할 수 있다. - 따라서 수백 개의 컴포넌트를 개별적으로 수정하지 않고도 UI 키트 전체의 테마를 바꿀 수 있다. ## 색상과 타이포그래피의 전역 관리 - 주요 색상과 보조 색상, 텍스트의 강조 수준, 표면 색상을 Figma Fill Style로 정의했다. - 브랜드 색상을 적용하려면 스타일의 색상만 변경하면 되며, 여러 컴포넌트에 동시에 반영된다. - Material Design의 기본 색상 팔레트도 별도 페이지에서 참고할 수 있도록 구성했다. - Material의 텍스트 스타일을 기준으로 Text Style을 만들고, 기본 글꼴은 Roboto로 설정했다. - 브랜드 서체로 변경하면 시스템 전체의 텍스트가 함께 변경된다. - 다만 글꼴에 따라 글자 크기와 자간·행간을 추가로 조정해야 하며, 서체별 권장 크기를 별도로 마련할 필요가 있다. ## Elevation과 Grid 스타일 - Material Design의 각 elevation 단계에 맞춰 미리 정의된 Drop Shadow 스타일을 제공한다. - Material 그림자는 최대 세 개의 그림자를 조합하는 경우도 있지만, 스타일을 선택하는 것만으로 적용할 수 있다. - 4dp 기준선 그리드를 Figma Grid Style로 정의해 프레임이나 컴포넌트에 적용할 수 있다. - 데스크톱, 모바일, 태블릿 등 플랫폼별 그리드를 추가로 만들어 상황에 맞게 사용할 수도 있다. ## Styles와 Components의 결합 - Material Design은 브랜드 개성을 표현하기 위해 버튼, 카드 등 UI 표면의 모서리 형태를 조정할 수 있도록 한다. - 기본 도형 컴포넌트를 만든 뒤, 이를 버튼·Floating Action Button·카드 같은 상위 컴포넌트 안에 중첩했다. - 중첩 컴포넌트의 가시성을 전환하면 직각 모서리, 절삭 모서리, 다양한 둥근 모서리 스타일을 시스템 전체에 적용할 수 있다. - 변경 사항은 수백 개의 컴포넌트에 전파되며, 경우에 따라 반영까지 몇 초가 걸릴 수 있다. - 개별 인스턴스에서는 중첩 레이어를 직접 조정해 특정 화면에만 적용되는 Override도 만들 수 있다. ## 아이콘 라이브러리와 팀 공유 - Material Design에서 제공하는 다섯 가지 아이콘 스타일을 각각 별도의 Sticker Sheet 문서로 구성했다. - 각 문서에는 아이콘별 컴포넌트가 포함되어 있어 필요한 아이콘만 복사해 사용할 수 있다. - 아이콘 문서를 팀 공유 라이브러리로 게시하면 여러 프로젝트에서 일관된 아이콘을 불러올 수 있다. - 별도 문서로 분리해 전체 UI 키트의 용량을 줄이는 효과도 얻을 수 있다. ## 실용적인 적용 방향 Figma Styles에는 색상, 글꼴, 그림자, 그리드처럼 반복적으로 사용되는 디자인 토큰을 맡기고, Components에는 버튼·카드·아이콘처럼 구조와 동작이 있는 UI 요소를 맡기는 방식이 효과적이다. 이렇게 구성하면 Material Design의 일관성과 사용성을 유지하면서도 브랜드별 테마를 빠르게 적용하고, 팀 전체의 디자인 시스템을 효율적으로 관리할 수 있다.

원문 읽기(새 탭에서 열림)
디자인 시스템Figma디자인 토큰반응형 디자인+2
figma2분 읽기큐레이션 요약

피그마 스타일 베타: 텍

Figma Styles 베타는 텍스트와 레이어 속성을 독립적인 스타일로 관리해 디자인 전반의 일관성과 유지보수성을 높이려는 기능이다. 텍스트 형식·색상·정렬 등을 분리해 조합할 수 있으며, 팀 라이브러리를 통해 최신 스타일을 공유하고 변경 사항을 동기화한다. 또한 하나의 텍스트 필드 안에서도 일부 문장에 서로 다른 스타일을 적용하면서 원본 스타일과의 연결을 유지하는 것이 핵심이다. ## 스타일 속성의 모듈화 - 기존 디자인 도구에서는 텍스트 스타일에 글꼴, 색상, 정렬 등이 함께 묶였다. - 예를 들어 제목·부제목·본문 3종에 색상 3개를 적용하면 최소 9개의 스타일이 필요했다. - Figma Styles는 다음 속성을 개별적으로 설정하고 조합할 수 있게 한다. - 텍스트 형식 - 채우기 및 색상 - 정렬 - 레이아웃 그리드 - 효과 - 선(stroke) - 링크 색상처럼 특정 색상만 바뀌는 경우, 해당 채우기 스타일 하나만 수정하면 이를 사용하는 모든 디자인에 변경 사항이 전파된다. ## 팀 라이브러리를 통한 일관성 관리 - 스타일은 팀 라이브러리에서 공유할 수 있다. - 팀원 모두가 최신 버전의 디자인 시스템을 사용할 수 있다. - 팀이 스타일을 활성화하면 변경 사항에 대한 알림을 받을 수 있다. - 개인 작업뿐 아니라 여러 디자이너가 참여하는 대규모 디자인 시스템 관리에도 적합하다. ## 텍스트 필드 내부의 부분 스타일 적용 - 기존 도구에서는 하나의 텍스트 필드에 단일 스타일만 적용되는 경우가 많았다. - 문장 일부를 링크로 만들거나, 특정 부분을 소제목처럼 표시하면 원래 텍스트 스타일과의 연결이 깨질 수 있었다. - Figma에서는 텍스트 일부를 선택해 서로 다른 텍스트 스타일이나 채우기 스타일을 적용할 수 있다. - 한 텍스트 필드 안에서 다음과 같은 구성이 가능하다. - 본문 중 일부를 링크 색상으로 표시 - 문장 일부를 소제목으로 지정 - 특정 구간에 별도의 서식 적용 - 부분적으로 다른 스타일을 적용해도 관련 스타일과의 연결이 유지되므로, 스타일 변경 시 해당 부분도 함께 업데이트된다. ## 베타 도입 방식과 기대 효과 - 이 기능은 2018년 5월 비공개 베타로 공개됐다. - 작은 팀부터 큰 팀 순서로 마이그레이션하며, 한 번 진행하면 되돌릴 수 없는 방식이었다. - 새로운 스타일 관리 방식에 적응이 필요하지만, 반복적인 수동 수정과 스타일 중복을 줄이는 것이 목적이다. - 개인 디자이너에게는 일상적인 편집 작업을 단순화하고, 팀에는 확장 가능한 디자인 시스템 운영을 제공한다. Figma Styles의 핵심 장점은 스타일을 세부 속성 단위로 분리하고, 그 연결 관계를 유지한다는 점이다. 디자인 시스템을 운영한다면 색상·타이포그래피·효과를 독립적으로 관리하고 팀 라이브러리에서 공유하는 방식이 변경 대응과 일관성 유지에 유리하다.

원문 읽기(새 탭에서 열림)
디자인 시스템Figma사용자 경험접근성+2
figma2분 읽기큐레이션 요약

피그마 팁 모

이 글은 Figma 커뮤니티에서 공유된 유용한 디자인 팁과 기능 활용법을 모은 **FigmaTip Roundup 6.0**이다. 머티리얼 디자인 시스템 활용, 그룹 내 선과 채우기 색상 조정, 스퀴클(squircle)을 이용한 부드러운 모서리 등 작업 속도와 정밀도를 높이는 기능을 소개한다. 공통적으로 Figma의 재사용 가능한 시스템과 세밀한 편집 기능을 활용하면 디자인 프로세스를 더 효율적으로 만들 수 있다는 점을 강조한다. ## 머티리얼 디자인 시스템으로 작업 속도 향상 - 사용자가 제작한 Figma용 **Material Design System**을 소개한다. - 버전 1.3에는 표를 빠르게 제작할 수 있는 **테이블 생성기(table constructor)**가 통합되어 있다. - 머티리얼 디자인 기반의 UI를 만들 때 구성 요소를 처음부터 제작하지 않고 시스템을 활용할 수 있다. - 반복적으로 사용되는 UI 요소와 패턴을 미리 갖춰두면 디자인 프로세스를 가속할 수 있다. ## 그룹 안에서 선과 채우기 색상 পৃথ পৃথ로 조정 - 선(stroke)과 채우기(fill)가 함께 포함된 그룹에서도 두 속성을 독립적으로 변경할 수 있다. - 그룹의 선 색상을 바꾸면 선이 있는 객체의 선 색상만 변경된다. - 채우기만 있고 선이 없는 객체의 색상은 영향을 받지 않는다. - 복잡한 아이콘이나 일러스트를 그룹 단위로 관리하면서도 특정 시각 속성만 정밀하게 수정할 수 있다. - 다른 디자인 도구에서는 그룹 전체의 색상이 함께 바뀔 수 있는 상황을 피할 수 있다는 점이 장점이다. ## 스퀴클로 더 부드러운 모서리 만들기 - Figma의 새로운 기능으로 **스퀴클(squircle)** 형태의 모서리를 소개한다. - 스퀴클은 일반적인 원형 모서리보다 곡선이 자연스럽게 이어지는 형태다. - 카드, 버튼, 앱 아이콘처럼 둥근 모서리가 중요한 UI 요소에 적용하면 더 부드럽고 세련된 인상을 줄 수 있다. - 기존의 단순한 코너 반경 조정과 달리, 모서리 곡률을 시각적으로 더 자연스럽게 표현하는 데 활용할 수 있다. 실무에서는 머티리얼 디자인 시스템을 라이브러리로 활용하고, 그룹 편집 시 선과 채우기를 구분해 수정하며, 제품의 시각적 스타일에 맞춰 스퀴클 모서리를 선택하면 작업 속도와 완성도를 함께 높일 수 있다.

원문 읽기(새 탭에서 열림)
디자인 시스템Figma사용자 인터페이스vector-graphics+1
figma3분 읽기큐레이션 요약

피그마, 전 세계 6

Figma는 디자인 시스템 구축 과정에서 겪는 문제와 경험을 공유할 수 있도록 전 세계 6개 도시에서 커뮤니티 밋업을 개최한다고 발표했다. 원래 소규모 저녁 식사 모임으로 계획했지만, 예상보다 큰 관심으로 더 많은 디자이너가 참여할 수 있는 밋업 형식으로 전환했다. 첫 행사는 나이지리아 라고스에서 300명 이상이 참석하며 디자인 시스템에 대한 글로벌 커뮤니티의 높은 수요를 보여주었다. ## 전 세계 6개 도시에서 열리는 밋업 - 개최 도시는 다음과 같다. - 라고스, 나이지리아: 2018년 1월 27일 - 토론토, 캐나다: 2018년 2월 23일 - 방갈로르, 인도 - 암스테르담, 네덜란드 - 뉴욕, 미국 - 로스앤젤레스, 미국 - 각 지역의 디자이너들이 디자인 시스템 구축 경험과 시행착오를 발표한다. - 가능한 경우 Figma 관계자가 직접 참석해 발표하고 현지 디자이너들과 교류한다. - 행사는 도시별 커뮤니티의 특성에 맞게 다르게 구성된다. ## 커뮤니티 수요에 따른 행사 형식 전환 - Figma는 2017년 11월 DesignSystems.com을 시작하며 설문을 진행했다. - 설문에는 수천 건의 응답이 모였고, 호스트나 파트너로 참여하겠다는 지원도 이어졌다. - 처음에는 소규모 저녁 식사 형태를 계획했지만, 참석 희망자가 너무 많아 참여 기회를 제한할 우려가 생겼다. - 이에 따라 더 많은 디자이너가 참여할 수 있는 공개 밋업 형식으로 변경했다. - Figma는 행사의 성공이 회사 단독이 아니라 지역 커뮤니티의 자원봉사와 협력 덕분이라고 강조했다. ## 첫 개최지: 라고스 - 라고스는 나이지리아에서 Figma 사용자가 가장 많이 모여 있는 지역 중 하나이며, 성장하는 기술 산업을 보유하고 있다. - Andela와 hotels.ng 같은 기업이 아프리카 및 글로벌 시장에서 활동하며 지역 기술 생태계를 확장하고 있다. - Figma는 무료 요금제와 클라우드 기반 환경을 제공해 현지 디자이너들이 직장 컴퓨터뿐 아니라 인터넷 카페에서도 디자인 작업에 접근할 수 있게 했다. - 행사는 hotels.ng의 디자이너 Namnso Ukpanah가 주최했다. - hotels.ng, Andela, Paystack의 디자이너들과 Figma CEO Dylan Field가 발표자로 참여했다. - 첫 라고스 행사에는 300명 이상이 참석했다. ## 도시 밋업을 만드는 방법 - 특정 도시에서 행사를 개최하려면 해당 지역 디자이너들의 관심과 자원봉사 호스트가 필요하다. - DesignSystems.com을 통해 커뮤니티의 개최 의사를 알리거나 직접 호스트로 등록할 수 있다. - 이미 예정된 행사에 대한 자세한 내용은 Figma 마케팅팀에 “Design Systems”라는 제목으로 문의하도록 안내했다. ## DesignSystems.com의 확장 - Figma는 설문과 밋업에서 얻은 데이터를 종합해 DesignSystems.com을 더 포괄적인 플랫폼으로 개편할 계획이다. - 단순한 행사 안내를 넘어 디자인 시스템 관련 커뮤니티와 정보를 연결하는 공간으로 발전시키려는 방향을 제시했다. ## 실용적인 시사점 디자인 시스템은 도구나 문서만으로 완성되는 것이 아니라, 조직과 지역 커뮤니티가 경험과 문제를 공유할 때 더 빠르게 발전한다. 비슷한 문제를 겪는 팀이라면 공개 밋업, 사용자 그룹, 사내 발표 등을 통해 사례를 공유하고, 지역 디자이너를 행사 기획과 운영에 적극적으로 참여시키는 것이 효과적이다.

원문 읽기(새 탭에서 열림)
디자인 시스템Figma사용자 경험digital-product-design+1
figma3분 읽기큐레이션 요약

18명의 디자이너가 전망

2018년 UI/UX의 중심 과제는 시각적 유행보다 사용자의 경험과 사회적 책임을 개선하는 데 있다는 전망이다. 18명의 디자이너는 접근성, 윤리, 협업, 디자인 시스템, 개발 도구의 통합을 주요 변화로 꼽았다. 동시에 표준 시스템을 무비판적으로 따르거나 효율성만 추구하는 흐름에 대한 경계도 제시한다. ## 접근성이 디자인의 우선순위가 된다 - 디자이너의 개성이나 시각적 과시보다 모든 사용자가 콘텐츠를 이해하고 사용할 수 있는지가 중요해진다. - 필수 요소에 지나치게 옅은 회색을 사용하거나, 장식적인 애니메이션을 과도하게 적용하는 관행을 줄여야 한다. - 접근성은 부가 기능이 아니라 제품 설계 초기부터 고려해야 할 기본 조건으로 제시된다. - 다만 접근성·포용적 디자인은 필요한 작업임에도 업계의 관심과 참여가 부족할 것이라는 비관적인 전망도 함께 나온다. ## 디자인 협업이 엔지니어링 방식에 가까워진다 - 디자인 팀도 개발 팀처럼 체계적인 협업과 검토 절차를 도입할 것으로 예상된다. - 코드 리뷰와 유사한 디자인 리뷰가 일반화될 수 있다. - 디자인 도구가 코드 린터처럼 일관성이나 오류를 자동으로 점검하는 방향으로 발전할 수 있다. - 오픈소스 엔지니어링 프로젝트처럼, 사용자 경험과 정보 설계를 위한 오픈소스 디자인 패턴이 늘어날 가능성이 있다. ## 디자이너의 윤리적 책임이 커진다 - UX/UI 디자인은 사용자의 행동과 선택에 직접 영향을 주므로, 디자이너는 자신의 영향력을 더 자각해야 한다. - 제품의 편의성과 전환율만이 아니라 디자인 결정이 사용자와 사회에 미치는 윤리적 결과를 고려해야 한다. - 어떤 사용자를 배제하거나 조작하는지, 정보와 선택지를 공정하게 제공하는지 검토하는 태도가 중요해진다. ## 표준 디자인 시스템의 무비판적 사용 - Material Design이나 Microsoft Fluent 같은 업계 표준 디자인 시스템에 대한 의존도가 높아질 수 있다. - 검증된 컴포넌트와 규칙은 일관성과 개발 효율을 높이지만, 모든 제품과 사용자에게 적합한 것은 아니다. - 표준을 그대로 적용하기보다 제품의 목적, 브랜드, 사용 맥락에 맞는지 비판적으로 판단해야 한다. - 디자인 시스템이 창의적 문제 해결을 대체하는 처방전처럼 사용될 위험이 있다. ## 디자인과 개발 도구의 통합 - 디자인 도구와 개발 도구가 계속 수렴하면서, 하나의 중앙화된 환경에서 디자인 시스템을 만들고 다양한 기술·플랫폼에 구현하는 흐름이 강화될 것으로 보인다. - CSS Grid와 사용자 정의 변수는 레이아웃과 스타일을 더 유연하고 효율적으로 구현하게 한다. - Vue와 React 같은 프레임워크는 디자인 결과물을 실제 제품으로 연결하는 과정을 단순화한다. - 구현 효율이 높아진 만큼 절약된 시간을 더 책임감 있고 포용적인 경험을 설계하는 데 사용해야 한다. ## 접근성과 효율성 사이의 긴장 - 업계는 생산성과 구현 속도를 높이는 기술에는 빠르게 반응하지만, 접근성과 포용적 디자인처럼 많은 조사와 세심한 작업이 필요한 분야에는 상대적으로 소극적이다. - 따라서 접근성이 중요한 트렌드로 인정받더라도 실제 프로젝트 우선순위에서 밀릴 수 있다. - 진정한 발전은 새로운 도구를 도입하는 데 그치지 않고, 효율성을 사용자 모두의 경험 개선으로 연결하는 데 달려 있다. ## 실용적인 적용 방향 디자인 팀은 접근성 검토를 초기 요구사항에 포함하고, 정기적인 디자인 리뷰와 공통 컴포넌트 검증 절차를 마련하는 것이 좋다. 또한 Material이나 Fluent 같은 표준을 그대로 복사하기보다 사용자와 제품 맥락에 맞게 조정하고, 개발 효율로 확보한 시간을 포용성·윤리성·사용성 개선에 투자해야 한다.

원문 읽기(새 탭에서 열림)
디자인 시스템사용자 경험React접근성+4
figma3분 읽기큐레이션 요약

Stitch Fix, Figma 협

Stitch Fix는 빠르게 변화하는 웹·서비스 문제를 해결하기 위해 디자인 스프린트를 활용하고, 그 전 과정을 Figma에서 협업하며 진행했다. Figma의 브라우저 기반 환경과 실시간 공동 편집, 댓글, 공유 컴포넌트 덕분에 부서 간 파일 전달과 설치 과정이 사라지고 하나의 최신 디자인을 기준으로 빠르게 의사결정할 수 있었다. 그 결과 팀은 반복 작업보다 사용자 경험과 같은 고차원적인 문제에 집중할 수 있었다. ### 디자인 스프린트와 Figma 도입 - Stitch Fix는 성장하는 사용자 기반과 빠르게 변하는 웹 환경에 대응하기 위해 디자인 스프린트를 운영했다. - 디자인 스프린트는 해커톤과 유사하게 짧은 기간 안에 아이디어를 검증하고 문제를 해결하는 방식이다. - 디자이너, 엔지니어, 마케터, 프로젝트 매니저가 함께 아이디어를 내고 화이트보딩과 테스트를 거쳐 프로토타입을 제작했다. - Head of Product Design Ellen Beldner는 Figma가 부서 간 협업을 가능하게 해 어려운 문제를 함께 해결할 수 있었다고 평가했다. ### 브라우저 기반 협업으로 프로토타이핑 가속 - Figma는 브라우저에서 실행되므로 별도의 소프트웨어를 구매하거나 설치할 필요가 없다. - PC를 사용하는 프로젝트 매니저와 Mac을 선호하는 디자이너가 동일한 URL로 같은 파일에 접근할 수 있다. - Sketch 파일을 주고받거나, 별도 프로토타이핑·개발 전달 도구로 파일을 내보내는 과정이 줄어든다. - Stitch Fix는 Figma가 Sketch, InVision, Zeplin의 역할을 하나의 플랫폼으로 통합한다고 보았다. - 팀 전체가 동일한 파일을 사용하므로 최신 버전이 무엇인지 확인하는 데 드는 혼란도 줄어든다. ### 실시간 피드백과 공동 편집 - 초기 프로토타이핑 단계에서는 기능 구현 난이도나 사용자 흐름의 연쇄적인 문제를 빠르게 발견하고 수정해야 한다. - 기존 방식에서는 한 사람의 컴퓨터 주변에 모이거나 파일을 내보내 이메일로 전달해야 했다. - Figma의 Multiplayer 기능을 사용하면 여러 사람이 같은 파일을 동시에 보고 편집할 수 있다. - 팀원은 문제가 있는 화면으로 바로 이동해 의견을 말하거나, 댓글을 남기거나, 파일 안에 직접 간단한 목업을 그려 제안할 수 있다. - 한 디자이너가 여러 아이디어를 제시했을 때, Ellen은 각각에 댓글과 수정 예시를 남겼고 디자이너는 같은 URL에 다시 접속해 피드백을 확인할 수 있었다. - 별도의 리뷰 미팅이나 화면 공유 세션을 잡지 않아도 상세한 비평과 수정 작업을 이어갈 수 있었다. - 여러 버전의 파일이 분리되는 대신 하나의 원본에서 작업하므로 프로젝트 관리상의 혼란과 버전 불일치가 줄어든다. ### 공유 컴포넌트로 반복 작업 제거 - 디자인 스프린트에서는 같은 아이콘이나 UI 요소를 여러 화면에 반복해서 배치하는 작업이 시간 낭비가 될 수 있다. - Figma의 공유 컴포넌트는 UI 요소를 재사용 가능한 인스턴스로 관리한다. - 마스터 컴포넌트를 수정하면 해당 컴포넌트를 사용하는 모든 인스턴스에 변경 사항이 반영된다. - Stitch Fix는 카드 기반 디자인 시스템을 프로토타이핑하면서 사용자별로 어떤 카드 조합이 효과적인지 빠르게 실험했다. - 한쪽에서는 컴포넌트를 수정하고, 다른 팀원은 이미 만들어진 인스턴스를 활용해 내비게이션 등 다른 영역을 동시에 작업할 수 있었다. - 반복적인 복사·수정 대신 사용자 경험과 제품 구조 같은 높은 수준의 문제에 더 많은 시간을 투자할 수 있었다. ### 실용적인 적용 방향 - 짧은 기간에 여러 부서가 함께 프로토타입을 만들어야 한다면 브라우저 기반 단일 작업 공간을 사용하는 것이 효과적이다. - 실시간 편집, 댓글, 공유 컴포넌트를 적극 활용하면 리뷰 회의와 파일 전달을 줄이고 의사결정을 앞당길 수 있다. - 디자인 시스템의 핵심 UI 요소를 컴포넌트화하면 스프린트 중에도 일관성을 유지하면서 다양한 조합을 빠르게 검증할 수 있다.

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

Figma에서 디자인 시스템을 구축

Figma의 디자인 시스템은 팀의 규모나 목적에 따라 다양한 방식으로 구축할 수 있으며, 공통 컴포넌트와 라이브러리를 활용하면 디자인 일관성과 협업 효율을 높일 수 있다. 이 글은 Figma가 제공하는 기능과 실제 사용자 사례를 통해 디자인 시스템을 어디서 시작하고 어떻게 확장할지 보여준다. 핵심은 작은 단위에서 출발해 컴포넌트, 중첩 구조, 팀 라이브러리 등을 점진적으로 발전시키는 것이다. ## Figma가 디자인 시스템을 지원하는 방식 - Figma는 디자인 시스템을 구축하는 사용자를 지원하기 위해 **Constraints**, **Team Library**, **Components** 같은 기능을 발전시키고 있다. - 디자인 시스템은 단순한 UI 키트가 아니라 팀 내 디자이너, 개발자, 제품 관리자 간의 공통 언어로 활용될 수 있다. - Microsoft처럼 매우 복잡한 중첩 컴포넌트와 제약 조건을 활용하는 사례도 있으며, Figma는 사용자가 제품의 한계를 확장하는 다양한 방식을 공유하고자 했다. - 글에 소개된 사례들은 Figma가 비용을 지급하거나 후원한 콘텐츠가 아니라, 실제 사용자들이 작성한 경험 공유다. ## 작은 구성 요소부터 시작하기 — Gusto - Gusto는 급여·인사 관리 서비스를 제공하는 기업으로, 디자인 시스템을 처음 시작할 때의 막막함을 단순한 구성 요소로 해결했다. - 처음부터 완성된 시스템을 만들기보다, 재사용 가능한 기본 요소를 정의하는 방식으로 출발했다. - 디자인 시스템 구축의 첫 단계에서는 다음과 같은 작업이 유용하다. - 반복적으로 사용되는 UI 요소 찾기 - 기본 컴포넌트와 패턴 정리 - 프로젝트와 자산을 체계적으로 분류 - 팀이 실제로 자주 사용하는 요소부터 우선순위화 ## 마케팅·커뮤니케이션 자산 관리 — Square - Square의 마케팅 팀은 제품 UI뿐 아니라 커뮤니케이션 디자인을 위한 내부 디자인 시스템을 구축했다. - 시스템에는 다음과 같은 자산이 포함된다. - 색상 팔레트 - 로고 세트 - 마케팅 및 브랜드 관련 그래픽 자산 - 디자인 시스템을 제품 화면에만 한정하지 않고, 마케팅과 브랜드 업무에도 적용하면 여러 팀이 동일한 시각적 기준을 사용할 수 있다. - Figma 안에서 자산을 공유하면 최신 버전을 쉽게 찾고, 중복 제작이나 오래된 로고 사용을 줄일 수 있다. ## 비디자이너의 참여를 돕기 — Virta Health - Virta Health는 당뇨병 치료 서비스를 제공하는 기업으로, 디자인 시스템을 통해 디자이너가 아닌 구성원도 디자인 작업에 참여할 수 있도록 했다. - 구축 과정은 다음 단계로 진행됐다. - 기존 컴포넌트와 화면을 감사 - 반복되는 패턴과 문제점 파악 - 재사용 가능한 컴포넌트 제작 - 컴포넌트를 활용한 최종 목업 구성 - 비디자이너는 컴포넌트를 드래그 앤 드롭해 아이디어를 시각화할 수 있다. - 그 결과 엔지니어와 제품 관리자가 디자인 개념을 더 쉽게 이해하고, 아이디어를 논의하는 방식도 개선됐다. - 디자인 시스템은 제작 속도뿐 아니라 직군 간 커뮤니케이션을 개선하는 도구로도 기능한다. ## 중첩 컴포넌트로 유연성 높이기 — OpenText - OpenText는 중첩 컴포넌트를 사용해 더 강력하고 유연한 디자인 시스템을 구축했다. - 하나의 컴포넌트 안에 다른 컴포넌트를 조합하면 복잡한 UI 패턴도 일관되게 관리할 수 있다. - 대표적인 활용 예시는 다음과 같다. - 버튼 내부에 아이콘 컴포넌트 배치 - 버튼의 기본·호버·비활성 상태 구성 - 여러 요소를 조합한 복합 UI 패턴 제작 - 하위 컴포넌트를 수정하면 이를 사용하는 상위 컴포넌트에도 변경 사항을 반영할 수 있어 유지보수가 쉬워진다. - 다만 중첩 구조가 지나치게 복잡해지면 관리가 어려워질 수 있으므로, 컴포넌트의 책임과 조합 규칙을 명확히 해야 한다. ## 원자적 디자인 구조 적용하기 — SetProduct.com - SetProduct.com은 **Atomic Design** 원칙을 디자인 시스템의 기반으로 사용했다. - 디자인 요소를 작은 단위에서 큰 단위로 확장한다. - 원자: 텍스트, 아이콘, 색상 등 - 분자: 버튼처럼 여러 원자가 결합된 요소 - 유기체: 카드나 복합 UI 블록 - 템플릿·페이지: 여러 블록이 조합된 화면과 전체 레이아웃 - 이 접근 방식은 디자인 요소 간의 관계를 체계적으로 정리하고, 재사용성을 높이는 데 도움이 된다. - 작은 단위의 변경이 더 큰 화면에 일관되게 적용되므로, 대규모 UI를 관리하기에 적합하다. ## 실무 적용을 위한 접근법 - 처음부터 모든 화면과 컴포넌트를 표준화하려 하지 말고, 반복 사용 빈도가 높은 요소부터 시작한다. - 컴포넌트와 스타일을 팀 라이브러리로 공유해 모든 구성원이 동일한 자산을 사용하도록 한다. - 중첩 컴포넌트와 제약 조건은 반응형 화면과 복잡한 상태를 표현할 때 활용한다. - 디자인 시스템을 디자이너만의 도구로 만들지 말고 개발자와 제품 관리자도 쉽게 사용할 수 있게 구성한다. - 시스템을 한 번 완성하는 프로젝트로 보기보다, 실제 사용 데이터를 바탕으로 계속 개선하는 공용 기반으로 운영하는 것이 좋다.

원문 읽기(새 탭에서 열림)
디자인 시스템Figmacomponent-libraryatomic-design+2
figma3분 읽기큐레이션 요약

디자인 시스템을 위한 고급

디자인 시스템을 운영하려면 구성 요소를 쉽게 공유하는 것뿐 아니라, 누가 프로젝트를 보고 수정할 수 있는지도 세밀하게 관리해야 한다. Figma는 이를 위해 유료 팀에 **보기 전용(View-only)**과 **초대 전용(Invite-only)** 프로젝트 권한을 도입했다. 이 기능은 유지 관리자가 디자인 시스템을 보호하면서도 팀 전체의 활용을 지원하도록 해, 실수로 인한 변경을 줄이는 것이 핵심 목적이다. ## 디자인 시스템 운영에서 권한 관리가 필요한 이유 - 디자인 시스템 제작자는 새 구성 요소를 팀 전체에 공개하기 전에 비공개로 테스트할 필요가 있다. - 시스템이 배포된 뒤에는 많은 디자이너가 실수로 핵심 구성 요소를 수정하지 않도록 보호해야 한다. - 기존에는 Figma 팀의 편집자가 모든 프로젝트를 보고 수정할 수 있어, 유지 관리자와 사용자를 구분하기 어려웠다. - Team Library가 파일과 팀 간 구성 요소 공유를 해결했다면, Advanced Project Permissions는 프로젝트의 접근 범위와 수정 권한을 해결한다. ## 새로 추가된 프로젝트 권한 유료 Professional Team의 편집자는 프로젝트 생성 시 다음 세 가지 접근 수준을 선택할 수 있다. - **팀 전체 편집 가능** - 팀의 모든 구성원이 프로젝트를 보고 수정할 수 있다. - **팀 전체 보기 가능** - 팀 구성원은 프로젝트를 열람할 수 있지만 내용을 수정할 수 없다. - 배포된 디자인 시스템을 보호하는 데 적합하다. - **초대 전용** - 지정된 사용자만 프로젝트에 접근할 수 있다. - 개발 중인 디자인 시스템이나 제한된 협업에 활용할 수 있다. 기존 프로젝트도 Share 버튼을 통해 기본 접근 권한을 변경할 수 있다. ## 유지 관리자와 사용자를 분리하는 보호 장치 - 디자인 시스템 유지 관리자는 컴포넌트와 스타일을 만들고 안정성을 관리한다. - 일반 사용자는 시스템의 구성 요소를 참고하거나 활용하되, 원본을 직접 변경하지 않는 것이 바람직하다. - 보기 전용 권한은 사용자의 접근성을 유지하면서도 우발적인 편집을 방지하는 완충 역할을 한다. - 특히 규모가 큰 팀에서 의도하지 않은 수정으로 디자인 시스템이 훼손되는 문제를 줄일 수 있다. ## 권한 강화의 한계와 향후 방향 - 유지 관리자와 사용자의 비율에 따라 일부 구성원은 시스템을 직접 개선할 기회가 줄어들 수 있다. - 보기 전용 권한은 안정성을 높이지만, 개선 제안과 실제 반영 사이에 별도의 의사소통 과정이 필요하다. - Figma는 코드 저장소의 풀 리퀘스트와 유사하게, 디자이너가 변경을 제안하고 유지 관리자가 검토하는 방식을 검토하고 있었다. - 이를 통해 권한 보호와 개방적인 개선 문화를 함께 구현하려는 방향을 제시했다. 디자인 시스템을 운영할 때는 개발 중인 프로젝트에는 **초대 전용**, 공식 배포본에는 **보기 전용**, 공동 편집이 필요한 작업에는 **팀 전체 편집 가능** 권한을 적용하는 방식이 실용적이다. 다만 변경 제안 절차와 검토 책임자까지 함께 정해 두어야 권한 제한이 협업 저하로 이어지지 않는다.

원문 읽기(새 탭에서 열림)
디자인 시스템Figmacollaborationaccess-control+2
figma3분 읽기큐레이션 요약

DesignSystems.com을 소개합니다 |

디자인 시스템은 여러 화면과 팀이 함께 작업하는 복잡한 환경에서 일관성·소통·실행력을 높이는 핵심 기반이다. Figma는 디자인 시스템 구축 경험과 논의를 확산하기 위해 DesignSystems.com을 공개하고, 성공 사례뿐 아니라 실패와 시행착오까지 공유하는 커뮤니티 허브로 운영하려 한다. 또한 디자인 시스템은 도구나 컴포넌트만의 문제가 아니라 조직 문화와 협업 방식까지 바꾸는 주제라고 강조한다. ## 디자인 시스템에 대한 관심이 커진 배경 - 디지털 제품이 복잡해지고 화면 수가 늘면서 디자인 프로세스를 빠르게 확장할 필요가 커졌다. - 기술 기업의 경쟁력이 사용자 경험에 크게 좌우되면서 디자인 조직의 규모도 확대되고 있다. - 조직이 성장할수록 다음과 같은 문제가 발생한다. - 제품과 화면 간 디자인 일관성 유지 - 여러 팀 사이의 커뮤니케이션 - 디자인 결과물을 실제 제품으로 구현하는 과정 - 디자인 시스템과 관련해 다음과 같은 질문이 제기되고 있다. - 디자인 컴포넌트가 코드와 연결되어야 하는가? - 시스템 구축을 전담할 별도 팀이 필요한가? - 디자인 시스템을 처음 시작하려면 어떻게 해야 하는가? - 디자인 시스템이 디자이너의 역할을 대체할 수 있는가? ## Figma의 디자인 시스템 지원 - Figma는 출시 초기부터 디자인 시스템을 만드는 사람들을 지원하는 데 집중했다. - 2016년 공개 출시 후 팀 라이브러리 기능을 도입해 여러 파일과 팀에서 컴포넌트 라이브러리를 공유할 수 있도록 했다. - 이러한 기능은 디자인 시스템을 개별 디자이너의 작업물이 아니라 조직 전체가 재사용하고 관리하는 자산으로 다루도록 돕는다. ## DesignSystems.com의 역할 - DesignSystems.com은 디자인 시스템을 배우고, 만들고, 논의하며, 널리 알리기 위한 커뮤니티 허브로 소개됐다. - 완성된 성공 사례만 보여주는 대신 실제 구축 과정의 복잡성과 어려움을 공개하는 것을 목표로 한다. - 다룰 내용은 다음과 같다. - 구축 과정에서 발생한 실패와 시행착오 - 현장에서 얻은 실질적인 교훈 - 재사용할 수 있는 모범 사례 - 디자인 시스템의 문화적·경제적 영향 - Figma는 독자들에게 성공 사례뿐 아니라 실패 경험, 해결되지 않은 질문, 조직 내의 어려운 문제를 공유해 달라고 요청한다. ## 조직 문화와 대면 커뮤니티 - 디자인 시스템 구축은 컴포넌트나 문서화 같은 기술적 작업만으로 끝나지 않는다. - 팀 간 권한, 협업 방식, 의사결정 구조 등 조직의 사회적 관계를 조정해야 한다. - 민감한 조직 문제나 내부 갈등은 공개 글보다 직접 만나서 논의하는 편이 효과적일 수 있다. - Figma는 이러한 대화를 촉진하기 위해 디자인 시스템 디너 행사를 후원했다. - 첫 행사는 샌프란시스코에서 열렸다. - 참가자들은 디자인 시스템이 조직을 어떻게 변화시키는지 토론했다. - 향후 전 세계 디자이너와 협력해 지역별 행사를 확대할 계획을 밝혔다. 디자인 시스템을 도입할 때는 시각적 일관성이나 컴포넌트 재사용만 목표로 삼기보다, 팀 간 협업 규칙과 의사결정 방식까지 함께 설계해야 한다. 또한 성공 사례만 참고하기보다는 실패와 현실적인 운영 문제를 공유하는 커뮤니티 자료를 활용하는 것이 효과적이다.

원문 읽기(새 탭에서 열림)
디자인 시스템Figma사용자 경험design-components+1