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

핀터레스트 디자인

Pinterest의 Gestalt 디자인 시스템은 코드 사용량만으로는 전체 채택 현황을 파악하기 어렵다고 보고, Figma 안에서 디자이너들이 컴포넌트를 얼마나 사용하는지 측정하는 ‘디자인 채택률’을 도입했다. 코드 지표는 웹 플랫폼에 한정되고 실제 디자인 단계보다 늦게 나타나는 반면, Figma 지표는 웹·iOS·Android를 아우르며 초기 사용 신호를 제공한다. 이를 위해 Figma REST API 기반의 대시보드 FigStats를 만들어 컴포넌트 사용량을 전체 디자인 요소 대비 상대적으로 분석했다. ## 코드 채택률만으로는 부족한 이유 - Gestalt은 웹뿐 아니라 iOS와 Android용 디자인 컴포넌트도 제공하지만, 기존 코드 채택률은 웹 컴포넌트만 측정했다. - 새 컴포넌트가 실제 제품 코드에 도입되기까지 시간이 걸리므로, 코드 지표에는 채택 지연이 발생한다. - 디자이너가 컴포넌트를 사용하지 않으면 개발자도 해당 컴포넌트의 존재나 필요성을 알기 어렵다. - 따라서 디자인 시스템 채택은 제품 코드 단계가 아니라 디자인 단계부터 시작된다는 관점이 필요하다. ## Figma에서 디자인 채택을 측정하는 이유 - Pinterest 디자이너들의 작업은 Figma에서 이루어지므로, 디자인 시스템 사용 현황을 가장 이른 단계에서 확인할 수 있다. - Figma에서 Gestalt 컴포넌트가 사용되면 웹·iOS·Android 전반에서 향후 코드 컴포넌트를 구축할 근거로 활용할 수 있다. - 디자이너가 실제로 컴포넌트를 사용하는지 확인하면 디자인 시스템 투자 효과와 플랫폼별 개발 우선순위를 설명하기 쉬워진다. ## 단순한 인스턴스·삽입 횟수의 한계 - Figma 기본 라이브러리 분석은 팀별 컴포넌트 인스턴스 수와 삽입 횟수를 제공한다. - 예를 들어 버튼이 수십만 번 사용됐다는 사실은 알 수 있지만, 그 수치가 건강한 채택 수준인지는 판단하기 어렵다. - 대형 파일에 노드가 1,000개 있고 Gestalt 컴포넌트가 10개뿐이라면, 사용량은 존재하지만 전체 디자인의 1%에 불과하다. - 따라서 절대적인 사용 횟수보다 전체 디자인 요소 중 디자인 시스템 컴포넌트가 차지하는 비율이 더 유용한 지표가 된다. ## FigStats와 상대적 채택률 - Gestalt 팀은 Figma REST API를 사용해 FigStats라는 내부 대시보드를 구축했다. - 대시보드는 Figma 파일을 분석해 어떤 Gestalt 컴포넌트가 어느 팀과 파일에서 사용되는지 시각화한다. - 핵심은 컴포넌트 인스턴스 수 자체가 아니라, 전체 노드 또는 디자인 요소 중 Gestalt 컴포넌트가 차지하는 비중을 계산하는 것이다. - 이를 통해 파일 규모가 서로 달라도 디자인 시스템이 실제 작업에 얼마나 깊이 적용됐는지 비교할 수 있다. - 컴포넌트별 사용 현황을 보면 널리 사용되는 컴포넌트와 거의 사용되지 않는 컴포넌트를 구분할 수 있으며, 개선이나 교육이 필요한 영역도 찾을 수 있다. ## 채택 데이터의 활용 - 채택률은 디자인 시스템 팀이 제공하는 가치와 투자 대비 효과를 리더십에 설명하는 공통 언어가 된다. - 사용률이 낮은 컴포넌트는 문서화 부족, 발견성 문제, API나 시각적 설계의 불편함 때문일 수 있다. - 디자인 단계에서 사용이 확인된 컴포넌트는 향후 코드 컴포넌트로 구현할 때 우선순위를 정하는 근거가 된다. - 코드 채택률과 디자인 채택률을 함께 보면 디자인에서 제품 출시까지의 채택 흐름과 지연 구간을 파악할 수 있다. ## Figma 분석 기능의 확장 - 글 작성 당시 Figma 기본 분석은 주로 컴포넌트 인스턴스와 삽입 데이터를 제공했다. - 이후 Figma Library Analytics는 스타일과 변수 데이터까지 포함하도록 확장되었고, Enterprise 고객은 Library Analytics API를 활용할 수 있게 됐다. - 따라서 현재는 컴포넌트뿐 아니라 스타일·변수까지 포함해 조직 전체의 디자인 시스템 채택을 분석할 수 있다. 디자인 시스템의 성공을 평가할 때 단순한 사용 횟수만 보지 말고, 전체 디자인 대비 사용 비율과 플랫폼별 채택 흐름을 함께 측정하는 것이 좋다. 특히 Figma의 디자인 채택률과 코드 채택률을 연결하면 어떤 컴포넌트가 실제 제품으로 이어지는지 더 정확하게 판단할 수 있다.

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

디자인 시스템Figmarest-apidata-analytics+2

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

디자인 시스템의 미래는 복잡

디자인 시스템은 제품과 사용자 요구가 복잡해질수록 단순한 시각 규칙 모음이 아니라, 여러 팀과 시스템을 조율하는 운영 구조가 되어야 한다. 브랜치·머지, 로컬 시스템, 오픈소스 같은 코드의 방식을 활용하면 확장성과 협업을 높일 수 있지만, 지나친 규제는 창의성과 실험을 막는다. 따라서 미래의 디자인 시스템은 구조와 유연성 사이의 균형을 지속적으로 조정해야 한다. ## 디지털 제품의 복잡성과 디자인 시스템의 변화 - 초기 디자인 시스템은 사용자가 디지털 인터페이스를 이해하도록 돕는 시각적 은유에 크게 의존했다. - Google Material Design은 종이를 쌓은 듯한 표면, 가장자리, 그림자를 사용해 조작 가능한 요소를 설명했다. - 당시에는 완전한 스큐어모피즘 없이도 사용자가 인터페이스를 직관적으로 이해하도록 만드는 것이 주요 과제였다. - 그러나 다양한 디바이스와 폼팩터가 등장하면서 단일 은유만으로는 충분하지 않게 됐다. - 접근성 기준 - 새로운 입력 방식과 상호작용 - 성능 요구사항 - 여러 화면과 플랫폼에 대응하는 반응형 경험 - Instagram처럼 하나의 핵심 기능만 제공하던 앱도 검색, 광고, 파트너십, 쇼핑 등으로 확장됐다. - 이에 따라 디자인 시스템은 더 많은 기능과 사용자 유형, 서로 연결된 제품 경험을 지원해야 한다. ## 구조로 혼란 다루기 - 디자인팀은 소프트웨어 개발에서 사용하던 프로세스와 프레임워크를 디자인 시스템에 적용하고 있다. - 대표적인 방식이 브랜치와 머지다. - 기여자가 별도의 브랜치에서 새로운 컴포넌트나 수정안을 작업한다. - 기존의 메인 시스템에 영향을 주지 않고 실험할 수 있다. - 디자인 시스템 관리자가 변경 사항을 검토한 뒤 공식 시스템에 반영한다. - 이 방식은 디자인 시스템을 중앙 팀만 관리하는 자산이 아니라, 커뮤니티와 함께 발전시키는 구조로 만든다. - Spotify의 Encore는 하위 팀이 시스템을 포크해 각자의 “로컬 시스템”을 만들도록 허용했다. - 광고 팀의 비디오 플레이어처럼 특정 도메인에 특화된 컴포넌트가 발전했다. - 이러한 결과물이 다시 전체 디자인 시스템의 방향과 적용 범위를 넓혔다. - 오픈 디자인 시스템은 외부 기여와 피드백을 받을 수 있다는 장점이 있다. - 다양한 사용자의 요구를 파악할 수 있다. - 제품과 조직의 작업 방식을 공개해 신뢰와 인지도를 높인다. - 디자인 지식을 업계와 공유할 수 있다. ## 지나치게 엄격한 시스템의 문제 - 구조를 규모 있게 적용하면 일관성은 높아지지만, 시스템이 지나치게 제한적으로 변할 수 있다. - 디자이너는 다음과 같은 문제를 경험할 수 있다. - 새로운 아이디어를 실험하기 어려움 - 제품 특성에 맞는 예외를 만들기 어려움 - 기존 컴포넌트에 억지로 맞추느라 디자인 품질이 떨어짐 - 디자인 시스템의 목적은 창의적 표현의 진입장벽을 낮추는 것이지, 창작 자체를 어렵게 만드는 것이 아니다. - 모든 상황을 사전에 정의하려는 접근은 복잡한 제품과 예상하지 못한 사용자 요구에 제대로 대응하지 못한다. ## 건축보다 정원에 가까운 운영 - Shopify의 José Torre는 디자인 시스템을 완성 후 고정하는 건축물보다 계속 돌보고 변화하는 정원에 비유한다. - 건축적 접근: - 세부 사항을 미리 결정한다. - 설계와 구축이 끝나면 결과물을 완성된 상태로 간주한다. - 정원식 접근: - 기본적인 씨앗과 구조를 심되, 최종 형태는 성장 과정에서 발견한다. - 실제 사용 중 나타나는 문제와 새로운 요구에 따라 개입한다. - 불필요한 요소는 제거하고 유용한 패턴은 발전시킨다. - 계획된 디자인 시스템 안에서도 새로운 버튼이나 메뉴 변형이 자연스럽게 등장할 수 있다. - 이런 변형을 무조건 제거하기보다, 실제 제품 요구에서 비롯된 것인지 평가하고 필요하다면 시스템에 흡수하는 유연성이 중요하다. 디자인 시스템은 엄격한 규칙집이 아니라 제품과 조직의 변화에 맞춰 계속 진화하는 기반으로 운영하는 것이 바람직하다. 공통 구조와 검토 절차는 유지하되, 브랜치·로컬 시스템·실험 공간을 허용해 팀의 자율성과 창의성을 보장해야 한다.

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

디자인 시스템오픈 소스접근성material-design+1

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

코드에서 영감 얻기 | Figma

디자인 시스템이 복잡성과 규모를 감당하려면 코드의 설계 원칙에서 배울 필요가 있다. 특히 고정된 컴포넌트와 과도한 변형 조합 대신 구성(composition), 구조와 표현의 분리, 체계적인 변경 관리가 중요하다. 궁극적으로 디자인 시스템은 창의성을 제한하는 규칙 모음이 아니라, 유연성과 일관성을 함께 제공하는 제품처럼 운영되어야 한다. ### 디자인의 복잡성과 코드에서 얻는 교훈 - 과거에는 디자인 파일이 개인 컴퓨터에 저장되어 협업이나 파일 간 의존성을 크게 신경 쓰지 않아도 됐다. - 오늘날에는 여러 팀과 기여자가 서로 연결된 시스템을 동시에 다루므로 일관성, 품질, 확장성을 관리해야 한다. - 디자인 시스템은 복잡성을 줄이는 데 도움을 주지만, 구조가 지나치게 강해지면 자유로운 탐색과 표현을 방해할 수 있다. - Figma는 이러한 문제에 대응하기 위해 디자인이 코드의 엔지니어링 프레임워크를 차용하고 있다고 설명한다. ### 중첩 컴포넌트로 유연한 레이아웃 구성 - 단순한 시스템에서는 하나의 컴포넌트에 몇 가지 변형(variant)만 정의하면 된다. - 카드처럼 가로형·세로형 등 레이아웃이 다양해지면 모든 경우를 variant로 만드는 방식은 유지보수가 어려워진다. - 컴포넌트 속성으로 이미지, 인용문 등 선택적 요소를 제어할 수 있지만, 구조 자체가 크게 다른 레이아웃에는 한계가 있다. - 작은 하위 컴포넌트를 만든 뒤 이를 큰 컴포넌트 안에 중첩하는 **구성(composition)** 방식을 사용할 수 있다. - 이미지, 제목, 가격, 버튼 같은 하위 컴포넌트를 다양한 방식으로 조합하면 시스템 관리자가 미리 예상하지 못한 레이아웃도 유연하게 만들 수 있다. - 이는 코드에서 재사용 가능한 모듈을 조합해 여러 기능을 구현하는 방식과 유사하다. ### 구조와 표현의 분리 - 초기 디자인 시스템은 컴포넌트에 특정 색상을 직접 지정하는 단순한 형태로 시작하는 경우가 많다. - 이후 다크 모드가 필요해지고, 제품·브랜드별 색상까지 추가되면서 테마 관리가 복잡해진다. - 제품과 하위 브랜드가 늘어날수록 각 컴포넌트에 색상과 스타일을 직접 넣는 방식은 조직의 관리 부담을 키운다. - 이러한 문제를 해결하려면 컴포넌트의 구조와 시각적 표현을 분리하는 새로운 아키텍처가 필요하다. - 글에서는 그 대안으로 **헤드리스 디자인 시스템(headless design system)**을 소개하려 하지만, 제공된 본문은 해당 설명 중간에서 끝난다. ### 실용적인 결론 컴포넌트의 모든 경우를 미리 variant로 만들기보다, 재사용 가능한 하위 컴포넌트를 조합하는 구조를 우선 고려하는 것이 좋다. 또한 색상·테마 같은 표현 요소를 구조와 분리하면 다크 모드, 멀티브랜드, 하위 제품 확장에 더 효과적으로 대응할 수 있다.

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

디자인 시스템디자인 토큰component-architecturetheming+2

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

Schema 2022 미리 보기

Figma의 연례 디자인 시스템 콘퍼런스 Schema 2022는 디자인 시스템의 구체적인 과제와 기회를 깊이 다루기 위해 뉴욕, 런던, 도쿄 및 온라인에서 개최된다. 글은 행사 일정뿐 아니라 디자인·개발 협업, 디자인 토큰, 플러그인과 통합 등 주요 관심사를 소개하며, 다양한 수준의 참가자가 배울 수 있도록 프로그램을 구성했다고 설명한다. 행사의 발표 영상은 이후 DesignSystems.com에 공개되었다. ### 도시 순회 및 온라인 행사 - Schema 2022는 다음 방식으로 진행된다. - 뉴욕, 런던, 도쿄에서 오프라인 행사 개최 - 장소와 관계없이 참여할 수 있는 온라인 행사 제공 - 각 도시 행사는 해당 지역과 연사에 맞춘 개별 프로그램으로 구성된다. - 오프라인 행사는 초청제로 운영되지만 참가 신청이 가능하다. - 각 도시에서는 지역 디자인 커뮤니티를 위한 밋업도 열린다. - 온라인 콘퍼런스는 오프라인 참석이 어려운 사람도 참여할 수 있도록 공개된다. ### 디자인 시스템에 집중한 전문 콘퍼런스 - Config가 디자인 전반을 다룬다면, Schema는 디자인 시스템에 초점을 맞춘 보다 전문적인 행사다. - 디자인 시스템의 고유한 기회와 문제를 깊이 탐구할 수 있다는 점이 Schema의 특징이다. - 주제가 구체적이기 때문에 연사와 참가자가 다음과 같은 논의에 집중할 수 있다. - 디자인 시스템 구축과 운영 - 조직 내 협업 방식 - 디자인 시스템의 확장과 활용 - 동시에 디자인 시스템을 처음 접하는 사람과 숙련된 실무자 모두에게 의미 있는 발표를 제공하는 것이 프로그램 구성의 과제다. - 발표 내용은 새롭고 혁신적이어야 하면서도, 디자인 시스템의 기본 개념을 배우려는 사람도 이해할 수 있어야 한다. ### 디자이너와 개발자의 창의적 교류 - 디자인 시스템은 디자인뿐 아니라 개발, 도구 제작, 조직 협업 등 다양한 역량을 필요로 한다. - Schema는 디자이너와 개발자가 서로의 작업과 아이디어를 공유하는 공간으로 기능한다. - 디자이너는 다음과 같은 주제에 대해 아이디어를 나눌 수 있다. - 플러그인 - 확장 기능 - 외부 서비스 및 도구와의 통합 - 개발자는 자신들이 구축한 도구와 시스템을 소개하며 디자인 분야와 연결점을 찾는다. - 이러한 상호작용을 통해 디자인 시스템이 단순한 시각 요소 모음이 아니라, 여러 직군이 함께 발전시키는 기술·프로세스라는 점이 드러난다. ### W3C 디자인 토큰 커뮤니티 그룹 - 디자인 토큰은 특정 도구나 플랫폼에 종속되지 않고 디자인 스타일을 관리·공유하기 위한 방법론이다. - 디자인 토큰은 여러 도구, 디바이스, 플랫폼에서 디자인을 확장하는 데 활용될 수 있다. - W3C Design Tokens Community Group은 다음을 목표로 한다. - 디자인 시스템의 스타일 정보를 도구 간에 공유할 수 있는 표준 마련 - 제품과 디자인 도구가 대규모로 디자인 토큰을 활용할 수 있는 기반 제공 - 디자인 토큰은 디자이너와 개발자가 공통의 언어로 시스템을 다루게 하는 연결 고리로 소개된다. - 표준화 논의에서는 특히 다음과 같은 주제를 장기적으로 고려한다. - 국제화 - 접근성 - 다양한 플랫폼과 환경에서의 일관성 ### 실무적 시사점 디자인 시스템을 도입하거나 확장하려는 팀이라면 시각 디자인 요소뿐 아니라 개발자 핸드오프, 도구 간 통합, 디자인 토큰의 표준화까지 함께 고려해야 한다. 특히 디자이너와 개발자가 초기부터 공통 언어와 공유 가능한 토큰 체계를 마련하면 여러 제품과 플랫폼으로 시스템을 확장하기 쉬워진다.

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

디자인 시스템Figma접근성디자인 토큰+2

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

Figma의 새로운 소식

2022년 9월 Figma 업데이트는 디자인 시스템 구축과 협업 효율 향상에 초점을 맞췄다. 컴포넌트 프로퍼티 기능을 확장해 인스턴스 커스터마이징과 관리성을 높였고, Google Calendar 연동·신규 템플릿·Schema 컨퍼런스를 통해 Figma와 FigJam을 업무 흐름 전반으로 확장했다. 특히 컴포넌트 관련 기능은 오픈 베타로 제공되어 팀별 디자인 시스템을 더 유연하게 운영할 수 있게 했다. ## 컴포넌트 프로퍼티 기능 확장 이번 업데이트의 핵심은 컴포넌트 인스턴스를 더 쉽게 교체하고, 필요한 부분만 노출하며, 중첩 컴포넌트까지 세밀하게 조정할 수 있도록 한 것이다. - **Preferred values** - 인스턴스를 교체할 때 선택 가능한 컴포넌트 목록을 미리 지정할 수 있다. - 사용자가 무분별한 컴포넌트 대신, 디자인 시스템에서 권장하는 값만 선택하도록 유도한다. - 인스턴스 교체 과정의 혼란을 줄이고 일관성을 높인다. - **Exposed nested instances** - 부모 컴포넌트에서 내부에 중첩된 인스턴스의 프로퍼티를 직접 노출할 수 있다. - 사용자는 내부 레이어를 일일이 찾아가지 않고 부모 컴포넌트 수준에서 중첩 요소를 수정할 수 있다. - 복잡한 카드, 내비게이션, 버튼 그룹 등 재사용 컴포넌트의 커스터마이징에 유용하다. - **Simplified instances** - 컴포넌트 작성자가 이후 인스턴스의 레이어 및 상세 보기에서 불필요한 요소를 숨길 수 있다. - 사용자는 실제로 편집해야 하는 프로퍼티에 집중할 수 있다. - 디자인 시스템이 복잡해져도 인스턴스 사용 경험을 단순하게 유지할 수 있다. ## Figma·FigJam과 Google Calendar 연동 Figma는 회의 일정과 관련 파일을 연결하는 Chrome 확장 기능을 제공했다. - Google Calendar 이벤트에 Figma 또는 FigJam 파일을 직접 추가할 수 있다. - 캘린더 화면을 벗어나 파일 링크를 복사할 필요가 없다. - 회의 아젠다, 협업 보드, 디자인 리뷰 파일 등을 일정과 함께 관리할 수 있어 회의 준비와 후속 작업이 편리해진다. - 해당 기능은 Google Chrome 확장 프로그램으로 설치할 수 있다. ## 디자인 시스템 컨퍼런스 Schema Figma는 디자인 시스템에 초점을 맞춘 행사인 Schema의 참가 등록을 시작했다. - 2021년 가상 행사로 시작했으며, 2022년에는 온라인 프로그램과 함께 오프라인 세션도 진행했다. - 뉴욕, 도쿄, 런던에서 현장 행사를 열고 온라인 참여도 지원했다. - 디자인 시스템 리더들의 사례와 인사이트를 공유하고, 참가자 간 커뮤니티 교류를 목적으로 한다. - 컴포넌트, 운영 방식, 조직 내 디자인 시스템 최적화에 관심 있는 팀을 위한 행사다. ## 300개 이상의 신규 템플릿 Figma와 FigJam에 다양한 업무를 바로 시작할 수 있도록 수백 개의 템플릿이 추가됐다. - 로드맵 기획, SWOT 분석, 팀 회의 아젠다, 디자인 크리틱 등 여러 업무를 지원한다. - 사용 사례나 직무별로 템플릿을 탐색할 수 있다. - 주요 예시로 다음 템플릿이 소개됐다. - **브랜드 가이드라인**: 브랜드 스토리부터 소셜 게시물까지 브랜드의 기준을 정리 - **제품 개발 로드맵**: 아이디어를 실행 단계까지 연결 - **팀 회의 아젠다**: 회의 주제와 진행 내용을 구조화 실무에서는 먼저 팀에서 자주 사용하는 컴포넌트에 Preferred values와 Simplified instances를 적용하고, 회의별 Figma·FigJam 파일을 Google Calendar에 연결하는 방식으로 이번 업데이트를 활용할 수 있다. 신규 템플릿은 반복적인 기획·회의 업무의 출발점으로 사용하면 좋다.

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

디자인 시스템Figmafigjamcomponent-properties+3

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

마이크로소프트 존 프리드

Figma와 Microsoft Teams의 통합은 디자인·개발·제품·마케팅 팀이 하나의 생태계에서 실시간 또는 비동기적으로 협업하도록 돕는다. Jon Friedman은 하이브리드 근무가 인재 확보와 협업 방식을 넓혔지만, 대면 만남만이 제공하는 인간적·사회적 경험은 여전히 중요하다고 말한다. 또한 디자인 시스템과 도구 체인은 창의성을 제한하는 규칙이 아니라 반복 작업을 줄이고 더 중요한 문제에 집중하게 하는 기반이라고 강조한다. ### 하이브리드 근무가 확장한 인재의 범위 - 코로나19 이전부터 Microsoft는 특정 지역에 한정되지 않은 인재 확보의 필요성을 인식하고 있었다. - 인도, 중국, 애틀랜타, 노르웨이 등 다양한 지역에 뛰어난 디자인 인재가 존재하며, 반드시 본사 근처로 이주해야 할 이유는 없다고 보았다. - 뉴욕에 있는 사람이 워싱턴주 레드먼드의 직원보다 더 큰 영향력을 낼 수 있다면, 지역을 이유로 승진이나 참여 기회를 제한해서는 안 된다는 관점이 제시된다. - 팬데믹은 새로운 가능성을 만든 것이라기보다, 기존에 검토하던 원격 근무 방식을 실제 운영에 적용하도록 가속했다. ### 디지털 협업 도구와 평등한 참여 - Microsoft의 경험상 Teams, Figma 같은 도구를 활용한 협업이 일부 대면 상황보다 더 효과적일 수 있다. - 디지털 도구는 조직 내 직급이나 물리적 위치의 영향을 덜 받는 비계층적 환경을 제공한다. - 그 결과 회의실에서 발언권을 얻기 어려운 사람도 자신의 의견을 더 쉽게 공유할 수 있고, 팀 구성원 모두가 동등하게 참여할 가능성이 커진다. - 다만 앞으로는 “대면 만남은 무엇을 위해 필요한가”와 “어떤 상황에서 대면 방식을 선택해야 하는가”를 구분해야 한다. ### 대면 만남이 제공하는 인간적 경험 - 온라인 환경에서도 우연한 대화나 비공식적 만남은 가능하지만, 대면 만남을 완전히 대체하기는 어렵다. - 사람은 표정, 몸짓, 옷차림, 움직임 등 시각적·비언어적 신호를 통해 상대를 이해한다. - 화상회의에서는 얻기 어려운 이런 정보가 관계 형성과 신뢰 구축을 돕는다. - 따라서 하이브리드 근무의 목표는 대면을 없애는 것이 아니라, 온라인 협업과 대면 활동을 각각 가장 효과적인 상황에 사용하는 것이다. ### 디자인 시스템은 창의성을 제한하지 않는다 - 디자인 시스템을 도입하려면 개인의 산출물보다 협업과 일관성을 중시하는 방향으로 조직 문화를 바꾸어야 하며, 이런 변화에는 수년이 걸릴 수 있다. - 처음에는 디자이너가 모든 픽셀을 직접 설계하고 싶어 하는데 공통 시스템을 사용하라고 요구하는 것이 창의성을 억누르는 것처럼 보일 수 있다. - 그러나 잘 만들어진 디자인 시스템은 규칙을 강제하는 장치가 아니라, 이미 검증된 요소를 재사용해 불필요한 반복을 줄이는 기반이다. - 기본적인 구조와 컴포넌트가 마련되면 디자이너는 더 중요한 사용자 문제와 새로운 해결책에 집중할 수 있다. - 일관된 시스템은 제품 간 연결성을 높이고, 팀이 매번 같은 문제를 처음부터 다시 해결하지 않도록 한다. ### Figma와 Teams가 만드는 도구 생태계 - Figma에서 소프트웨어를 설계하면서 Teams의 영상 통화와 채팅을 동시에 사용하면, 디자인 작업과 논의를 하나의 흐름으로 연결할 수 있다. - 협업은 실시간으로 함께 작업하는 방식뿐 아니라, 각자가 다른 시간에 작업하고 의견을 남기는 비동기 방식으로도 가능하다. - Teams는 Microsoft 내부 도구에만 머무르지 않고 외부 기업과 제3자 개발자가 좋은 제품을 만들 수 있도록 지원하는 플랫폼 역할을 지향한다. - Figma의 디자인 기능과 Teams의 커뮤니케이션 기능을 결합하면, Microsoft가 개인별로 따로 만드는 조직에서 함께 구축하는 조직으로 전환하는 데 도움이 된다. ### 실용적인 결론 하이브리드 협업을 성공시키려면 원격 도구를 도입하는 데 그치지 말고, 지역과 직급에 관계없이 참여할 수 있는 문화와 프로세스를 함께 설계해야 한다. 반복 작업은 디자인 시스템과 통합 도구로 줄이고, 관계 형성·신뢰 구축처럼 디지털 환경이 대체하기 어려운 활동은 의도적으로 대면에서 진행하는 방식이 효과적이다.

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

디자인 시스템Figmafigjamreal-time-collaboration+2

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

Figma의 새로운 소식:

2022년 7월 Figma는 협업 연구 결과를 공개하고, 일본 시장 현지화를 완료했으며, Figma Community의 리소스 탐색 기능을 개선했다. 이번 업데이트의 중심에는 팀 협업을 강화하고 전 세계 사용자가 Figma 생태계의 자료를 더 쉽게 찾도록 지원하려는 방향이 있다. ## 협업 성과를 높이는 다섯 가지 행동 - 100개 이상의 디자이너, PM, 엔지니어, 리서처, 라이터 팀을 대상으로 협업 방식을 조사했다. - 연구 보고서 **“What Makes Collaboration Click?”**을 발표했다. - 제품 성과를 높이는 핵심 행동으로 다음 다섯 가지를 제시했다. - 공동 창작(Co-creation) - 신뢰와 유대감 형성(Rapport) - 역할 명확화(Role clarity) - 피드백(Feedback) - 회고와 성찰(Reflection) - 전체 연구 결과는 별도 보고서와 라이브스트림을 통해 공유하도록 했다. ## 일본 시장 현지화와 지역 지원 강화 - Figma 제품 인터페이스 전체를 일본어로 번역하고 현지화했다. - 웹사이트와 도움말 센터도 일본어를 지원하도록 개편했다. - 일본 사용자와 Figma Community를 지원하기 위해 도쿄 사무소를 개설하고 현지 리더십을 채용했다. - 미국 외 지역 사용자가 전체 사용자의 약 80%를 차지하는 만큼, 글로벌 디자인 커뮤니티와의 연결을 강화하려는 전략이다. - 일본 관련 업데이트는 별도 공식 계정인 **@FigmaJapan**을 통해 제공한다. ## Figma Community 탐색 경험 개선 - 수천 개의 리소스 중 원하는 자료를 찾기 어렵다는 문제를 해결하기 위해 탐색 화면을 개편했다. - 리소스를 다음과 같은 유형으로 구분해 살펴볼 수 있도록 했다. - 위젯 - 파일 - 템플릿 - 플러그인 - 랜딩 페이지를 새롭게 구성해 다음 범주를 구분하고 발견하기 쉽게 만들었다. - 제품: Figma 또는 FigJam - 사용 사례: 디자인 시스템 등 - 리소스: 위젯, 플러그인 등 - 검색 기능에 필터와 정렬 옵션을 추가했다. - 검색 결과를 다음 기준으로 정렬할 수 있다. - 인기 급상승(Trending) - 가장 인기 있음(Most popular) - 최신순(Most recent) - 매일 추가되는 파일, 플러그인, 위젯을 더 빠르게 발견할 수 있고, 제작자가 만든 콘텐츠의 노출 가능성도 높아졌다. Figma의 7월 업데이트는 단순한 기능 추가보다 **협업 방식에 대한 연구, 지역별 지원, 커뮤니티 검색성 개선**에 초점을 맞췄다. 팀은 협업 행동을 점검하고, 일본 사용자는 현지화된 제품과 지원 채널을 활용하며, 모든 사용자는 개선된 Community 검색과 정렬 기능을 이용하면 된다.

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

디자인 시스템Figmafigjamcollaborative-design+2

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

다크 모드 밝히

Figma의 다크 모드는 색상만 어둡게 바꾸는 단순한 프런트엔드 작업이 아니라, 제품 전반의 UI 상태와 접근성, 향후 테마 확장성을 함께 해결해야 하는 시스템 구축 프로젝트였다. Figma는 사용자 요청에 대응하는 동시에 시각적 접근성을 높이고, 새로운 기능이 처음부터 다크 모드를 지원하도록 만드는 것을 목표로 했다. 이를 위해 전체 UI를 조사하고 여러 팀의 공통 컴포넌트를 체계적으로 refactoring하는 방식을 택했다. ## 다크 모드가 필요했던 이유 - 다크 모드는 Figma 사용자들이 가장 많이 요청한 기능 중 하나였다. - 야간 작업 시 밝은 화면으로 인한 불편을 줄일 수 있었다. - 시각 장애나 특정 시각적 질환이 있는 사용자에게 다크 모드가 더 읽기 쉬울 수 있었다. - 색상 대비는 WCAG 접근성 지침의 핵심 요소이므로, 다크 모드는 Figma의 “디자인을 모두에게 accessible하게 만든다”는 목표와도 연결됐다. - 일반적으로는 라이트 모드가 시각적 수행 능력에 유리하지만, 백내장 등 특정 질환이 있는 사람은 다크 모드에서 더 나은 성능을 보일 수 있다. ## 단순한 색상 교체가 아니었던 이유 - 처음에는 모든 밝은 색을 어두운 색으로 바꾸면 된다고 생각했지만, 실제로는 UI의 상태와 맥락을 함께 고려해야 했다. - 다크 모드 전환 시 다음 요소를 결정해야 했다. - 밝은 편집기 패널을 어둡게 바꾸고 아이콘과 텍스트를 밝게 할지 - 라이트 모드에서도 이미 어두운 툴바와 메뉴를 그대로 유지할지 - 캔버스 배경처럼 사용자가 만든 콘텐츠까지 테마에 따라 변경할지 - C++ 렌더링 엔진이 그리는 투명도 격자 등의 색상도 변경할지 - Figma 전체가 아니라 편집기 등 특정 영역만 지원할지에 대한 제품 범위 결정도 필요했다. ## 전체 UI 감사와 범위 설정 - 개발에 앞서 각 팀원이 Figma 앱의 UI 표면을 조사하고, 다크 모드로 재구성하기 어려운 부분을 파악했다. - 프로젝트 시작 당시 Figma에는 10개의 제품 엔지니어링 팀이 있었고, 각 팀이 모달, 패널, 툴바 등 주요 UI 영역을 담당했다. - 하나의 UI 요소도 여러 상태와 복잡한 예외 상황을 포함할 수 있었다. - 특정 조건에서만 나타나는 상태 - 여러 뷰와 화면 - 숨겨진 서브모달과 드롭다운 - 따라서 표면적으로 보이는 화면뿐 아니라 모든 상태와 엣지 케이스까지 다크 모드 범위에 포함해야 했다. ## 확장 가능한 테마 시스템의 목표 - 목표는 현재 다크 모드만 구현하는 것이 아니었다. - 두 가지 장기 목표를 세웠다. - 개발자가 새로운 기능을 다크 모드 지원과 함께 바로 만들 수 있도록 하기 - 향후 Figma와 FigJam에 새로운 테마를 쉽게 추가할 수 있도록 하기 - 공통 UI 컴포넌트는 다크 모드를 지원해야 하지만, 다크 모드가 적용되지 않는 화면에서는 기존 동작과 외관을 유지해야 했다. - 구현 과정에서 기존 기능을 깨뜨리지 않는 회귀 방지(regression-proof) 구조가 중요했다. - 새로운 엔지니어의 온보딩과 향후 예측하지 못한 요구사항 대응까지 고려해, 적용과 유지보수가 쉬운 방식이 필요했다. ## 프로젝트 규모가 만든 엔지니어링 과제 - Figma의 UI가 여러 팀에 분산되어 있어 소수의 엔지니어만으로 전체를 처리하기 어려웠다. - 각 팀이 소유한 컴포넌트와 화면을 공통 원칙에 맞게 바꿔야 했다. - 단순히 색상 값을 교체하는 것이 아니라, 컴포넌트가 어떤 표면과 상태에서 사용되는지까지 체계적으로 분리해야 했다. - 이 경험은 개별 기능을 추가하는 방식보다, 제품 전체에서 재사용할 수 있는 디자인·엔지니어링 시스템을 구축하는 접근이 필요하다는 점을 보여준다. 다크 모드처럼 겉보기에는 간단한 기능도 실제로는 UI 상태, 접근성, 팀 간 소유권, 공통 컴포넌트, 향후 확장성을 함께 설계해야 한다. 유사한 기능을 구현할 때는 특정 화면의 색상부터 바꾸기보다 전체 범위를 먼저 감사하고, 테마 토큰과 공통 컴포넌트를 중심으로 회귀를 방지할 수 있는 구조를 마련하는 것이 바람직하다.

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

디자인 시스템사용자 인터페이스접근성wcag+2

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

Config 2022 되돌

Config 2022는 전 세계 디자이너와 제품 관계자가 모여 디자인의 범위와 영향력을 확장한 행사였다. 24시간 동안 100명 이상의 연사가 Web3, 사용자 조사, 디자인 시스템, 다문화 제품 설계 등을 다뤘으며, 핵심 메시지는 지역과 직무에 상관없이 더 크고 긴급한 변화를 시도하자는 것이었다. 특히 기존 디지털 사용자뿐 아니라 중국의 모바일 중심 사용자와 인도의 신규 인터넷 사용자까지 고려하는 포용적 디자인이 강조됐다. ## 더 많은 사용자를 고려하는 디자인 - 디자이너는 익숙한 사용자 집단만을 기준으로 제품을 설계해서는 안 되며, 서로 다른 기술 경험과 문화적 배경을 가진 사람들을 함께 고려해야 한다. - 현대 UX 관행은 디지털 환경에 새롭게 진입하는 사람들의 요구를 놓치는 경우가 많다. - 사용자 집단의 규모와 성장 가능성을 고려하면, 포용적인 설계는 윤리적 과제인 동시에 중요한 비즈니스 기회가 된다. ## 중국 사용자와 모바일 중심 UX Shopify의 Yuan Qing Lim은 중국 사용자를 이해하기 위해 중국의 독특한 디지털 발전 경로를 살펴봐야 한다고 설명했다. - 중국의 많은 사용자는 PC 시대를 거치지 않고 모바일 인터넷 환경으로 직접 진입했다. - 중국의 약 10억 인터넷 사용자를 대상으로 하려면 서구권의 미니멀한 UX 관습만 적용해서는 부족하다. - 주요 특징은 다음 세 가지로 정리된다. - **More is More**: 정보와 기능이 풍부하고 시각적으로도 과감한, 중국의 맥시멀리스트 디지털 취향을 반영한다. - **Super Apps**: 하나의 앱 안에서 결제, 쇼핑, 커뮤니케이션 등 여러 서비스를 이용하는 통합 경험을 제공한다. - **Community**: 개인 중심이 아니라 커뮤니티와 사회적 상호작용을 제품 경험의 중요한 요소로 다룬다. - 지역별 사용자의 문화와 행동 방식을 이해하지 않고 보편적인 UX를 적용하면 제품의 접근성과 매력도가 떨어질 수 있다. ## 신규 인터넷 사용자를 위한 설계 인도에서 활동하는 제품 디자이너 Rahul Goradia는 디지털 환경에 처음 진입하는 사용자를 위한 UX의 필요성을 강조했다. - 인도처럼 향후 인터넷 사용자가 크게 증가할 지역에서는 신규 사용자를 고려하지 않은 설계가 큰 문제로 이어질 수 있다. - 기존 UX 패턴과 전문 용어는 숙련된 사용자에게는 편리하지만, 초보자에게는 진입 장벽이 될 수 있다. - 특히 전자상거래 서비스는 상품 탐색, 비교, 결제 등 각 단계가 명확하고 이해하기 쉬워야 한다. - 실제 신규 사용자를 대상으로 사용성 테스트를 진행해 다음과 같은 문제를 확인해야 한다. - 사용자가 기능의 의미를 이해하는가 - 구매 절차를 끝까지 수행할 수 있는가 - 인터페이스의 용어와 아이콘을 혼동하지 않는가 - 변화하는 온라인 이용 습관에 제품이 맞춰지고 있는가 - 팬데믹 이후 사용자 행동이 변화하고 있으므로, 과거의 가정에 의존하지 않고 지속적으로 검증해야 한다. ## 다양한 주제로 확장된 디자인 논의 Config 2022에서는 사용자 다양성뿐 아니라 제품 개발 전반의 협업과 시스템화도 다뤄졌다. - UX 리서치 결과를 실행 가능한 전략과 디자인으로 전환하는 방법 - UX 라이터와 디자이너가 디자인 시스템 안에서 협업하는 방식 - 디자인 시스템의 한계와 개선 방향 - 디자인 토큰을 활용한 협업 - 다크 모드와 멀티플랫폼 디자인 시스템 구축 - 제품 카피를 체계화하고 콘텐츠를 디자인 요소로 다루는 방법 - Web3 환경에서 디자인을 분산화하는 가능성 ## 지역과 직무를 넘어 행동하기 - Config의 공통된 방향은 디자인을 단순한 화면 제작이 아니라 사회와 제품을 변화시키는 실천으로 보는 것이다. - Figma 공동 창업자이자 CEO인 Dylan Field는 지역적 또는 세계적 변화를 원한다면 이를 시작하는 데 막을 것이 없다고 강조했다. - 디자이너는 자신의 업무 범위를 넘어 사용자, 커뮤니티, 조직과 사회에 미치는 영향을 고민해야 한다. 실무에서는 먼저 제품의 주요 사용자 정의에 빠져 있는 집단이 없는지 점검하고, 서로 다른 디지털 숙련도와 문화적 배경을 가진 사용자를 대상으로 사용성 테스트를 진행하는 것이 좋다. 지역별 사용자 행동을 일반화하지 않고 실제 데이터와 피드백을 바탕으로 제품 경험을 조정해야 한다.

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

디자인 시스템Figma사용자 경험디자인 토큰+4

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

Config 2022: 크게

Config 2022의 핵심 메시지는 디자이너와 창작자가 더 큰 문제를 상상하고, 변화가 필요한 순간에는 신속하게 행동해야 한다는 것이다. Figma는 24시간 동안 전 세계 커뮤니티를 연결하고, 협업·디자인 시스템·프로토타이핑을 강화하는 15개 기능을 발표했다. 이를 통해 디자인이 경제적 접근성, 기후변화, 평화와 연대 같은 사회적 문제에도 영향을 줄 수 있다고 강조한다. ## 전 세계 디자인 커뮤니티의 연결 - Config 2022는 24시간 동안 진행됐다. - 100명의 연사가 참여했으며, 남극을 제외한 모든 대륙에서 발표자가 모였다. - 총 68개의 세션이 거의 모든 국가의 참석자에게 제공됐다. - 행사의 목적은 디자인에 대해 이야기하고 전 세계 커뮤니티를 연결하는 것이었다. - Figma는 디자인을 단순한 시각 작업이 아니라 세상을 변화시키는 도구로 본다. ## 더 크게 생각하고 긴급하게 행동하기 - 사회적·환경적 문제 앞에서 개인이 무력하다고 느낄 수 있지만, 디자이너와 빌더는 주변 세계를 직접 shaping할 수 있다고 주장한다. - 디자인과 기술은 다음과 같은 변화에 기여할 수 있다. - 경제적 기회와 접근성 확대 - 기후변화 대응 - 평화와 연대의 메시지 확산 - 변화는 거대한 조직이나 권한이 있어야만 가능한 것이 아니라, 지역적·개인적인 행동에서 시작될 수 있다. ## 협업과 디자인 시스템 개선 - **다크 모드** - Figma 데스크톱과 웹에서 다크 모드를 지원한다. - **개선된 오토 레이아웃** - 더 직관적이고 강력한 반응형 레이아웃을 제공한다. - 절대 위치 지정과 음수 간격 등 새로운 레이아웃 옵션을 추가했다. - **컴포넌트 속성** - 컴포넌트 변형(variant)이 지나치게 늘어나는 문제를 줄인다. - 디자인 시스템을 코드와 더 잘 연결해 개발자 핸드오프를 개선한다. - **Spotlight** - 멀티플레이어 세션에서 특정 협업자를 스포트라이트할 수 있다. - 모든 참여자가 해당 사용자의 작업 흐름을 쉽게 따라갈 수 있다. - **검토 상태** - 브랜치를 활용해 변경 사항을 승인하거나 수정 요청을 보낼 수 있다. - 맥락이 포함된 디자인 피드백을 주고받을 수 있다. ## FigJam의 업무·팀 협업 확장 - Jira, Asana, GitHub 위젯을 FigJam에 추가해 아이디어를 실제 업무 계획과 연결한다. - 인사말 카드와 음성 메모 위젯을 제공해 팀의 성과를 축하하고 감정을 공유할 수 있도록 했다. - FigJam을 단순한 브레인스토밍 도구가 아니라 계획·실행·팀 커뮤니케이션을 연결하는 공간으로 확장했다. ## 표현력과 프로토타이핑 강화 - **가변 글꼴** - 글꼴의 폭, 굵기 등 여러 속성을 유연하게 조정할 수 있다. - 더 최적화되고 표현력 있는 디자인을 만들 수 있다. - **스프링 애니메이션** - 프로토타입 전환에 자연스럽고 유동적인 움직임을 적용한다. - **개별 스트로크** - 사각형 등 네 면이 있는 도형에서 특정 변에만 테두리를 적용하거나 조정할 수 있다. - **업데이트된 아웃라인** - 숨겨진 객체와 바운딩 박스까지 캔버스의 구성 요소를 더 분명하게 확인할 수 있다. ## 파일 공유와 접근성 개선 - **국제 키보드 단축키 베타** - 독일어, 일본어, 프랑스어 키보드에서도 Figma와 FigJam 단축키를 쉽게 사용할 수 있도록 개선했다. - **비밀번호 보호** - 공유한 파일을 볼 수 있는 사용자를 비밀번호로 제한할 수 있다. - **파일 즐겨찾기** - 자주 사용하는 파일을 북마크해 빠르게 접근할 수 있다. ## 실용적인 결론 이번 발표는 Figma가 시각 디자인 도구를 넘어 디자인 시스템, 개발 협업, 프로젝트 관리, 프로토타이핑, 팀 커뮤니케이션을 아우르는 플랫폼으로 확장되고 있음을 보여준다. 특히 오토 레이아웃과 컴포넌트 속성은 디자인 시스템 운영에, FigJam 위젯과 검토 상태는 제품 개발 프로세스에 직접적인 도움이 되는 기능이다.

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

디자인 시스템Figma프로토타이핑figjam+4

figma·2022년 5월 10일원문

피그마 커뮤 (새 탭에서 열림)

피그마(Figma)는 2022년 처음으로 개최된 '피그마 커뮤니티 어워즈(Figma Community Awards)'의 최종 우승작들을 발표하며 전 세계 디자인 생태계의 혁신을 공유했습니다. 이 어워즈는 전 세계 디자이너들이 매일 1,600개 이상 업로드하는 UI 키트, 플러그인, 위젯 등의 리소스 중 커뮤니티의 투표를 통해 가장 가치 있는 도구들을 선정하는 행사입니다. 이를 통해 피그마는 제작자들의 공로를 기리는 동시에, 협업 디자인의 미래를 이끌어갈 우수한 리소스들을 공식적으로 조명했습니다. #### 생산성을 극대화하는 플러그인과 위젯 * **Similayer (Dave Williames):** 다양한 레이어 속성을 기준으로 유사한 레이어를 한꺼번에 선택할 수 있게 해주어 복잡한 편집 작업을 비약적으로 단축합니다. * **Content Reel (Microsoft/Eugene Gavriloff):** 텍스트 스트링, 이미지, 아이콘 등 디자인에 필요한 더미 데이터를 한데 모아 실시간으로 적용할 수 있는 유틸리티를 제공합니다. * **FigJenda (PG Gonni):** 피그잼(FigJam) 타이머와 연동되는 인터랙티브 아젠다 위젯으로, 워크숍이나 회의의 흐름을 효율적으로 관리할 수 있도록 돕습니다. * **Rock Paper Scissors (Alex Einarsson):** 팀원 간의 간단한 의사결정을 돕는 가위바위보 게임 위젯으로, 협업 과정에 재미 요소를 더했습니다. #### 디자인 자산 및 시스템 리소스 * **Ant Design Open Source (Mr Biscuit/Vinh Bui):** 유연한 인스턴스 활용과 구조적 단순함을 갖춘 대규모 오픈소스 디자인 시스템으로, 완성도 높은 UI 구축을 지원합니다. * **css.gg (Lona/Astrit):** 순수 CSS, SVG 및 피그마용 UI 아이콘 700여 개를 포함한 방대한 아이콘 세트입니다. * **Sketch Elements Brushes Set (Streamline):** 추상적인 요소와 스케치 주석 테마를 제공하여 그래픽 디자인의 디테일을 살려주는 리소스입니다. #### 협업 및 교육용 템플릿 * **Remote Design Sprint (Miranda Mazzara 외):** 사전 경험이 없는 팀도 5일간의 디자인 스프린트를 원활하게 진행할 수 있도록 설계된 피그잼 전용 템플릿입니다. * **Customer Journey Map (Fuad Aslan):** 고객의 경험을 심도 있게 분석하고 시각화할 수 있는 프레임워크를 제공합니다. * **Micro interactions - Prototyping (Rusmir Arnautovic):** 피그마의 프로토타이핑 기능을 활용해 정교한 마이크로 인터랙션을 구현하는 방법을 보여주는 교육 자료입니다. #### 커뮤니티 어워즈의 운영 방식과 의의 * **사용자 참여 기반 선정:** 피그마 커뮤니티 프로필을 보유한 사용자들이 직접 후보를 추천하고 최종 후보군에 대해 투표를 진행하여 투명성을 확보했습니다. * **창작자 지원 및 보상:** 최종 우승자에게는 피그마 컨퍼런스인 'Config'에서 수상의 영예와 함께 데스크톱에 전시할 수 있는 실물 트로피, 특별 굿즈가 제공됩니다. * **공유 생태계 장려:** 누구나 자신의 작업을 퍼블리싱하여 후보가 될 수 있도록 장려함으로써 디자인 지식의 공유와 개방성을 강조합니다. 이번 어워즈에서 선정된 도구들은 피그마 전문가들이 검증한 최상의 리소스들입니다. 업무 효율을 높이고 싶거나 팀의 협업 프로세스를 개선하고자 한다면, 위에서 언급된 플러그인과 템플릿들을 커뮤니티에서 검색하여 실무에 직접 활용해 보시는 것을 적극 추천합니다.

디자인 시스템Figma프로토타이핑figjam+4

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

리틀 빅 업데이트:

이번 업데이트는 Figma와 FigJam의 작업 흐름을 빠르게 만드는 32가지 개선 사항을 소개한다. 파일·컴포넌트 관리, 텍스트 편집, 단축키, 퍼블리싱, FigJam 협업 기능처럼 작은 변경을 모아 반복 작업을 줄이고 디자인 시스템 활용성을 높이는 데 초점을 맞췄다. 개별 기능은 작지만 일상적인 작업 속도와 편의성에 큰 영향을 준다는 것이 글의 결론이다. ## 텍스트 편집과 입력 개선 - 텍스트 편집 성능을 개선해 Figma와 FigJam에서 최대 10배 빠르게 입력할 수 있다. - macOS의 악센트 메뉴를 지원한다. 문자를 길게 누르면 é, ñ 등의 악센트 문자를 선택할 수 있다. - 여러 텍스트 스타일이 섞여 있어도 목록 글머리 기호의 모양과 정렬이 일관되게 유지된다. - `Home`과 `End` 키로 텍스트 영역의 시작과 끝으로 빠르게 이동할 수 있다. - 커넥터의 텍스트에서 `Return` 또는 `Enter`를 눌러 새 줄을 만들 수 있다. 기존에는 `Shift+Return/Enter`가 필요했다. - Chrome에서 레티나 스크린샷을 붙여 넣을 때 올바른 크기로 처리되도록 개선했다. ## 파일 탐색과 단축키 - Figma 및 FigJam에서 HEIC 이미지 업로드를 지원해 iPhone 사진을 바로 사용할 수 있다. - 외부 링크를 열 때 표시되던 중간 안내 화면을 제거해 작업 흐름이 끊기지 않는다. - 데스크톱 앱에서 `⌘L` 또는 `Ctrl+L`로 파일뿐 아니라 선택한 프레임의 링크도 복사할 수 있다. - UI를 숨긴 상태에서도 `⌘R` 또는 `Ctrl+R`로 요소 이름을 변경할 수 있다. - `⌘` 또는 `Ctrl`을 누른 채 클릭하면 캔버스에서 최상위 프레임을 직접 선택할 수 있다. - 빠른 실행 메뉴(`⌘+/`, `Ctrl+/`)에서 FigJam UI 표시 여부를 전환할 수 있다. - 같은 빠른 실행 메뉴에서 “모든 객체 잠금 해제” 기능을 검색해 실행할 수 있다. - FigJam 인라인 툴바에 마우스를 올리면 추가 키보드 단축키를 확인할 수 있다. ## 컴포넌트와 디자인 시스템 - 컴포넌트 삽입(`Shift+I`) 및 인스턴스 교체 시 검색 기능을 사용할 수 있어 필요한 컴포넌트를 빠르게 찾을 수 있다. - 컴포넌트를 우클릭해 즉시 퍼블리시할 수 있다. - 퍼블리싱 모달에서 컴포넌트를 검색할 수 있다. - 퍼블리시된 파일에는 별도의 식별 가능한 아이콘이 표시되어 라이브러리 파일을 쉽게 구분할 수 있다. - 퍼블리싱 모달에서 문제가 있는 컴포넌트로 바로 이동할 수 있다. - 에셋 목록에 표시하거나 숨길 컴포넌트를 선택할 수 있다. - 아직 퍼블리시되지 않은 변경 사항을 확인한 뒤 같은 화면에서 바로 퍼블리시할 수 있다. - 메인 컴포넌트를 선택했을 때 “Return to instance”를 눌러 인스턴스로 돌아갈 수 있다. - 조직 구독 설정에서 라이브러리로 직접 연결되는 링크를 제공한다. - FigJam 파일에 팀 라이브러리를 추가할 때 해당 라이브러리가 모달에서 우선적으로 표시된다. ## Figma 디자인 및 내보내기 - 벡터 네트워크 영역별로 서로 다른 채우기 색상을 지정할 수 있어 복잡한 벡터 디자인의 표현 범위가 넓어졌다. - 부모 객체에 적용된 SVG 스트로크를 내보내는 기능이 정상적으로 작동한다. - Figma와 FigJam에서 목록 및 텍스트 스타일 관련 표시가 더 안정적으로 유지된다. - 파일과 프레임 링크 복사 기능이 확장되어 협업 중 특정 작업 영역을 공유하기 쉬워졌다. ## FigJam 도형과 협업 기능 - FigJam의 도형을 더 유연하게 크기 조절할 수 있다. - 요소를 선택한 뒤 우클릭하면 해당 요소로 바로 이동하는 직접 링크를 복사할 수 있다. - 스탬프를 스탬프 휠에서 직접 드래그할 수 있다. - FigJam의 빨간 도형 색상을 주황색에 가깝던 색에서 더 선명한 빨간색으로 조정했다. - 파란 배경 위의 텍스트 하이라이트가 더 잘 보이도록 대비를 개선했다. - 객체를 드래그할 때 계속 그리드에 스냅되도록 했다. 이 업데이트들은 각각의 기능을 새로 배우기보다 기존 작업에 단축키와 검색, 직접 링크, 즉시 퍼블리시를 적극 활용하는 방식으로 효과를 볼 수 있다. 특히 컴포넌트 라이브러리를 자주 사용하는 팀은 검색·퍼블리싱 개선을, FigJam 협업 팀은 요소 링크와 빠른 실행 기능을 먼저 적용하는 것이 좋다.

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

디자인 시스템Figmafigjammacos+4

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

Figma의 새로운 소식:

Figma의 2021년 10월 업데이트는 협업 방식을 유연하게 만들고, 반복적인 작업을 자동화하며, 아이디어를 더 빠르게 실험하도록 돕는 데 초점을 맞췄다. FigJam에는 위젯·플러그인·오픈 세션이 추가됐고, Figma 프로토타이핑에는 인터랙티브 컴포넌트와 상호작용 관리 기능이 도입됐다. 또한 대규모 디자인 시스템을 지원하기 위한 브랜칭도 소개됐다. ## FigJam 협업 기능 확장 ### 위젯으로 협업 공간 사용자화 - FigJam 파일에 위젯을 클릭해 추가하고, 팀의 협업 방식에 맞게 보드를 구성할 수 있다. - **Photo Booth**를 사용하면 보드에 셀카를 추가할 수 있다. - **Alignment Scale**로 팀원들의 현재 상태나 의견을 확인할 수 있다. - **Org Chart**를 활용해 팀 구조를 시각화할 수 있다. ### 플러그인으로 작업 속도 향상 - 위젯이 협업 자체를 위한 기능이라면, 플러그인은 아이디어를 표현하고 정리하는 작업을 빠르게 해준다. - **Tour Guide**는 FigJam 보드를 슬라이드 쇼 형식의 프레젠테이션으로 변환한다. - **Color Picker**는 스티커와 도형에 사용할 색상 선택지를 확장한다. - **Unsplash** 플러그인으로 이미지 자료를 바로 검색하고 삽입할 수 있다. ### 툴바와 오픈 세션 - FigJam 파일의 툴바에서 플러그인과 위젯을 직접 탐색할 수 있다. - 브레인스토밍, 워크숍, 리서치 등 목적별 **FigJam 템플릿**을 제공한다. - 개발자 협업을 위해 **코드 블록**과 새로운 도형 및 고급 다이어그램 기능을 추가했다. - **Open sessions**를 사용하면 방문자가 계정을 만들지 않아도 FigJam 파일에 참여할 수 있다. ## 인터랙티브 컴포넌트로 프로토타이핑 개선 ### 재사용 가능한 인터랙티브 컴포넌트 - **인터랙티브 컴포넌트**를 사용하면 재사용 가능한 UI 요소에 상호작용을 정의할 수 있다. - 동일한 요소의 상태와 동작을 반복해서 연결하는 작업이 줄어든다. - 프로토타입 제작에 드는 시간을 줄이고, 팀이 디자인 실험과 반복 개선에 더 집중할 수 있다. ### 상속된 상호작용 숨기기 - 컴포넌트 인스턴스에서는 메인 컴포넌트로부터 상속된 상호작용을 기본적으로 숨길 수 있다. - 복잡한 프로토타입에서도 현재 인스턴스에 직접 설정된 동작을 쉽게 파악할 수 있다. - 결과적으로 프로토타입 편집과 개발자 핸드오프의 가독성이 개선된다. ### 기타 프로토타이핑 업데이트 - `Shift + E` 단축키로 디자인 탭과 프로토타입 탭을 전환할 수 있다. - 캔버스에서 모든 사용자가 프로토타입 상호작용을 확인하고 탐색할 수 있다. - 사용자 테스트 시 뷰어의 기본 키보드 탐색을 비활성화할 수 있다. - 프로토타입 상호작용을 복사하고 붙여넣어 반복 설정을 줄일 수 있다. ## 대규모 디자인 시스템 지원 - Figma는 디자인 시스템의 일관성을 유지하면서도 새로운 아이디어를 실험할 수 있는 환경을 제공하는 것을 목표로 한다. - 이번 업데이트에서는 여러 디자인 방향을 독립적으로 실험하고 관리할 수 있는 **브랜칭(Branching)** 기능을 소개했다. - 브랜칭에 대한 구체적인 동작과 활용 방법은 별도의 상세 글에서 설명한다. 이번 업데이트는 FigJam에서는 협업 진입 장벽을 낮추고, Figma에서는 프로토타이핑 반복 작업을 줄이는 방향으로 구성됐다. 팀 단위로 작업한다면 FigJam의 템플릿·위젯·오픈 세션을 활용하고, 디자인 시스템을 운영한다면 인터랙티브 컴포넌트와 브랜칭을 도입하는 것이 실용적이다.

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

디자인 시스템Figma프로토타이핑figjam+4

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

인터랙티브 컴포넌

Figma는 인터랙티브 컴포넌트를 통해 시각 디자인과 프로토타이핑 사이의 간극을 줄이고, 더 적은 작업으로 실제 동작에 가까운 디자인을 만들 수 있도록 했다. 컴포넌트의 여러 variant 사이에 상호작용과 애니메이션을 정의하면 인스턴스가 프로토타이핑 모드에서 바로 작동하며, 팀 단위의 공유와 반복 작업도 쉬워진다. 또한 단축키, 캔버스 정리, 인터랙션 복사·붙여넣기 등 프로토타이핑을 빠르게 만드는 기능도 함께 제공한다. ## 인터랙티브 컴포넌트의 목적 - 기존에는 시각 디자인과 인터랙션 설계를 위해 도구를 전환하거나 프레임을 수동으로 연결해야 했다. - 이런 번거로움 때문에 프로토타이핑을 생략하면 개발 단계에서 추가 작업이 발생하거나 사용자 경험 목표를 놓칠 수 있었다. - 인터랙티브 컴포넌트는 디자인 과정에서 시각적 형태와 동작을 함께 탐색하도록 지원한다. - 2021년 10월 기준 베타를 종료하고 모든 사용자가 이용할 수 있게 되었다. ## 컴포넌트 variant 기반 상호작용 - 컴포넌트 세트 안의 여러 variant 사이에 전환, 상호작용, 애니메이션을 정의할 수 있다. - 해당 컴포넌트의 인스턴스는 프로토타이핑 모드에서 별도의 연결 작업 없이 즉시 동작한다. - 체크박스 선택, 아코디언 메뉴 열기 등 여러 UI 상태를 하나의 컴포넌트 구조로 표현할 수 있다. ## 프로토타입 복잡성 감소 - 과거에는 상태별로 여러 프레임을 만들어야 했지만, 인터랙티브 컴포넌트를 사용하면 하나의 프레임 안에서 상태와 동작을 관리할 수 있다. - 프레임 수가 크게 줄어들어 프로토타입을 만들고 수정하기 쉬워진다. - AWS 사례에서는 일부 프로젝트의 프레임 수가 10분의 1 이하로 감소했다고 설명한다. ## 프로토타입 제작 속도 향상 - 사용된 위치 바로 옆에서 인터랙티브 컴포넌트의 모든 상태를 편집할 수 있다. - 기존 작업 흐름을 벗어나지 않고 컴포넌트를 복제해 새로운 버전을 실험할 수 있다. - 동일한 버튼 수십~수백 개에 hover 상태를 반복 설정하는 대신, 컴포넌트에 동작을 한 번 정의해 재사용할 수 있다. ## 디자인 시스템과 팀 협업 - 인터랙티브 컴포넌트는 라이브러리를 통해 팀 전체에 공유할 수 있다. - 팀원은 라이브러리에서 컴포넌트를 한 번의 클릭으로 가져와 프로토타입에 사용할 수 있다. - 인터랙션이 디자인 시스템에 내장되므로 Figma에 익숙하지 않은 구성원도 적은 도움으로 동작하는 프로토타입을 만들 수 있다. - 베타 기간 동안 성능, 로딩 시간, 안정성이 개선되었고 관찰 모드와 오토 레이아웃 지원도 추가되었다. ## 일상적인 작업을 빠르게 만드는 기능 - **디자인·프로토타이핑 탭 전환** - `Shift + E` 단축키로 디자인 탭과 프로토타이핑 탭을 빠르게 전환할 수 있다. - 오브젝트 편집과 사용자 경험에 대한 동작 설계를 자연스럽게 오갈 수 있다. - **캔버스 정리** - 프로토타입 연결을 나타내는 파란색 화살표인 “noodle”이 지나치게 많아지는 문제를 개선했다. - 메인 컴포넌트에서 상속된 인스턴스의 인터랙션은 캔버스에서 숨겨 복잡한 프로토타입을 더 쉽게 파악할 수 있다. - **인터랙션 복사·붙여넣기** - 프로토타입 인터랙션을 복사해 다른 프레임에 붙여넣을 수 있다. - 반복적인 연결 작업을 줄여 프로토타입 제작 속도를 높인다. 실무에서는 자주 재사용되는 버튼, 입력창, 메뉴, 토글 등의 상태와 전환을 인터랙티브 컴포넌트로 라이브러리화하는 것이 효과적이다. 그러면 디자이너는 화면별 연결보다 사용자 흐름과 인터랙션 검증에 집중할 수 있고, 팀 전체가 일관된 동작을 사용하게 된다.

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

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

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

Elsewhen이 고객을 위한 디지털 제품

Elsewhen은 Figma를 최종 화면을 만드는 도구가 아니라, 탐색·워크숍·프로토타이핑·협업 전 과정을 연결하는 공동 작업 공간으로 활용한다. 이를 통해 Spotify의 디자인 생산성을 체계적으로 분석하고, Inmarsat의 분산된 디자인 업무를 하나의 디자인 시스템으로 통합했다. 두 사례는 협업 환경과 공통 자산을 정비하면 반복 작업을 줄이고 창의성과 제품 출시 속도를 높일 수 있음을 보여준다. ## Figma를 중심으로 한 협업 방식 - 영국의 디지털 제품 컨설팅 회사 Elsewhen은 기업용·B2B 도구를 설계하며 고객사의 비효율적인 시스템과 업무 프로세스를 개선한다. - Figma를 디자인 결과물 제작에만 사용하지 않고 다음 전 과정에 활용한다. - 아이디어 탐색 - 워크숍과 인터뷰 - 고객과의 공동 작업 - 프로토타이핑 - 디자인 자산 공유 및 배포 - 에셋을 별도로 내보내고 업로드·배포하던 반복 단계를 줄여 팀이 문제 해결과 제품 설계에 더 집중할 수 있게 했다. ## Spotify의 디자인 생산성 개선 - Spotify는 디자인 생산성을 단순히 화면·컴포넌트 개수나 작업 시간으로 평가하는 방식에 한계가 있다고 보았다. - 창의적인 업무에서는 산출량보다 디자이너가 실제 디자인에 얼마나 집중할 수 있는지, 업무 흐름을 방해하는 요소가 무엇인지 파악하는 것이 중요했다. - Elsewhen과 Spotify는 현재의 업무 흐름을 분석하고 개선 기회를 찾기 위한 **Design Productivity Blueprint**를 공동 개발했다. - 이 자료는 공개된 Figma 파일 형태로 제공되며 다음을 포함한다. - 디자인 팀의 업무를 분석하는 워크숍 - 구성원 인터뷰 템플릿 - workflow의 문제점과 병목을 찾는 방법 - 목표는 반복적이고 부수적인 업무에 쓰는 시간을 줄이고, 디자이너가 실제 디자인과 창의적 문제 해결에 더 많은 시간을 쓰도록 하는 것이다. ## Inmarsat의 디자인 시스템 구축 - 위성 통신 기업 Inmarsat은 여러 지역에 분산된 조직과 외부 디자인 에이전시에 의존하는 구조 때문에 디자인 협업에 어려움을 겪었다. - 사내 디자인 팀이 없고 공통 디자인 자산의 단일 기준점도 없어 다음 문제가 발생했다. - 새 디자이너의 온보딩이 어려움 - 개발자와 외부 디자이너 사이에 제품 맥락이 단절됨 - 디자이너들이 컴포넌트를 반복해서 처음부터 제작함 - 제품 출시 과정이 지연됨 - Elsewhen은 Inmarsat의 기존 셀프서비스 포털 프로젝트를 기반으로 첫 번째 Figma 디자인 시스템을 만들었다. - 실제 제품에 사용되는 요소를 토대로 다음과 같은 공통 컴포넌트 체계를 구축했다. - 타이포그래피 - 버튼 - 아이콘 - 그리드 - 기타 반복적으로 사용되는 UI 요소 - Figma를 디자인 컴포넌트와 에셋의 단일 기준점으로 삼아 사내 디자이너, 개발자, 협력 에이전시가 동일한 자료에 쉽게 접근할 수 있도록 했다. - 그 결과 컴포넌트 재작업이 줄고, 새로운 제품을 더 빠르게 구축하며 기술 변화에도 대응하기 쉬워졌다. ## 두 사례에서 얻는 협업 원칙 - 생산성은 단순한 산출량이 아니라 업무 흐름의 마찰을 얼마나 줄였는지로 평가해야 한다. - 디자인 시스템은 추상적으로 한 번에 만드는 것이 아니라 실제 진행 중인 제품에서 출발하면 실용적인 기반을 마련하기 쉽다. - 디자인·개발·외부 파트너가 동일한 파일과 컴포넌트를 사용하면 정보 단절과 중복 작업을 줄일 수 있다. - 협업 도구는 결과물을 전달하는 수단을 넘어 탐색부터 검증까지 모든 참여자가 함께 작업하는 공간이 되어야 한다. 실무적으로는 팀의 반복 작업과 협업 병목을 먼저 조사한 뒤, 공통 컴포넌트와 워크숍 템플릿을 하나의 공유 공간에 축적하는 방식이 효과적이다. 이를 통해 디자인 품질뿐 아니라 팀의 작업 속도와 창의적 여유도 함께 개선할 수 있다.

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

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