디자인 시스템 - Figma

figma2022년 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 검색과 정렬 기능을 이용하면 된다.

원문 읽기

디자인 시스템 Figma figjam collaborative-design+2

figma2022년 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

figma2022년 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

figma2022년 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

figma2022년 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

figma2022년 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 협업 팀은 요소 링크와 빠른 실행 기능을 먼저 적용하는 것이 좋다.

원문 읽기

디자인 시스템 Figma figjam macos+4

figma2021년 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

figma2021년 10월 25일3분 읽기큐레이션 요약

인터랙티브 컴포넌

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

원문 읽기

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

figma2021년 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

figma2021년 9월 12일3분 읽기큐레이션 요약

Figma의 디자인 시스템 컨퍼

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

원문 읽기

디자인 시스템 Figma plugins front-end-development+2

figma2021년 8월 24일2분 읽기큐레이션 요약

Figma의 새로운 소

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

원문 읽기

디자인 시스템 Figma figjam React+3

figma2021년 8월 24일3분 읽기큐레이션 요약

협업 중심의 교실을 조성

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

원문 읽기

디자인 시스템 Figma user-experience-design wireframing+2

figma2021년 8월 15일3분 읽기큐레이션 요약

Figma 인사이드:

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

원문 읽기

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

figma2021년 7월 6일4분 읽기큐레이션 요약

News UK가 멀티

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

원문 읽기

디자인 시스템 Figma jira sketch+4

figma2021년 6월 3일3분 읽기큐레이션 요약

Pride 2021

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

원문 읽기

디자인 시스템 Figma collaborative-design figma-community