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

Figma로부터 사랑을 담아:

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

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

Figma사용자 경험프로토타이핑real-time-collaboration+3

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

웹 디자이너 없는 웹

Xfive는 전담 디자이너가 없는 웹 개발 회사였지만, Figma를 활용해 낡고 복잡해진 홈페이지를 직접 redesign했다. 브라우저 기반 협업과 실시간 댓글 기능으로 마케팅·영업·개발 등 여러 이해관계자의 피드백을 한곳에서 관리했으며, 개발자는 별도 도구 없이 디자인 사양과 코드를 확인할 수 있었다. 이 경험을 통해 Figma가 디자인 제작부터 검토, 프로토타이핑, 개발자 인계까지 연결하는 효과적인 협업 플랫폼임을 확인했다. ## 리디자인이 필요했던 배경 - Xfive는 2006년 설립된 웹 개발 회사로, 크라쿠프·멜버른·샌프란시스코에 사무실을 두고 있다. - 일반적으로 고객이 제공한 디자인을 구현하는 방식이어서 사내에 디자이너를 두지 않았다. - 리브랜딩과 신규 웹사이트 출시 이후 회사는 성장했지만, 홈페이지와 일부 주요 영역은 그대로 남아 있었다. - Customers와 Work 섹션이 outdated 상태였고, 다음과 같은 구조적 문제가 있었다. - 혼란스러운 전역 내비게이션 - 서로 경쟁하는 지나치게 많은 CTA - 탐색과 유지보수가 어려운 다수의 랜딩 페이지 ## 디자이너가 아닌 직원의 Figma 활용 - 콘텐츠 제작자인 Lubos Kmetko가 Figma를 시험적으로 사용한 뒤 홈페이지 리디자인을 맡았다. - 전문 디자이너는 아니었지만 Figma를 이용하면 직접 시안을 만들 수 있다고 판단했다. - 홈페이지, Customers 영역, Work 섹션을 새로 설계하면서 내비게이션과 CTA, 랜딩 페이지 구조를 단순화했다. - 중요한 조건은 다양한 부서가 디자인을 검토하고 의견을 제출할 수 있어야 한다는 점이었다. ## 브라우저 기반 프로토타이핑과 협업 - Lubos는 완성한 각 페이지의 목업을 링크로 공유했다. - 마케팅, 영업, 제작, 편집, 개발팀은 물론 COO까지 브라우저에서 디자인을 열고 댓글을 남길 수 있었다. - Figma의 Comments 기능을 통해 다음 작업을 한 공간에서 처리했다. - 디자인에 대한 의견 교환 - 사용자 인터랙션 설명 - 피드백을 반영한 실시간 수정 - 변경 내역과 최신 버전 동기화 - 별도의 파일 다운로드나 프로그램 설치 없이 참여할 수 있어 비디자이너도 구체적인 피드백을 제공하기 쉬웠다. - 모든 피드백이 디자인 파일과 함께 보존되어, 이메일이나 분산된 문서보다 검토 과정의 추적성이 높아졌다. ## 디자이너-개발자 인계 간소화 - 시안이 승인된 뒤에도 이메일이나 Box로 파일을 주고받지 않고 Figma 링크를 사용했다. - 개발자는 브라우저에서 디자인 파일을 열어 별도 도구 없이 사양을 확인했다. - Code Mode를 통해 다음 정보를 확인하거나 내보낼 수 있었다. - 요소의 크기 - 색상 - 패딩 등 간격 - CSS - iOS 및 Android 코드 - 이를 통해 버전 관리 문제와 구현 과정의 추측을 줄이고, 더 빠르고 정확하게 개발할 수 있었다. - Figma는 Photoshop의 디자인 기능과 Google Docs의 협업 방식을 결합하면서도 상대적으로 가볍고 단순한 도구로 평가됐다. ## 클라이언트 프로젝트로의 확장 - Xfive는 이번 리디자인을 Figma를 실제 고객 프로젝트에 적용하기 위한 시험대로 삼았다. - 향후에는 기능성 프로토타입을 팀원과 고객에게 공유하고 실시간으로 협업할 수 있다고 보았다. - PDF나 JPEG를 이메일에 첨부해 디자인 아이디어를 전달하던 기존 방식에서 벗어나: - 프로토타입 공유 - 구현 세부사항 논의 - 개발자 인계 를 하나의 플랫폼에서 처리하려 했다. 전담 디자이너가 없는 조직이라도 브라우저 기반 도구와 명확한 협업 프로세스를 갖추면 웹 리디자인을 진행할 수 있다. 특히 Figma는 디자인 검토부터 개발 사양 확인까지 연결하므로, 여러 부서와 외부 고객이 함께 참여하는 프로젝트에 유용한 선택지다.

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

Figma사용자 경험프로토타이핑Android+4

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

피그마 팁 모

이 글은 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

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

피그마, 2

Figma는 2018년 2월 Kleiner Perkins가 주도한 2,500만 달러 규모의 Series B 투자를 유치했다. 이번 투자에는 Index, Greylock, LinkedIn의 Jeff Weiner 등 기존 투자자도 참여했으며, SaaS 기업 성장과 시장 진출 전문성을 가진 Mamoon Hamid가 Figma에 대한 첫 투자로 참여했다. Figma는 이 자금을 바탕으로 웹 기반의 접근 가능하고 협업적인 디자인 도구라는 비전을 더욱 확장하려 한다. ## 2,500만 달러 Series B 투자 유치 - 투자 규모는 **2,500만 달러**다. - 투자 라운드는 **Kleiner Perkins**가 주도했다. - Kleiner Perkins의 신규 파트너 **Mamoon Hamid**가 주도적으로 참여했으며, Figma는 그의 KPCB 첫 투자 대상이 되었다. - Hamid는 Slack, Box, Intercom 등 SaaS 기업에 초기 투자한 경력이 있다. - 그의 투자 관점은 데이터 기반의 기업 평가와 시장 진출 전략에 강점이 있는 것으로 소개된다. ## 기존 투자자들의 후속 참여 - 기존 투자자인 다음 인사들도 이번 라운드에 참여했다. - Index의 **Danny Rimer** - Greylock의 **John Lilly** - LinkedIn의 **Jeff Weiner** - 기존 투자자들의 재참여는 Figma의 성장 가능성과 초기 비전에 대한 지속적인 신뢰를 보여준다. ## Figma가 추구한 디자인 도구의 방향 - Figma는 창작 도구가 사용자를 제한하는 것이 아니라 **사용자의 역량을 강화해야 한다**는 믿음에서 출발했다. - 디자인 작업은 특정 소프트웨어나 조직 안에 고립되기보다 누구나 접근할 수 있고 협업 가능해야 한다고 주장한다. - 기존의 배타적이고 분리된 디자인 작업 방식을 넘어, 웹을 기반으로 여러 사용자가 함께 작업하는 환경을 지향했다. - 새로운 작업 방식을 도입하는 과정은 혼란스럽고 시간이 걸릴 수 있지만, 사용자·직원·투자자들의 초기 지원이 성장의 기반이 되었다. ## 창업 배경과 제품 철학 - 공동 창업자 **Dylan Field**와 **Evan Wallace**는 Brown University에서 컴퓨터 과학과 수학을 공부하며 웹 기반 디자인 도구를 실험했다. - 이후 Thiel Fellowship의 지원을 받아 Figma를 시작했다. - Figma는 창작과 협업을 웹에서 구현함으로써 디자인을 더 개방적이고 연결된 작업으로 바꾸려는 목표를 세웠다. - 글은 이번 투자를 단순한 자금 조달이 아니라, Figma가 처음부터 유지해 온 협업 중심의 비전을 확장할 기회로 설명한다. 이번 투자는 Figma가 웹 기반 협업 디자인 도구 시장에서 성장할 수 있는 재정적·전략적 기반을 마련했다는 의미가 있다. 특히 SaaS 성장 경험이 있는 투자자의 참여와 기존 투자자들의 후속 투자는 Figma의 제품 철학과 시장 확장 가능성에 대한 신뢰를 뒷받침한다.

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

Figma사용자 경험collaborative-designweb-design+1

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

피그마, 전 세계 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

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

퀄리티 위크 동안 Figma에서

Figma는 신규 기능 개발만큼 기존 제품의 품질 개선도 중요하다고 보고, 전 직원이 일주일 동안 버그 수정에 집중하는 ‘Quality Week’를 운영했다. 이 기간에는 사소하지만 반복적으로 사용자 경험을 해치는 버그와 완성도가 낮은 기능을 집중적으로 개선했으며, 제품을 더 빠르고 안정적이며 직관적으로 만드는 데 목적이 있었다. Quality Week는 사용자 만족뿐 아니라 구성원들이 평소 다루지 않던 코드 영역을 경험하고 팀 전체의 품질 의식을 높이는 기회가 되었다. ## 전사적인 품질 개선 주간 - 2017년 초 Figma는 첫 공식 Quality Week를 시작했다. - 엔지니어와 디자이너를 포함한 전 직원이 기존 프로젝트를 잠시 멈추고 제품의 “봄맞이 청소”에 참여했다. - 대상은 치명적인 장애뿐 아니라 다음과 같은 문제였다. - 기능은 동작하지만 사용하기 불편한 버그 - 전문적인 디자인 도구의 기준에 미치지 못하는 세부 동작 - 오랜 시간 반복 사용될 때 불편함이 누적되는 작은 결함 - 디자이너는 Figma를 장시간 사용하므로 작은 오류도 반복되면서 큰 불만으로 이어질 수 있다고 판단했다. - 기능 출시를 계속하는 대신 버그 수정에 집중함으로써 제품의 속도, 안정성, 직관성을 높이려 했다. ## Quality Week 2018의 주요 개선 사항 - 2018년부터 Quality Week를 정기적인 Figma의 전통으로 만들었다. - 두 엔지니어링 팀이 협력해 다양한 버그를 폭넓게 처리하고, 특히 전문 디자인 도구로서 문제가 되는 기능을 우선순위에 두었다. - 대표적인 개선 내용은 다음과 같다. - **Figma Mirror**: 모바일에서 디자인을 확인하는 미러링 앱의 안정성을 높이고 충돌을 줄였다. - **Sketch 가져오기**: Sketch 파일을 편집기 창으로 직접 드래그 앤 드롭할 수 있게 했으며, 텍스트 객체의 변환 정확도를 개선했다. - **Chromebook 지원**: 검색 키와 드래그를 조합해 객체를 복제할 수 있도록 해 학생 등 Chromebook 사용자의 편의성을 높였다. - **레이어 패널**: 레이어를 이동할 때 그룹과 프레임 안에 더 자연스럽게 중첩되도록 동작을 개선했다. - 모든 버그를 해결한 것은 아니며, Quality Week는 연중 진행되는 일반적인 버그 수정과 별도로 집중적인 개선 시간을 확보하는 방식이다. ## 오래된 버그를 해결하는 조직적 가치 - Quality Week의 효과는 사용자에게 제공되는 수정 사항에만 국한되지 않았다. - 개발자와 디자이너가 평소 담당하지 않던 코드베이스와 기능 영역을 살펴볼 수 있었다. - 이를 통해 구성원들이 제품 전체 구조를 더 폭넓게 이해하고 협업할 기회를 얻었다. - 2015년부터 Windows 사용자에게 영향을 주던 오래된 버그가 해결되었고, 이를 기념해 ‘가장 오래된 버그’ 상을 수여했다. - 버그 수정 과정을 행사와 시상식으로 즐겁게 만들어, 반복적이고 비 glamour한 작업에도 성취감을 부여했다. ## 사용자 피드백을 품질 개선에 활용 - 수정된 버그 중 상당수는 Figma 커뮤니티가 제보한 문제에서 비롯되었다. - 사용자는 제품 내부의 도움말 메뉴에서 **Contact Us**를 선택하거나 Twitter, 커뮤니티 포럼, 이메일을 통해 피드백을 보낼 수 있었다. - Figma는 지원팀만이 아니라 엔지니어, 경우에 따라 CEO까지 직접 사용자 지원에 참여하는 ‘전사적 지원’ 문화를 강조했다. - 이는 실제 사용 환경에서 발견되는 문제를 개발팀이 빠르게 이해하고 제품 개선에 반영하는 기반이 되었다. ## 실용적인 결론 신규 기능 출시와 기술 부채·버그 정리는 균형 있게 운영해야 한다. 정기적으로 전사 또는 팀 단위의 집중 품질 개선 기간을 마련하고, 오래된 버그와 반복적인 사용성 문제를 사용자 피드백에 따라 우선 처리하면 제품 완성도와 팀의 코드베이스 이해도를 함께 높일 수 있다.

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

Figmadesign-toolswindowschromebook+4

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

#FigmaTip 라운

이 글은 Figma 디자인 커뮤니티에서 공유된 유용한 단축 동작과 작업 팁을 모은 #FigmaTip Roundup이다. 별도 기능을 의식하지 않아도 자연스럽게 사용할 수 있는 직관적인 상호작용부터, 이미지 가져오기·중첩 레이어 탐색·균등 간격 배치처럼 반복 작업을 줄여 주는 기능까지 소개한다. 핵심은 Figma의 숨은 조작법을 익히면 디자인 작업을 더 빠르고 정밀하게 할 수 있다는 점이다. ## 폴더를 드래그해 이미지 일괄 가져오기 - 데스크톱의 폴더를 Figma 작업 화면으로 직접 드래그하면 폴더 안의 이미지 세트를 한 번에 가져올 수 있다. - 이미지를 하나씩 업로드하는 대신 여러 이미지나 에셋을 빠르게 배치할 때 유용하다. - 이미지가 많은 시안, 갤러리, 카드 목록 등을 구성할 때 작업 시간을 줄일 수 있다. ## Ctrl + 우클릭으로 중첩 레이어 탐색 - 오브젝트 위에서 **Ctrl 키를 누른 채 우클릭**하면 해당 위치에 포함된 중첩 레이어 목록을 확인할 수 있다. - 팝업에 표시된 레이어를 선택해 부모 오브젝트 안쪽의 특정 요소로 바로 이동할 수 있다. - 복잡한 컴포넌트나 여러 프레임이 겹쳐 있는 화면에서 원하는 레이어를 반복 클릭하지 않고 정확하게 선택할 수 있다. ## 빨간 가이드라인으로 동일한 간격 맞추기 - 오브젝트를 이동할 때 나타나는 빨간색 가이드라인을 이용하면 주변 요소와의 간격을 빠르게 동일하게 맞출 수 있다. - 먼저 가이드라인에 맞춰 요소를 배치한 뒤, 여러 요소를 선택해 **Distribute** 기능을 사용하면 일정한 간격의 열(column) 그리드를 만들 수 있다. - 수작업으로 좌표와 간격을 계산하지 않아도 정렬과 반복 레이아웃을 정밀하게 구성할 수 있다. ## 실용적인 활용 - 이미지가 많은 화면은 폴더 단위로 가져온 뒤, 가이드라인과 Distribute 기능으로 정렬한다. - 레이어 구조가 복잡할수록 Ctrl + 우클릭 탐색을 활용하면 선택 오류를 줄일 수 있다. - Figma의 단축키와 자동 가이드를 적극적으로 사용하면 반복적인 배치·선택 작업을 크게 단순화할 수 있다.

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

Figma사용자 인터페이스desktop-applicationsgrid-layout+1

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

팀을 Figma로 전환하도록 설득

Figma 도입은 단순히 디자인 도구를 바꾸는 일이 아니라, 디자인을 조직 내 협업과 의사결정의 중심으로 끌어오는 문화적 변화다. Buffer의 James Morris는 전사 탐색 기간을 마련하고, 실제 화이트보딩과 엔지니어 협업을 통해 구성원들이 Figma의 가치를 직접 경험하게 했다. 클라우드 기반의 공유성, 플랫폼 독립성, 실시간 협업, 개발자용 디자인 데이터 제공이 전환의 핵심 동력이었다. ## 디자인 도구가 협업을 가로막은 문제 - Buffer는 투명성을 중시하는 조직이었지만, 기존 디자인 도구는 디자인팀을 다른 부서와 분리했다. - 디자인 파일이 Dropbox의 깊은 하위 폴더에 묻혀 필요한 자료를 찾기 어려웠다. - 파일을 열려면 특정 데스크톱 소프트웨어나 최신 버전, 유료 라이선스가 필요했다. - 개발자와 PM은 실수로 원본을 덮어쓸까 봐 파일을 열기조차 꺼렸다. - Linux를 사용하는 엔지니어는 디자인 파일을 보기 위해 Mac을 구매해야 할 수도 있었다. ## Figma가 제공한 협업 방식 - 클라우드에서 실행되므로 파일을 URL 하나로 공유할 수 있다. - 무료 보기 전용 계정을 통해 누구나 디자인을 확인하고 댓글을 남길 수 있다. - 디자이너와 개발자, PM이 동일한 파일을 보며 소통할 수 있다. - 디자인 파일이 특정 운영체제나 데스크톱 애플리케이션에 종속되지 않는다. - 하나의 공유 URL이 디자인의 기준점이 되어, 이미지로 내보내거나 Dropbox 경로를 설명할 필요가 줄어든다. ## 1단계: 전사적인 탐색 기간 마련 - James는 처음부터 Figma 도입을 강요하지 않고, 회사 전체에 ‘탐색 기간’을 제안했다. - 각 팀이 여러 디자인·협업 도구를 직접 사용해 보고 자신들의 요구에 맞는 도구를 평가하도록 했다. - 이 과정에서 Buffer의 업무 흐름과 협업 문제에 대한 구성원들의 피드백을 수집했다. - Figma의 장점을 일방적으로 주장하기보다, 실제 사용을 통해 기능이 증명되도록 했다. ## 2단계: 설명보다 직접 경험하게 하기 ### PM과의 원격 화이트보딩 - 원격 근무 환경에 맞춰 PM과 Figma에서 실시간 가상 화이트보딩을 진행했다. - 문서에 글을 쓰는 대신 도형을 사용해 기능 아이디어와 협업 방식을 함께 구상했다. - 별도의 공식 기획서가 완성될 때까지 기다리지 않고, 디자이너와 PM이 즉시 아이디어를 시각화할 수 있었다. - Figma의 직관성과 실시간 협업 기능을 자연스럽게 체험하게 한 사례다. ### 엔지니어 설득 - 개발자들에게 장황하게 설명하는 대신 파일 URL을 전달하고 필요한 정보를 직접 찾아보게 했다. - 무료 보기 전용 기능으로 CSS, iOS용 Swift, Android용 XML 관련 디자인 데이터를 확인할 수 있었다. - 개발자는 별도의 애플리케이션을 설치하거나 라이선스를 구매하지 않고 디자인을 열 수 있었다. - URL이 동일하게 유지되는 ‘단일 진실의 원천(source of truth)’이 되어 디자인 전달과 위치 확인이 쉬워졌다. - Figma가 WebAssembly를 활용해 브라우저 성능을 개선했다는 점도 엔지니어들의 기술적 관심을 끌었다. ### 디자이너의 우려 다루기 - 디자이너는 공개적이고 투명한 디자인 작업 방식에 부담을 느낄 수 있다. - 웹 애플리케이션이 데스크톱 도구만큼 빠르게 작동할지 의심할 수도 있다. - 따라서 디자이너에게는 기능 설명보다 실제 성능과 작업 흐름을 직접 보여 주는 접근이 필요하다. - 글에서 제시된 전략의 핵심은 각 직군이 중요하게 여기는 가치에 맞춰 Figma를 소개하는 것이다. 조직의 도구 전환을 성공시키려면 “새 도구가 더 좋다”고 주장하기보다, 구성원들이 자신의 업무에서 문제 해결 효과를 직접 확인하게 해야 한다. 특히 원격·다직군 협업 환경에서는 공유 가능한 단일 작업 공간과 운영체제에 구애받지 않는 접근성이 도입의 강력한 근거가 된다.

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

FigmaAndroidCSSwebassembly+3

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

Figma가 이 버클

UC 버클리의 HCI 수업 CS 160은 디지털 제품 디자인을 가르치면서, 기존 디자인 도구와 환경의 한계를 Figma로 해결했다. Figma는 운영체제 제약과 높은 학습 곡선을 낮추고, 학생들이 수업에서 배운 사용성 원칙을 곧바로 팀 프로젝트에 적용하도록 도왔다. 특히 실시간 공동 편집과 맥락 기반 피드백은 디자인 경험이 적은 컴퓨터과학 전공자도 프로젝트에 적극 참여하게 만들었다. ## 디지털 디자인 교육의 현실과 CS 160 - 대학 교육은 빠르게 성장한 디지털 디자인 산업을 충분히 따라가지 못하고 있었다. - UC 버클리의 CS 160은 컴퓨터과학 전공자에게 사용성 및 인간-컴퓨터 상호작용의 원리를 가르치는 드문 디지털 제품 디자인 수업이었다. - 학생들은 3~4명씩 팀을 이루어 매 학기 주제에 맞는 Android 앱을 제작했다. - 의료, 선거 등 다양한 주제가 사용됐다. - 매주 수업에서 배운 내용을 프로젝트에 반영했다. - 수강 수요가 높아 정원이 기존 100명에서 두 배로 늘어난 적도 있었다. ## 기존 도구와 운영 방식의 문제 - 학생들이 Linux, Windows, macOS 등 서로 다른 컴퓨터를 사용했고, 개인 노트북이 없는 경우도 있었다. - 특정 소프트웨어가 작동하지 않는 학생을 위해 컴퓨터실을 마련했지만 효과적인 해결책이 되지 못했다. - Photoshop 등 Adobe 도구는 기능이 많고 학습 곡선이 가팔라 디자인 경험이 없는 학생에게 부담이 컸다. - 조교들은 디자인 원리보다 Photoshop 사용법을 가르치는 데 더 많은 시간을 써야 했다. - 결과적으로 일부 프로젝트에서는: - 디자인 경험과 적절한 컴퓨터를 가진 학생만 와이어프레임과 프로토타이핑을 담당하고 - 나머지 학생은 사용자 테스트나 코딩을 맡는 식으로 역할이 분리됐다. - 피드백도 이메일 등으로 일괄 전달해야 해서, 어떤 디자인 요소를 지칭하는지 학생들이 이해하기 어려웠다. ## 한 시간 만에 익힌 Figma Figma는 수업의 기술적·교육적 문제를 동시에 해결하는 도구로 선택됐다. - 학생에게 무료로 제공됐다. - 운영체제와 컴퓨터 종류에 관계없이 사용할 수 있었다. - 인터페이스가 단순해 디자인 도구 경험이 없는 학생도 빠르게 배울 수 있었다. - 디자인 화면에 직접 댓글을 달아 구체적인 위치에 피드백을 남길 수 있었다. - 버전 관리 기능으로 교사가 작업 진행 상황을 확인할 수 있었다. - 여러 학생이 하나의 디자인 파일을 동시에 편집할 수 있었다. - 프로토타이핑 기능이 내장되어 별도 도구 없이 발표용 결과물을 제작할 수 있었다. 컴퓨터과학 전공자인 Ryan Kapur는 디자인 도구 경험이 없었지만 약 한 시간 만에 Figma를 익혔다. 덕분에 도구 사용법에 시간을 빼앗기지 않고 Nielsen의 10가지 사용성 휴리스틱과 같은 수업 개념에 집중할 수 있었다. ## 수업 내용과 프로젝트의 직접적인 연결 - 학생들은 수업에서 배운 사용성 원칙을 즉시 팀 프로젝트에 적용했다. - Ryan의 팀은 의료를 주제로 알코올 의존자가 가까운 Alcoholics Anonymous 모임을 찾을 수 있는 앱을 제작했다. - Figma의 직관적인 사용성 덕분에 팀원들은 주당 약 한 시간의 대면 시간만으로도: - 새로운 기능을 브레인스토밍하고 - 화면을 설계하며 - 프로토타입을 제작할 수 있었다. - 이론을 실제 디자인에 반복적으로 적용하면서 사용성 개념을 더 깊이 이해하게 됐다. ## 실시간 협업으로 달라진 팀 프로젝트 - 여러 학생이 같은 파일을 동시에 편집할 수 있어 한 공간에서 함께 디자인할 수 있었다. - 팀원들은 서로의 작업 과정을 실시간으로 확인하고, 파일 안에서 아이디어를 논의할 수 있었다. - 마감 직전에도 여러 명이 동시에 수정할 수 있어 협업 효율이 높아졌다. - 파일을 덮어쓰거나 잘못 저장할 걱정 없이 수업 밖에서도 작업할 수 있었다. - 디자인 경험이 없는 학생도 파일에 직접 참여할 수 있어 역할이 특정 학생에게만 집중되지 않았다. - 교사는 디자인의 정확한 위치에 댓글을 남길 수 있어 피드백의 전달력과 이해도가 향상됐다. ## 교육적 의미 - Figma는 단순히 디자인 제작 도구가 아니라 컴퓨터과학과 디자인을 연결하는 협업 환경으로 활용됐다. - 도구 학습에 드는 시간을 줄여 수업의 초점을 사용성, 문제 정의, 사용자 경험에 맞출 수 있었다. - 실시간 공동 작업은 서로 다른 전공과 역량을 가진 학생들이 함께 문제를 해결하도록 도왔다. - 이 사례는 교육용 디자인 도구가 접근성, 협업성, 피드백 기능을 갖춰야 학습 효과를 높일 수 있음을 보여준다. 실무적으로는 디자인 수업이나 팀 프로젝트에서 특정 운영체제나 고가의 전문 소프트웨어를 전제로 하기보다, 누구나 빠르게 접근하고 동시에 작업할 수 있는 협업 도구를 선택하는 것이 효과적이다. 도구 자체보다 학생들이 사용성 원칙을 실제 결과물에 반복 적용하고, 교사의 피드백을 디자인 맥락 안에서 즉시 반영할 수 있는 환경을 만드는 것이 중요하다.

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

Figma사용자 경험프로토타이핑사용자 인터페이스+4

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

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

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

#FigmaTip Roundup

이 글은 Figma 디자인 커뮤니티에서 공유된 짧고 실용적인 팁을 모은 네 번째 라운드업이다. 마스크, 심벌, 제약 조건, 아웃라인 모드처럼 기본 기능을 활용하면 이미지 편집과 반복 패턴 제작, 반응형 레이아웃 확인을 더 효율적으로 할 수 있다고 소개한다. 각 팁은 설명보다 실제 사용 사례와 짧은 시각 자료 중심으로 전달된다. ## 마스크로 이미지 자르기 - Figma의 마스크 기능을 사용하면 이미지나 그래픽을 원하는 형태로 잘라낼 수 있다. - 사각형에 한정하지 않고 다양한 도형을 마스크로 활용해 독특한 이미지 크롭을 만들 수 있다. - 이미지 자체를 파괴적으로 편집하지 않고 표시 영역만 조정하므로, 이후에도 위치와 크기를 수정하기 쉽다. ## 심벌로 반복 패턴 만들기 - 동일한 요소를 여러 번 배치해야 할 때 심벌을 활용하면 작업을 단순화할 수 있다. - 심벌 하나를 수정하면 연결된 인스턴스에 변경 사항을 반영할 수 있어 반복 요소 관리에 유리하다. - 심벌을 반복 배치하고 회전·이동·조합하면 장식용 패턴이나 재미있는 그래픽을 만들 수 있다. - 단순한 UI 컴포넌트뿐 아니라 창의적인 시각 디자인에도 심벌을 사용할 수 있음을 보여준다. ## 제약 조건으로 프레임 크기 조정하기 - 프레임 내부 요소에 제약 조건을 설정하면 부모 프레임의 크기가 바뀔 때 요소가 어떻게 반응할지 지정할 수 있다. - 요소를 왼쪽·오른쪽·위·아래에 고정하거나, 가로·세로 방향으로 늘어나도록 설정할 수 있다. - 다양한 화면 크기를 고려한 레이아웃을 만들 때 유용하며, 프레임 크기를 직접 조정하면서 반응 방식을 확인할 수 있다. - 원문에서는 이 팁을 소개하는 트위터 임베드가 정상적으로 표시되지 않는다. ## Command + Y로 아웃라인 모드 확인하기 - `Command + Y` 단축키로 아웃라인 모드를 전환할 수 있다. - 아웃라인 모드에서는 채우기와 시각적 스타일보다 객체의 경계와 구조를 중심으로 확인할 수 있다. - 복잡한 아이콘이나 화면 구성에서 겹친 요소, 벡터 경로, 레이어 구조를 점검할 때 도움이 된다. - 일반 보기와 아웃라인 보기를 오가며 아이콘 구성과 레이아웃을 검토할 수 있다. 실무에서는 마스크를 이미지 편집에, 심벌을 반복 요소 관리에, 제약 조건을 반응형 레이아웃 설계에, 아웃라인 모드를 구조 검수에 적용하면 좋다. Figma의 기본 기능도 조합 방식에 따라 단순한 편집을 넘어 효율적인 시스템과 창의적인 그래픽 제작에 활용할 수 있다.

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

Figma사용자 인터페이스design-toolsgraphic-design+4

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는 전체 프로세스의 마찰과 반복 작업이 줄어 프로젝트를 더 빨리 완료할 수 있었다. - 작업 흐름이 자연스러워져 팀원들이 도구 자체보다 디자인과 문제 해결에 집중할 수 있었다. - 시간 절약뿐 아니라 협업 경험이 편해진 점도 생산성 향상의 중요한 요인으로 작용했다. - 결과적으로 같은 인력으로 더 많은 업무를 수용할 수 있다는 자신감을 얻었다. 에이전시처럼 내부 팀과 외부 고객, 개발자가 동시에 참여하는 환경에서는 파일 형식보다 **접근성, 단일 최신본, 문맥 기반 피드백, 개발자용 정보 제공**이 중요하다. 따라서 협업 도구를 선택할 때는 개별 기능보다 전체 업무 흐름을 얼마나 하나로 연결하고 반복 커뮤니케이션을 줄이는지 평가하는 것이 좋다.

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

Figma프로토타이핑AndroidiOS+4

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

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를 관리하기에 적합하다. ## 실무 적용을 위한 접근법 - 처음부터 모든 화면과 컴포넌트를 표준화하려 하지 말고, 반복 사용 빈도가 높은 요소부터 시작한다. - 컴포넌트와 스타일을 팀 라이브러리로 공유해 모든 구성원이 동일한 자산을 사용하도록 한다. - 중첩 컴포넌트와 제약 조건은 반응형 화면과 복잡한 상태를 표현할 때 활용한다. - 디자인 시스템을 디자이너만의 도구로 만들지 말고 개발자와 제품 관리자도 쉽게 사용할 수 있게 구성한다. - 시스템을 한 번 완성하는 프로젝트로 보기보다, 실제 사용 데이터를 바탕으로 계속 개선하는 공용 기반으로 운영하는 것이 좋다.

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

Figma디자인 시스템component-libraryatomic-design+2

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

디자인 시스템을 위한 고급

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

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

Figma디자인 시스템collaborationaccess-control+2

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

DesignSystems.com을 소개합니다 |

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

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

Figma디자인 시스템사용자 경험design-components+1