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를 통해 확장된 기능을 사용할 수 있습니다. - 따라서 현재 기능은 원문에 설명된 초기 버전보다 범위가 넓어졌을 수 있습니다. 실무적으로는 사용량이 낮은 컴포넌트를 무조건 제거하기보다, 삽입 수와 분리율을 함께 분석하는 것이 좋습니다. 또한 라이브러리 마이그레이션 시 팀별 채택률과 구버전 사용량을 지속적으로 추적하면 디자인 시스템 개선과 폐기 계획을 데이터에 근거해 운영할 수 있습니다.

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

Figma디자인 시스템auto-layoutcomponent-libraries+1

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

피그마의 첫 번째 사용자 컨

Figma는 사용자들이 서로 배우고 교류할 수 있는 첫 사용자 컨퍼런스를 2020년 2월 6일 샌프란시스코에서 개최한다고 발표했다. 이 행사는 Figma 커뮤니티의 지식과 경험을 오프라인에서 공유하는 자리로, 짧은 발표·워크숍·라운드테이블 중심으로 구성된다. Figma는 다양한 배경의 참가자와 발표자를 모집하고, 비용 부담을 줄이기 위해 장학금도 제공할 계획이다. ## 커뮤니티를 오프라인으로 확장 - Figma의 사용자는 초기 베타 고객 중심에서 전 세계 수십만 명의 활성 사용자로 성장했다. - 디자인은 계속 변화하기 때문에 디자이너들은 동료에게서 영감, 지식, 실무 아이디어를 얻는다. - Figma는 앞서 제품 안에 디자인 파일을 공유하고 사용자끼리 연결되는 **Figma Community**를 공개했다. - 첫 사용자 컨퍼런스는 이러한 커뮤니티 활동을 오프라인 공간으로 확장하려는 시도다. ## 사용자 중심의 발표 프로그램 - 컨퍼런스 프로그램은 Figma 사용자들의 참여를 중심으로 구성된다. - 주요 형식은 다음과 같다. - 짧은 라이트닝 토크 - 실습 중심 워크숍 - 참가자 간 라운드테이블 - 일부 기조연설 - 발표 시간은 **15분부터 1시간**까지 가능하다. - Figma 활용 사례, 어려운 경험에서 얻은 교훈, 동료와 논의하고 싶은 주제, 협업 활동 등을 제안할 수 있다. - 직접 발표하거나 다른 사람을 발표자로 추천할 수 있으며, 제안 마감은 **2019년 11월 20일 오후 11시 59분(PST)**이었다. ## 다양성과 의미 있는 대화를 위한 참가자 선정 - 행사의 규모를 작게 유지해 참가자 간 깊이 있는 대화가 가능하도록 할 계획이다. - 능력, 나이, 교육 수준, 민족, 성별, 인종, 성적 지향, 사회경제적 배경 등 다양한 특성을 고려한다. - 신청자가 많을 경우 매진을 피하고 다양성을 확보하기 위해 추첨 방식이 사용될 수 있다. - 선정된 참가자는 통보 후 일주일 동안 티켓을 구매할 수 있다. ## 참가비와 장학금 - 컨퍼런스 참가비는 **299달러**다. - 비용 때문에 참여하지 못하는 사람이 없도록 재정 지원이 필요한 참가자를 위한 장학금 프로그램을 운영한다. - 참가 신청 마감 역시 **2019년 11월 20일**로 안내됐다. Figma는 단순히 제품을 소개하는 행사가 아니라, 사용자들이 직접 지식과 경험을 나누며 함께 프로그램을 만들어가는 커뮤니티 행사로 첫 컨퍼런스를 기획했다. 참여를 원한다면 발표 제안이나 참가 신청을 제출하고, 비용 부담이 있다면 장학금 신청을 함께 고려하는 방식이 적절하다.

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

Figmacollaborative-designfigma-pluginsfigma-community+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 키트와 시스템을 배포하고, 개인 디자이너는 작업 과정과 원본 파일을 포트폴리오 및 교육 자료로 활용할 수 있다. 다만 공개 전에는 라이선스 조건과 파일에 포함된 기밀 정보·브랜드 자산을 반드시 확인해야 한다.

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

Figma디자인 시스템real-time-collaborationplugins+2

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

피그마의 멀티플레이어

Figma는 Google Docs처럼 복잡한 OT(Operational Transformation)를 적용하는 대신, 디자인 문서의 구조에 맞춘 단순한 자체 멀티플레이어 시스템을 구축했다. 클라이언트와 서버는 WebSocket으로 변경 사항을 동기화하고, 서버가 문서별 단일 조정자로 동작해 충돌을 관리한다. 이 방식은 실시간 협업뿐 아니라 오프라인 편집과 재접속까지 지원하면서도 Figma의 데이터 모델에 맞는 구현 단순성을 유지했다. ## 웹 기반 협업을 선택한 이유 - 멀티플레이어 기능이 있으면 파일을 내보내거나 복사본을 이메일로 주고받고, 변경 사항을 수동으로 동기화할 필요가 없다. - 링크 하나만으로 여러 사람이 현재 디자인 상태를 확인할 수 있다. - 디자이너뿐 아니라 카피라이터, 개발자 등도 같은 문서에 참여할 수 있다. - 초기에는 실시간 협업이 “디자인을 망치는 기능”으로 여겨졌지만, 웹 생산성 도구에는 자연스러운 기본 기능이 되었다. ## Figma의 클라이언트·서버 구조 - 웹 클라이언트는 WebSocket을 통해 멀티플레이어 서버 클러스터와 통신한다. - 문서마다 별도의 서버 프로세스를 두고, 해당 문서를 편집하는 사용자들이 같은 프로세스에 연결된다. - 문서를 열 때 클라이언트가 먼저 파일 전체를 내려받는다. - 이후 변경 사항은 양방향 WebSocket 연결을 통해 실시간으로 전송된다. - 댓글, 사용자, 팀, 프로젝트 같은 데이터는 멀티플레이어 시스템이 아니라 Postgres와 별도 동기화 시스템으로 관리한다. - 문서 편집과 기타 애플리케이션 데이터는 성능, 오프라인 지원, 보안 요구 사항이 다르기 때문에 구현을 분리했다. ## 오프라인 편집과 재접속 - 사용자는 네트워크가 끊긴 상태에서도 임의의 시간 동안 계속 편집할 수 있다. - 다시 온라인이 되면 클라이언트는 서버에서 최신 문서 사본을 받는다. - 그 위에 오프라인 동안 발생한 로컬 변경을 다시 적용한다. - 이후 새로운 WebSocket 연결을 통해 서버와 변경 사항을 계속 동기화한다. - 연결과 재연결 자체는 단순하게 만들고, 멀티플레이어의 핵심 복잡성은 이미 연결된 문서에 동시에 변경 사항이 들어오는 상황에 집중했다. ## OT와 CRDT 대신 자체 방식을 택한 이유 - OT는 Google Docs 등에서 널리 사용된 표준적인 협업 알고리즘이다. - 여러 사용자의 동시 작업을 변환해 충돌을 해결할 수 있지만, 구현과 검증이 복잡하다. - Figma는 텍스트 편집기와 달리 계층적인 디자인 객체를 편집하므로, 일반적인 OT 모델을 그대로 적용할 필요가 없다고 판단했다. - 스타트업으로서 빠르게 기능을 개발하고 실험하려면 더 단순한 구조가 유리했다. - Figma는 디자인 문서의 데이터 구조와 편집 패턴에 맞춘 전용 동기화 방식을 만들었다. ## 프로토타입을 통한 설계 검증 - 실제 제품 코드에 바로 적용하지 않고, 여러 클라이언트와 서버를 시뮬레이션하는 별도의 웹 기반 실험 환경을 만들었다. - 프로토타입에서는 여러 사용자의 상태와 변경 사항을 시각적으로 확인할 수 있었다. - 오프라인 클라이언트, 느린 네트워크, 제한된 대역폭 등 다양한 상황을 쉽게 재현했다. - 이를 통해 협업 알고리즘과 데이터 구조를 빠르게 비교하고 실험했다. - 설계가 확정된 뒤 프로토타입에서 검증한 아이디어를 기존 코드베이스에 이식했다. ## 서버 중심의 동기화 모델 - 하나의 문서에 연결된 사용자들은 같은 서버 프로세스를 공유한다. - 서버는 문서에 들어오는 변경 사항을 순서대로 처리하고 다른 클라이언트에 전달한다. - 클라이언트는 처음 받은 문서 상태를 기준으로 로컬 변경을 수행하면서 서버의 업데이트를 계속 반영한다. - 서버를 문서의 조정자로 두면 여러 클라이언트가 서로 직접 충돌을 해결할 필요가 줄어든다. - 동시에 발생한 변경의 처리 순서는 서버가 정하며, 모든 클라이언트가 최종적으로 같은 문서 상태에 도달하도록 한다. ## 이 접근법의 핵심 장점 - 범용 협업 알고리즘보다 Figma의 객체 중심 데이터 모델에 맞게 단순하게 구현할 수 있다. - 온라인 편집뿐 아니라 오프라인 작업과 재접속도 지원한다. - 별도 프로토타입으로 다양한 장애 상황을 반복적으로 테스트할 수 있다. - 문서 편집 동기화와 서비스 메타데이터 동기화를 분리해 각각의 요구 사항에 맞게 최적화할 수 있다. 실용적으로는 모든 협업 애플리케이션이 OT나 CRDT를 그대로 도입해야 하는 것은 아니다. 데이터 구조가 명확하고 충돌 패턴이 제한적이라면, 서버 중심의 단순한 프로토콜과 충분한 시뮬레이션 테스트를 결합하는 편이 더 빠르고 유지보수하기 쉬울 수 있다.

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

PostgreSQLreal-time-collaborationRustwebsockets+2

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

Figma 브랜드에 새로운 생

Figma의 브랜드 리프레시는 기존 정체성을 버리는 대신, 회사의 성장에 맞춰 확장하는 작업이었다. 핵심 방법은 여러 팀의 협업과 Figma 자체를 활용한 제작 과정이었으며, 브랜드를 더 유연하고 생동감 있게 만드는 데 초점을 맞췄다. 새로운 시각 언어는 호기심·활력·정직함·대담함이라는 성격을 바탕으로 일관성과 실험성을 함께 추구했다. ## 기존 브랜드 언어의 확장 - Figma는 새로운 브랜드를 처음부터 만들지 않고, 기존 브랜드의 강점과 가치관을 분석해 발전시켰다. - 초기 브랜드 가이드는 회사 규모가 작을 때 만들어졌기 때문에 블로그, 다양한 콘텐츠, 기업 고객 등 성장한 조직의 요구를 충분히 다루지 못했다. - 기존의 색상, 형태, 개념을 유지하면서도 새로운 활용 규칙과 가이드 문서를 추가했다. - 브랜드의 형태와 요소를 더 다양한 상황에 배치하고 활용해, 익숙함은 유지하면서 표현의 범위를 넓혔다. ## 브랜드 성격을 정의하는 네 가지 기준 브랜드를 하나의 인격체처럼 바라보며, 디자인과 커뮤니케이션의 방향을 정할 네 가지 성격을 정립했다. - **호기심 있는(Curious)**: 영리하고 장난기 있으며 상상력이 풍부하다. 당연하지 않은 가능성을 탐구한다. - **생동감 있는(Vibrant)**: 역동적이고 자신감 있으며 특정 주제에 깊이 몰입한다. - **정직한(Honest)**: 포용적이고 공감 능력이 있으며 approachable하다. 모든 것을 안다고 가장하지 않고 함께 해결한다. - **대담한(Bold)**: 강력하고 예상 밖이며 비순응적이다. 관습보다 자신에게 맞는 방식을 선택한다. - 이 기준은 소비자 대상 콘텐츠부터 엔터프라이즈 커뮤니케이션까지 폭넓게 적용될 수 있도록 설계됐다. ## 협업을 표현하는 도형과 일러스트 - 도형은 단순한 장식이 아니라 서로 대화하고 협력하거나 충돌하는 사람처럼 설정됐다. - 도형의 위치와 조합에 따라 조화로운 구성을 만들 수 있으며, 모든 도형이 서로 잘 어울리는 것은 아니라는 점도 반영했다. - 상황에 따라 일러스트의 추상화 수준을 조절했다. - 학습이나 명확한 안내가 필요한 장면에서는 단순하고 직관적인 일러스트를 사용한다. - 보다 개념적인 콘텐츠에서는 여러 도형을 조합해 풍부한 의미를 만든다. - 복잡한 결과물도 기본 도형에서 출발한다는 점을 보여 주며 디자인 과정을 쉽게 이해하도록 했다. - 완성되고 완벽한 결과만 보여 주는 대신, 최소 한 요소가 편집되거나 조작되는 상태를 표현했다. - 이러한 미완성의 모습은 디자인이 실제로는 messy하고 계속 변화하는 과정임을 강조하며, 사람들이 자신의 제작 과정을 공유하도록 장려한다. ## 개성이 드러나는 서체 선택 - 새로운 브랜드 서체로 Dinamo의 **Whyte**를 선택했다. - Whyte에는 일반 버전과 **inktrap** 버전이 있으며, Figma는 후자의 독특한 형태에 주목했다. - 잉크트랩은 금속 활판 인쇄에서 잉크가 번지는 것을 제어하기 위해 글자에 만든 홈에서 유래했다. - 작은 크기에서는 잘 보이지 않지만 확대하면 글자 모서리의 홈이 드러나며, 서체 자체에 일러스트적인 개성을 더한다. - 이 서체는 평범하고 절제된 인상과 비정형적이고 실험적인 인상을 동시에 전달해, Figma가 추구한 유연한 브랜드 성격과 맞았다. ## Figma로 Figma를 재설계하다 - 브랜드 리프레시 작업 전체를 Photoshop이나 Illustrator가 아닌 Figma에서 진행했다. - 기존 도구에 익숙했던 디자이너들은 Figma의 제약과 기능에 맞춰 새로운 제작 방식을 찾아야 했다. - 이 과정에서 도구의 특성이 새로운 아이디어를 발전시키는 계기가 됐다. - 여러 팀이 함께 작업하고 의견을 주고받는 협업 방식 자체가 브랜드 리프레시의 핵심 주제와 연결됐다. - 결과적으로 브랜드를 설명하는 시각 언어뿐 아니라, 브랜드를 만드는 과정도 Figma의 협업 철학을 보여 주게 됐다. 브랜드를 새로 만들 때는 기존 자산을 무조건 폐기하기보다, 핵심 정체성을 먼저 찾아 성장한 조직에 맞게 확장하는 접근이 효과적이다. 또한 성격을 구체적인 언어로 정의하고, 시각 요소와 제작 과정 모두에 그 기준을 적용하면 일관되면서도 유연한 브랜드를 만들 수 있다.

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

Figmacollaborationtypographyillustration+3

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

Figma로 하는 고객

고객 여정 지도는 고객이 특정 과정을 거치며 경험하는 단계와 감정, 고충을 시각적으로 보여 주어 팀의 공통 이해를 돕는 도구다. 글은 Figma를 활용하면 여정 지도 제작부터 인터뷰 기록, 협업, 버전 관리, 고객 피드백 수집까지 하나의 공간에서 수행할 수 있다고 설명한다. 다만 프로세스가 비선형적이거나 분기·의존성이 많다면 고객 여정 지도보다 사용자 흐름도가 더 적합할 수 있다. ## 고객 여정 지도가 필요한 이유 - 자동차 구매, 웹사이트 상품 구매, 의료 서비스 이용처럼 고객이 여러 단계를 거치는 과정을 시각적으로 표현한다. - 각 단계에서 고객이 무엇을 하고, 어떤 감정을 느끼며, 어떤 불편이나 고충을 겪는지 함께 기록할 수 있다. - 서로 다른 관점을 가진 팀원도 동일한 지도를 보며 조사 결과를 빠르게 이해할 수 있다. - 고객 경험을 개선할 수 있는 문제 지점과 기회를 공동으로 발견하는 데 유용하다. - 프로세스가 단순하고 순차적일 때 특히 효과적이다. - 반대로 분기나 의존성이 많은 비선형 프로세스에는 전통적인 2차원 사용자 흐름도가 더 적합하다. ## 여정 지도 컴포넌트 라이브러리 구축 - 팀 전용 컴포넌트와 스타일 라이브러리를 만들면 지도마다 일관된 시각 언어를 유지할 수 있다. - 반복적으로 사용하는 단계, 감정 표현, 아이콘, 라벨 등을 재사용해 새 지도를 빠르게 제작할 수 있다. - 디자인 변경이 필요할 때 개별 요소를 수정하는 대신 컴포넌트를 업데이트하면 전체 지도에 일괄 반영할 수 있다. - Figma의 샘플 파일이나 고객 여정 지도 템플릿을 출발점으로 활용할 수 있다. ## Tidy Up으로 단계 정리 - Figma의 **Tidy Up** 기능을 사용하면 여정 단계 사이의 간격을 쉽게 조정할 수 있다. - 중간에 새로운 단계를 삽입하거나 기존 단계를 재배치할 때 전체 레이아웃을 크게 다시 작업하지 않아도 된다. - 단계가 많아질수록 수동 정렬에 드는 시간을 줄이고 구조적인 배치를 유지할 수 있다. ## 실시간 협업과 인터뷰 기록 - 여러 디자이너가 동시에 같은 여정 지도를 편집할 수 있다. - 인터뷰 노트를 Figma에 직접 기록하면 조사 자료와 디자인 결과물이 여러 도구로 분산되지 않는다. - 리서치 담당자와 디자이너가 동일한 파일에서 내용을 확인하고 즉시 보완할 수 있다. - 인터뷰 정보와 지도 요소가 한곳에 모이므로 조사 결과를 시각적 산출물에 연결하기 쉽다. ## 버전 기록으로 변화 추적 - 고객 리뷰 전에 Figma 버전 기록에 수동으로 타임스탬프를 남겨 특정 시점의 결과물을 보존한다. - 프로젝트가 진행되며 고객에 대한 이해가 어떻게 바뀌었는지 이전 버전과 비교할 수 있다. - 클라이언트에게 여정 지도가 조사 결과에 따라 어떻게 발전했는지 보여 주는 자료로도 활용할 수 있다. ## 댓글을 활용한 지속적인 피드백 - 완성본이 아닌 초기 여정 지도를 실제 고객에게 공유해 조사 결과가 고객 경험과 일치하는지 검증한다. - 고객이 빠진 단계나 새롭게 탐색해야 할 경험을 댓글로 지적할 수 있다. - 댓글을 특정 지도 요소에 직접 배치하면 나중에 어느 단계에 대한 의견인지 명확하게 확인할 수 있다. - 비동기 검토에서는 고객이 파일에 댓글을 남기고, 팀이 댓글 스레드에서 추가 질문을 할 수 있다. - 회의나 화상 통화 중에는 디자이너가 참석자들의 의견을 해당 위치에 바로 기록할 수 있다. - 필요하면 파일을 복제해 고객, 클라이언트 등 피드백 출처별로 분리한다. - 새 검토자가 이전 댓글에 영향을 받지 않도록 하여 편향되지 않은 의견을 얻을 수 있다. - 고객과 클라이언트의 피드백을 비교해 두 집단의 인식 차이도 파악할 수 있다. ## 실용적인 적용 방향 Figma로 고객 여정 지도를 만들 때는 먼저 재사용 가능한 컴포넌트와 스타일을 정하고, 인터뷰 노트와 지도를 같은 파일에서 관리하는 것이 좋다. 이후 버전을 저장하며 고객과 클라이언트에게 단계별 댓글 피드백을 받아 지도를 반복 개선하면, 단순한 시각 자료를 넘어 지속적으로 검증되는 리서치 문서로 활용할 수 있다.

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

Figma프로토타이핑real-time-collaborationcomponent-library+2

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

스마트 애니메이트와 같은 주요

Figma는 사용자 요청이 많았던 고급 프로토타이핑 기능으로 **Smart Animate**와 **Drag**를 출시했다. Smart Animate는 유사한 객체를 자동으로 애니메이션화하고, Drag는 사용자의 손가락 드래그에 따라 전환을 제어한다. 기능 설계 과정에서는 사용자 피드백을 수집하고 다양한 사례에서 공통 패턴을 도출한 뒤, 기존 Figma 기능과 자연스럽게 통합하는 데 초점을 맞췄다. ## 사용자 불편에서 출발한 기능 설계 - Figma는 인앱 NPS 설문과 고객 지원 피드백을 통해 프로토타이핑 관련 요구를 지속적으로 수집했다. - 사용자들이 원한 것은 복잡한 애니메이션보다는 다음과 같은 일상적인 인터랙션이었다. - 드롭다운 메뉴 - 버튼 호버 효과 - 팝업의 부드러운 등장과 전환 - 탭 전환 - 화면 간 자동 애니메이션 - 드래그·슬라이드 기반 전환 - NPS 점수 자체보다, 사용자가 실제로 겪는 불편과 원하는 작업 방식을 파악할 수 있는 개방형 피드백 채널이라는 점에 의미를 뒀다. - 초기 피드백을 제공한 사용자 중 일부는 Smart Animate의 첫 베타 사용자로 참여했다. ## 다양한 사례에서 공통 패턴 도출 - 특정 사례 하나만 기준으로 기능을 설계하면 활용 범위가 제한될 수 있으므로, 고객 사례와 일상적인 인터랙티브 인터페이스를 폭넓게 조사했다. - 그 결과 첫 출시에서 지원할 핵심 패턴을 두 가지로 정리했다. ### 화면은 유지되고 객체만 변하는 경우 - 사용자는 같은 화면에 머물지만 특정 객체가 나타나거나 사라지거나 형태를 바꾼다. - 예시는 다음과 같다. - 동영상에 마우스를 올렸을 때 재생 바가 나타나는 경우 - 내비게이션 항목에 마우스를 올렸을 때 드롭다운이 펼쳐지는 경우 - 객체를 스와이프해 제거하면 뒤의 콘텐츠가 나타나는 경우 ### 일부 UI는 고정되고 주요 콘텐츠가 바뀌는 경우 - 탭 내비게이션처럼 일부 요소는 고정된 채 화면 대부분의 콘텐츠가 전환된다. - 콘텐츠를 좌우로 드래그하면 콘텐츠가 이동하고, 탭 표시기는 반대 방향으로 움직이는 등 더 복잡한 애니메이션을 구현할 수 있다. ## Figma에 맞는 방식으로 통합 - Figma는 유사한 문제를 해결한 다른 도구들을 참고하되, 새로운 기능이 기존 프로토타이핑 기능과 자연스럽게 연결되어 “Figma답게” 느껴지도록 설계했다. - 이를 위해 기존 기능도 다시 검토했다. 특히 객체와 레이어를 자동으로 연결해 애니메이션하는 기본 동작을 개선했다. - Smart Animate는 별도의 복잡한 설정 없이도 가능한 한 자동으로 작동하도록 설계됐다. - 레이어의 자동 이름 지정 및 변경 방식을 수정해, 다음 조건이 맞는 객체들이 서로 대응되도록 했다. - 레이어 계층 구조 - 레이어 이름 - 객체의 순서 - 이러한 기준으로 대응되는 레이어는 화면 전환 시 자동으로 애니메이션된다. - 겉보기에는 단순한 레이어 이름 개선처럼 보이지만, 기존 동작과 새 기능을 안정적으로 연결하기 위해 많은 설계와 구현 작업이 필요했다. ## Smart Animate와 Drag의 역할 - **Smart Animate** - 서로 대응되는 유사 객체를 자동으로 찾아 전환 애니메이션을 적용한다. - 기존 전환 기능을 개선하고, 드롭다운·탭·호버·화면 전환 등 다양한 인터랙션을 표현할 수 있게 한다. - **Drag** - 사용자의 손가락이나 포인터 드래그를 전환의 입력으로 사용한다. - 단순히 클릭하면 전환되는 프로토타입보다 실제 앱의 제스처에 가까운 상호작용을 구현할 수 있다. Figma의 접근 방식은 기능을 많이 추가하는 데 그치지 않고, 실제 사용자 불편을 수집한 뒤 공통 패턴으로 추상화하고 기존 작업 흐름에 자연스럽게 녹여내는 것이었다. 유사한 전환을 만들 때는 레이어의 이름·계층·순서를 일관되게 관리하고, Smart Animate와 Drag를 활용하면 별도 도구 없이도 개발자에게 전달할 수 있는 인터랙션 프로토타입을 만들 수 있다.

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

Figma프로토타이핑interaction-designsmart-animate+2

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

플러그인 보안 업데이트

Figma는 플러그인 보안을 위해 사용하던 Realms shim에서 샌드박스 탈출 취약점이 발견되자 즉시 플러그인 게시와 업데이트를 중단하고 패치를 적용했다. 공개된 플러그인들을 감사한 결과 실제 악용 흔적은 발견되지 않았으며, 재발 방지를 위해 JavaScript 실행 환경을 Realms shim에서 WebAssembly로 컴파일한 QuickJS VM으로 교체했다. ## 플러그인 보안의 기본 원칙 Figma는 플러그인이 다음 작업을 수행할 수 있도록 설계했다. - 사용자가 명시적으로 실행한 경우에만 동작 - 플러그인 전용 대화상자 안에서 UI 표시 - 현재 열어 실행한 Figma 문서의 데이터 읽기 - 해당 문서의 데이터 수정 - 인터넷상의 서버와 통신 반대로 플러그인은 다음 작업을 할 수 없어야 한다. - 사용자 동의 없이 스스로 실행 - 파일을 소유한 프로젝트나 팀 정보 접근 - 실행 중이 아닐 때 데이터 접근 - 실행된 파일 이외의 다른 파일 데이터 접근 - 플러그인 UI 대화상자 외부의 Figma UI 변경 또한 Organization 요금제에서는 관리자가 허용된 플러그인 목록을 지정해 조직 내에서 신뢰할 수 없는 플러그인의 실행을 차단할 수 있다. ## Realms shim 취약점 발견 - Figma는 웹에서 서드파티 JavaScript를 안전하게 실행하기 위해 Realms shim을 사용했다. - 2019년 9월경 Realms shim에서 여러 독립적인 취약점이 발견됐다. - 취약점이 악용되면 샌드박스 내부 코드가 외부로 탈출해 Figma가 설정한 플러그인 보안 제한을 우회할 수 있었다. - 첫 번째 취약점은 공개 GitHub 이슈로 보고됐고, 나머지는 제한된 보안 권고를 통해 비공개로 공유됐다. - Figma는 공개 플러그인을 감사했지만 실제 플러그인이 취약점을 악용한 증거는 찾지 못했다. ## 취약점에 대한 대응 Figma는 위험 확산을 막기 위해 플러그인 배포 체계를 일시적으로 제한했다. - 신규 플러그인의 커뮤니티 허브 게시 중단 - 기존 플러그인의 업데이트 게시도 완전히 중단 - 공개 취약점에 대해서는 Realms shim 패치를 당일 적용 - 비공개 취약점은 관련 업체들과 공개 일정을 조율한 뒤 다음 주에 해결 - 모든 수정 사항이 배포된 후 취약점 세부 내용을 공개 - 게시된 플러그인 코드를 감사해 실제 공격 여부 확인 Figma의 수동 리뷰는 주로 사용자 경험과 품질을 검토하는 절차이며, 보안 경계를 사람이 직접 검증하는 방식은 아니다. 보안은 샌드박스가 강제하도록 설계했기 때문에, 리뷰만으로 악성 코드나 취약점을 완전히 차단할 수 있다고 보지 않았다. ## 실시간 업데이트가 만드는 위험 - Figma 플러그인 코드는 라이브 방식으로 배포된다. - 개발자가 기존 플러그인을 업데이트하면 변경 사항이 열려 있는 클라이언트에도 즉시 전파된다. - 따라서 취약점을 알고 있는 플러그인 개발자가 업데이트를 통해 악성 코드를 배포할 가능성을 차단하기 위해 기존 플러그인 업데이트까지 중단했다. - 이는 플러그인 생태계의 신속한 배포 기능이 보안 사고 시 위험 요소가 될 수 있음을 보여준다. ## QuickJS 기반 실행 환경으로 전환 Figma는 사고 대응 과정에서 Realms shim을 완전히 제거하고 QuickJS를 도입했다. - QuickJS는 C로 작성된 JavaScript 가상 머신이다. - Figma는 이를 WebAssembly로 크로스 컴파일해 플러그인 실행에 사용했다. - Realms shim의 객체 경계 혼동에서 비롯된 이번 취약점 유형은 새 구현에서는 발생하지 않는다. - 기존 구조가 교체 가능한 아키텍처로 설계되어 있었기 때문에 백업 계획이었던 QuickJS로 빠르게 전환할 수 있었다. ## 실용적인 결론 서드파티 코드를 실행할 때는 사람의 코드 리뷰보다 강제 가능한 샌드박스 경계가 핵심이다. 또한 배포 중단, 신속한 패치, 비공개 정보 공개 일정 조율, 실행 환경 교체 계획을 사전에 마련해 두면 취약점 발견 시 피해 확산을 효과적으로 줄일 수 있다.

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

JavaScriptwebassemblysandboxingplugin-security+2

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

다음 디자인 프로젝트를 위한

매일 새로운 패턴을 만드는 도전은 창의력을 훈련하고, 클라이언트나 브랜드 제약에서 벗어나 새로운 시각적 가능성을 탐색하게 한다. Namika Hamasaki는 일상에서 영감을 수집한 뒤 색상 팔레트와 그리드를 설정하고, 기본 도형을 조합·변형해 패턴을 만든다. 완성한 패턴은 Figma 컴포넌트로 변환하고 클립 콘텐츠를 끈 상태에서 반복 배치해 매끄러운 패턴으로 완성한다. ## 일상에서 영감 찾기 - 영감은 음식, 건축물, 가구, 자연, 출퇴근길 등 주변 어디에서나 얻을 수 있다. - 눈에 띄는 형태, 색상, 구도 같은 세부 요소를 관찰하고 이를 디자인 요소로 번역한다. - 마음에 드는 장면이나 사물을 사진으로 기록해 나중에 참고한다. - 사진을 모아두면 빈 화면 앞에서 시작해야 하는 부담을 줄이고, 디자인의 출발점으로 활용할 수 있다. - 매일 하나씩 패턴을 만드는 습관은 반복적인 연습이면서도 매번 다른 결과를 실험하는 창작 활동이 된다. ## 색상 팔레트 만들기 - 업무에서는 브랜드 색상에 맞춰야 하는 경우가 많지만, 개인적인 패턴 작업에서는 평소 사용하지 않던 색 조합을 자유롭게 시도한다. - 영감을 준 사진에서 색상을 추출해 팔레트의 출발점으로 삼는다. - Figma의 **Image Palette 플러그인**을 사용하면 이미지에서 색상을 자동으로 추출하고 팔레트를 생성할 수 있다. - 제한된 브랜드 팔레트에서 벗어나는 과정이 새로운 분위기와 시각적 결과를 발견하는 데 도움이 된다. ## 그리드 설정하기 - 색상 팔레트를 정한 뒤 패턴을 배치할 그리드를 만든다. - 반복되는 패턴은 요소의 위치와 간격이 중요하므로 그리드가 구조를 잡아주는 역할을 한다. - Figma의 **Layout grid**를 활용하면 원하는 기준선을 빠르게 설정할 수 있다. - 그리드는 패턴 요소를 정렬하고 반복 단위를 일관되게 유지하는 데 유용하다. ## 기본 도형으로 형태 실험하기 - 복잡해 보이는 패턴도 처음에는 원, 사각형, 삼각형 같은 단순한 도형에서 시작한다. - 도형을 그리드 위에 배치한 뒤 회전, 이동, 조합을 반복하며 다양한 결과를 탐색한다. - 예를 들어 원을 45도 회전하거나, 반원을 각각 다른 각도로 회전해 시각적 변화를 확인한다. - 같은 도형이라도 위치와 회전 각도에 따라 전혀 다른 인상을 만들 수 있다. - 도형의 구조뿐 아니라 색상 조합도 계속 바꿔보며 예상하지 못한 결과를 발견한다. - 손으로 그리던 방식에서 기본 기하 도형을 활용한 디지털 작업으로 전환하면서 구성과 반복을 더욱 쉽게 실험할 수 있었다. ## 패턴을 매끄럽게 반복하기 - 만족스러운 패턴을 찾으면 이를 Figma 컴포넌트로 변환한다. - 이때 **Clip content 옵션을 꺼야** 컴포넌트 경계를 넘어 패턴 요소를 확인하고 반복 배치하기 쉽다. - 컴포넌트를 복제한 뒤 프레임 전체를 채우도록 배열한다. - 마스터 컴포넌트 내부의 요소를 이동하면 여러 반복 구조와 레이아웃을 빠르게 비교할 수 있다. - 하나의 패턴 단위를 반복 배치하면서 가장 자연스럽고 끊김 없는 연결 방식을 찾는다. ## 실용적인 적용 방법 - 매일 짧은 시간이라도 하나의 패턴을 만들어 창작 루틴을 구축한다. - 주변에서 발견한 형태와 색상을 사진으로 모아 개인적인 영감 라이브러리를 만든다. - 사진에서 색상을 추출하고, 그리드와 기본 도형을 사용해 부담 없이 실험을 시작한다. - 완성도보다 다양한 회전·이동·색상 조합을 시도하는 과정에 집중하면 창의적인 결과를 얻기 쉽다.

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

Figmagraphic-designdesign-componentscolor-palette+2

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

5명의 플러그인 개발자가

Figma의 첫 Plugin Show & Tell은 커뮤니티 개발자들이 제작 중인 플러그인을 직접 시연하고, 새로운 기능과 개발 방향을 공유하는 라이브 행사였다. 디자인 시스템 검사, 맞춤법 검사, 아이콘 관리, 문서 연결, 음성 제어 등 플러그인이 Figma의 작업 자동화와 확장성을 크게 넓힐 수 있음을 보여준다. 글은 행사를 소개하는 데 그치지 않고, 더 많은 개발자가 Figma Plugin API에 참여하도록 관련 자료와 커뮤니티를 안내한다. ## Plugin Show & Tell의 목적 - Figma 플러그인 커뮤니티의 창의적인 작업을 소개하기 위해 처음 개최된 라이브 스트리밍 행사다. - 개발자들이 플러그인을 홍보하고, 사용자가 새로운 API와 활용 방법을 탐색하도록 돕는 것이 목적이다. - 완성된 플러그인뿐 아니라 개발 중인 기능과 향후 로드맵도 공유했다. - 녹화 영상에서는 5명의 개발자가 디자인 시스템 검사부터 Figma 음성 제어까지 다양한 사례를 시연했다. ## 디자인 시스템과 품질 관리 자동화 - Toybox의 Jono Kolnik은 개발 중인 **Roller**를 소개했다. - Roller는 디자인을 디자인 시스템과 비교해 오류와 불일치를 찾고 수정하도록 돕는다. - 반복적인 수동 검수 대신 플러그인이 디자인 규칙을 검사함으로써 일관성을 유지할 수 있다. - 디자인 시스템이 커질수록 색상, 간격, 컴포넌트 사용 규칙을 자동으로 점검하는 도구의 가치가 커진다. ## 맞춤법 검사와 외부 서비스 연동 - Tekeste Kidanu는 Figma 안에서 사용하는 **Spell Check** 플러그인을 시연했다. - 프로젝트의 텍스트를 검사해 디자인 문서의 오탈자를 줄이는 데 활용할 수 있다. - 자신의 서비스인 **Cleanmock**을 Figma 내부에서 사용할 수 있도록 연동한 사례도 소개했다. - 플러그인은 Figma 캔버스뿐 아니라 브라우저 API와 외부 서비스까지 연결하는 확장 지점이 될 수 있다. ## 대규모 아이콘 세트 관리 - Vjacheslav Trushkin은 **Iconify** 플러그인과 향후 계획을 공유했다. - Iconify를 사용하면 수백 개의 아이콘 세트를 Figma와 실제 제품 개발 과정에서 함께 활용할 수 있다. - 디자인 단계에서 선택한 아이콘을 production 환경까지 일관되게 연결하는 워크플로를 지향한다. - 방대한 아이콘 라이브러리를 검색하고 관리하는 문제를 플러그인으로 단순화한다. ## 검색·문서화·레이아웃 작업 개선 - Jackie Chui는 여러 생산성 플러그인의 개선 사항을 소개했다. - **Find & Replace**는 Figma 문서 안의 내용을 빠르게 검색하고 바꾸는 기능을 제공한다. - **Link to Documentation**은 컴포넌트에 관련 문서 링크를 추가해 디자인과 가이드 문서를 연결한다. - **Paste to Fill**은 붙여넣은 이미지를 이미지 채우기로 적용한다. - 프레임 안 오브젝트의 여백과 크기를 관리하는 플러그인은 사용자 지정 프리셋을 지원할 예정이었다. - 이러한 도구들은 반복적인 레이아웃 조정과 문서 탐색 작업을 줄이는 데 초점을 둔다. ## 타이포그래피 규칙과 음성 인터페이스 - Andrew Goodwin은 타이포그래피 규칙을 선택하고 적용하는 플러그인을 선보였다. - 사용자가 정해진 글꼴, 크기, 행간 등의 규칙을 적용해 텍스트 스타일을 일관되게 관리할 수 있다. - Figma를 음성 명령으로 조작하는 음성 UI도 시연했다. - Figma Plugin API의 기능 대부분을 음성 명령으로 매핑하는 작업이 거의 완료 단계라고 설명했다. - 이는 플러그인이 시각적 UI를 넘어 새로운 입력 방식과 접근성 기능까지 제공할 수 있음을 보여준다. ## 플러그인 개발을 위한 생태계 - Figma는 플러그인 개발을 시작할 수 있도록 다음 자료를 제공했다. - 플러그인의 기본 구조와 개발 환경 설정을 설명하는 Getting Started 문서 - 캔버스와 상호작용하는 공식 Plugin API 문서 - Figma UI와 유사한 HTML·JavaScript·CSS 기반의 Figma Plugin DS - 오픈소스 플러그인 코드 목록 - TypeScript, React/JSX, 번들링, 매니페스트 생성을 지원하는 FigPlug - 개발자들이 질문과 작업물을 공유하는 Figma Plugins Slack 커뮤니티 - 조직 내부에서만 사용하는 비공개 플러그인도 팀별 워크플로 자동화에 활용할 수 있다고 안내한다. ## 실용적인 결론 Figma 플러그인은 단순한 편의 기능을 넘어 디자인 시스템 검증, 콘텐츠 품질 관리, 외부 데이터 연동, 접근성 개선, 개발 프로세스 연결까지 확장할 수 있다. 반복 작업이나 팀 고유의 규칙이 있다면 Plugin API와 오픈소스 사례를 참고해 사내 전용 플러그인부터 작게 만들어보는 것이 현실적인 접근이다.

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

ReactTypeScriptJavaScriptCSS+4

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

OpenType을 향한

Figma는 로컬 폰트, Google Fonts, 조직 내 공유 폰트에 포함된 OpenType 기능을 지원하기 시작했다. 이를 통해 단순한 굵기·기울기 조절을 넘어 합자, 숫자 스타일, 대체 글리프, 장식 문자 등을 활용해 글자의 인상과 가독성을 세밀하게 조정할 수 있다. 글쓴이는 OpenType이 폰트마다 숨겨진 가능성을 제공하며, 기능을 무작정 적용하기보다 용도와 맥락에 맞게 사용해야 한다고 설명한다. ## 폰트에 숨겨진 또 다른 세계 - Warnock Pro를 계기로 글쓴이는 하나의 서체가 기본적인 글자 모양 외에도 다양한 변형을 포함한다는 사실을 발견했다. - OpenType 기능으로 다음과 같은 요소를 바꿀 수 있다. - **Old-style figures**: 본문 속 소문자와 어울리도록 높낮이와 형태를 조정한 숫자 - **Tabular figures**: 표나 데이터에서 숫자 폭을 일정하게 맞추는 숫자 - **Small caps**: 소문자와 대문자 사이의 형태로, 도입부나 강조에 사용 - **Swash와 대체 글리프**: 글자 끝의 장식적인 획이나 다른 문자 형태 - **Stylistic alternates**: 특정 글자의 대체 디자인 - **Ornaments**: 장식 기호와 문양 - **Ordinals와 fractions**: 서수와 분수에 적합한 글리프 - **Numero sign**: `№`와 같은 특수 기호 - 이러한 기능은 디자인 도구 안에 존재했지만, 당시에는 복잡한 메뉴와 낯선 기술 용어 뒤에 숨겨져 있어 발견하기 어려웠다. - 글쓴이는 기능의 목적을 완전히 이해하기 전부터 스와시, 장식 문자, 여러 숫자 스타일을 논문에 적용하며 OpenType의 매력에 빠졌다. ## OpenType 기능을 이해해 가는 과정 - 시간이 지나면서 폰트 제작사들은 PDF 설명서 대신 온라인 타입 견본 페이지를 통해 OpenType 기능을 소개하기 시작했다. - 폰트마다 제공하는 기능의 규모는 크게 달랐다. - 한 글자만 바꾸는 단일 기능을 제공하는 폰트 - 문자 전체를 변형해 서체가 전혀 다른 인상을 주는 수십 개의 기능을 제공하는 폰트 - 글쓴이는 점차 기능을 단순히 “켜 보는” 수준에서 벗어나, 각 기능이 어떤 문제를 해결하는지 이해하게 되었다. - 예를 들어 **discretionary ligatures**는 항상 적용하는 합자가 아니라, 필요할 때 선택적으로 사용하는 합자다. - **Tabular numbers**는 표처럼 숫자를 정렬해야 하는 상황에 적합하며, 본문용 숫자와 목적이 다르다. ## 맥락에 따른 숫자와 기호 선택 - Medium에서 글쓴이는 기사 본문과 인용문에 서로 다른 숫자 스타일을 적용하는 방식을 고민했다. - 본문에서는 숫자가 문장 속에 자연스럽게 섞이도록 눈에 띄지 않는 형태를 선택했다. - 반대로 큰 인용문이나 강조 영역에서는 제목처럼 강한 인상을 주는 숫자와 장식적인 앰퍼샌드를 사용했다. - 같은 폰트라도 OpenType 기능을 활용하면 콘텐츠의 역할에 맞춰 차분하거나 화려한 분위기를 만들 수 있다. - 따라서 특정 기능이 “더 좋은” 것이 아니라, 본문·표·제목·인용문 등 사용 위치에 따라 적절한 기능이 달라진다. ## 대문자 전용 조정과 디자인 완성도 - 많은 폰트에는 대문자로만 문장을 쓸 때를 위한 별도의 기호와 문장부호 세트가 포함되어 있다. - 대문자 환경에서는 일반적인 기호의 크기와 정렬이 어색해질 수 있으므로, 이를 보정한 글리프를 사용하면 전체적인 인상이 더 균형 잡힌다. - 이런 세부 조정은 글자 자체보다 기호와 문장부호의 간격, 높이, 정렬을 개선해 대문자 제목이나 포스터의 완성도를 높인다. ## Figma에서의 OpenType 지원 - Figma는 사용자가 사용하는 다양한 폰트의 OpenType 기능을 지원한다. - 로컬 폰트 - Google Fonts - 조직 내에서 공유된 폰트 - 사용자는 Figma의 인터페이스를 통해 다음 기능을 쉽게 탐색하고 적용할 수 있다. - 추가 합자 - 숫자 스타일 변경 - 대체 글자 형태 - 폰트에 포함된 각종 조정 기능 - 기존에는 전문적인 메뉴나 폰트 설명서를 찾아야 했던 기능을 디자인 작업 중에 직접 확인할 수 있게 된 것이 핵심 변화다. ## 실용적인 활용 방향 OpenType 기능은 장식 요소를 많이 넣는 도구라기보다, 글의 목적과 배치에 맞게 타이포그래피를 조정하는 수단이다. 본문에는 가독성이 좋은 숫자와 합자를 사용하고, 표에는 탭 숫자를 적용하며, 제목이나 포스터에는 대체 글리프와 장식 기능을 제한적으로 활용하는 것이 좋다. Figma에서는 폰트별 기능을 직접 비교해 보되, 효과가 눈에 띈다는 이유만으로 무작정 적용하지 않는 것이 중요하다.

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

Figmatypographyopentypefont-features+2

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

Figma에서 디자인 크

디자인 크리틱은 팀의 집단적 역량을 활용해 작업의 품질을 높이고, 디자이너가 문제를 해결하도록 돕는 협업 의식이다. 하지만 운영이 미숙하면 피드백이 피상적이거나 실행 불가능해지고, 참여자는 위축되거나 혼란을 느낄 수 있다. Figma는 크리틱을 “위협적이지 않고 동기를 부여하는 자리”로 만들기 위해 목적을 명확히 하고, 문제에 맞는 다양한 형식과 지속적인 개선 방식을 도입했다. ## 크리틱 자체를 크리틱하기 Figma 팀은 약 1년간 크리틱을 운영한 뒤, 무엇이 잘되고 무엇이 문제인지 팀 전체가 검토했다. - 발견한 주요 문제: - 참석자가 많아 공간이 지나치게 붐빔 - 피드백이 피상적임 - 짧은 시간에 다루기에는 문제가 지나치게 복잡함 - 피드백이 구체적이거나 실행 가능하지 않음 - “동의한다”는 식의 집단사고와 단순한 찬성이 많음 - 솔직한 의견보다 지나치게 조심스러운 의견이 많음 - 디자이너의 문제를 실제로 해결하거나 다음 단계로 나아가게 하지 못함 - 팀은 Figma 파일에 의견을 모으고 주제별로 정리했다. - 문제를 분석하는 회의 자체가 가볍고 생산적이며 창의적으로 진행되었고, Figma는 이 분위기를 실제 크리틱에서도 재현하려 했다. - 한 번의 회의로 모든 문제를 해결하려 하지 않고, Slack의 `#design-crit-crit` 채널에서 운영 방식을 계속 개선했다. - 팀 규모와 업무 유형이 변하면 크리틱 방식도 함께 진화해야 한다고 보았다. ## 크리틱의 목표 정렬 효과적인 크리틱을 만들려면 먼저 회의가 무엇을 달성해야 하는지 합의해야 한다. - **문제 해결과 아이디어 생성** - 혼자 오래 고민해 막힌 디자이너가 팀의 관점을 활용해 앞으로 나아가도록 돕는다. - 초기 단계에서 팀이 이미 갖고 있는 아이디어와 가능성을 폭넓게 수집한다. - **디자인 품질 향상** - 시각 디자인뿐 아니라 인터랙션 세부 사항, 제품의 전반적인 방향까지 검토한다. - **일관성 강화** - 기존 디자인 패턴을 재사용할 수 있는지 확인한다. - 기존 패턴으로 해결되지 않는 경우 새로운 패턴이 필요한지 논의한다. - **맥락 공유** - 디자인팀이 알고 있는 회사와 제품의 상황을 서로 공유해, 개별 작업이 전체 방향과 연결되도록 한다. ## 문제에 맞춰 크리틱 형식을 선택하기 Figma는 모든 작업에 같은 회의 형식을 적용하지 않고, 목적과 상황에 따라 여러 방식을 사용한다. - **표준 크리틱** - 작업을 발표하고 참석자들이 의견을 주고받는 일반적인 형식이다. - 정기적인 검토와 폭넓은 피드백에 적합하다. - **잼과 워크숍** - 특정 문제를 함께 탐색하고 아이디어를 빠르게 생성하는 협업형 방식이다. - 방향이 정해지지 않았거나 여러 대안을 만들어야 할 때 유용하다. - **페어 디자인** - 두 명의 디자이너가 함께 작업하며 즉각적으로 판단과 피드백을 주고받는다. - 짧은 시간 안에 구체적인 문제를 해결하거나 작업을 진전시키는 데 적합하다. - **사일런트 크리틱** - 먼저 말없이 작업을 검토하고 각자 의견을 정리한 뒤 공유한다. - 목소리가 큰 사람의 의견에 쏠리는 현상과 집단사고를 줄이는 데 도움이 된다. - **종이·출력물 크리틱** - 화면 대신 출력물을 실제 공간에 배치해 검토한다. - 작업을 새로운 관점에서 보고, 세부 화면에 매몰되지 않은 피드백을 얻을 수 있다. - **FYI 크리틱** - 즉각적인 논의나 해결책보다 작업의 진행 상황과 맥락을 공유하는 데 초점을 둔다. - 참석자에게 정보를 전달하되, 발표자에게 불필요한 압박을 주지 않는 방식이다. ## 안전하고 생산적인 분위기 만들기 크리틱은 개인을 평가하는 자리가 아니라 작업을 발전시키는 자리여야 한다. - 참여자가 영감을 받고 도전받으며, 다음 행동을 결정할 수 있어야 한다. - 솔직한 피드백이 가능하려면 심리적으로 안전한 환경이 필요하다. - 단순한 “+1”이나 막연한 칭찬보다 문제의 원인과 개선 방향을 구체적으로 말해야 한다. - 피드백은 발표자의 현재 단계와 요청에 맞아야 하며, 짧은 시간에 지나치게 많은 문제를 다루지 않아야 한다. - 크리틱의 품질은 디자인팀 문화와 정체성에 영향을 주며, 인재를 채용하고 유지하는 데에도 중요한 요소다. ## 지속적으로 운영 방식을 개선하기 Figma의 크리틱은 고정된 규칙이 아니라 팀이 함께 발전시키는 프로세스다. - 정기적으로 크리틱의 효과와 문제점을 되돌아본다. - 회의에서 느낀 불편이나 개선 아이디어를 별도 채널에 계속 축적한다. - 팀이 성장하거나 다루는 문제의 유형이 달라지면 참석자 수, 시간, 형식, 피드백 방식도 조정한다. - 좋은 크리틱에서 실제로 나타나는 에너지와 협업 방식을 관찰하고, 이를 의도적으로 재현한다. 실무에서는 먼저 크리틱의 목적을 정한 뒤, 작업 단계와 문제의 성격에 맞는 형식을 선택하는 것이 좋다. 또한 회의가 끝난 뒤 “어떤 피드백이 실제로 작업을 전진시켰는가”를 점검하면, 크리틱을 부담스러운 평가 시간이 아니라 팀의 역량을 높이는 협업 도구로 발전시킬 수 있다.

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

Figma프로덕트 디자인slackcollaboration+1

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

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

Figma 데이터의 안전한 보호 및

Figma는 고객의 디자인 데이터와 지식재산을 보호하기 위해 보안을 제품 개발과 인프라 운영 전반의 핵심 원칙으로 삼고 있다. SOC 2 인증, 유럽 데이터 보호 체계, 플러그인 권한 제한, SAML 기반 SSO 등을 통해 규정 준수와 실제 서비스 보안을 함께 강화했다. 이후 업데이트에서는 SOC 2 Type 2와 SOC 3 보고서까지 취득해 내부 통제가 일정 기간 안정적으로 작동했음을 입증했다. ## SOC 2 인증으로 검증한 보안 통제 - SOC 2는 클라우드에 저장된 고객 데이터를 보호하기 위한 미국 소프트웨어 기업의 대표적인 보안 준수 기준이다. - 인증 과정에서 인프라, 소프트웨어, 인사 절차, 고객 데이터 처리 정책과 통제를 종합적으로 감사한다. - SOC 2 Type 1은 특정 시점에 통제가 마련되어 있는지를 확인하는 일종의 스냅샷이다. - SOC 2 Type 2는 통제가 일정 기간 실제로 작동했는지까지 검증하므로 더 높은 수준의 보증을 제공한다. - Figma는 글 작성 당시 Type 1 인증을 완료하고 Type 2를 추진 중이었으며, 2020년 업데이트에서 SOC 2 Type 2와 SOC 3 보고서 취득을 발표했다. ## 유럽 고객을 위한 데이터 보호와 준수 - 유럽 고객 증가에 맞춰 EU와 국제적인 데이터 보호 및 보안 요구사항을 충족하는 것을 목표로 했다. - EU-US Privacy Shield와 Swiss-US Privacy Shield 프레임워크 인증을 취득했다. - 이를 통해 유럽 및 스위스 고객이 Figma에 디자인 데이터를 저장할 때 필요한 개인정보 보호 체계를 마련했다고 설명한다. ## 기능 개발 단계부터 적용한 보안 원칙 - 보안은 별도의 사후 검토가 아니라 새로운 기능을 설계하고 개발하는 단계부터 고려하는 원칙으로 제시된다. - 특히 Figma Plugins처럼 외부 개발자가 플랫폼을 확장하는 기능은 보안·안정성·성능 사이의 균형이 중요했다. - 플러그인은 한 번에 하나의 디자인 파일에만 접근할 수 있다. - 플러그인이 사용자의 전체 계정이나 다른 플러그인의 데이터에 접근할 수 없도록 격리했다. - 플러그인이 Figma UI를 변경하지 못하게 해 사용자를 속이거나 피싱으로 유도할 가능성을 줄였다. - 일부 기능과 확장성을 제한하더라도 고객 데이터 보호를 우선한 설계 결정이었다. ## SAML SSO를 통한 기업 계정 관리 - 기업 고객을 위해 SAML 기반 싱글 사인온(SSO)을 지원했다. - SSO는 로그인 절차를 단순화하는 동시에 조직 전체에 Figma를 배포하고 사용자 접근 권한을 중앙에서 관리할 수 있게 한다. - 기존 Okta와 Microsoft Azure Active Directory에 더해 OneLogin도 통합 대상으로 추가했다. - 기업은 기존 인증·접근 관리 체계와 Figma를 연결해 퇴사자 계정 차단이나 사용자 권한 관리 등을 일관되게 운영할 수 있다. ## 실용적인 시사점 Figma의 사례는 SaaS 보안에서 인증서 취득만으로 끝나는 것이 아니라, 장기간 작동하는 내부 통제와 기능별 권한 격리, 기업용 접근 관리까지 함께 구축해야 한다는 점을 보여준다. 특히 플러그인이나 확장 기능을 도입할 때는 가능한 기능을 늘리는 것보다 데이터 접근 범위를 최소화하고 사용자 신뢰를 보호하는 설계가 우선되어야 한다.

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

클라우드 보안samlsecurity-compliancesoc-2+2

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

몇 초 만에 디자인에 실제 콘텐츠

실제 콘텐츠를 활용하면 목업이 실제 제품에서 어떻게 보일지 더 정확히 검증하고, 긴 텍스트나 다양한 데이터로 UI를 스트레스 테스트할 수 있다. 글은 Figma에서 이름·주소·이미지·지도 등을 자동으로 채워 주는 플러그인들을 소개하며, 반복적인 수동 입력을 줄이는 방법을 설명한다. 민감한 사내 데이터가 필요하다면 조직 전용 비공개 플러그인을 활용할 수도 있다. ## 실제 데이터로 디자인해야 하는 이유 - Lorem Ipsum 같은 placeholder는 실제 콘텐츠의 길이와 형식을 충분히 반영하지 못한다. - 이름, 전화번호, 주소, 이미지, 지도 등 현실적인 데이터를 넣으면 다음을 검증할 수 있다. - 긴 텍스트가 레이아웃을 깨뜨리는지 - 다양한 데이터 형식이 UI에 적합한지 - 실제 서비스 화면과 목업의 차이가 큰지 - 복잡한 문서의 여러 텍스트 레이어를 수동으로 채우는 작업을 자동화할 수 있다. ## Google Sheets Sync - Google Sheets의 데이터를 Figma 레이어와 연결해 일괄 입력한다. - 사용 방법: - 공유 가능한 Google Sheets를 만든다. - 데이터 종류별로 열을 만들고, 각 열에 고유한 헤더를 지정한다. - Figma 레이어 이름을 `#Name`, `#Address`처럼 `#`과 열 헤더 조합으로 지정한다. - 플러그인에 시트 URL을 입력하고 **Fetch & sync**를 실행한다. - 스프레드시트의 수식과 편집 기능을 그대로 활용할 수 있어 데이터 수정과 재동기화가 편리하다. - 이미지 URL이 들어 있는 열도 지원하며, 해당 레이어에 이미지 채우기로 적용할 수 있다. ## Unsplash - Unsplash의 고해상도 사진을 Figma 캔버스에 삽입한다. - 카테고리 선택, 무작위 이미지 선택, 직접 검색을 지원한다. - 이미지를 새 요소로 삽입하거나, 미리 선택한 요소에 이미지 채우기로 적용할 수 있다. - 개인 및 상업적 용도로 사용할 수 있는 대규모 무료 사진 라이브러리를 활용할 수 있다. ## Data Lab - 변수 조합 방식으로 텍스트 콘텐츠를 생성한다. - 이름, 숫자, 날짜, 전화번호, 이메일, 목록 등의 데이터 형식을 제공한다. - 예를 들어 `{NAME} · {EMAIL}`처럼 변수를 조합해 이름과 이메일을 한 문자열로 만들 수 있다. - 단순한 형식으로 다양한 텍스트 샘플을 빠르게 생성할 수 있다. ## Content Reel - 이름, 전화번호, 미국 주소, 숫자, 이메일, URL, 회사명, 사용자명, 국가 등의 텍스트 데이터를 제공한다. - 주소 같은 데이터 형식은 드래그 앤 드롭으로 구성 요소와 순서를 바꿀 수 있다. - 쉼표 배치까지 조정할 수 있어 원하는 데이터 포맷을 만들기 쉽다. - Segoe MDL2 아이콘 라이브러리도 제공하지만, 사용하려면 Segoe 아이콘 폰트를 설치해야 한다. - 작업 중 패널을 작게 접어 둘 수 있는 compact mode를 지원한다. - 당시에는 사용자 프로필 이미지 같은 이미지 기반 콘텐츠 지원도 예정되어 있었다. ## Mapsicle - Mapbox 지도를 Figma 요소의 이미지 채우기로 삽입한다. - 지도 스타일, 확대 수준, 카메라 기울기와 회전을 설정할 수 있다. - 기본적으로 Light, Dark, Satellite, Streets 등의 테마를 제공한다. - Mapbox 액세스 토큰을 사용하면 직접 만든 사용자 정의 지도 테마도 적용할 수 있다. - 기존 지도의 크기를 바꿀 때 **Refresh selected map**을 사용하면 기존 확대 수준을 유지하면서 새 크기에 맞게 갱신할 수 있다. - 지도를 작은 프레임 안에 넣고 프로토타입의 오버플로를 가로·세로 스크롤로 설정하면 양방향 지도 탐색을 구현할 수 있다. ## 사내 데이터와 비공개 플러그인 - 실제 서비스의 민감한 데이터나 내부 API를 활용해야 하는 경우 공개 플러그인보다 자체 플러그인이 적합하다. - Figma Organization 요금제 사용자는 회사 전용 비공개 플러그인을 만들고 배포할 수 있다. - 이를 통해 외부에 데이터를 노출하지 않고 실제 애플리케이션 데이터를 디자인 검증에 활용할 수 있다. 실무에서는 Google Sheets Sync로 구조화된 데이터를 반복 주입하고, Unsplash·Mapsicle로 이미지와 지도를 보완하면 빠르게 현실적인 목업을 만들 수 있다. 데이터가 민감하거나 서비스 API와 직접 연동해야 한다면 조직 전용 비공개 플러그인을 고려하는 것이 좋다.

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

프로토타이핑figma-pluginsgoogle-sheetsunsplash+2