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

디자인 도구를 평가하는 방법 | Figma 블로그

팀에 맞는 디자인 도구를 고를 때는 기능 비교나 리뷰만으로 결정하지 말고, 팀 규모·분산 환경·업무 방식·협업 상대를 기준으로 체계적으로 평가해야 한다. 도구 선정은 제품 출시나 디자인 스프린트처럼 하나의 프로젝트로 관리하고, 준비·탐색·기준 수립·후보 선정·테스트·최종 결정의 단계를 거치는 것이 효과적이다. 충분한 사전 조사와 실제 업무 테스트를 진행하면 도입 이후의 혼란과 비용을 줄일 수 있다. ## 도구 선정을 하나의 프로젝트로 관리 - 도구 변경을 즉흥적인 구매가 아니라 제품 출시나 디자인 스프린트와 같은 프로젝트로 취급한다. - 팀의 분기별 계획에 평가 작업을 포함하고, 담당자와 일정을 명확히 정한다. - 조직이 복잡할수록 한 번에 전환하기보다 단계적인 도입 계획이 필요하다. ## 일정과 의사결정 구조 마련 - 전체 과정에는 대략 한 달을 배정할 수 있다. - 약 2주: 준비와 조사 - 약 2주: 짧은 실제 프로젝트에서 후보 도구 테스트 - 프로젝트 관리 도구에 작업 일정을 등록하고, 최종 마감일을 정한다. - 특정 도구가 충분히 우수하다는 결론이 일찍 나면 모든 후보를 끝까지 검토할 필요는 없다. - 디자이너뿐 아니라 프로젝트 승인자, 개발자, 제품 관리자, 마케팅 등 영향을 받는 이해관계자를 사전에 참여시킨다. ## 교차 기능 워킹 그룹 구성 - 도구 선정과 도입을 함께 담당할 공식 그룹을 만들 수 있다. - 여러 팀의 구성원이 참여하면 각 조직의 요구사항과 우려를 균형 있게 반영할 수 있다. - 정기적인 짧은 회의와 전용 Slack 채널 등을 활용해 질문과 피드백을 모은다. - 평가가 끝난 뒤에도 이 그룹은 교육, 전환, 문제 해결을 지원하는 역할을 할 수 있다. ## 평가 과정과 사용 경험 기록 - 일정, 의사결정, 공식 피드백을 공유 문서에 기록한다. - 기능 목록뿐 아니라 실제 업무에서 도구가 어떻게 작동했는지에 대한 자유로운 의견도 남긴다. - 문서에는 사용 중 편했던 점, 막혔던 순간, 기존 워크플로와의 충돌 등을 구체적으로 적는다. - 새 도구를 도입하면 초기 적응 기간이 필요하므로, 도입 후 몇 주 동안 생산성이 일시적으로 낮아질 수 있음을 이해관계자에게 미리 알린다. ## 팀의 상황과 우선순위 정의 - 후보 도구를 비교하기 전에 팀이 실제로 해결하려는 문제가 무엇인지 합의한다. - 다음과 같은 조건을 점검한다. - 팀 규모와 성장 속도 - 구성원의 근무 장소와 원격근무 비중 - 신규 인력 온보딩 빈도 - 다른 직군과의 협업 방식 - 대규모 팀은 공유 라이브러리와 디자인 시스템을 통한 일관성과 확장성을 중시할 수 있다. - 빠르게 성장하는 팀은 신규 구성원이 쉽게 배우고 업무에 참여할 수 있는지가 중요하다. - 원격 팀은 실시간 협업과 커뮤니케이션 기능을 우선적으로 고려할 가능성이 높다. ## 현재 도구의 문제점 파악 - 기존 도구에서 불편한 점을 막연하게 나열하지 말고, 문제가 발생하는 구체적인 순간을 기록한다. - 예를 들어 개발자 핸드오프, 디자인 리뷰, 파일 공유, 협업 과정에서 어디가 끊기는지 확인한다. - 디자이너 외에도 개발자, 제품 관리자, 마케터에게 의견을 받아 직접 보이지 않던 문제를 발견한다. - 현재 도구의 단점을 파악해야 새 도구가 반드시 해결해야 할 요구사항을 정의할 수 있다. ## 평가 기준을 주제별로 정리 - 수집한 요구사항을 몇 가지 핵심 주제로 묶어 후보 도구를 평가한다. - 글에서 제시한 주요 주제 중 하나는 **생산성**이다. - 개인 작업뿐 아니라 스프린트 계획, 디자인 리뷰, 개발자 핸드오프까지 전체 흐름을 살핀다. - 이미 효율적인 업무와 개선이 필요한 업무를 구분한다. - 새 도구가 기존 워크플로에 자연스럽게 통합되는지 확인한다. - 이후 후보 도구는 이러한 기준에 따라 비교하고, 소수의 최종 후보를 선정한 뒤 실제 단기 프로젝트에서 테스트해야 한다. 도구의 “최고 기능”보다 우리 팀의 협업 방식과 문제를 얼마나 잘 해결하는지가 더 중요하다. 이해관계자를 일찍 참여시키고, 실제 업무를 기준으로 일정 기간 테스트한 뒤, 도입 후 적응 비용까지 고려해 결정하는 것이 현실적인 방법이다.

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

디자인 시스템Figmacollaborationdesign-tools+2

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

목업 그 이상: 여정

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

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

디자인 시스템Figma사용자 경험프로토타이핑+3

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

가벼운 프로토

프로토타입은 완성도가 높아야만 가치가 있는 것이 아니라, 초기 단계의 가벼운 형태만으로도 제품 방향과 사용자 경험을 검증하고 협업을 촉진할 수 있다. 일찍 공유하면 카피, 상호작용, 기술적 실현 가능성에 대한 피드백을 빠르게 받아 불필요한 재작업을 줄일 수 있다. Figma는 프로토타입을 제품 테스트뿐 아니라 원격 협업, 발표, 고객 커뮤니케이션을 위한 정보 전달 도구로도 활용한다. ## 가벼운 프로토타이핑의 가치 - 프로토타입은 사용자가 디자인과 어떻게 상호작용하는지 확인하고 피드백을 얻는 수단이다. - 제품 개발 초기에는 고충실도 결과물보다 빠르게 만들고 공유할 수 있는 비공식 프로토타입이 더 효과적일 수 있다. - 완성되지 않은 작업을 공개하는 것은 부담스럽지만, 초기 피드백을 통해 문제를 조기에 수정하고 향후 개발 비용과 시간을 절약할 수 있다. - 프로토타입은 디자이너의 비전을 협업자, 이해관계자, 개발팀에 전달하는 커뮤니케이션 도구이기도 하다. ## 카피와 콘텐츠 검증 - 간단한 사용자 흐름만으로도 헤더, 본문, 버튼의 문구가 서로 잘 맞는지 확인할 수 있다. - 사용자가 다음에 어떤 행동을 해야 하는지 문구가 명확하게 안내하는지 검토할 수 있다. - 여러 사람이 UX 카피와 마이크로카피를 작성할 때 발생하는 표현의 불일치를 발견할 수 있다. - 공식적인 보이스·톤 가이드가 없더라도 전체 흐름에서 문체와 분위기가 일관적인지 방향성을 점검할 수 있다. ## 개발팀에 맥락 전달 - 개발자 핸드오프 단계의 정교한 프로토타입뿐 아니라, 초기 아이디어도 개발팀과 공유하는 것이 유용하다. - 개발자는 디자인 의도를 이해하는 동시에 다음과 같은 현실적인 문제를 조기에 지적할 수 있다. - 구현이 어려운 기능 - 예상되는 기술적 장애물 - 추가 탐색이나 설계가 필요한 부분 - 프로토타입은 최종 결과물이 아니라 구현을 위한 청사진이므로, 디자인의 배경과 의도를 함께 제공할수록 실제 구현이 쉬워진다. ## 상호작용을 구체적으로 표현하기 - 가벼운 프로토타입이라도 화면 간 경로와 상호작용은 가능한 한 명확하게 지정해야 한다. - 예를 들어 `On Click`, `On Drag`, `While Hovering`과 같은 조건을 사용해 사용자의 행동과 시스템 반응을 표현할 수 있다. - 상호작용을 구체화하면 팀원들이 의도한 동작을 정확히 이해하고, 테스트 결과와 피드백의 품질도 높아진다. ## Figma에서의 커뮤니케이션 활용 - Figma는 프로토타이핑 기능을 제품 개발뿐 아니라 사내 정보 공유와 원격 협업에도 활용한다. - 원격 근무 환경에서는 작업물과 정보를 한곳에서 공유하는 일이 특히 중요해졌으며, 프로토타입이 이를 지원한다. ### Presentation View 활용 - Figma는 슬라이드 덱을 공유할 때 Presentation View를 사용한다. - 전사 회의에서는 여러 팀원이 하나의 마스터 파일에 각자 발표 슬라이드를 추가할 수 있다. - 분기 계획, 리서치 결과, 원격 근무 방식 등 다양한 정보를 발표하고 피드백받는 기반으로 활용한다. - 영업팀은 고객용 원페이저를 PDF 대신 프로토타입 URL로 공유한다. - 수신자는 링크를 클릭하며 내용을 탐색할 수 있고, GIF 같은 애니메이션 요소도 지원되어 정적인 문서보다 참여도가 높다. - 사용자 컨퍼런스와 같은 행사 발표 자료도 Figma에서 제작하고 공유할 수 있다. ## 실용적인 적용 방법 - 초기 아이디어 단계부터 프로토타입을 공유해 문제를 조기에 발견한다. - 시각적 완성도보다 검증하려는 목적을 먼저 정한다. - 카피, 상호작용, 기술적 제약 등 검토 대상에 맞춰 필요한 수준만 구현한다. - 프로토타입 링크와 함께 디자인 의도, 미해결 질문, 피드백이 필요한 부분을 설명한다. - 최종 산출물뿐 아니라 발표, 고객 설명, 원격 협업에도 프로토타입을 적극 활용한다.

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

디자인 시스템Figma사용자 경험프로토타이핑+2

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

플러그인으로 사용자와 팀

Figma 플러그인은 반복적이고 팀별로 특수한 작업을 자동화해 디자이너의 생산성과 협업 품질을 높일 수 있다. 공개 플러그인을 사용하는 것만으로 해결되지 않는 문제라면, 제품·컴포넌트·스타일에 맞춘 맞춤형 플러그인을 직접 만드는 것이 효과적이다. GitHub, Atlassian, Uber의 사례는 작은 유틸리티에서 출발해 팀 전체의 통합 도구로 발전시키는 방법을 보여준다. ## 반복 작업을 줄이는 맞춤형 플러그인 - 공개 플러그인이 400개 이상 제공되더라도 특정 조직의 컴포넌트나 디자인 시스템에 맞는 기능은 직접 만들어야 할 수 있다. - 플러그인 개발의 좋은 출발점은 반복적이고 번거로우며 실수하기 쉬운 작업을 발견하는 것이다. - 처음에는 작은 유틸리티로 시작한 뒤, 팀의 여러 요구를 하나의 플러그인으로 통합할 수 있다. ## GitHub: 컴포넌트 관리와 테마 전환 자동화 ### 레이어 테두리 제어 - GitHub는 다양한 위치와 크기의 구분선을 하나의 리스트 아이템 컴포넌트 안에서 관리했다. - 여러 변형 컴포넌트를 따로 유지하는 대신, 플러그인이 필요한 레이어 조합의 표시 여부를 자동으로 전환했다. - 그 결과 컴포넌트 수와 유지보수 부담을 줄일 수 있었다. ### 색상 테마 관리 - 모바일 앱에서 라이트 테마, 다크 테마, 고대비 모드를 지원하기 위해 네 가지 색상 세트를 관리해야 했다. - 플러그인은 기능적 이름으로 지정된 스타일을 검색하고 관리하도록 도왔다. - 전체 디자인을 몇 번의 클릭만으로 다른 테마로 전환할 수 있게 했다. ### 실제 데이터 삽입 - 정확한 목업과 디자인 스트레스 테스트를 위해 API에서 실제 데이터를 가져오는 데이터 채우기 플러그인을 만들었다. - 무작위 데이터 샘플을 가져와 아바타, 사용자명, 이름 등을 컴포넌트의 레이어 이름에 맞춰 자동 매핑했다. - 이후 테두리, 테마, 데이터 삽입 기능을 하나의 ‘모노 플러그인’으로 통합해 팀원들이 단일 UI에서 여러 기능을 사용할 수 있게 했다. ## Atlassian: 제품에 맞는 콘텐츠와 가상 사용자 이미지 - 일반적인 더미 텍스트가 아니라 제품별로 서로 연결된 데이터를 생성하기 위해 ADG Data Generator를 개발했다. - Jira에서는 프로젝트명과 티켓 번호, Bitbucket에서는 브랜치명과 커밋 메시지처럼 작업 중인 제품에 맞는 콘텐츠를 제공했다. - 실제 인물 사진 대신 실제로 존재하지 않는 사람을 표현하는 AI 생성 이미지를 사용해 개인정보나 이미지 라이선스 문제를 줄였다. - Atlassian은 이 플러그인의 소스 코드를 공개해 유사한 도구를 만들려는 커뮤니티가 참고할 수 있도록 했다. ## Uber: 협업과 디자인 검증 지원 - Uber에서는 여러 플러그인을 만들어 협업을 강화하고 디자인 불일치를 줄이며 작업 속도를 높였다. - 모바일 디자인 리뷰를 위해 선택한 Figma 프레임을 URL과 QR 코드로 기기에 미러링하는 플러그인을 개발했다. - 리뷰 참가자들이 대형 화면을 함께 보는 대신 각자의 스마트폰에서 디자인을 직접 확인할 수 있어, 실제 사용 환경에 가까운 피드백을 제공할 수 있었다. - Uber 사례는 플러그인이 단순한 제작 자동화뿐 아니라 디자인 크리틱과 협업 방식 자체도 개선할 수 있음을 보여준다. ## 플러그인 개발 기회를 찾는 방법 - 자주 반복하는 수작업을 목록으로 만들고, 클릭·검색·레이어 전환이 많은 작업부터 자동화한다. - 팀의 제품 데이터나 디자인 시스템처럼 일반 플러그인이 알기 어려운 내부 맥락을 활용한다. - 하나의 거대한 도구를 처음부터 만들기보다 작은 기능을 검증한 후 관련 기능을 통합한다. - 팀 전체가 사용할 경우 설치와 실행 과정을 단순화하고, 하나의 통합 UI로 제공하는 것이 좋다. 실무에서는 “반복적으로 시간을 빼앗기지만 규칙이 명확한 작업”부터 플러그인화하는 것이 가장 효율적이다. 특히 테마 전환, 콘텐츠 생성, 컴포넌트 상태 변경, 실제 기기 검토처럼 오류가 발생하기 쉬운 작업이 좋은 대상이다.

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

디자인 시스템접근성figma-pluginsapi-integration+3

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

Config: 피그마의 첫 번째

Figma의 첫 사용자 컨퍼런스 Config는 1,000명 이상이 모여 배우고 교류하는 커뮤니티 중심의 행사로 기획됐다. Figma는 정해진 의제를 일방적으로 전달하기보다 참가자들의 제안과 참여를 바탕으로 행사를 구성했으며, 디자인을 공개적으로 공유하고 함께 발전시키는 “오픈 디자인”을 핵심 주제로 다뤘다. 기술은 사람을 고립시키는 도구가 아니라 공동체와 더 깊이 연결하는 수단으로 활용해야 한다는 메시지도 강조됐다. ## 커뮤니티가 직접 만든 컨퍼런스 - Config의 목표는 사용자 커뮤니티를 물리적인 공간으로 구현해 의미 있는 대화를 나누는 것이었다. - 팀 문화, 멘토링, 디자인 윤리 같은 주제를 중심으로 참가자들이 서로 배우고 경험을 공유하도록 했다. - Figma 직원이 사용자들의 목소리를 직접 듣고, 사용자들이 서로 만날 수 있는 기회를 마련했다. - 워크숍, 라이트닝 토크, 라운드테이블의 상당수가 참가자들의 제안으로 구성됐다. - 단순히 발표를 듣는 행사가 아니라, 참가자들이 직접 기여하는 공동 토론의 장을 지향했다. - 현장 참석자뿐 아니라 온라인 참가자도 세션 녹화 영상을 통해 행사에 참여할 수 있도록 했다. ## 오픈 디자인과 협업 - 컨퍼런스의 중심 주제는 디자인 분야에서의 “오픈하게 만들기(open design)”였다. - 엔지니어링의 오픈소스 문화처럼 디자인 결과물을 공유하고, 다른 사람이 이를 수정·재사용·확장하는 방식을 강조했다. - Devon Zuegel은 오픈소스의 원리가 디지털 제품을 넘어 도시 계획과 물리적 인프라에도 적용될 수 있다고 설명했다. - Jason Kunesh는 시카고 디자인팀의 자원이 부족한 상황에서 학생들이 팀의 확장된 구성원으로 참여해 디자인 시스템을 구축한 사례를 소개했다. - Miguel Solorio는 Microsoft가 커뮤니티를 디자인 과정에 참여시켜 제품 개발에 사용자 의견을 반영한 경험을 공유했다. - 이를 통해 디자인은 소수의 전문가가 완성하는 결과물이 아니라, 더 넓은 공동체가 함께 만드는 과정이라는 관점을 제시했다. ## 기술과 공동체의 관계 - Craig Mod는 스마트폰과 같은 기술이 사람을 원하는 장소로 순간 이동시키는 것처럼 작동해, 주변 사람들과의 관계를 단절시킬 수도 있다고 지적했다. - 기술을 현실에서 도피하는 수단으로 사용하기보다, 주변 사람들과 더 깊이 연결하는 방식으로 활용해야 한다고 강조했다. - 커뮤니티는 단순히 온라인에서 모인 사용자의 집합이 아니라, 서로 돌보고 참여하며 공동의 가치를 만들어가는 관계망으로 확장됐다. ## 기존 질서에 도전하는 태도 - May-Li Khoe는 자신이 중요하게 생각하는 공동체를 지원하면서도 기존의 규범과 현상 유지를 즐겁게 뒤집는 방법을 공유했다. - 참가자들에게 각자의 커뮤니티를 위해 어떤 변화를 만들 수 있을지 고민하도록 독려했다. - 이는 디자인 실무를 넘어 조직문화, 사회적 책임, 공동체 참여에까지 디자인의 역할을 확장하는 메시지였다. ## 실용적인 시사점 Config의 사례는 사용자 행사를 성공시키려면 일방적인 제품 발표보다 참가자들이 직접 의제와 콘텐츠를 만들 수 있는 구조가 중요하다는 점을 보여준다. 또한 디자인 조직은 결과물을 폐쇄적으로 관리하기보다 지식과 작업물을 공유하고, 사용자·학생·지역사회 등 다양한 사람을 설계 과정에 참여시키는 방식을 고려할 수 있다.

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

디자인 시스템Figma오픈 소스design-tools+2

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

더 개방적으로 창작하고 협

Figma는 Config 2020에서 디자인 제작, 협업, 커뮤니티 공유를 강화하는 7가지 기능을 발표했다. 반복 작업을 줄이고 반응형 디자인과 고품질 프로토타이핑을 지원하는 한편, 제품팀 간 맥락 공유와 외부 커뮤니티의 학습·재사용을 확대하는 것이 핵심이다. 이러한 기능의 기반으로 안정적이고 성능이 뛰어난 플랫폼에 대한 지속적인 투자도 강조했다. ## 2020년 Figma의 세 가지 방향 - **제작(Creation):** 반복적인 디자인 작업을 자동화해 더 빠르고 효율적으로 제작하도록 지원한다. - **협업(Collaboration):** 디자이너뿐 아니라 제품 개발에 참여하는 모든 구성원이 함께 작업할 수 있도록 한다. - **커뮤니티(Community):** 디자인 파일을 공개하고 서로 공유·학습·재사용할 수 있는 생태계를 만든다. - 위 기능들을 뒷받침하기 위해 안정성과 성능을 지속적으로 개선한다. ## Auto Layout 강화 - 컨테이너 크기에 맞춰 늘어나는 반응형 컴포넌트를 만들 수 있다. - 텍스트 길이에 따라 자동으로 크기가 바뀌는 버튼을 제작할 수 있다. - 리스트 항목을 쉽게 재배치할 수 있다. - 여러 디바이스 유형에 대응하는 디자인을 만드는 데 유용하다. ## 더 효율적인 글꼴 및 색상 관리 - 새 **Font Picker**는 자주 사용하는 글꼴, 조직에서 공유한 글꼴, 즐겨찾기 글꼴을 우선 표시한다. - 수많은 글꼴 중 원하는 글꼴을 빠르게 검색할 수 있다. - 현재 파일에서 사용된 모든 글꼴을 확인해 디자인 전반의 일관성을 점검할 수 있다. - **Selection Colors**를 사용하면 여러 객체의 채우기, 선, 텍스트 색상을 한 번에 변경할 수 있다. - 색상 속성을 개별적으로 조정하거나 동일한 색상으로 일괄 통일할 수 있다. ## 키보드와 게임패드를 지원하는 프로토타이핑 - 키보드, 게임패드, 접근성 컨트롤러를 프로토타입 상호작용의 트리거로 사용할 수 있다. - `Cmd + F`와 같은 애플리케이션 단축키를 시뮬레이션할 수 있다. - 게임 메뉴의 방향키 조작처럼 게임패드 기반 인터랙션도 표현할 수 있다. - 다양한 입력 장치를 사용하는 고충실도 프로토타입 제작을 지원한다. ## 링크를 통한 협업 맥락 보존 - 텍스트에 웹페이지 링크를 삽입할 수 있다. - Figma 파일 내부의 특정 페이지나 에디터의 특정 프레임으로 연결할 수 있다. - 제품 요구사항 문서 등 외부 자료를 직접 연결할 수 있다. - 클릭 가능한 목차를 만들어 대규모 파일에서 협업자가 원하는 화면으로 빠르게 이동하도록 할 수 있다. ## Plugin Inspector API - 플러그인이 속성 패널에 주요 정보를 표시할 수 있도록 새로운 API를 제공한다. - Notepad 같은 플러그인의 작업 항목을 현재 디자인 요소와 함께 확인할 수 있다. - Mapsicle처럼 특정 플러그인으로 생성된 콘텐츠의 출처를 확인하고 쉽게 업데이트할 수 있다. - 디자인 과정에서 사용한 도구와 결과물 사이의 연결성을 높인다. ## 프로토타입만 공유하는 권한 - 디자인 원본 파일은 공개하지 않고 프로토타입만 공유할 수 있는 권한을 추가한다. - 구현 전 아이디어를 외부 이해관계자에게 보여주면서 실제 디자인 파일은 보호할 수 있다. - 해당 기능은 Figma Professional 및 Organization 요금제에 제공될 예정이라고 발표됐다. ## Figma Community를 통한 공개와 학습 - 팀이나 조직 내부를 넘어 전체 디자인 커뮤니티와 파일을 공유하는 방향을 제시했다. - 공개된 라이브 디자인 파일을 다른 사용자가 직접 살펴보고, 수정하고, 학습할 수 있다. - 커뮤니티 베타 출시 후 수개월 동안 400명 이상의 제작자가 1,000개 이상의 파일을 공개했다. - 공유된 자료에는 와이어프레임 템플릿, 아이콘 세트, 디자인 시스템 예시, 디바이스 프레임, 프레젠테이션 템플릿, 일러스트 등이 포함됐다. Figma의 발표는 단순히 디자인 편집 기능을 늘리는 데 그치지 않고, 반응형 제작 자동화, 팀 간 정보 연결, 선택적 공유, 공개 리소스 재사용을 하나의 작업 흐름으로 통합하려는 전략을 보여준다. 실무에서는 Auto Layout과 Selection Colors로 반복 작업을 줄이고, 내부 문서 링크와 프로토타입 전용 공유를 활용해 협업 효율과 보안을 함께 높이는 것이 유용하다.

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

디자인 시스템Figma프로토타이핑collaboration+3

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

Figma on Figma: Figma

Figma는 제품 디자인뿐 아니라 마케팅 웹사이트에도 디자인 시스템이 필요하다고 판단하고, 기존 페이지의 시각 요소와 제작 방식을 체계화했다. 반복되는 요소를 통합하고 재사용 가능한 컴포넌트와 조합형 섹션을 구축한 결과, 일관성을 유지하면서도 코드 작성 없이 아이디어에서 출시까지 하루, 실제 사례에서는 48시간 이내에 웹페이지를 만들 수 있게 되었다. ## 기존 웹사이트의 불일치와 유지보수 문제 - 페이지마다 디자이너와 개발자가 각자 새로운 해결책을 만들고 있었다. - 비슷하지만 조금씩 다른 컴포넌트가 반복되어 사용자 경험과 브랜드 인상이 일관되지 않았다. - 페이지를 수정하거나 업데이트하기 어렵고, 새로운 페이지를 만들 때마다 작업 방식이 달라졌다. - 제품 디자인 분야에서 활용되던 디자인 시스템의 장점을 마케팅·웹 디자인에도 적용할 필요가 있었다. ## 전체 요소를 조사하고 패턴을 통합 - 먼저 폰트, 글자 크기, 색상, 컬럼 너비, 레이아웃 등 기존 사이트의 시각 요소를 Figma 파일에 모았다. - 조사 과정에서 다음을 구분했다. - 여러 페이지에서 반복되는 패턴 - 한 번만 사용되어 스타일 가이드에 포함하기 어려운 예외 요소 - 서로 유사하지만 세부 스타일이 다른 요소 - 큰 UI 요소는 더 작은 단위로 분해해 조합 가능한 구조로 만들었다. - 서로 다른 제목 스타일 12개를 H1~H3, 본문, 기술 문서용 텍스트 등으로 단순화했다. - 블로그와 긴 형식의 콘텐츠에는 풀 쿼트, 블록 쿼트 같은 전용 텍스트 스타일도 추가했다. ## 원자적 요소와 유연한 컴포넌트 - 작은 요소를 조합해 다양한 페이지 구조를 만들 수 있도록 디자인 시스템을 구성했다. - 핵심 목표는 특정 페이지에만 맞는 고정된 디자인이 아니라, 여러 콘텐츠와 레이아웃에 대응하는 유연한 빌딩 블록을 만드는 것이었다. - 정리된 시각 언어를 공유 라이브러리로 제공해 Figma 브랜드에 익숙하지 않은 사람도 일관된 결과물을 만들 수 있게 했다. - 타이포그래피, 간격, 패딩, 행간, 색상, 그리드 등을 하나의 기준으로 통일했다. ## FLEGOs: 조합 가능한 대형 섹션 - Figma는 컴포넌트를 조합해 자주 함께 사용되는 요소와 완성된 섹션도 미리 만들었다. - 이러한 대형 조합 단위를 “Figma + LEGO”라는 의미의 **FLEGOs**라고 불렀다. - 디자이너는 개별 텍스트나 버튼뿐 아니라 페이지의 주요 섹션을 FLEGOs로 빠르게 구성할 수 있었다. - 작은 요소부터 완성된 섹션까지 단계적으로 재사용할 수 있어 페이지 제작의 속도와 일관성을 함께 확보했다. ## Contentful 기반의 제작 workflow - 약 한 달 동안 소규모 팀이 스타일 가이드와 컴포넌트 라이브러리를 구축했다. - 시스템은 Figma 파일에만 머무르지 않고 CMS인 Contentful에도 반영했다. - 디자인팀은 Figma에서 FLEGO를 사용해 와이어프레임을 만들고, 같은 파일에서 콘텐츠를 협업한 뒤 CMS의 컴포넌트로 실제 페이지를 구성했다. - 대부분의 핵심 마케팅 사이트가 이 프레임워크를 기반으로 제작되었다. - 새로운 페이지를 만들 때 별도의 코드 작성 없이 기존 컴포넌트를 활용할 수 있었다. ## 출시 속도 향상 - 디자인 시스템 도입 후 콘셉트에서 출시까지 하루 안에 진행할 수 있게 되었다. - ‘What’s New’ 페이지는 제품 마케터와 웹 제작자가 FLEGOs로 빠르게 와이어프레임을 만들고 콘텐츠를 작성한 사례다. - 아이디어에서 실제 웹페이지 공개까지 48시간 이내에 완료했다. - 재사용 가능한 시스템 덕분에 속도를 높이면서도 브랜드의 시각적 일관성을 유지할 수 있었다. 디자인 시스템은 제품 UI에만 필요한 도구가 아니라, 마케팅 페이지와 콘텐츠 제작에도 효과적이다. 기존 결과물을 먼저 조사하고, 반복 패턴을 통합한 뒤, 작은 요소부터 조합형 섹션까지 단계적으로 라이브러리화하면 개발 부담을 줄이면서 빠르고 일관된 웹사이트 운영이 가능하다.

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

디자인 시스템Figmacomponent-libraryatomic-design+2

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

Figma에서 커뮤니티

Figma는 2020년의 성장 전략 중심에 사용자 커뮤니티를 두고, 온라인·오프라인·제품 내부에서 사용자를 더 closely 연결하겠다고 밝혔다. 이를 위해 사용자 컨퍼런스와 지역 모임, 글로벌 지원 체계, 팀 협업 기능, 파일 공유 기반의 Figma Community를 확대할 계획이다. 궁극적으로는 디자인을 더 많은 사람이 배우고 공유하며 함께 발전시키는 개방형 생태계를 구축하려는 것이다. ## 오프라인 만남과 지역 커뮤니티 확대 - 2020년 2월 샌프란시스코에서 첫 사용자 컨퍼런스 **Config**를 개최한다. - 프로그램 상당 부분을 커뮤니티가 직접 구성해, 일방적인 강연보다 참여형 행사로 운영한다. - 오픈소스 디자인, 차세대 디자이너 교육, 디자인 의사결정에 대한 자신감, Chicago.gov 재설계 경험 등 실무 중심 주제를 다룬다. - 샌프란시스코에 참석하지 못하는 사용자를 위해 온라인 시청도 제공한다. - 전 세계 도시의 커뮤니티 리더들과 협력해 지역별 Figma 이벤트와 사용자 그룹을 확대할 예정이다. ## 글로벌 고객 지원 강화 - 기존 고객 지원은 북미와 유럽 업무 시간 중심이었지만, Figma 활성 사용자의 80% 이상이 미국 외 지역에 있다는 점을 고려해 지원 체계를 확장한다. - Zendesk로 지원 기술 스택을 이전해 전 세계 고객을 더 효과적으로 지원할 기반을 마련했다. - 2020년 중 다음과 같은 지원 서비스를 선보일 계획이다. - 제품 지식을 직접 검색할 수 있는 새로운 Help Center - 사용자끼리 질문하고 답변하는 커뮤니티 포럼 - Figma 내부의 처리 절차 개선을 통한 더 빠른 고객 응대 ## 제품팀 전체를 위한 협업 기능 - 2019년에는 Plugins, Auto Layout, Smart Animate, OpenType 지원, Design System Analytics 등을 출시했다. - 앞으로도 반복적이고 수동적인 디자인 작업을 줄여 창의적 생산성을 높이는 기능 개발을 이어간다. - 디자인은 디자이너만의 작업이 아니라 엔지니어, 제품 관리자 등 여러 직군이 함께하는 과정이라는 점을 강조한다. - 따라서 Figma를 개인용 디자인 도구를 넘어 제품팀 전체가 사용할 수 있는 협업 플랫폼으로 발전시키려 한다. - 대규모 조직의 Figma 파일에는 평균 6명의 협업자가 참여한다는 데이터도 제품 방향의 근거로 제시했다. - 2020년 제품 로드맵은 Config에서 경영진이 추가로 공개할 예정이라고 밝혔다. ## 파일 공유를 중심으로 한 Figma Community - 디자이너들이 서로 작업물을 공유하고 배우는 관행에서 영감을 받아 Figma Community 베타를 시작했다. - 공개된 파일을 다른 사용자가 살펴보고, 수정하거나 재활용하며 학습할 수 있다. - 발표 당시 300명 이상의 크리에이터가 약 600개의 파일을 공개했다. - 공유된 자료에는 다음이 포함된다. - 디자인 템플릿 - 실습형 교육 가이드 - 공개 디자인 라이브러리 - 향후 더 많은 크리에이터가 자료를 게시하도록 지원해, 전문 디자이너와 예비 디자이너 모두가 유명 브랜드와 제작자의 작업에서 배울 수 있는 공간으로 만들 계획이다. ## 커뮤니티와 함께 만드는 성장 전략 - Figma는 단순히 사용자를 늘리는 것보다 사용자가 서로 연결되고 지식을 나누는 구조를 만드는 데 초점을 둔다. - 컨퍼런스와 지역 모임은 사람과 사람을 연결하고, 지원 포럼과 Community는 온라인 지식 교류를 활성화한다. - 제품 자체는 여러 직군이 실시간으로 협업하는 공간으로 확장된다. - 회사는 커뮤니티의 의견을 제품, 행사, 지원 정책에 반영하기 위해 사용자에게 직접 아이디어를 요청했다. Figma의 방향은 디자인 도구를 넘어, 작업물·지식·사람이 함께 모이는 협업 생태계를 구축하는 데 있다. 사용자는 Config나 지역 모임에 참여하고, Figma Community의 파일을 공유·재활용하며, 포럼을 통해 다른 사용자와 문제를 해결하는 방식으로 이 생태계를 적극 활용할 수 있다.

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

디자인 시스템Figmaauto-layoutplugins+4

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

디자인 시스템의 가치 측정하기

디자인 시스템은 반복 자산을 재사용하게 해 디자이너가 제작·검색·세부 의사결정에 쓰는 시간을 줄여준다. Figma의 실험에서는 관련성이 높고 최신 상태인 디자인 시스템을 사용할 때 디자이너의 작업 완료 시간이 그렇지 않을 때보다 **34% 빨랐다**. 다만 이는 과제에 직접 적용 가능한 디자인 시스템을 사용한 조건의 결과이므로, 실제 조직에서 얻을 수 있는 최대 시간 절감에 가까운 수치로 해석해야 한다. ## 디자인 시스템의 가치와 정량화 필요성 - 디자인 시스템은 제품 전반에서 반복적으로 사용하는 자산을 위한 **단일 기준점(single source of truth)** 역할을 한다. - Figma 엔터프라이즈 고객의 약 **75%**가 조직 전체에서 디자인 시스템을 활용하고 있다. - 디자인 시스템은 구축보다도 지속적인 유지·관리와 실제 사용 현황 파악이 어렵다. - 사용 데이터를 분석하면 디자인 시스템 팀이 어떤 라이브러리와 컴포넌트를 개선하거나 폐기할지 더 정확히 판단할 수 있다. - Figma는 이러한 분석을 지원하기 위해 라이브러리 사용 추이와 컴포넌트별 사용 현황을 제공하는 Design System Analytics를 공개했다. ## 잘 유지된 디자인 시스템이 시간을 줄이는 이유 디자이너가 디자인 시스템의 자산을 사용하면 다음 작업을 피할 수 있다. - 컴포넌트나 화면 요소를 처음부터 다시 제작하는 작업 - 기존 디자인 파일을 뒤져 이미 존재하는 자산을 찾는 작업 - 글꼴, 배치, 색상 등 세부적인 시각적 결정을 매번 새로 내리는 작업 - 색상 선택이나 스타일 조정 같은 반복적인 미세 의사결정 이렇게 절약된 시간이 누적되면 디자이너는 전략적이고 창의적인 업무에 더 집중할 수 있다. ## 실험 설계: 디자인 시스템 사용 여부 비교 Figma 데이터 과학팀은 동일한 디자이너가 디자인 시스템이 있을 때와 없을 때 어떻게 달라지는지 비교했다. - 금융 계정 통합 앱을 배경으로 두 가지 과제를 설계했다. - 특정 계정의 거래 내역과 추세를 보여주는 화면 제작 - 사용자 프로필에 새 금융 계정을 연결하는 흐름 설계 - 모든 참가자는 두 과제를 모두 수행했지만, 한 과제에서만 최신 디자인 시스템을 사용할 수 있었다. - 다른 과제에서는 디자인 시스템 대신 참고용 과거 디자인 파일이 제공됐다. - 두 과제의 난이도와 완료 시간이 개인별로 비슷하도록 구성해, 각 디자이너가 자신의 통제군 역할을 하게 했다. - 과제 순서에 따른 편향을 줄이기 위해 참가자마다 수행 순서를 번갈아 배정했다. - 참가자에게 자산을 미리 익힐 시간을 충분히 제공했다. - 프롬프트는 사용자가 수행해야 할 목표만 설명하고, 디자이너가 어떤 화면을 만들어야 하는지는 지정하지 않았다. - 품질 기준을 인위적으로 통일하지 않기 위해 참가자가 스스로 적절한 완료 시점을 판단하도록 했으며, 과제별 완료 시간을 측정했다. ## 실험 결과: 작업 시간 34% 단축 - 디자인 시스템에 접근할 수 있었던 참가자는 그렇지 않은 경우보다 목표를 **34% 더 빠르게 완료**했다. - 이 결과는 디자인 시스템의 자산이 과제에 직접 적용 가능하고, 최신 상태이며, 실제 작업과 관련성이 높을 때 얻어진 효과다. - 따라서 현실의 모든 작업에서 항상 34%가 절약된다는 뜻이라기보다, 디자인 시스템이 가장 효과적으로 작동하는 조건에서의 상한선에 가깝다. - Figma는 이 비율을 실제 디자인팀의 인력과 일정에 적용해 시간과 비용 절감 규모로 환산하려 했지만, 제공된 글은 해당 계산 과정 중간에서 끝난다. ## 실용적인 적용 방향 디자인 시스템의 투자 효과를 확인하려면 단순히 라이브러리를 만들어 두는 것보다 최신성·관련성·사용률을 지속적으로 관리해야 한다. 라이브러리 분석을 통해 자주 사용되는 컴포넌트와 거의 쓰이지 않는 자산을 구분하고, 실제 작업에 맞지 않는 요소를 개선하는 것이 시간 절감 효과를 높이는 방법이다.

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

디자인 시스템Figma데이터 사이언스design-system-analytics+1

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

Made in Figma, 201

2019년 Figma 사용 데이터를 보면 디자인은 더 개방적이고 협업적인 활동으로 발전했으며, 디자인 작업을 정량적으로 분석하려는 흐름도 커졌다. 사용자들은 차가운 계열의 색상과 Google Fonts를 선호했고, 데스크톱·모바일 등 다양한 화면 크기를 기준으로 작업했다. 또한 하나의 디자인 파일에 여러 직군이 참여하며, 파일은 개인 작업에서 협업 작업으로 확장되는 양상을 보였다. ## 분석의 배경과 방법 - Figma는 2019년 사용자들의 디자인 경향을 파악하기 위해 익명화된 제품 데이터를 분석했다. - 분석 대상에는 다음과 같은 항목이 포함됐다. - 자주 사용된 색상과 폰트 - 텍스트 스타일과 굵기 - 가장 많이 선택된 프레임 크기 - 하나의 파일에서 협업한 사용자 수와 작업 흐름 - 디자인 시스템 분석 기능의 등장으로 디자인 작업의 가치와 활용도를 수치로 평가할 가능성도 커졌다. ## 차가운 계열 색상의 선호 - 회색 계열을 제외하면 녹색과 파란색이 가장 많이 사용됐다. - 가장 많이 사용된 비회색 색상은 `#009688`이었다. - 그 뒤를 짙은 파란색인 `#455A64`, `#263238`이 이었다. - 이는 2019년 Pantone 올해의 색상인 Living Coral(`#FF6F61`)과는 대조적인 결과였다. ## Google Fonts 중심의 폰트 사용 - 가장 많이 사용된 폰트는 다음과 같았다. - Montserrat - Open Sans - Lato - 상위 10개 폰트 중 6개가 Google Fonts였다. - SF Pro Text, SF Pro Display, Proxima Nova처럼 기본 제공 폰트가 아닌 글꼴도 상위권에 포함됐다. - 시스템 폰트 중에서는 Helvetica보다 Arial의 사용량이 많았다. - Figma의 기본 폰트인 Roboto는 순위에서 제외됐지만, 이를 포함하면 상위 11개 폰트가 전체 폰트 사용량의 90%를 차지했다. - Font Awesome은 아이콘 폰트임에도 31위를 기록했다. - Times New Roman은 55위였고, 첫 번째 세리프 폰트인 Playfair Display는 22위에 올랐다. ## 굵은 글꼴과 텍스트 스타일 - 사용자는 이탤릭체보다 글꼴 굵기를 조정하는 경향이 훨씬 강했다. - 글꼴을 굵게 조정하는 작업은 이탤릭체 적용보다 13배 더 자주 발생했다. - Figma 파일의 약 3분의 1은 bold 또는 heavy 스타일을 사용했다. - 이는 가독성뿐 아니라 시각적 위계와 강조를 위해 굵은 글꼴이 널리 활용됐음을 보여준다. ## 프레임과 화면 크기 선택 - Figma는 디자인 시작점으로 사용할 수 있는 36개의 사전 정의 프레임을 제공했다. - 전체 파일의 33%가 이 프리셋 프레임 중 하나로 시작됐다. - 가장 인기 있는 프레임은 `1440 × 1024` 데스크톱 화면이었다. - 그 뒤를 iPhone X와 iPhone 8 프레임이 따랐다. - Windows 사용자가 macOS 사용자보다 훨씬 많다는 점을 고려하면, 실제 운영체제 점유율과 디자인 대상 기기의 우선순위가 반드시 일치하지는 않았다. ## 개인 작업에서 팀 협업으로의 확장 - Figma는 디자인을 더 개방적이고 협력적인 활동으로 만들겠다는 방향을 제품에 반영했다. - 대규모 조직의 파일을 기준으로 하면 파일당 평균 협업자 수는 6명이었다. - 협업자는 디자이너뿐 아니라 다음과 같은 직군을 포함할 수 있었다. - 개발자 - 제품 관리자 - 라이터 - 조직 내 다른 이해관계자 - 일반적인 파일은 처음에 한 명의 사용자가 독립적으로 작업하며 시작됐다. - 평균 19일이 지나면 첫 번째 협업자가 초대됐다. - 초대된 협업자는 리뷰, 댓글 작성, 공동 디자인 등의 방식으로 파일에 참여했다. ## 실용적인 시사점 - 디자인 시스템과 협업의 효과를 평가할 때 사용 빈도, 참여자 수, 파일의 변화 과정 같은 데이터를 활용할 수 있다. - 폰트와 색상 선택에서는 유행보다 브랜드 맥락과 가독성을 우선하되, 사용자가 익숙하게 접근할 수 있는 표준 리소스도 고려할 만하다. - 파일을 개인 작업물로 끝내지 않고 개발·기획·콘텐츠 담당자와 공유하면 디자인 의사결정 과정이 더 투명해질 수 있다.

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

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

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

오토 레이아웃

Figma의 Auto Layout은 자유로운 디자인 탐색과 HTML/CSS·SwiftUI 같은 개발 환경의 구조적 레이아웃 장점을 결합한 기능이다. 텍스트나 콘텐츠가 바뀌면 버튼과 주변 요소의 크기·위치가 자동으로 조정되어 반복적인 수작업을 줄인다. 또한 프레임 중첩을 통해 콘텐츠에 반응하는 복잡한 인터페이스와 재사용 가능한 컴포넌트를 만들 수 있다. ## 디자인과 개발 환경의 간극 - Figma의 기존 자유 배치 방식은 창의적인 탐색에는 유리하지만 반복 작업이 많았다. - 버튼 문구를 수정하려면 텍스트 편집, 버튼 크기 조정, 인접 버튼 이동을 각각 수행해야 했다. - HTML/CSS나 SwiftUI는 객체 간 구조와 관계를 표현하므로 콘텐츠 변경에 강하지만, 자유로운 시각적 실험에는 불편하다. - Auto Layout은 CSS 박스 모델, 특히 flexbox의 핵심 개념을 Figma에 도입해 두 환경의 장점을 결합했다. - 프레임의 속성으로 제공되므로 컴포넌트뿐 아니라 일반 프레임에도 적용할 수 있다. ## 콘텐츠에 따라 자동으로 변하는 레이아웃 - Auto Layout을 적용하면 내부 요소가 가로 또는 세로 방향으로 순서대로 배치된다. - 컨테이너의 크기는 내부 요소들의 전체 크기에 맞춰 자동으로 결정된다. - 프레임 자체에 패딩, 채우기, 선, 모서리 반경을 설정할 수 있어 버튼 제작에 별도 레이어가 필요하지 않다. - “Buy”를 “Add to basket”으로 변경하면 버튼이 텍스트 길이에 맞춰 자동으로 늘어난다. - 인접한 버튼이나 요소도 레이아웃 흐름에 맞춰 함께 이동한다. - 요소 간 간격은 개별 요소가 아니라 컨테이너 수준에서 설정된다. 특정 요소 사이만 다르게 조정하려면 추가 작업이 필요하다. ## 리스트와 메뉴의 자동 재정렬 - 반복되는 UI 요소를 배치하는 리스트와 메뉴 제작에 특히 유용하다. - 요소를 드래그해 순서를 바꾸면 나머지 요소가 자동으로 재배치된다. - 항목을 하나씩 올바른 위치로 옮기던 반복적인 클릭 작업을 줄일 수 있다. - 기존 컴포넌트 라이브러리와 디자인 시스템에도 적용할 수 있으며, `Shift + A` 또는 옵션 메뉴에서 활성화할 수 있다. ## 중첩 프레임으로 복잡한 인터페이스 구성 - 여러 Auto Layout 프레임을 HTML의 중첩된 `div`처럼 조합할 수 있다. - 버튼, 카드, 리스트, 화면 전체를 계층적으로 구성하면서 각 영역이 콘텐츠 변화에 반응하도록 만들 수 있다. - 콘텐츠를 수정하거나 요소를 다른 Auto Layout 프레임 안팎으로 이동하기 쉽다. - 의도하지 않은 배치를 막기 위해 큰 이미지를 버튼 안에 넣는 등의 작업에는 안전장치가 작동한다. - 실제로 원하는 작업이라면 macOS에서는 `Command`, Windows에서는 `Ctrl` 키를 눌러 안전장치를 무시할 수 있다. - 콘텐츠 변형마다 별도 컴포넌트를 만들기보다, 다양한 콘텐츠를 수용하는 범용 컴포넌트를 제작할 수 있다. ## 향후 발전 방향 - Figma는 Auto Layout을 첫 출시로 보고, 향후 더 많은 기능을 추가할 계획이라고 밝혔다. - 사용자는 플레이그라운드 파일, 동영상, 공식 문서를 통해 기능을 학습할 수 있다. - 기능 사용 후 피드백과 개선 요청을 공유하도록 독려했다. 실무에서는 텍스트 길이가 달라지는 버튼, 반복 목록, 카드와 메뉴처럼 콘텐츠 변화가 잦은 UI부터 Auto Layout을 적용하는 것이 효과적이다. 이후 프레임을 중첩해 디자인 시스템 전반을 반응형이고 재사용 가능한 구조로 확장할 수 있다.

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

디자인 시스템FigmaHTML반응형 디자인+3

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

일터에서의 인간미: Gust

Gusto는 기존 브랜드가 고객에게 제공하는 인간적인 경험을 충분히 반영하지 못한다고 판단해 전사적인 리브랜딩을 추진했습니다. 이 과정에서 Figma를 디자인 도구를 넘어 마케팅·콘텐츠·제품·브랜드 팀이 함께 사용하는 협업 플랫폼으로 활용했습니다. 그 결과 브랜드 철학을 로고와 캠페인뿐 아니라 제품 UI와 고객 경험 전반에 일관되게 적용하고, 여러 제품으로 확장 가능한 디자인 시스템을 구축했습니다. ## 사람 중심의 리브랜딩 - Gusto는 2012년 ZenPayroll로 시작해 10만 개 이상의 소규모 사업체에 급여, 복지, 인사 업무 자동화 서비스를 제공했습니다. - 고객들은 플랫폼을 긍정적으로 평가했지만, 기존 브랜드가 Gusto가 제공하는 인간적인 경험을 제대로 보여주지 못한다고 판단했습니다. - 리브랜딩의 목표는 로고만 바꾸는 것이 아니라 다음 요소를 하나의 브랜드 철학으로 통합하는 것이었습니다. - 브랜드 인지도 - 제품 개발 - 고객 경험 - 마케팅과 커뮤니케이션 - Gusto의 브랜드 책임자는 브랜드를 마케팅 부서나 브랜드 디자인 팀만의 소유물이 아니라, 사용자가 회사와 접촉하며 경험하는 모든 것의 총합으로 정의했습니다. ## 전사적 동의를 만드는 과정 - 리브랜딩의 가장 큰 과제는 약 1,000명의 구성원이 새 브랜드를 이해하고 실제 업무에 적용하도록 만드는 것이었습니다. - 이를 위해 모든 팀이 같은 도구를 사용하며 다음 활동을 할 수 있어야 했습니다. - 진행 중인 디자인을 실시간으로 확인 - 아이디어 공유 - 디자인에 대한 의견 교환 - 결과물에 대한 공동 소유 의식 형성 - Figma는 디자인팀뿐 아니라 콘텐츠, 제품 마케팅, 고객 확보팀 등 다양한 조직이 프로젝트에 참여할 수 있게 했습니다. - 디자인 과정이 공개되면서 비디자이너도 디자인이 만들어지는 방식과 의사결정 과정을 이해할 수 있었고, 디자인의 가치에 대한 공감대도 높아졌습니다. ## 비디자이너를 디자인 과정에 참여시키기 - Gusto는 Figma를 다음과 같은 리브랜딩 작업 전반에 활용했습니다. - 무드보드 - 타이포그래피 - UI 디자인 - 광고판과 같은 오프라인 캠페인 - 브랜드 적용 예시 - 실시간 협업 기능을 통해 관련자들이 동일한 파일을 보며 작업 상황을 확인했습니다. - 댓글 기능을 사용해 이메일이나 Slack처럼 분리된 대화가 아니라 디자인 파일 안에서 직접 의견을 주고받았습니다. - 이러한 방식은 피드백의 맥락을 보존하고, 디자이너와 다른 직군 사이의 커뮤니케이션 비용을 줄였습니다. ## 브랜드팀과 제품팀의 공동 작업 - Gusto는 제품 디자인팀과 브랜드 디자인팀을 리브랜딩의 동등한 참여자로 구성했습니다. - 두 팀은 공동 브레인스토밍과 워크숍을 열어 다음 요소를 함께 결정했습니다. - 색상 팔레트 - 타이포그래피 - 제품에 적용할 브랜드 스타터 템플릿 - Figma에서 여러 사람이 동시에 작업하면서 새 브랜드 요소를 제품의 다양한 영역에 적용해 볼 수 있었습니다. - 제품팀은 브랜드 가이드라인과 워크숍 결과를 바탕으로 새로운 UI 키트를 제작했습니다. - 목표는 단순히 제품 전체에 브랜드를 반복 적용하는 것이 아니라, 특정 화면과 순간에 브랜드를 더욱 인상적이고 영감을 주는 방식으로 드러내는 것이었습니다. - 초기 단계부터 브랜드와 제품팀이 함께했기 때문에 브랜드를 제품 경험 전체로 확장하는 과정이 자연스럽게 이어졌습니다. ## 여러 제품으로 확장 가능한 디자인 시스템 - 리브랜딩은 시각적 결과물뿐 아니라 디자이너들이 협업하는 방식과 시스템을 정립하는 계기이기도 했습니다. - Gusto는 제품이 어떤 모습이어야 하는지에 대한 단일 기준, 즉 “시스템 오브 레코드”가 필요했습니다. - 이를 위해 제품 디자인팀은 Figma의 다음 기능을 활용해 UI 키트를 구축했습니다. - 공유 라이브러리 - 재사용 가능한 컴포넌트 - 브랜드 가이드라인을 반영한 UI 요소 - 이 시스템은 각 제품과 화면에서 일관된 디자인을 유지하고, 새로운 브랜드를 회사 규모에 맞게 확장하는 기반이 되었습니다. ## 실용적인 시사점 - 리브랜딩은 브랜드팀만의 프로젝트가 아니라 제품, 마케팅, 콘텐츠, 개발 등 고객 경험에 관여하는 모든 팀의 공동 작업이어야 합니다. - 디자인 파일을 협업의 중심에 두고 실시간 확인과 댓글을 활성화하면 비디자이너의 참여와 이해를 높일 수 있습니다. - 브랜드 가이드라인을 실제 UI 키트, 라이브러리, 컴포넌트로 연결해야 브랜드가 제품 경험에 일관되게 적용되고 장기적으로 확장됩니다.

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

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

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

디자인 시스템을 뒷받침

Figma는 디자인 시스템의 사용 데이터를 분석하면 팀이 실제로 어떤 라이브러리와 컴포넌트를 사용하는지 파악하고, 이를 바탕으로 시스템을 지속적으로 개선할 수 있다고 주장합니다. Design System Analytics는 라이브러리 사용 추이, 라이브러리 간 채택률, 개별 컴포넌트의 삽입·분리 현황을 제공해 디자인 시스템 운영을 정성적 피드백에서 정량적 개선으로 확장합니다. 다만 목적은 디자이너를 감시하는 것이 아니라 사용 패턴을 이해하고 더 나은 컴포넌트와 라이브러리를 만드는 데 있습니다. ## 디자인 시스템 사용 데이터를 분석하는 이유 - Figma는 클라우드 기반 브라우저 도구이므로 디자이너들이 디자인 시스템을 어떻게 사용하는지 데이터를 통해 파악할 수 있습니다. - Design System Analytics를 사용하면 다음 정보를 확인할 수 있습니다. - 라이브러리 사용량의 시간별 추이 - 여러 라이브러리 간 사용량 비교 - 개별 컴포넌트의 사용, 삽입, 분리 현황 - 분석 결과는 조직 내 누구나 확인할 수 있어 디자이너와 관리자가 필요한 리포트를 직접 살펴볼 수 있습니다. - Figma는 분석 기능을 설계할 때 디자이너의 모든 행동을 통제하거나 감시하지 않는 방향을 강조했습니다. ## 사용되지 않거나 개선이 필요한 컴포넌트 찾기 - 라이브러리와 컴포넌트별 사용량을 보면 어떤 요소가 실제 업무에 기여하는지 파악할 수 있습니다. - Microsoft의 Fluent 디자인 시스템은 다음과 같은 질문에 데이터를 활용합니다. - 거의 사용되지 않는 컴포넌트는 무엇인가? - 자주 분리(detach)되는 컴포넌트는 무엇인가? - 유지보수가 불필요하거나 개선이 필요한 컴포넌트는 무엇인가? - Google Material Design 팀은 버튼 컴포넌트가 가장 많이 사용되는 동시에 가장 많이 분리되는 현상을 발견했습니다. - 이를 통해 기존 버튼 컴포넌트가 지나치게 복잡하다는 점을 파악하고, 더 단순한 대체 컴포넌트를 추가하는 개선으로 이어졌습니다. - 즉, 높은 사용량만 보는 것이 아니라 높은 분리율도 컴포넌트 설계가 실제 요구와 맞지 않는다는 신호로 활용할 수 있습니다. ## 라이브러리 채택과 마이그레이션 추적 - 두 라이브러리의 사용량을 시간에 따라 비교해 새 라이브러리로의 전환이 제대로 진행되는지 확인할 수 있습니다. - Squarespace는 기존 공유 라이브러리를 Auto Layout 기반의 새 라이브러리로 교체하는 과정에서 이 기능을 활용하려 했습니다. - 분석 화면에서는 다음과 같은 정보를 확인할 수 있습니다. - 기간별 컴포넌트 삽입 수 - 구버전과 신버전 라이브러리의 사용량 비교 - 새 라이브러리를 적극적으로 사용하는 상위 팀 - 컴포넌트별 전체 인스턴스 수, 최근 삽입 수, 분리 수 - 이를 통해 새 라이브러리의 채택률을 측정하고, 구버전 라이브러리의 폐기(deprecation)를 관리할 수 있습니다. - 예시 화면에는 최근 60일간의 삽입 추이와 팀별 사용 비중, 개별 버튼 컴포넌트의 인스턴스·삽입·분리 통계가 표시됩니다. ## 개별 컴포넌트 사용 방식 파악 - 단순히 라이브러리 전체의 사용량만 보는 것을 넘어 개별 컴포넌트가 실제로 어떻게 활용되는지 조사할 수 있습니다. - Pluralsight는 공유 컴포넌트가 팀원들의 작업에서 어떻게 사용되는지 파악하는 데 Analytics를 활용하려 했습니다. - 조직 내 모든 디자이너와 관리자가 분석 결과와 사용 사례를 확인할 수 있으므로: - 특정 컴포넌트의 실제 활용 사례를 빠르게 찾을 수 있습니다. - 다른 팀의 사용 방식을 참고할 수 있습니다. - 디자인 시스템 팀이 개선 우선순위를 정하기 쉬워집니다. ## 디자인 초기 단계에서 영향 측정 - 기존에는 디자인 시스템 도입 효과를 개발 단계에서 측정하는 경우가 많았습니다. - Design System Analytics를 이용하면 제품 개발이 개발 단계에 도달하기 전, 디자인 과정에서 시스템이 얼마나 채택되고 있는지도 확인할 수 있습니다. - 따라서 디자인 시스템 팀은 다음을 더 일찍 파악할 수 있습니다. - 제품팀이 공통 컴포넌트를 실제로 사용하고 있는지 - 새 라이브러리가 설계 작업에 자연스럽게 도입되고 있는지 - 특정 팀이나 프로젝트가 시스템에서 이탈하고 있는지 - 이는 개발 단계의 준수 여부를 사후 점검하는 방식에서, 디자인 단계부터 채택을 높이는 방식으로 관점을 바꿉니다. ## 기능의 변화 - 원문은 2019년 발표 내용을 다루지만, 안내문에 따르면 2025년 2월 기준 Figma Library Analytics는 컴포넌트뿐 아니라 스타일과 변수 데이터도 지원합니다. - Organization 및 Enterprise 고객에게 관련 데이터가 제공되며, Enterprise 고객은 Library Analytics API를 통해 확장된 기능을 사용할 수 있습니다. - 따라서 현재 기능은 원문에 설명된 초기 버전보다 범위가 넓어졌을 수 있습니다. 실무적으로는 사용량이 낮은 컴포넌트를 무조건 제거하기보다, 삽입 수와 분리율을 함께 분석하는 것이 좋습니다. 또한 라이브러리 마이그레이션 시 팀별 채택률과 구버전 사용량을 지속적으로 추적하면 디자인 시스템 개선과 폐기 계획을 데이터에 근거해 운영할 수 있습니다.

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

디자인 시스템Figmaauto-layoutcomponent-libraries+1

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

멀티플레이어를 넘어: Figma

Figma는 실시간 공동 편집을 넘어, 디자인을 공개하고 함께 배우며 재사용하는 커뮤니티 중심의 생태계를 구축하려 했다. 이를 위해 누구나 디자인 파일을 탐색·검사·리믹스할 수 있는 Figma Community 베타와, 팀 구성원이 중요한 작업을 쉽게 찾도록 개편한 workspace를 공개했다. 핵심은 디자인 과정을 더 개방적으로 만들고, 기업·교육기관·정부·개인 디자이너가 지식과 자산을 공유하도록 지원하는 것이다. ## 멀티플레이어에서 공개형 디자인 생태계로 - Figma는 4년 전 실시간 공동 편집 기능을 도입하면서 디자인이 더 개방적이고 클라우드 중심이어야 한다고 보았다. - 사용자들은 점차 다음과 같은 방식으로 디자인 프로세스를 개방했다. - 비디자이너를 작업 과정에 참여시킴 - 팀원과 동시에 파일을 편집함 - 작업물과 제작 방법을 커뮤니티에 공유함 - Figma는 이러한 변화를 확장하기 위해 두 공간을 도입했다. - **Figma Community**: 공개된 디자인 파일을 누구나 살펴보고, 리믹스하고, 학습할 수 있는 공간 - **개편된 Figma workspace**: 팀 구성원 중심으로 중요한 작업과 프로젝트를 쉽게 발견하는 공간 ## Figma Community 베타의 구조 - 사용자는 자신의 공개 프로필에 어떤 파일을 게시할지 직접 선택할 수 있다. - 초기 기본 라이선스로 **Creative Commons Attribution 4.0 International(CC BY 4.0)**을 제공했다. - 다른 사람이 파일을 사용·수정·공유할 수 있음 - 원작자 표시가 필요함 - Figma는 향후 더 제한적인 라이선스도 검토할 계획이며, 베타 기간 동안 사용자 의견을 수집하려 했다. - 여러 달 동안 베타를 운영하며 기업, 학교, 정부기관, 독립 디자이너의 요구를 확인하는 방식으로 제품을 발전시키려 했다. ## 기업이 공유하는 디자인 시스템과 리소스 - 기업은 파트너나 다른 디자이너가 활용할 수 있는 공개 디자인 자산을 배포할 수 있다. - 사례: - **Slack**: 파트너가 Slack 앱을 더 잘 만들 수 있도록 UI 키트 공개 - **Dropbox**: 디자인 관리자가 조직에서 활용할 수 있는 문화 키트 공유 - **Unsplash**: 디자인에 사용할 수 있는 아바타를 쉽게 제공 - **VMware**: 공개 디자인 시스템인 Clarity를 더 쉽게 활용하도록 지원 - Community는 기업의 디자인 시스템을 문서로만 설명하는 대신, 실제 편집 가능한 파일과 구성 요소로 배포하는 수단이 된다. ## 공공기관과 교육기관의 활용 - **시카고시**는 시민들이 자신의 정체성에 맞게 수정할 수 있는 공개 디자인 시스템을 준비했다. - **Lambda School**과 **Stanford d.school**은 무료 학습 템플릿을 공개하려 했다. - 이를 통해 Figma Community는 단순한 포트폴리오 공간을 넘어 다음 용도로 활용될 수 있다. - 교육 자료 배포 - 공공 서비스용 디자인 시스템 공유 - 시민·학생·학습자의 직접적인 수정과 실습 - 조직 간 디자인 표준 확산 ## 개인 디자이너의 포트폴리오와 튜토리얼 - 개인 디자이너는 Dribbble이나 Behance를 보완하는 공개 Figma 프로필을 만들 수 있다. - 발표 자료 디자이너 **Zach Grosser**는 인기 있는 슬라이드 템플릿을 공개하려 했다. - 디자이너 **David Kulakevich**의 사례는 Community의 학습 기능을 보여준다. - Figma로 제작한 그림을 처음에는 피드백을 받기 위해 공유 - 다른 사람들이 제작 과정을 궁금해하자 레이어별 작업 과정을 영상으로 설명 - 이후 원본 파일을 공개해 누구나 각 레이어와 제작 방식을 직접 확인할 수 있도록 함 - 완성된 이미지뿐 아니라 편집 가능한 원본을 공유함으로써 결과물 감상에서 실제 학습과 재현으로 확장된다. ## 기업 경계를 넘는 협업 - Square Crypto는 Bitcoin 생태계에 디자인과 코드를 개방적으로 기여하는 방식을 연구하고 있었다. - Figma는 이 팀과 협력해 회사 간 경계를 넘는 디자인 프로젝트에 필요한 기능을 탐색했다. - 이는 Community가 개인 파일 공유를 넘어, 여러 조직이 투명하게 공동 작업하는 기반이 될 가능성을 보여준다. - 공개성과 투명성을 중시하는 오픈소스 커뮤니티의 협업 방식에 디자인 도구를 연결하려는 시도이기도 하다. ## 워크스페이스 내부의 커뮤니티 - Figma는 공개 Community뿐 아니라 각 팀의 workspace 안에도 사람 중심의 공동 공간을 만들고자 했다. - 기존 디자인 파일은 파일 자체를 중심으로 구성되어 팀의 구성원이나 관계를 충분히 드러내지 못했다. - 개편된 workspace는 팀원이 중요한 작업과 프로젝트를 더 쉽게 발견하도록 설계되었다. - 제공된 글 내용에서는 이 내부 커뮤니티 기능의 구체적인 동작이나 세부 기능은 추가로 설명되지 않는다. ## 실용적인 결론 Figma Community는 디자인 파일을 단순히 보여주는 곳이 아니라, 편집 가능한 원본·템플릿·디자인 시스템을 공유해 다른 사람이 직접 배우고 재사용하도록 만드는 플랫폼이다. 조직은 공개 가능한 UI 키트와 시스템을 배포하고, 개인 디자이너는 작업 과정과 원본 파일을 포트폴리오 및 교육 자료로 활용할 수 있다. 다만 공개 전에는 라이선스 조건과 파일에 포함된 기밀 정보·브랜드 자산을 반드시 확인해야 한다.

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

디자인 시스템Figmareal-time-collaborationplugins+2

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

마이크로소프트가 워

Microsoft는 Figma 플러그인을 활용해 Fluent 디자인 시스템의 도입을 여러 제품·조직·팀으로 확장하고, 디자인 과정의 일관성과 효율성을 높였다. 특히 승인된 콘텐츠를 불러오고, 제품별 라이브러리를 전환하며, 반복 작업을 자동화하는 사내 도구를 개발했다. 이 글은 조직의 고유한 업무 방식에 맞춘 비공개 플러그인이 디자이너의 창의적 작업에 더 많은 시간을 돌려줄 수 있다고 설명한다. ## Fluent 디자인 시스템과 플러그인의 역할 - Microsoft는 모든 제품에서 사용성, 일관성, 접근성을 높이기 위해 Fluent 디자인 시스템을 운영했다. - 여러 제품군과 조직, 팀에 디자인 시스템을 적용하려면 단순한 가이드라인만으로는 부족하고 효율적인 도구가 필요했다. - Figma 플러그인은 반복 작업을 줄이고, 조직별 데이터와 규칙을 디자인 프로세스에 직접 통합하는 수단으로 활용됐다. - 공개 플러그인뿐 아니라 특정 팀의 승인 절차와 콘텐츠 정책에 맞춘 사내 전용 플러그인도 개발했다. ## 승인된 디자인 콘텐츠를 불러오는 Content Reel - 일반적인 더미 텍스트나 Lorem Ipsum은 실제 디자인 의도와 콘텐츠 특성을 충분히 반영하지 못한다. - Microsoft는 사내용 Content Reel을 만들어 승인된 다음 요소를 Figma 디자인에 바로 삽입했다. - 승인된 텍스트 문자열 - 아바타 - 아이콘 - 디자이너가 콘텐츠를 직접 찾거나 사용 승인을 다시 받을 필요가 없어 작업 속도가 향상됐다. - 조직마다 자체 콘텐츠 저장소와 승인 기준을 연결한 Content Reel을 만들 수 있다는 점을 보여준다. ## 제품별 라이브러리를 빠르게 전환하는 Themer - Microsoft는 제품마다 고유한 라이브러리와 스타일을 사용하며, Figma 안에 수백 개의 라이브러리가 존재했다. - 제품 스타일에 맞게 디자인을 수동으로 변경하는 작업은 규모가 커질수록 비효율적이었다. - Jackie Chui가 개발한 Themer는 Work, Outlook 등 여러 제품 테마 사이를 빠르게 전환하도록 지원했다. - 공개 버전 Themer는 라이브러리에서 게시된 스타일을 쉽게 교체하는 기능을 제공한다. - 이를 통해 하나의 디자인을 여러 제품의 시각적 체계에 맞게 적용하는 비용을 줄였다. ## 반복 작업을 줄이는 워크플로 도구 Microsoft 디자이너들은 창의적인 문제 해결에 집중하기 위해 반복적인 작업을 자동화하는 여러 플러그인을 제작했다. - **Find and Replace** - 페이지 내 텍스트를 검색하고 일괄 교체한다. - 일반적인 텍스트 편집기의 찾기·바꾸기와 유사하다. - **Paste to Fill** - 복사한 이미지를 선택한 레이어의 Fill로 붙여 넣는다. - 이미지 URL을 입력해 레이어의 이미지 Fill로 불러올 수도 있다. - **Button Resizer** - 버튼의 라벨 너비에 맞춰 버튼 크기를 쉽게 조정한다. - Jackie는 Figma API가 공개된 이후부터 플랫폼을 활용해 팀의 디자인 작업을 개선하는 도구를 꾸준히 개발했다. - Figma가 Microsoft의 주요 디자인 도구가 된 만큼, 그 위에 자체 업무 도구를 구축하는 것이 자연스러운 선택이었다. ## 접근성을 프로세스에 포함하려는 시도 - Microsoft 디자이너 Tiffany Chen은 Modern Input and Accessibility 팀에서 제품 경험의 포용성을 높이는 업무를 담당했다. - 접근성이 제품 개발 마지막 단계에 덧붙이는 작업으로 취급되는 문제를 지적했다. - 그녀는 디자이너들이 초기 단계부터 접근성을 고려하도록 돕는 플러그인을 개발했다. - 제공된 글은 해당 플러그인의 구체적인 기능 설명이 중간에 끊겨 있어 상세 내용까지는 확인할 수 없다. 조직에 맞는 승인 콘텐츠, 디자인 토큰과 라이브러리, 반복 작업을 플러그인으로 연결하면 디자인 시스템의 실제 활용도를 크게 높일 수 있다. 특히 팀 내 반복 작업을 먼저 찾아 작은 자동화 도구로 해결한 뒤, 효과가 검증된 도구를 조직 전체로 확장하는 접근이 실용적이다.

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

디자인 시스템Figma접근성figma-plugins+2