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

Figma의 디자인 시스템 컨퍼

디자인 시스템은 제품팀이 더 빠르고 일관되게 일하며 변화하는 비즈니스 요구에 대응하도록 돕는 핵심 기반이다. 과거의 정적인 PDF 가이드와 분리된 디자인·개발 프로세스에서 벗어나, 오늘날에는 협업·가시성·유연한 도구·커뮤니티 참여가 중요해졌다. Figma는 이러한 과제를 공유하고 실무 경험을 나누기 위해 디자인 시스템 컨퍼런스 **Schema**를 개최한다고 소개한다. ## 디자인 시스템의 변화 - 과거에는 디자이너가 PDF 스타일 가이드를 만들고, 개발자가 이를 해석해 코드 기반 스타일시트로 옮기는 방식이 일반적이었다. - 디자인과 개발이 서로 다른 도구와 팀에 분리되어 있어 의사소통과 일관성 유지가 어려웠다. - 현재는 협업 도구, 공유 라이브러리, 컴포넌트, 스타일 등을 통해 공통된 이해를 형성하는 방향으로 발전했다. - 디자인 시스템은 전담 대규모 조직뿐 아니라 소규모 팀의 자발적인 활동으로도 구축될 수 있다. ## 디자인 시스템 운영의 핵심 과제 - 디자인 시스템의 가치는 라이브러리와 컴포넌트 제공에만 있지 않다. - 시스템을 사용하는 사람들과의 **커뮤니케이션**, 운영 성과를 확인하는 **측정**, 구성원이 개선에 참여하는 **기여 구조**도 중요하다. - 디자인 시스템 실무자들은 팀이 프로세스와 정리 작업에 덜 시간을 쓰고, 실제 제품 문제 해결에 더 집중하도록 돕는 것을 목표로 한다. - 디자이너뿐 아니라 과거에는 디자인 도구를 거의 사용하지 않던 개발자, 기획자 등 다양한 직군도 디자인 프로세스에 참여하게 되었다. - 조직 규모와 관계없이 대부분의 팀은 디자인 시스템을 어떻게 만들고 확장할지 계속 실험하고 있다. ## Schema 컨퍼런스의 목적 - Schema는 디자인 시스템을 **구축(Build)**하고, **확장(Scale)**하며, **기여(Contribute)**하는 방법을 다루는 Figma의 사용자 컨퍼런스다. - 규모가 작은 팀부터 대규모 조직까지 다양한 기업의 실무자 사례를 공유한다. - 디자인 시스템 또는 디자인 운영 리더, 첫 디자인 시스템을 formalize하는 팀, Figma API 기반 도구와 워크플로를 확장하려는 팀을 대상으로 한다. - 세션은 디자인 시스템에 대한 중급 수준의 이해를 전제로 구성된다. ## 세 가지 세션 주제 - **Build** - 다양한 규모의 조직에서 디자인 시스템을 실제로 구축하는 방법 - 재사용 가능한 리소스와 운영 기반을 만드는 실무적 접근 - **Scale** - 조직 내 디자인 시스템 도입과 사용을 확대하는 방법 - 채택률과 ROI를 측정하는 방법 - 플러그인과 도구를 활용해 시스템의 운영 범위를 확장하는 방법 - **Contribute** - 내부 커뮤니티를 형성하고 구성원의 참여를 유도하는 방법 - 팀원들이 디자인 시스템을 수동적으로 사용하는 데 그치지 않고 직접 개선하도록 만드는 방식 ## 행사 방식과 일정 - 개최일: 2021년 10월 7일 오전 8시 30분(PT) - 온라인 가상 행사 - 의미 있는 대화를 위해 실시간 참석 인원을 제한하고 사전 신청을 받음 - 실시간 참석이 어려운 사람들을 위해 발표 영상을 Figma Community에 무료 공개 - 참가 신청은 2021년 10월 4일까지 가능하며, 신청 결과는 영업일 기준 3일 이내 안내 실무적으로는 디자인 시스템을 컴포넌트 저장소나 스타일 가이드로만 보지 말고, 협업 방식·성과 측정·조직 구성원의 기여를 포함하는 운영 체계로 설계하는 것이 중요하다. 특히 시스템을 확장하려면 구축(Build), 도입과 운영(Scale), 내부 참여(Contribute)를 함께 고려해야 한다.

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

디자인 시스템Figmapluginsfront-end-development+2

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

Figma의 새로운 소

Figma는 2021년 8월 업데이트에서 FigJam의 확장성과 Figma 플러그인 개발 역량을 강화하고, 디자인 시스템 관리와 반복 작업을 간소화했다. 특히 FigJam 플러그인·위젯, 프로토타이핑 자동화를 위한 API, 라이브러리 관리 기능이 추가되어 협업과 디자인 운영의 효율성이 높아졌다. 또한 투명 객체의 그림자 처리와 직선 그리기처럼 일상적인 사용성도 개선했다. ## FigJam 플러그인과 위젯 도입 - FigJam에 Figma의 오픈 플랫폼을 확장해 팀별 협업 방식에 맞는 기능을 직접 만들 수 있게 했다. - **플러그인** - 개인 작업을 자동화하고 효율화하는 도구다. - 스타일 사용자 지정, 스티키 정리, 데이터 가져오기 등에 활용할 수 있다. - **위젯** - 여러 사용자가 캔버스에서 함께 조작하는 인터랙티브 객체다. - 투표, 설문, 메모장, 게임 등을 제공해 워크숍과 브레인스토밍 진행을 돕는다. - 기본 HTML·JavaScript 지식이 있으면 플러그인을, React 경험이 있으면 위젯을 개발할 수 있도록 진입 장벽을 낮췄다. - 플러그인은 모든 요금제 사용자가 개발할 수 있었고, 위젯은 당시 비공개 베타로 제공됐다. ## Figma 플러그인 API 확장 - **프로토타이핑 쓰기 기능** - 플러그인이 프로토타입을 자동 생성하거나 기존 인터랙션을 대량으로 수정할 수 있게 됐다. - 반복적인 프로토타입 제작과 상호작용 설정을 자동화할 수 있다. - **플러그인 파라미터** - 별도의 사용자 인터페이스를 만들지 않고도 Quick Actions를 통해 사용자 입력을 받을 수 있다. - 플러그인 개발 시간이 줄고, 간단한 입력 기반 도구를 더 빠르게 만들 수 있다. - 당시 오픈 베타로 제공됐다. ## 디자인 시스템 관리 개선 - **컴포넌트 이동** - 게시된 컴포넌트와 컴포넌트 세트를 파일 간에 이동할 수 있다. - 이동 후에도 기존 인스턴스와의 연결이 유지된다. - 대형 라이브러리를 여러 파일로 분리하거나 새 파일로 이전하기 쉬워졌다. - **라이브러리 교체** - 스타일과 컴포넌트를 하나씩 변경하지 않고, 전체 라이브러리 세트를 다른 라이브러리로 교체할 수 있다. - **컴포넌트 검색** - `Shift + I` 단축키로 필요한 컴포넌트를 빠르게 검색할 수 있다. - 규모가 큰 디자인 시스템에서 탐색 시간을 줄여준다. ## 일상적인 사용성 개선 - 투명 객체가 뒤에 있는 그림자를 기본적으로 가리도록 변경되어, 별도로 설정을 조정할 필요가 줄었다. - Figma와 FigJam에서 연필 도구 사용 시 `Shift`를 누르면 직선을 그릴 수 있다. - 그 밖의 버그 수정과 개선 사항은 Figma 릴리스 노트에서 확인할 수 있도록 안내했다. 실무에서는 컴포넌트 라이브러리를 기능별 파일로 분리하고, 라이브러리 교체 기능과 플러그인 자동화를 함께 활용하면 디자인 시스템 유지보수 비용을 줄일 수 있다. FigJam에서는 투표나 설문 위젯을 활용해 회의 진행과 의사결정을 구조화할 수 있다.

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

디자인 시스템FigmafigjamReact+3

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

협업 중심의 교실을 조성

FIT의 Christie Shin 교수는 Figma를 활용해 학생들이 결과물보다 디자인 과정과 협업을 중시하도록 가르친다. 가상 교실을 팀·프로젝트·파일 구조로 조직하고, 수업 중 실시간 피드백과 반복 작업을 유도해 실제 디자인 현장과 유사한 학습 환경을 만든다. 핵심은 초기 작업을 공유하고, 구조와 자율성을 함께 제공하며, 개인 작업도 공동체 안에서 진행하고, 다른 사람의 영향을 자연스럽게 인정하는 것이다. ## Figma로 구성한 가상 교실 - 수업 섹션별로 Figma 팀을 만들고, 강의 자료와 활동을 프로젝트 단위로 정리한다. - 학생들은 강의 중 각자 파일에 머무르지 않고 동일한 Figma 파일에 모여 작업하고 피드백을 주고받는다. - 학기 초에는 인터랙티브 학생 프로필 만들기 같은 아이스브레이킹 활동으로 협업을 시작한다. - 모든 수업 활동과 최종 발표 자료를 Figma 안에서 관리해 학습 과정을 한곳에 축적한다. ## 초기 작업을 적극적으로 공유하기 - 완성되지 않은 아이디어를 공개하는 부담을 줄이고, 초기 단계부터 작업을 보여주는 습관을 기른다. - 학생들은 수업 중 서로의 파일에 들어가 구두와 댓글 등으로 즉각적인 의견을 전달한다. - 디자인을 완성된 결과물이 아니라 사고하고 발전시키는 과정으로 이해하게 한다. - 반복적인 피드백을 통해 피드백을 요청하고 반영하는 능력을 키운다. ## 구조를 제공하되 성장할 여지 남기기 - 학기 초에 활동별 템플릿과 이름이 지정된 페이지를 제공해 학습 과정을 체계화한다. - 템플릿은 리서치, 요약, 와이어프레임 등 목적에 맞는 작업을 안내한다. - 무한 캔버스의 빈 공간에는 스케치, 실험, 빠른 반복 작업을 자유롭게 추가할 수 있다. - 하나의 Figma 파일을 리서치부터 최종 결과물까지 기록하는 ‘창의적 여정’ 또는 디자인 저널로 활용한다. ## 개인 작업을 공동체 안에서 진행하기 - 개인 프로젝트라도 스터디 그룹 안에서 진행하며, 중간 결과를 지속적으로 발표한다. - 예를 들어 MTA 앱을 위한 디자인 시스템과 영상 사례 연구를 개인별로 제작하되, 그룹에서 진행 상황을 공유했다. - 최종 발표 때 한 번만 평가받는 대신 제작 과정에서 점진적으로 피드백을 반영한다. - 이러한 방식은 실제 디자인 조직의 크로스펑셔널 협업과 디자인 크리틱을 모방한다. - 작업물을 지나치게 ‘소중한 완성품’으로 여기지 않고, 피드백에 따라 계속 개선하도록 돕는다. ## 다른 사람의 영향을 인정하기 - 학생들이 아이디어를 빼앗길까 봐 작업을 숨기는 태도에서 벗어나도록 한다. - 다른 사람의 의견과 작업이 자신의 디자인을 변화시키는 것은 디자인 과정의 자연스러운 일부라고 가르친다. - 프로젝트마다 영감을 준 전문 디자이너나 동료 학생의 디자인 이미지를 수집하게 한다. - 영향을 준 사례와 출처를 프로젝트에 함께 기록하고, 크리틱에서 그 영향 관계를 논의한다. - 이를 통해 아이디어의 차용을 숨기는 대신 맥락과 기여를 투명하게 설명하는 태도를 기른다. 실무적인 관점에서는 학생별 파일에 템플릿과 자유 작업 공간을 함께 제공하고, 정기적인 중간 공유와 동료 크리틱을 운영하는 방식이 효과적이다. 중요한 것은 도구 자체보다 초기 공개, 지속적인 피드백, 영향에 대한 인정이 자연스럽게 일어나는 협업 문화를 만드는 것이다.

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

디자인 시스템Figmauser-experience-designwireframing+2

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

Figma 인사이드:

2021년 Figma의 인턴과 신입사원 네 명이 초기 커리어에서 어떤 기준으로 직무와 회사를 선택했는지 이야기한다. 이들은 직무 적합성뿐 아니라 공감하는 문화, 성장 기회, 팀과 관리자의 지원, 제품과 미션에 대한 구성원의 열정을 중요하게 평가했다. 다양한 인턴십과 현직자와의 대화를 통해 자신에게 맞는 일을 구체화하고, 실제 업무에서 주도권과 장기적인 성장 가능성을 확인하라고 조언한다. ## 초기 커리어 역할을 선택할 때의 기준 - **Emily**는 데이터 과학 직무의 다양성을 고려해 자신의 기술적 배경과 목표에 맞는 역할을 찾았다. - 빠르게 성장하는 스타트업의 초기 데이터 팀 - 기술 중심이면서도 제품에 가까운 업무 - 서로 연결되고 소통하려는 공감 능력 중심의 문화 - **Daniela**는 회사와 구성원의 진정성을 중요하게 보았다. - 형식적인 구호가 아니라 실제로 커뮤니티를 만들려는 문화 - 회사의 미션과 사용자 문제에 깊이 공감하는 구성원 - 디자인을 더 많은 사람에게 접근 가능하게 만들려는 목표 - **Langston**은 엔지니어로서의 성장 가능성을 핵심 기준으로 삼았다. - 주니어 엔지니어가 프로젝트를 소유할 수 있는지 - 자신의 일이 회사의 큰 목표에 영향을 주는지 - 엔지니어가 장기적으로 머물고 싶어 하는 회사인지 - 경력이 정체되지 않고 발전할 기회가 있는지 ## 인턴십과 현직자 대화로 적성 확인 - 여러 회사와 직무를 직접 경험하는 것이 자신이 원하는 일을 파악하는 데 도움이 됐다. - 여름 인턴십과 학기 중 인턴십을 통해 다양한 업무를 비교 - 실제로 무엇을 좋아하고 싫어하는지 업무 현장에서 확인 - 동문과 면접관, 현직 엔지니어에게 구체적인 질문을 했다. - 일상적인 업무 내용뿐 아니라 그 역할을 통해 어떻게 성장했는지 질문 - “몇 년 뒤 나도 이런 성장을 원할까?”라는 관점으로 판단 - 업무 자체만큼 팀과 관리자의 지원도 중요하다는 점을 확인했다. - 성장할 수 있도록 피드백과 기회를 제공하는 관리자 - 심리적으로 안전하고 협력적인 팀 - 직무 내용과 조직 환경을 함께 평가해야 함 ## Figma에 끌린 이유 - **Emily**는 Figma 구성원이 자신의 경험과 관점을 외부에 공유할 수 있다는 점에서 개방적인 문화를 느꼈다. - 신입 엔지니어의 경험을 다룬 블로그 글을 접한 뒤 회사에 관심을 가짐 - 데이터 팀이 성장과 영향력 확대의 전환점에 있었음 - 첫 신입사원 채용을 진행하며 팀 문화를 신중하게 만들어 가고 있었음 - **Langston**은 Figma 엔지니어들이 제품에 강한 열정을 보이는 점에 주목했다. - 구성원들이 Figma 제품에 진심으로 관심을 갖고 있었음 - 혁신적인 프로젝트를 맡고 엔지니어로 성장할 기회가 있다고 판단 - **Daniela**는 사이드 프로젝트에서 Figma를 직접 사용하며 제품의 가치를 경험했다. - 친구와 디자인을 함께 수정하고 아이디어를 주고받은 경험 - 제품에 대한 애정과 개인의 개성을 존중하는 문화에 매력을 느낌 - **Jago**는 Figma를 통해 디자인의 본질과 좋은 디자인의 기준을 배웠다. - 디자인을 민주화한다는 Figma의 미션에 공감 - Figma for Education 같은 프로그램을 통해 미션에 기여하고자 함 - Figma Community 팀에서 그 목표를 실현할 수 있다고 보았음 ## 초기 커리어를 준비하는 방법 - 가능한 한 다양한 인턴십과 직무를 경험해 자신의 선호를 구체화한다. - 회사와 팀의 구성원에게 성장 경로와 실제 업무 환경을 질문한다. - 직무 설명뿐 아니라 다음 사항을 확인한다. - 신입 구성원의 프로젝트 소유권 - 팀과 관리자의 성장 지원 방식 - 회사의 장기적인 커리어 발전 가능성 - 구성원이 제품과 회사의 미션에 실제로 공감하는지 - 회사가 외부에 어떤 이야기를 공유하는지 살펴보면 조직 문화와 구성원 경험을 파악하는 데 도움이 된다. 자신에게 맞는 첫 직장을 고를 때는 연봉이나 직무명만 비교하기보다, 실제 구성원의 성장 경험과 팀의 지원 방식, 회사의 미션에 대한 진정성을 함께 확인하는 것이 좋다.

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

디자인 시스템Figma프로덕트 디자인design-collaboration+2

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

News UK가 멀티

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

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

디자인 시스템Figmajirasketch+4

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

Pride 2021

Figma의 2021년 Pride 글은 LGBTQ+ 커뮤니티가 직장에서 자신의 정체성을 솔직하게 표현하고 소속감을 느낄 수 있는 환경의 중요성을 강조한다. 팬데믹과 사회적 불의 속에서도 공동체의 힘이 희망이 되었으며, 백신 보급과 함께 대면 Pride 행사가 재개되는 시점에 다시 함께 모이자는 메시지를 전한다. 또한 Figma Community를 활용해 Pride 포스터를 만들고 공유하자는 참여 캠페인을 제안한다. ## Figma가 지향하는 커뮤니티와 포용성 - Figma의 사명은 디자인에 대한 접근성을 높이는 것이다. - 이를 위해 진입 장벽을 낮추고, 공정한 기회를 제공하며, 소속감과 공통 관심사를 공유하는 커뮤니티를 조성하려 한다. - Figma Community에서는 매주 수십만 명의 사용자가 함께 활동한다. - Figma는 훌륭한 결과물이 혼자 만들어지는 것이 아니라 서로 협력하는 과정에서 나온다고 본다. ## Pride ERG와 사내 공동체 - Figma에는 공통된 정체성을 가진 구성원을 연결하는 여러 Employee Resource Group(ERG)이 있다. - LGBTQ+ 구성원에게 직장에서 자신의 정체성을 숨기지 않고 진정성 있게 지낼 수 있는 공간은 특히 중요하다. - 글쓴이 Clancy Slack은 2019년 창립된 Pride ERG를 이끌고 있다. - Pride ERG가 만들어지기 전부터 LGBTQ+ 구성원들은 자발적으로 모여 자신들의 이야기를 공유하고, LGBTQ+ 커뮤니티가 직면한 이슈를 알리는 행사를 열었다. - 2021년 Maker Week에는 Pride 그룹이 Pride 상징물과 아이콘을 함께 살펴보고, 이를 바탕으로 공동 디자인 작업을 진행했다. ## 팬데믹 이후 달라진 Pride의 의미 - Pride는 LGBTQ+ 구성원이 안전하게 자신을 표현하고, 공동체와 함께하며, 과거의 진전을 기념할 수 있는 중요한 기회다. - 오늘날의 퍼레이드 중심 Pride는 1969년 뉴욕 스톤월 인에서 발생한 경찰 단속에 대한 저항인 스톤월 항쟁을 기념하는 데서 출발했다. - 2020년에는 팬데믹과 사회적 불의가 동시에 이어지면서 공동체와 평등의 필요성이 더욱 선명해졌다. - 물리적으로 떨어져 집에 머무는 상황에서도 공동체가 서로를 지지할 수 있다는 점이 확인되었다. - 글쓴이에게 Pride는 정의와 평등을 향한 긴 여정 속에서 희망을 상징하는 존재가 되었다. - 2021년에는 백신 접종이 확대되면서 여러 도시에서 대면 Pride 퍼레이드가 다시 열릴 예정이었다. ## Pride 포스터 캠페인 - Figma는 디자이너, 아티스트, 메이커들에게 Pride 포스터를 제작해 달라고 요청했다. - 완성한 작품은 Figma Community에 `#pride` 태그와 함께 게시하도록 안내했다. - 공유된 포스터는 다른 사람들이 출력해 지역 퍼레이드에 가져가거나, 집에서 Pride의 의미를 기념하는 데 활용할 수 있다. - Figma는 우수한 작품을 선정해 Community 페이지의 추천 컬렉션으로 소개할 계획을 밝혔다. - 포스터 제작 시 크기와 인쇄 방법을 쉽게 적용할 수 있도록 Miggi가 만든 템플릿도 제공했다. - 사내 구성원들이 만든 예시로는 다음과 같은 작품들이 소개되었다. - “Show your true colors”라는 문구와 무지개 하트를 활용한 포스터 - “Love is Love” 메시지와 무지개 색상의 Figma 멀티플레이어 커서를 활용한 포스터 - 레즈비언 정체성과 Figma 시각 요소를 결합한 포스터 Figma는 예술 창작과 커뮤니티 참여를 통해 Pride를 함께 기념하자고 제안하며, 사람들이 다시 거리로 나와 서로를 만나고 연대하기를 희망한다. 실천적으로는 포스터를 직접 제작해 Figma Community에 공유하거나, 지역 Pride 행사에서 사용할 수 있는 시각 자료를 만드는 방식으로 참여할 수 있다.

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

디자인 시스템Figmacollaborative-designfigma-community

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

Config 2021

Config 2021의 핵심 메시지는 제품 개발에서 실패, 지연, 갈등 같은 “엉킨 순간”을 피하기보다 성장의 재료로 받아들여야 한다는 것이다. 프로젝트가 중단되거나 팀 내 마찰이 생겨도 이를 개인적 실패로 해석하지 말고, 기록·대화·성찰을 통해 다음 작업과 더 나은 협업으로 전환해야 한다. ## 실패와 좌절을 새로운 관점에서 바라보기 Shopify의 Shanique Shields는 1년 반 동안 진행한 기능이 롤백된 경험을 소개한다. 처음에는 자신의 실패라고 느꼈지만, 프로젝트에서 잠시 거리를 둔 뒤 이를 학습의 기회로 재해석할 수 있었다. - **실패를 개인적인 평가로 받아들이지 않기** - 피드백이나 기능 변경은 작업자의 능력보다 이해관계자와 고객의 관점 차이에서 비롯될 수 있다. - **과정을 문서화하기** - 출시되지 않은 작업이라도 디자인 의도, 의사결정 과정, Figma 댓글과 메모를 보존한다. - 기록은 다음 프로젝트에서 개선점을 찾게 하고, 다른 디자이너가 참고할 수 있는 작업 아카이브가 된다. - **프로젝트에서 얻을 것을 의식하기** - 새로운 기술, 사업 영역에 대한 이해, 다른 직군과의 협업 경험 등 프로젝트를 통해 얻는 성장을 명확히 파악한다. - **다음 작업을 새로운 출발점으로 삼기** - 실패감에 머무르기보다 다음 업무의 공동 목표를 세우고 팀의 동기를 다시 끌어올린다. ## 솔직한 대화와 주의 깊은 경청 Headspace의 Frank Bach는 팀의 갈등을 방치하지 말고 투명한 대화로 해결해야 한다고 강조한다. 강한 팀 문화와 프로세스가 있어도 의사소통이 끊기면 문제가 쌓일 수 있기 때문이다. - 갈등 상황에서 자신의 입장을 최대한 투명하게 설명한다. - 상대방의 말을 실제로 이해하려는 태도로 듣는다. - 어려운 대화라도 객관적이고 솔직하게 시작해야 한다. - 마찰을 무시하면 문제가 해결되지 않고 더 커지므로, 용기를 내어 직접 다룬다. - 일이 잘 풀렸을 때는 동료, 팀, 디자이너로서의 기회에 감사하는 태도도 중요하다. ## 지속 가능한 팀 문화를 만드는 태도 Config 2021에서는 팀 문화 전환과 확장 가능한 프로세스도 다뤘지만, 실제 업무에서는 예상치 못한 장애와 인간적인 갈등이 언제든 발생한다는 점을 전제로 한다. - 완벽하게 정리된 프로세스만으로 모든 문제를 예방할 수는 없다. - 실패와 충돌을 숨기기보다 학습 가능한 경험으로 공개적으로 다룬다. - 개인의 감정적 회복과 팀 차원의 목표 재정렬을 함께 진행한다. - 기록과 솔직한 대화를 통해 어려운 경험을 조직의 지식으로 전환한다. 실무에서는 프로젝트가 중단되거나 갈등이 생겼을 때 즉시 자책하거나 회피하기보다, 잠시 거리를 두고 과정을 기록한 뒤 당사자들과 사실 중심으로 대화하는 것이 좋다. 그렇게 하면 실패한 결과도 개인과 팀의 성장 자산으로 남길 수 있다.

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

디자인 시스템Figmaproduct-developmentproject-management+2

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

댄틀리 데이비스와의 Q

Dantley Davis는 디자인을 형식과 기능을 통한 문제 해결로 보고, 의도적인 창작과 데이터 기반 판단을 강조한다. 그는 좋은 팀이 되려면 호기심, 피드백, 상호 신뢰, 낮은 자아가 필요하며, 디자인 리더는 다양한 분야를 이해하고 포용적인 팀을 만들어야 한다고 말한다. 개인적으로는 창의성을 유지할 시간과 부수 프로젝트가 중요하며, 역경을 영향력으로 전환하는 태도를 보여준다. ## 디자인 철학과 창작 과정 - 창작 과정의 핵심은 **“의도적(intentional)”**인 접근이다. - 좋은 디자인은 사용자가 필요성을 인식하지 못했던 문제를 해결해, 해결된 뒤에는 없이는 살 수 없게 만드는 디자인이다. - 디자인은 **형식과 기능을 통한 문제 해결**이다. - 가장 큰 디자인의 두려움은 작업물이 사람들에게 아무런 반응도 일으키지 못하는 것이다. - 자기 자신만을 기준으로 디자인하는 것을 가장 큰 문제점으로 꼽았다. - 업무 외에 개인 시간을 갖고 사이드 프로젝트를 진행할 때 가장 창의적이고 최고의 상태가 된다고 설명했다. ## 데이터와 인접 분야의 중요성 - 디자인 업계에서 ‘사상적 리더(thought leader)’라는 지위는 과대평가되어 있다고 본다. - 반대로 데이터를 활용해 디자인 결정을 뒷받침하는 일은 과소평가되어 있다고 말한다. - 젊은 디자이너에게는 비즈니스, 엔지니어링, 금융 등 인접 분야를 공부하라고 조언한다. - 다양한 분야에 대한 이해는 디자이너를 더 균형 잡힌 사고를 하는 사람으로 만든다. - 최근 출시한 제품이나 기능이 사용자에게 실질적인 가치를 주지 못했다면, 오래 유지하기보다 빠르게 제거하는 판단도 필요하다고 지적했다. ## 신뢰와 피드백을 기반으로 한 팀 - 좋은 협업자는 호기심이 많고 자아가 강하지 않은 사람이다. - 팀이 진정한 팀처럼 느껴지려면 다음 조건이 필요하다. - 서로를 신뢰하고, 팀과 개인을 개선하기 위해 적극적으로 피드백을 요청한다. - 구성원들이 자신의 작업이나 관점으로 서로에게 영감을 준다. - 개인의 자아나 지위가 협업을 방해하지 않는다. - Davis가 경력에서 가장 자랑스럽게 생각하는 성과는 **기술 업계에서 가장 다양한 팀을 만든 것**이다. - 디자인 리더십은 개인의 결과물뿐 아니라 팀의 구성과 문화까지 책임지는 역할로 확장된다. ## 디자인의 사회적·문화적 영향 - Davis는 Design Twitter 커뮤니티에서 멘토 역할을 하려 한다. - 기술 업계에서 디자이너이자 리더로 일하며 얻은 경험을 다른 디자이너들과 공유하려고 한다. - Roblox를 훌륭하지만 주목받지 못한 디자인 사례로 꼽았다. - 아이들이 게임을 즐기는 데 그치지 않고, 서로 소통하고 직접 무언가를 만들 수 있다. - 단순 소비에 집중하는 많은 앱과 달리 참여와 창작을 가능하게 한다. - Afrotech의 가상 콘퍼런스도 인상적인 사례로 언급했다. - 사용자가 아바타를 만들고 가상 세계를 이동할 수 있었다. - 온라인 행사에 물리적 현장감과 존재감을 더했다. ## 개인적 취향과 관심 분야 - 선호하는 UI 글꼴은 Montserrat이며, 좋아하는 서체는 Akzidenz-Grotesk다. - 색상 표기 방식으로는 Hex를 선호하고, 대표 색상으로 `#000000`을 제시했다. - 1990년대 웹의 시각적 스타일을 다시 가져오고 싶다고 답했다. - Porsche의 자동차와 브랜드 생태계를 디자인하고 싶어 한다. - 실제 주행 경험부터 모바일 앱까지 연결된 전체 경험을 포함한다. - 오랫동안 자동차 인터페이스를 디자인하고 싶어 했으며, 이동 경험과 디지털 제품의 결합에 관심을 보였다. - Figma 기능 중에서는 다른 사람의 작업을 관찰할 수 있는 **Observation Mode**를 가장 좋아한다고 밝혔다. ## 디자인 리더에게 필요한 태도 - 디자인 리더는 작업 결과뿐 아니라 팀의 다양성, 문화, 협업 방식을 함께 설계해야 한다. - 업계의 명성이나 ‘리더’라는 호칭보다 실제 문제 해결과 사용자에게 미치는 영향이 중요하다. - 자신이 만든 결과물에 애착을 갖더라도, 사용자에게 의미 있는 혜택을 주지 못한다면 제거할 수 있어야 한다. - 자신의 전문 영역에만 머물지 않고 비즈니스와 기술 등 주변 분야를 이해해야 더 큰 영향력을 발휘할 수 있다. 실무적으로는 디자인 과정에 데이터를 적극 활용하고, 팀 내 피드백을 일상화하며, 사용자의 실제 가치가 낮은 기능은 과감히 개선하거나 제거하는 것이 Davis의 조언을 적용하는 방법이다.

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

디자인 시스템Figmaweb-designuser-interface-design+2

figma·2021년 5월 24일·4분 읽기큐레이션 요약

In the file: Config

Config 2021의 Coda와 Stripe 사례는 디자인팀이 불확실성과 단기 요구를 다루면서도 장기적인 제품 방향과 확장성을 확보하는 방법을 보여준다. Coda는 사용자 데이터가 없는 0→1 단계에서 경쟁사 분석과 팀의 직관으로 관점을 세웠고, Stripe는 장기적 관점·튼튼한 기반·엄격한 품질 기준을 통해 복잡한 결제 경험을 단순화했다. 두 사례 모두 명확한 비전과 이를 공유하는 프로세스가 팀 정렬과 좋은 제품 결정의 핵심이라고 강조한다. ## 0→1 제품에서 맥락 만들기 - Coda의 Helena Jaramillo는 기존 제품을 개선하는 대신, 새로운 퍼블리싱 플랫폼을 처음부터 구축하는 과제를 맡았다. - 초기 제품에는 기존 사용자의 행동 데이터나 인터뷰할 사용자 자체가 없었기 때문에 일반적인 리서치 인사이트를 활용하기 어려웠다. - 이를 보완하기 위해 경쟁 제품과 인접 분야의 서비스를 조사했다. - 조사 결과를 Figma 파일에 스크린샷과 주석으로 정리해 다음을 공유했다. - 어떤 접근 방식이 효과적인지 - 어떤 방식은 Coda에 적합하지 않은지 - 경쟁 제품에서 참고할 만한 패턴은 무엇인지 - 데이터가 부족한 초기 단계에서는 외부 사례를 체계적으로 분석해 팀이 논의할 수 있는 공통 맥락을 만드는 것이 중요하다. ## 강한 제품 관점과 비전 수립 - Coda는 사람들이 왜 Coda에서 콘텐츠를 발행해야 하는지, Coda만의 차별점이 무엇인지부터 질문했다. - 퍼블리싱 경험이 다음 중 무엇에 가까워야 하는지 검토했다. - 블로그 글을 발행하는 경험 - 노코드 앱을 만드는 경험 - 웹사이트를 제작하는 경험 - Helena 자신의 퍼블리셔 경험과 팀 토론을 바탕으로 두 가지 우선순위를 도출했다. - 발행 과정을 쉽게 만들 것 - 발행자가 자신의 결과물을 자랑스럽게 느끼게 할 것 - 이 관점은 구체적인 제품 결정으로 이어졌다. - 인터랙티브 문서를 쉽게 발행할 수 있는 흐름 - 사진, 부제목, 작성자 정보를 추가할 수 있는 기능 - 사용자 인사이트가 부족하더라도 팀이 함께 명확한 관점을 세우면 일관된 제품 방향을 결정할 수 있다. ## 복잡한 아이디어를 이야기로 전달하기 - Helena는 기능 목록만 설명하는 대신 제품이 만들고자 하는 경험을 하나의 이야기로 전달했다. - 이를 위해 Figma에 “tl;dr 페이지”를 만들고 다음을 포함했다. - 핵심 사용자 흐름 - 소수의 대표 목업 - 팀이 만들려는 경험의 전체적인 서사 - 이 페이지는 세부 기능을 모두 설명하기보다, 협업자가 짧은 시간 안에 제품의 방향을 이해하도록 돕는 역할을 했다. - 크로스펑셔널 팀을 설득할 때는 상세한 사양보다 문제, 사용자 경험, 제품의 의도를 한눈에 보여주는 자료가 효과적이다. ## 단기 요구와 장기 확장성의 균형 - Stripe 디자인팀은 기업과 최종 사용자가 겪는 복잡한 프로세스를 최대한 단순하고 쉽게 만드는 것을 목표로 한다. - 이를 위해 당장의 요구를 해결하는 동시에 장기적으로 확장 가능한 시스템과 프로세스를 구축한다. - Connie Yang은 이를 “도시 계획가의 사고방식”에 비유했다. - 개별 건물이나 차량만 설계하지 않는다. - 도로의 폭과 교통 흐름을 고려한다. - 시스템 간 연결 관계를 설계한다. - 화재나 재난 같은 미래의 예외 상황에도 대비한다. - 팀은 현재의 속도를 유지하면서도 “2030년까지 작동할 구조인가”를 질문한다. ## 튼튼한 기반과 확장 가능한 시스템 - 장기적 관점은 인프라와 디자인 시스템에 대한 투자로 구체화된다. - Stripe가 말하는 견고한 기반에는 다음이 포함된다. - 빠르고 접근성 높은 제품과 플랫폼 구축 - 임시방편보다 확장 가능한 시스템 개발 - 반복적으로 활용할 수 있는 공통 규칙과 구조 마련 - Stripe 디자인 시스템의 색상 테이블에는 색상 대비와 접근성 평가 정보가 내장되어 있다. - 디자이너가 매번 접근성을 별도로 확인하지 않아도 되며, 시스템 자체가 더 나은 결정을 유도한다. - 이런 기반은 팀의 생산성을 높이는 동시에 최종 사용자의 경험과 접근성도 개선한다. ## 엄격한 품질 기준과 사용자 신뢰 - Stripe에서는 “디테일이 중요하다”는 원칙을 중시한다. - Stripe는 결제 승인과 대금 지급처럼 신뢰가 핵심인 업무를 다루므로, 작은 UI 요소도 사용자 경험과 신뢰에 영향을 준다. - 때로는 구현이 더 어렵거나 시간이 오래 걸리더라도, 최종적으로 더 안전하고 명확한 경험을 제공하는 방식을 선택한다. - 단기적으로 빠른 해결책을 택하기보다 품질, 정확성, 접근성을 높이는 선택이 장기적인 제품 신뢰로 이어진다. ## 실무에 적용할 때의 시사점 - 데이터가 부족한 초기 제품이라면 경쟁사와 인접 분야를 조사해 팀의 공통 맥락을 만든다. - 팀의 직관을 막연한 의견으로 두지 말고, 명확한 제품 원칙과 우선순위로 정리한다. - 세부 기능보다 사용자 흐름과 제품의 핵심 이야기를 먼저 공유한다. - 단기 요구를 해결할 때도 디자인 시스템, 접근성, 성능처럼 미래에 반복될 기반을 함께 설계한다. - 빠른 실행과 장기적 품질 사이에서 균형을 잡되, 사용자 신뢰가 중요한 영역에서는 품질 기준을 낮추지 않는 것이 좋다.

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

디자인 시스템Figma사용자 경험프로덕트 디자인+2

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

브랜칭 기능 소개: 자유롭게

Figma는 공유 파일을 보호하면서도 디자이너가 자유롭게 실험할 수 있도록 브랜칭 기능을 베타로 도입했다. 브랜치를 만들면 원본 파일과 분리된 공간에서 작업하고, 검토가 끝난 변경 사항만 메인 파일에 병합할 수 있다. 이를 통해 대규모 디자인 시스템의 일관성과 협업 속도를 함께 확보하려는 것이 핵심이다. ## 분산된 디자인 시스템이 만든 문제 - 여러 팀이 디자인 시스템을 사용하면서도 시스템이 여러 파일과 플랫폼에 분산되어 있었다. - 컴포넌트를 재사용해 생산성은 높아졌지만, 위치가 분산되어 도구 사이를 오가야 했고 구현 결과도 일관되지 않았다. - 넷플릭스의 Hawkins처럼 100명 이상의 디자이너가 참여하는 시스템에서는 최신 변경 사항이 실제 승인된 버전이라는 보장이 어려웠다. - 따라서 디자인 시스템을 중앙화하되, 승인되지 않은 변경이 공유 파일에 즉시 반영되지 않도록 하는 장치가 필요했다. ## 브랜치로 실험 공간과 원본 보호 - 디자이너는 기존 파일에서 브랜치를 생성해 새로운 아이디어와 반복 작업을 독립적으로 진행할 수 있다. - 브랜치의 변경 사항은 메인 파일에 자동 저장되지 않으므로, 실수나 미승인 변경으로 공유 파일이 오염되는 것을 방지한다. - 작업이 완료되면 편집자가 변경 내용을 검토한 뒤 메인 파일에 병합할 수 있다. - 결과적으로 공유 파일은 승인된 디자인 시스템의 기준점으로 유지되고, 브랜치는 자유로운 탐색 공간이 된다. ## 단순성과 일관성을 우선한 설계 - Figma는 일반적인 Git 방식처럼 별도의 커밋 작업을 요구하지 않기로 했다. - 브랜치 안의 작업은 Figma 파일과 마찬가지로 자동 저장된다. - 브랜치 안에서 다시 브랜치를 만드는 복잡한 구조도 배제했다. - 브랜치도 Figma의 멀티플레이어 협업 기능을 그대로 지원하므로 여러 사람이 동시에 작업할 수 있다. - 브랜칭을 별도의 복잡한 도구가 아니라 기존 파일 협업 경험에 자연스럽게 통합하는 것이 목표였다. ## 버전 관리의 확장 - Figma는 향후 리뷰 기능을 추가하면서 브랜칭과 멀티플레이어 작업을 아우르는 통합적인 버전 관리 방식을 모색하고 있다. - 사용자가 기능별로 서로 다른 버전 관리 개념을 익히지 않고, 하나의 일관된 방식으로 작업하도록 만드는 것이 방향이다. - 브랜칭은 조직 전체의 디자인 시스템을 중앙화하고 관리하는 기반 기능으로 제시됐다. ## 제공 범위 - 당시 브랜칭은 베타 기능으로 Figma Organization 요금제에서 제공됐다. - 사용자는 접근 신청을 해야 했으며, Figma가 순차적으로 사용자를 추가하는 방식이었다. - Professional 요금제 사용자는 Organization 요금제에 대해 영업팀에 문의하도록 안내됐다. 브랜칭은 대규모 팀에서 디자인 시스템을 운영할 때 특히 유용하다. 메인 파일에는 승인된 결과만 유지하고, 새로운 컴포넌트나 레이아웃은 브랜치에서 충분히 실험한 뒤 리뷰와 병합을 거치는 방식이 안정적인 협업 흐름을 만든다.

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

디자인 시스템Figmacollaborationversion-control+2

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

Config 2021에서

Figma는 디자인이 개인 작업이 아니라 다양한 사람들이 함께 아이디어를 만들고 발전시키는 협업 과정이라고 강조했다. Config 2021에서 이를 지원하기 위해 브레인스토밍 도구 FigJam, 브랜칭, 모바일 앱, 오디오 협업, 대규모 동시 접속, Figma Community 공개 기능을 발표했다. 결론적으로 Figma는 디자인 전 과정에 더 많은 사람이 참여할 수 있는 협업 플랫폼으로 확장되고 있다. ## 협업 중심 디자인으로의 전환 - 초기에는 디자인을 개인의 작업으로 보는 인식이 강했지만, Figma의 등장과 원격 협업 확산으로 팀 단위 작업이 일반화됐다. - 디자이너뿐 아니라 개발자, 기획자, 이해관계자 등 다양한 참여자가 디자인 과정에 기여할 수 있도록 기능을 확장했다. - 목표는 아이디어 구상부터 반복 작업, 검토와 공유까지 모든 단계에서 함께 작업하는 환경을 제공하는 것이다. ## FigJam: 아이디어 발상과 브레인스토밍 - FigJam은 기존 Figma의 인터페이스 디자인 기능이 아닌, 팀 브레인스토밍과 화이트보드 작업에 특화된 별도 공간이다. - 사용자 여정 다이어그램, 아이디어 정리, 워크숍 등 다양한 초기 기획 작업을 지원한다. - 이모티콘, 채팅 등 기능을 제공해 물리적인 회의실에서 느낄 수 있는 즉흥성과 상호작용을 디지털 공간에 구현하려 했다. - 2021년 4월 오픈 베타로 출시됐으며, 2022년부터 무료 및 유료 요금제($8, $15/편집자/월)가 적용될 예정이었다. ## 브랜칭을 통한 안전한 디자인 변경 - 파일을 브랜치로 복제해 기존 작업에 영향을 주지 않는 별도 공간에서 아이디어와 디자인 변형을 실험할 수 있다. - 브랜치에서도 멀티플레이어 협업이 가능하며, 작업이 끝나면 몇 번의 클릭으로 메인 브랜치에 병합할 수 있다. - 디자인 시스템에 여러 팀원이 기여하거나, 대규모 조직에서 변경 사항을 검토하는 데 유용하다. - 베타 기능으로 Organization 요금제에서 제공됐다. ## 모바일 앱과 디자인 공유 - iOS와 Android용 새 모바일 앱을 통해 파일과 프로토타입을 어디서든 확인할 수 있도록 했다. - 실제 기기에서 앱 디자인이 어떻게 보이고 작동하는지 확인하는 용도뿐 아니라, 이해관계자에게 작업물을 공유하는 용도도 강조됐다. - 미러링 재생 경험을 안정화하고, 모바일에서 디자인과 프로토타입에 더 쉽게 접근하도록 개선했다. ## 편집기 내 오디오 협업 - Figma 파일이나 FigJam 보드에서 별도 화상회의 도구 없이 즉시 음성 통화를 시작할 수 있다. - 실시간 디자인 리뷰, 피드백, 그룹 브레인스토밍 등에 활용할 수 있다. - Professional 및 Organization 요금제 사용자에게 제공될 예정인 기능으로 소개됐다. ## 대규모 동시 접속 지원 - 초기에는 최대 500명이 동시에 접속할 수 있도록 제한을 확대했다. - 편집자 100명 - 뷰어 400명 - 이후 Figma와 FigJam 모두에서 최대 1,000명까지 지원할 계획을 밝혔다. - 편집자 200명 - 뷰어 800명 - 대규모 디자인 발표, 워크숍, 수업 같은 상황을 지원하고 새로운 협업 방식을 가능하게 하는 것이 목적이다. ## Figma Community 공개와 공유 - 모든 사용자가 Figma Community에 파일을 게시할 수 있도록 개방했다. - 다른 사용자가 만든 파일과 FigJam 템플릿을 활용할 수 있으며, 자신의 작업물·템플릿·노하우도 공개할 수 있다. - 개인의 디자인 결과물을 공유하는 것을 넘어, 커뮤니티 기반의 학습과 재사용을 촉진하려는 방향이다. Figma의 발표는 디자인 도구를 단순한 제작 소프트웨어가 아니라 아이디어 발상, 협업, 검토, 공유를 아우르는 공동 작업 공간으로 확장하려는 전략을 보여준다. 팀 규모와 참여자 유형에 맞춰 FigJam, 브랜칭, 모바일 앱, 오디오 기능을 조합하면 원격·대규모 디자인 협업을 보다 효율적으로 운영할 수 있다.

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

디자인 시스템Figmafigjamcollaborative-design+3

figma·2021년 4월 6일원문

렙솔(Repsol) (새 탭에서 열림)

스페인 최대 에너지 기업인 렙솔(Repsol)은 2050년 탄소 중립 달성을 목표로, 난해한 에너지 개념을 소비자가 친숙하게 느낄 수 있도록 디자인 중심의 디지털 전환을 추진하고 있습니다. 이를 위해 렙솔은 디자인 에이전시 및 피그마(Figma)와 협력하여 전사 통합 디자인 시스템인 '옥시젠(Oxygen)'을 구축하고 분산되어 있던 사용자 경험을 하나로 통합했습니다. 결과적으로 디자인은 단순한 시각적 개선을 넘어 제품 구현에 필요한 리소스를 30% 절감하고, 기업의 비즈니스 가치를 측정 가능한 수치로 증명하는 핵심 전략으로 자리 잡았습니다. **에너지 경험의 재정의와 시각화** * **인간 중심의 에너지:** 에너지를 '필요악'이 아닌 사용자가 주도적으로 관리할 수 있는 대상으로 변화시키기 위해 디자인을 활용합니다. * **실시간 가시성 제공:** 단순히 요금 고지서를 발행하는 것에 그치지 않고, 현재 날씨에 맞춰 실시간으로 가동되는 태양광 패널이나 풍력 발전기의 정보를 앱 내에서 시각적으로 보여줌으로써 에너지 사용에 대한 실감을 높였습니다. * **행동 변화 유도:** 전기차 공유 서비스 앱을 통해 주행 중 에너지 소비량을 보여주고 효율성에 따른 등급을 부여하여, 사용자가 더 효율적으로 에너지를 소비하도록 독려합니다. **Oxygen 디자인 시스템을 통한 통합** * **일관된 상호작용 언어:** 과거 10개의 제품이 각기 다른 방식으로 사용자와 소통하던 문제를 해결하기 위해, 모든 디지털 제품에 적용되는 공통의 패턴, 컴포넌트, 가이드를 구축했습니다. * **커뮤니케이션 허브로서의 피그마:** 피그마를 중심 도구로 채택하여 실무 디자이너부터 경영진까지 실시간으로 의견을 공유하고 아이디어를 반복 수정할 수 있는 환경을 조성했습니다. * **워크플로우 최적화:** 기존에 사용하던 Sketch, Invision, PowerPoint 등의 도구를 피그마 하나로 대체하여 15개 이상의 프로젝트를 동시에 일관성 있게 관리할 수 있게 되었습니다. **디자인 성과 측정과 효율성 증대** * **전용 플러그인 활용:** 피그메트릭스(Figmetrics)와 MSVM 플러그인을 개발하여 컴포넌트 활용도와 팀 간 정렬 상태를 추적하고 디자인의 투자 대비 효율(ROI)을 데이터로 입증했습니다. * **운영 효율성 개선:** 새로운 디자인 시스템 도입 이후 제품 구현에 드는 작업량을 기존 대비 30% 절감하는 성과를 거두었습니다. * **단일 진실 공급원(Single Source of Truth):** 디자인, 제품 관리, 비즈니스, 기술 팀이 동일한 기준 아래 협업함으로써 의사결정 프로세스를 단순화했습니다. 에너지 산업과 같이 복잡하고 보이지 않는 가치를 다루는 기업일수록 디자인 시스템은 단순한 도구를 넘어 비즈니스의 효율성과 사용자 신뢰를 구축하는 강력한 기반이 됩니다. 렙솔의 사례처럼 디자인 시스템을 통해 확보한 여유 자원을 기업의 본질적인 미션인 탄소 중립과 혁신에 재투자하는 선순환 구조를 구축할 것을 권장합니다.

디자인 시스템Figma사용자 경험product-development+3

figma·2021년 3월 29일·3분 읽기큐레이션 요약

Tailwind UI 공식 피그

Tailwind Labs는 Tailwind UI의 코드 컴포넌트를 디자이너와 개발자가 함께 사용할 수 있는 공식 Figma 키트로 재구성했다. 약 1,400개의 컴포넌트와 10,000개의 요소를 제작하면서, 최종 코드 구조를 디자인 파일의 기준으로 삼고 레이어 이름·구조·변형을 체계화했다. 핵심 결론은 디자인 시스템을 실제 제품처럼 배포하려면 시각적 완성도뿐 아니라 일관된 구조와 사용성까지 세밀하게 설계해야 한다는 것이다. ## Tailwind UI Figma 키트 제작 배경 - Tailwind UI는 Tailwind CSS 기반의 반응형 HTML 컴포넌트 모음이다. - 고객들의 Figma 파일 요청이 지속적으로 늘어나 공식 Figma 키트를 제작하게 됐다. - 400개가 넘는 코드 컴포넌트를 바탕으로 1,400개 이상의 Figma 컴포넌트와 10,000개의 개별 요소를 구축했다. - 일반적인 작업용 디자인 파일과 달리, 상용 디자인 키트는 파일 자체가 최종 제품이므로 모든 세부 요소가 사용자 경험에 영향을 준다. ## 디자인 파일을 코드의 구조에 맞추기 - 최종 HTML 코드가 디자인 파일이 따라야 할 픽셀 단위 기준이 되도록 했다. - Figma의 오토 레이아웃, 레이아웃 그리드, 레이아웃 제약 조건을 활용해 HTML 마크업과 유사한 레이어 구조를 만들었다. - 디자인과 코드가 비슷한 구조를 가지면 디자이너와 개발자가 레이아웃 가능성을 공통으로 이해할 수 있다. - 반복되는 반응형 패딩이나 중앙 정렬된 최대 너비 컨테이너 같은 패턴을 디자인 파일에서 발견하고, 이를 개발자가 재사용 가능한 컨테이너 구조로 구현할 수 있었다. ## 일관된 레이어 이름 - 모든 레이어에 일관된 명명 규칙을 적용했다. - 예를 들어 버튼의 텍스트 레이어를 항상 `Text`로 지정하면, 버튼 크기나 변형을 바꿔도 사용자가 입력한 텍스트가 그대로 유지된다. - 복잡한 컴포넌트에서도 아이콘, 제목, 본문, 링크 등의 사용자 지정 내용이 다른 인스턴스나 변형으로 교체할 때 보존된다. - 일관된 레이어 이름은 단순한 정리 규칙이 아니라 Figma의 오버라이드 동작을 안정적으로 만드는 기반이다. ## 변형으로 컴포넌트 수 줄이기 - 여러 개의 유사한 컴포넌트를 개별적으로 관리하는 대신, 하나의 컴포넌트에 다양한 변형을 정의했다. - 예를 들어 80개의 배지 컴포넌트를 따로 만드는 대신 `type`, `size`, `theme`, 보조 요소 등의 속성을 가진 하나의 Badge 컴포넌트를 구성했다. - 코드 컴포넌트에서 사용하는 속성과 Figma의 변형 속성에 동일한 이름과 개념을 사용해 디자인과 개발 사이의 대응 관계를 명확히 했다. - 여러 컴포넌트에서 반복적으로 사용할 수 있는 변형 이름은 다음과 같다. - `type` - `size` - `theme` - `position` - `breakpoint` - `state` - 변형 패널 자체가 컴포넌트의 가능한 상태와 옵션을 설명하는 문서 역할을 한다. - 최종 키트에는 평균 7개의 변형을 가진 1,430개 컴포넌트가 포함됐다. - 변형을 사용하지 않았다면 컴포넌트 수가 10,000개를 넘었겠지만, 변형 덕분에 실제 코드 컴포넌트 수인 약 400개에 가까운 수준으로 관리할 수 있었다. ## 실용적인 결론 상용 Figma 키트를 만들 때는 화면을 예쁘게 복제하는 것보다 코드와 디자인의 구조를 일치시키는 일이 중요하다. 레이어 이름과 변형 속성을 처음부터 표준화하고, 반복되는 레이아웃 규칙을 컴포넌트 구조에 반영하면 사용자는 더 쉽게 커스터마이즈할 수 있고 디자인·개발 간 협업도 효율적으로 유지할 수 있다.

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

디자인 시스템FigmaCSSHTML+3

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

드롭박스의 일하는 방식 리

코로나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

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

기능 비하인드: 새로운

Figma의 새 Auto Layout은 수동으로 요소 크기와 간격을 조정하던 작업을 자동화하면서도, CSS Flexbox의 강력함을 그대로 복잡하게 노출하지 않는 방향으로 설계됐다. 핵심 원칙은 “Flexbox의 신중한 부분집합”으로, 코드와 디자인의 정렬을 돕되 누구나 쉽게 이해하고 사용할 수 있게 만드는 것이었다. 새 버전은 사용자 피드백을 바탕으로 유연성과 기능을 확장한 결과다. ## 수동 리사이징 문제에서 출발한 Auto Layout - Auto Layout 출시 전에는 버튼의 텍스트가 길어지면 다음 작업을 직접 해야 했다. - 버튼 크기 조정 - 주변 버튼 위치 이동 - 대화상자 컨테이너 크기 조정 - 패딩과 간격 재조정 - 이런 수작업은 단순히 번거로운 것을 넘어 반응형 디자인 시스템 구축의 장애물이 됐다. - Figma 초기 설계에도 프레임 내부 객체를 자동으로 배치하는 아이디어가 있었지만, 제품 출시 당시에는 구현되지 않았다. - 2018년 Maker Week에서 제품 디렉터 Sho가 초기 아이디어를 다시 프로토타입으로 발전시켰고, 이후 전담 팀이 Auto Layout을 실제 기능으로 구현하기 시작했다. ## Flexbox를 참고하되 단순하게 설계 - 팀은 웹 기술인 CSS Flexbox의 강력함과 범용성에서 영감을 얻었다. - 디자인과 코드 사이의 개념적 일치를 높이려면 Flexbox와 유사한 모델이 유리했다. - 그러나 사용자가 브라우저와 CSS를 깊이 이해해야 한다면 Figma의 접근성이 떨어질 수 있었다. - 이에 따라 “Auto Layout은 Flexbox의 신중한 부분집합이어야 한다”는 설계 원칙을 세웠다. - 이 원칙은 기능을 추가하면서도 설정 항목과 동작 규칙을 불필요하게 복잡하게 만들지 않도록 팀의 의사결정을 이끌었다. ## 첫 번째 Auto Layout의 핵심 개념 - 프레임에 Auto Layout을 적용하면 내부 요소를 수직 또는 수평으로 배치할 수 있다. - 요소 사이의 수직·수평 간격을 지정할 수 있다. - Auto Layout 프레임은 기본적으로 주축 방향에서 내부 컴포넌트 크기에 맞춰 늘어나거나 줄어든다. - 반대축 방향도 고정 너비 또는 내부 콘텐츠에 맞추는 방식으로 설정할 수 있다. - 프레임 내부의 각 컴포넌트는 컨테이너 기준으로 개별 정렬할 수 있다. - 수직 레이아웃에서는 좌·중앙·우 정렬 - 수평 레이아웃에서는 상·중앙·하 정렬 ## HTML 프로토타입과 초기 검증 - Auto Layout 디자이너 Marcin은 처음부터 HTML로 프로토타입을 제작했다. - 실제 웹 환경과 유사한 프로토타입을 통해 기능의 사용감과 동작을 조기에 확인할 수 있었다. - 이 과정에서 다음과 같은 세부 동작을 구체화했다. - 프레임 핸들의 시각적 장식 - 객체를 드래그할 때의 동작 - Auto Layout 프레임의 외곽선 표시 - 초기 프로토타입은 기능 목록을 정하는 데 그치지 않고, 편집기에서 사용자가 기능을 어떻게 인식하고 조작할지 검증하는 역할을 했다. ## 기능 확장과 사용성 사이의 균형 - 초기 Auto Layout은 접근성과 직관성을 우선해 설계됐다. - 이후 사용자 피드백을 반영하면서 더 강력하고 유연한 레이아웃 기능을 추가했다. - 다만 유연성을 높일수록 설정과 예외 상황이 늘어나 사용성이 떨어질 수 있으므로, 기능의 범위를 의도적으로 제한했다. - 새 버전은 단순한 UI 변경이 아니라, 초기의 단순한 모델을 유지하면서 더 다양한 반응형 레이아웃 요구를 수용하려는 설계 개선이다. Auto Layout을 설계할 때는 Flexbox처럼 검증된 레이아웃 모델을 참고하되, 사용자가 모든 내부 규칙을 학습하지 않아도 되도록 핵심 개념만 제공하는 것이 중요하다. 또한 실제 편집 환경을 반영한 프로토타입과 사용자 피드백을 통해 기능의 유연성과 조작의 직관성을 함께 검증해야 한다.

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

디자인 시스템FigmaCSSHTML+3