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

올해 출시된 주요 기능 Top

2023년 Figma는 디자인에서 개발까지 팀이 함께 작업하기 쉽게 만드는 기능을 대거 출시했다. 이 글은 Dev Mode, 변수, 고급 프로토타이핑 같은 대형 기능뿐 아니라 폰트 미리보기와 컴포넌트 탐색처럼 작업 흐름을 개선한 세부 업데이트까지, 올해의 대표적인 10개 기능을 소개한다. 기능의 순위를 매기기보다 제품 개발 단계별로 각 업데이트가 제공하는 정밀함과 생산성 향상에 초점을 둔다. ## 2023년 Figma 업데이트의 방향 - Config 2023에서 다음과 같은 주요 기능을 공개했다. - 개발자를 위한 새로운 작업 공간인 **Dev Mode** - 디자인 시스템과 값을 관리하는 **Variables** - **고급 프로토타이핑** 기능 - 디자인에서 구현으로 넘어가는 과정의 편의성을 높이는 다양한 품질 개선 - 연말까지 약 200개 이상의 기능과 업데이트가 출시되었으며, 최신 **Little Big Updates**에서도 42개의 개선 사항을 추가로 선보였다. - Figma는 눈에 띄는 대형 기능뿐 아니라 버그 수정과 사용성 개선도 제품 개발 과정에서 중요한 업데이트로 평가한다. ## 캔버스에서 바로 확인하는 폰트 미리보기 - 폰트 선택기에서 실제로 폰트를 적용하지 않아도 캔버스 위에 글꼴 모양을 미리 볼 수 있다. - 사용자는 폰트 목록 위에 마우스를 올리는 것만으로 텍스트가 각 서체에서 어떻게 보이는지 확인할 수 있다. - 기존처럼 폰트를 하나씩 선택하고 되돌리는 과정을 반복하지 않아도 되므로 적절한 서체를 빠르게 비교할 수 있다. - Inter 외에도 다양한 글꼴을 자연스럽게 탐색하도록 돕는, 작지만 실질적인 작업 흐름 개선이다. ## 컴포넌트 탐색을 돕는 모달과 플레이그라운드 - Assets 패널에서 컴포넌트를 클릭하면 상세 정보를 보여주는 모달을 열 수 있다. - 모달에서는 다음 정보를 확인할 수 있다. - 컴포넌트의 상세 내용 - 원본 컴포넌트가 포함된 메인 라이브러리로 이동하는 링크 - Professional 플랜 이상에서는 **Component Playground**를 사용할 수 있다. - 플레이그라운드에서 다음 항목을 미리 확인하고 실험할 수 있다. - 컴포넌트 변형(variants) - 컴포넌트 속성(properties) - 변수 모드(variable modes) - 실제 디자인에 적용하기 전에 여러 상태를 자유롭게 시험할 수 있어 반복 작업이 줄고, 디자인 시스템을 활용하는 흐름이 더 빨라진다. ## 개발자와 디자이너의 협업 강화 - Dev Mode는 개발자가 구현에 필요한 정보를 더 직접적으로 얻도록 설계된 별도 작업 공간이다. - Figma의 2023년 업데이트 전반은 디자인 결과물을 만드는 데서 끝나지 않고, 팀이 함께 빌드하는 과정까지 연결하는 데 초점을 맞췄다. - 대형 기능 출시와 세부적인 사용성 개선을 함께 추진함으로써 제품 개발의 여러 단계에서 작업 효율을 높이려 했다. Figma를 사용하는 팀이라면 Dev Mode와 Variables 같은 구조적 기능뿐 아니라 폰트 미리보기, 컴포넌트 플레이그라운드처럼 반복적인 탐색 시간을 줄이는 기능도 함께 활용하는 것이 좋다. 작은 편의 기능과 큰 협업 기능이 결합될 때 디자인-개발 전환 과정의 효율이 가장 크게 향상된다.

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

프로토타이핑Figma디자인 시스템dev-mode+3

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

피그마 + 어도비

2022년 발표된 Figma의 Adobe 인수합병은 협업형 디지털 제품 개발 도구와 Adobe의 창작 도구가 결합해 소비자에게 더 큰 혜택을 줄 수 있다는 취지로 설명됐다. Figma는 자신이 그래픽·마케팅 디자인 도구가 아니라 앱과 웹사이트를 팀 단위로 설계·개발하는 플랫폼이며, 경쟁 시장도 매우 역동적이라고 강조했다. 다만 규제 당국의 승인을 받지 못해 2023년 12월 양사는 인수합병을 포기했다. ## Figma가 해결하는 문제 - Figma는 디지털 제품을 만드는 팀을 위한 웹 기반 디자인 도구다. - 주요 사용자는 디자이너뿐 아니라 개발자, 제품 관리자 등 제품 개발에 참여하는 모든 구성원이다. - 제품 개발 과정 전체를 지원한다. - **FigJam**: 아이디어 발상과 브레인스토밍 - **Figma**: UI 설계와 프로토타이핑 - **Dev Mode**: 디자인과 프로토타입을 개발자가 코드로 구현하도록 지원 - 규제 당국이 Figma의 사업과 시장 위치를 잘 이해하지 못했기 때문에, 회사는 이를 설명하는 데 수천 시간을 들였다고 밝혔다. ## 그래픽 디자인과 디지털 제품 개발의 차이 - 전통적인 그래픽 디자인은 광고, 포스터, 일러스트처럼 시각적 결과물을 만드는 데 초점을 둔다. - Figma의 고객은 상호작용하는 앱과 웹사이트를 구축한다. - 디지털 제품 개발에는 디자인뿐 아니라 개발, 기획, 프로토타이핑 등 다양한 역할과 도구가 필요하다. - 따라서 Figma는 단순한 이미지 제작 도구가 아니라 여러 직군이 함께 제품을 설계하는 협업 플랫폼으로 포지셔닝됐다. ## 경쟁 시장의 확대 - 제품 개발 도구 시장에는 여러 유형의 경쟁자가 존재한다. - 종합 디자인 도구: Sketch, Figma, Penpot - 특화 도구: Miro, Flinto, Anima, ProtoPie, Zeplin - 로우코드 플랫폼: Salesforce 등 - 앱과 웹사이트가 기업과 사용자에게 필수 요소가 되면서 관련 도구 시장도 크게 성장했다. - AI 발전으로 제품 개발 도구의 혁신 속도도 빨라지고 있다. - 새로운 스타트업과 서비스가 지속적으로 등장해 경쟁 구도가 빠르게 변하며, 규제 당국에 제시한 경쟁사 목록조차 몇 주 만에 outdated될 정도라고 설명한다. ## Adobe와 Figma의 차이 - Adobe는 과거 Figma와 경쟁하려고 Adobe XD를 운영했지만, 새로운 기능 개발을 중단하고 유지보수 모드로 전환했다. - Photoshop과 Illustrator는 사진 편집과 고급 일러스트레이션에 강점을 가진다. - 반면 Figma는 팀 협업, 웹·앱 UI 설계, 프로토타이핑과 개발 연계에 특화돼 있어 두 회사의 핵심 제품과 사용 목적이 다르다고 주장했다. ## 인수합병의 기대 효과 - Figma는 협업형 제품 디자인과 개발에 집중한다. - Adobe는 전 세계 수억 명이 사용하는 창작 도구와 기술을 보유하고 있다. - 양사의 강점이 상호보완적이므로 결합하면 다음과 같은 효과가 가능하다고 설명했다. - 디자인과 창작 도구 간 연결 강화 - 더 많은 사용자를 위한 제품 개발·창작 기능 제공 - AI와 Adobe의 기술을 활용한 새로운 디자인 경험 - 디지털 제품 제작과 시각적 창작 영역의 통합 - 그러나 이러한 기대는 규제 승인이라는 전제에 달려 있었고, 결국 15개월간의 심사 끝에 승인 가능성이 없다고 판단해 거래가 종료됐다. 실질적으로 이 글은 인수합병의 장점을 설명하는 Figma의 입장을 담은 FAQ이지만, 최종적으로는 거래가 무산됐다는 후속 결과까지 함께 고려해야 한다.

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

프로토타이핑FigmaAI프로덕트 디자인+4

figma·2023년 10월 25일원문

디자인과 창의성의 미래 (새 탭에서 열림)

피그마와 어도비는 15개월에 걸친 규제 검토 끝에, 당국의 승인을 얻을 수 있는 현실적인 경로가 없다는 판단하에 인수 합병 계약을 공식적으로 종료하기로 합의했습니다. 이번 결정은 양사의 기술적 결합이 가져올 혁신적인 디자인 생태계에 대한 비전을 뒤로한 채 각자의 길을 걷게 됨을 의미합니다. 비록 합병은 무산되었으나, 피그마는 실시간 협업과 생성형 AI, 그리고 도구 간의 심리스한 연결성이 주도할 미래 디자인 워크플로우의 청사진을 제시하며 창의성의 미래를 향한 의지를 밝혔습니다. **합병 중단 배경과 규제 환경** * 2023년 12월 18일, 피그마와 어도비는 시장 독점 및 경쟁 저해를 우려하는 규제 당국의 높은 벽을 넘지 못하고 인수 포기를 선언함. * 양사는 장기간의 검토 과정 끝에 더 이상 승인 가능성이 없다는 점에 상호 동의하며 15개월간의 인수 절차를 마무리함. **멀티플레이어 협업 기술의 확장** * 피그마의 강점인 실시간 멀티플레이어 환경을 어도비의 전문 저작 도구(예: 3D 디자인)에 이식하여 협업 효율 극대화 추진. * 한 디자이너가 3D 모델을 구축하는 동안 다른 디자이너가 실시간으로 조명이나 텍스처를 조정하는 동시 작업 환경 구상. * 전문 툴 학습 시 숙련자가 초보자와 같은 파일 내에서 실시간 가이드를 제공하는 교육적 효과 기대. **심리스한 에셋 연동과 디자인 시스템 통합** * Adobe Substance 3D에서 제작한 에셋을 피그마 목업에 배치하고, 원본 수정 시 피그마 내 에셋도 자동으로 최신화되는 실시간 동기화 기술. * 피그마의 제품 디자인과 어도비 에셋 간의 디자인 시스템(컬러 팔레트, 폰트 등) 공유 및 Adobe Fonts의 피그마 내 직접 활용. * 완성된 피그마 프로토타입을 마케팅 영상에 직접 삽입하여, 제품 디자인 변경이 영상 소스에 즉각 반영되는 워크플로우 구축. **생성형 AI '파이어플라이'와의 기술적 융합** * 어도비의 생성형 AI 모델인 '파이어플라이(Firefly)'를 피그마 워크플로우에 통합하여 UI 컨셉에 맞는 배경을 즉석에서 생성. * 반응형 디자인 대응을 위해 이미지를 자연스럽게 확장하는 '제너레이티브 필(Generative Fill)' 기능의 피그마 내 구현. * 브레인스토밍 단계의 스티키 노트를 지능적으로 분석하여 순식간에 시각화된 스토리보드로 전환하는 자동화 기능 구상. 기업 간의 물리적 합병은 멈추었으나, 피그마가 제시한 '도구 간의 경계 없는 연결'과 '실시간 협업의 확장'이라는 방향성은 향후 디자인 도구 시장의 중요한 표준이 될 것입니다. 디자이너들은 개별 툴의 숙련도를 넘어, AI와 실시간 협업 기능을 활용해 아이디어에서 프로토타입까지의 도달 시간을 단축하는 효율적인 워크플로우 구축에 주목해야 합니다.

프로토타이핑Figma디자인 시스템생성형 AI+4

figma·2023년 10월 17일원문

FedRAMP를 향한 (새 탭에서 열림)

피그마(Figma)는 미국 연방 정부의 보안 인증 제도인 FedRAMP(Federal Risk and Authorization Management Program) 'Moderate' 등급의 인증 절차를 본격적으로 시작하며 공공 부문으로의 확장을 공식화했습니다. 이번 인증 추진은 공공 부문의 디지털 전환과 사용자 경험 개선을 지원하기 위한 핵심 단계로, 이를 통해 정부 기관은 피그마의 협업 기능을 안전하게 활용하여 더 나은 공공 서비스를 설계할 수 있게 됩니다. 피그마는 전담 팀을 구성하고 보안 표준을 강화함으로써 공공 분야에서도 민간 수준의 혁신적인 디자인 협업 환경을 구축하는 것을 최종 목표로 하고 있습니다. ### FedRAMP 인증 추진 배경과 의미 * 미국 정부 데이터를 다루는 애플리케이션에 필수적인 보안 인증인 FedRAMP 'Moderate' 등급 획득을 위한 '진행 중(in process)' 상태로 Marketplace에 등재되었습니다. * 이는 피그마가 연방 정부의 엄격한 보안 및 개인정보 보호 표준을 준수하기 위한 기술 감사를 거쳤으며, 최종 인증을 위한 마지막 단계에 진입했음을 의미합니다. * 팬데믹 이후 가속화된 공공 부문의 원격·하이브리드 근무 환경에서, 보안이 담보된 클라우드 기반 협업 도구에 대한 수요를 충족시키기 위한 결정입니다. ### 공공 부문에 제공하는 기술적 가치 * 정부 기관, 계약업체 및 공공 프로젝트 수행자들이 피그마 내에서 직접 소프트웨어를 설계하고 신속하게 프로토타입을 테스트할 수 있는 환경을 제공합니다. * 플랫폼에 구애받지 않는 브라우저 기반 협업 특성을 통해, 기술 도입이 늦었던 정부 조직 내에서도 부서 간 장벽을 허물고 디자인 반복 주기를 단축할 수 있습니다. * 더 접근성 높고 포용적인 디자인을 가능하게 함으로써, 궁극적으로 정부 애플리케이션의 UI/UX를 개선하고 대국민 서비스의 신뢰도를 높이는 데 기여합니다. ### 조직 역량 강화 및 향후 전략 * Zscaler, Datadog 등에서 공공 분야 경험을 쌓은 전문가를 영입하여 민간 부문의 성공 사례를 공공 부문의 요구사항에 맞춰 이식하는 0 to 1 전략을 실행 중입니다. * 내부적으로 상업용 팀과 정부 전담 팀 간의 양방향 지식 공유 체계를 구축하여, 서로 다른 규제 환경에서도 최적의 사용자 경험을 제공할 수 있도록 역량을 결집하고 있습니다. * 인증 완료 이후에는 연방 정부 규모의 대규모 데이터를 안전하게 호스팅하고, 복잡한 이해관계자들이 참여하는 공공 프로젝트의 효율성을 극대화할 예정입니다. 피그마의 이번 행보는 보안이 최우선인 공공 영역에서도 현대적인 협업 디자인 도구가 필수적임을 시사합니다. 공공 서비스 관련 프로젝트를 운영하거나 준비 중인 조직이라면, 피그마의 FedRAMP 인증 완료 이후 제공될 고수준의 보안 환경을 활용해 정부 표준에 부합하는 디지털 혁신을 계획해 볼 수 있습니다.

프로토타이핑Figma사용자 인터페이스security+4

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

디자인 시스템의 미래

디자인 시스템의 미래는 단순히 색상·간격 같은 값을 표준화하는 데서 나아가, 그 값의 의미와 사용 목적을 중심으로 설계하는 시맨틱 방식에 있다. 디자인 토큰과 Figma 변수는 디자인 결정을 여러 플랫폼과 코드에 일관되게 전달하고, 테마 변경과 동적 프로토타이핑까지 가능하게 한다. 따라서 변수는 디자인 시스템을 기록하는 도구를 넘어 디자인과 개발을 연결하는 핵심 기반으로 발전하고 있다. ## 디자인 시스템의 복잡성과 토큰의 필요성 - 시간이 지나면 제품 안에 동일한 목적의 색상·간격·타이포그래피 값이 중복되면서 디자인 시스템이 복잡해진다. - Google Maps는 제품에 700개가 넘는 색상이 사용되고 있음을 발견한 뒤, 이를 25개의 색조로 정리했다. - 축소된 색상 체계가 다시 무질서하게 늘어나지 않도록 디자인 토큰을 사용해 색상 팔레트를 문서화하고 배포했다. - 토큰은 색상, 숫자, 문자열, 테두리 반경, 크기, 글꼴 등 반복되는 디자인 결정을 표현하는 데이터다. - 특정 컴포넌트나 구현 방식에서 디자인 속성을 분리하므로 플랫폼에 종속되지 않고 여러 제품과 환경에서 재사용할 수 있다. - 예를 들어 모든 “나무” 요소의 색상을 변경해야 한다면, 개별 요소를 수정하지 않고 하나의 토큰만 바꿔 전체에 반영할 수 있다. ## 디자인 토큰에서 시맨틱 시스템으로 - 토큰은 디자인 결정을 코드나 특정 컴포넌트가 아닌 독립적인 값으로 관리해 일관성과 유지보수성을 높인다. - Salesforce는 2014년부터 여러 플랫폼과 소프트웨어에 동일한 디자인 원칙을 적용하기 위해 토큰을 활용한 사례로 자주 언급된다. - 토큰의 진정한 가치는 값 자체보다 값이 제품 안에서 어떤 역할을 하는지 표현하는 데 있다. - 예를 들어 단순히 `blue-500`처럼 색상 자체를 지정하기보다, `button-background-primary`처럼 사용 목적과 의미를 나타내면 테마나 브랜드가 바뀌어도 구조를 유지하기 쉽다. - 이런 시맨틱 접근은 디자인 시스템을 시각적 스타일 모음이 아니라 제품의 의도와 규칙을 표현하는 체계로 확장한다. ## Figma 변수의 역할 - Figma 변수는 디자인 속성과 프로토타이핑 동작에 재사용 가능한 값을 저장한다. - 색상, 숫자, 문자열 등 다양한 값을 한 곳에서 관리하고 여러 디자인 요소에 적용할 수 있다. - 기존 토큰의 사용 사례를 충족하면서도 값이 실제로 “변할 수 있다”는 점을 강조한다. - 변수는 디자인 시스템의 값을 중앙에서 관리해 반복 작업을 줄이고, 변경 사항을 여러 화면에 일관되게 적용한다. - 단순한 디자인 결정의 기록을 넘어 다음과 같은 기능을 지원한다. - 라이트·다크 모드와 같은 디자인 테마 전환 - 조건에 따른 프로토타이핑 로직 - 여러 플랫폼에 공유할 수 있는 재사용 가능한 값 관리 - 디자인과 코드 사이의 연결 강화 ## 디자인과 개발을 연결하는 기반 - Config 2023에서 Figma는 Dev Mode, 변수, 고급 프로토타이핑 기능 등을 공개하며 디자인에서 구현으로 이어지는 흐름을 강화했다. - 변수는 디자인 시스템이 디자인 파일 안에만 머무르지 않고 코드와 동일한 개념과 값을 공유하도록 돕는다. - 이후 공개된 Code Connect는 개발자가 실제 코드 컴포넌트와 디자인 컴포넌트를 연결하는 방향을 더욱 강화한다. - typography 및 gradient 변수, Library Analytics API 같은 기능은 디자인 시스템의 적용 범위를 넓히고 조직 전체의 사용 현황과 도입을 관리할 수 있게 한다. - 결과적으로 디자인 시스템은 디자이너만 관리하는 라이브러리가 아니라 디자인·개발·제품팀이 함께 사용하는 공통 언어가 된다. ## 실용적인 적용 방향 - 색상이나 간격 값을 무작정 늘리기보다 먼저 제품에서 각 값이 수행하는 역할을 정의한다. - 원시 값과 의미 기반 값을 구분해 관리한다. 예를 들어 `blue-500`과 `text-color-error`를 별도 계층으로 둘 수 있다. - 테마 변경 가능성을 고려해 컴포넌트에 구체적인 색상값을 직접 넣지 않는다. - 디자인 토큰을 코드와 공유할 수 있는 형식으로 관리하고, Figma 변수와 실제 구현 값의 동기화 방식을 마련한다. - 디자인 시스템의 성공 여부를 라이브러리의 크기보다 재사용성, 일관성, 코드와의 연결성, 조직 내 adoption으로 평가하는 것이 바람직하다.

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

프로토타이핑Figma디자인 시스템디자인 토큰+2

figma·2023년 6월 20일원문

Config 2023 다시 보기 (새 탭에서 열림)

Figma는 Config 2023을 통해 단순한 디자인 도구를 넘어 디자인과 개발의 경계를 허물고 전체 제품 개발 팀이 함께 협업할 수 있는 통합 플랫폼으로의 진화를 선언했습니다. 이를 위해 개발자 전용 워크스페이스인 '개발 모드(Dev Mode)'와 코드의 논리를 디자인에 이식하는 '변수(Variables)', 그리고 실질적인 제품 작동 방식을 구현하는 '고급 프로토타이핑' 기능을 새롭게 도입했습니다. 이번 업데이트는 디자인 결과물이 실제 제품 코드로 전환되는 과정을 가속화하고, 팀 간의 소통 방식을 근본적으로 재정의하는 데 목적이 있습니다. ### 개발자 경험을 최적화하는 개발 모드(Dev Mode) * **개발자 전용 워크스페이스:** 무한한 캔버스 내에서 개발자가 작업에 필요한 구조와 기능을 직관적으로 파악할 수 있는 별도의 모드를 제공합니다. * **코드 번역 및 검사:** 디자인 요소를 코드로 더 빠르게 변환할 수 있으며, Jira, GitHub, Storybook과 같은 주요 개발 도구 및 코드베이스와 플러그인을 통해 직접 연결됩니다. * **VS Code 통합:** 'Figma in VS Code'를 통해 개발 환경을 벗어나지 않고도 에디터 바로 옆에서 디자인 파일을 검사하고 협업할 수 있습니다. * **배포 추적:** 어떤 디자인 요소가 프로덕션에 반영되어야 하는지 상태를 추적하여 디자인과 개발 간의 누락을 방지합니다. ### 디자인 시스템의 유연성을 극대화하는 변수(Variables) * **디자인 토큰의 코드화:** 색상, 숫자, 텍스트, 불리언(Boolean) 값을 변수로 저장하여 디자인 시스템을 코드의 언어와 일치시킵니다. * **모드(Modes) 지원:** 라이트 모드와 다크 모드, 혹은 다양한 테마 간의 전환을 변수 값을 통해 손쉽게 토글하며 테스트할 수 있습니다. * **확장성 있는 관리:** 에일리어싱(Aliasing) 및 스코핑(Scoping)을 지원하며, REST API와 플러그인을 통해 변수 생성 및 관리 프로세스를 자동화할 수 있습니다. ### 논리적 흐름을 구현하는 고급 프로토타이핑 * **조건부 로직 및 표현식:** "특정 변수가 X일 때 프레임 2로 이동"과 같은 조건문이나 수학적 표현식을 활용하여 실제 앱과 유사한 복잡한 상호작용을 구현할 수 있습니다. * **효율적인 프로토타입 제작:** 수많은 화면을 직접 연결할 필요 없이 변수를 활용해 동적인 변화를 줄 수 있어 프로토타입 제작 시간이 단축됩니다. * **인라인 프리뷰:** 디자인 편집 화면과 프로토타입 미리보기 화면을 동시에 띄워두고 수정한 내용을 즉각적으로 확인할 수 있어 반복 작업의 효율이 높아졌습니다. ### 워크플로우 개선을 위한 편의 기능(Quality of Life) * **오토 레이아웃 고도화:** 요소가 넘치면 다음 줄로 넘겨주는 '줄 바꿈(Wrap)' 기능과 최소/최대 너비 및 높이 설정 기능이 추가되었습니다. * **글꼴 선택기 업그레이드:** 글꼴 이름을 해당 서체로 미리 볼 수 있는 기능과 검색 및 필터링 기능이 강화되어 원하는 폰트를 더 빠르게 찾을 수 있습니다. * **파일 브라우저 업데이트:** 외부 팀과 공유된 프로젝트나 파일을 더 쉽게 찾을 수 있도록 인터페이스가 개선되었습니다. ### AI 기술을 통한 디자인의 미래 확장 * **Diagram 인수:** AI 기반 디자인 도구를 개발해온 Diagram을 인수하여 Figma 플랫폼 전반에 AI 기능을 통합할 계획입니다. * **창작 보조 및 가속:** AI가 시각적 표현을 돕고 워크플로우를 가속화하며, 누구나 수준 높은 초안을 만들 수 있도록 지원함으로써 디자인의 진입장벽을 낮추고자 합니다. Figma의 이번 업데이트는 디자이너와 개발자가 서로 다른 언어를 사용하는 문제를 해결하는 데 집중하고 있습니다. 개발 모드를 통해 개발자는 디자인 의도를 명확히 파악하고, 디자이너는 변수와 로직을 활용해 실제 제품에 가까운 설계를 할 수 있게 되었습니다. 팀의 생산성을 높이기 위해 현재 베타 버전으로 제공되는 개발 모드를 프로젝트에 적극적으로 도입하고, 기존 디자인 시스템을 변수(Variables) 기반으로 전환하여 다국어나 테마 대응 효율을 높여보시길 권장합니다.

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

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

혁신적인 제품을 만드는 법:

좋은 제품은 명확한 목표에서 출발한다. 관리자는 조직의 내부 목표보다 고객의 문제와 가치에 집중하고, 고객을 개발 과정에 참여시키며, 실행 가능한 아이디어를 선별하도록 팀을 이끌어야 한다. 프로토타입과 체계적인 질문을 활용하면 의사결정을 빠르게 하고, 고객에게 실제 가치를 제공하는 제품에 집중할 수 있다. ## 고객과 OKR을 구분해 설계하기 - 조직의 구조나 부서별 목표를 그대로 제품에 반영하는 ‘조직도 중심 설계’를 피해야 한다. - 좁게 정의된 제품 요구사항이나 국소적으로 최적화된 OKR만 따르면 고객의 실제 문제를 놓칠 수 있다. - 로드맵과 계획을 시각화하면 제품의 가치 제안이 조직 전체에 어떻게 연결되는지 파악하기 쉽다. - 디지털 프로토타입은 아이디어를 최종 형태까지 구체화해 경영진과 빠르게 검토할 수 있게 한다. - 프로토타이핑은 단순한 업무 투명성 확보를 넘어, 해당 해결책이 올바른 문제를 해결하는지 판단하게 해준다. ## 고객을 공동 제작자로 참여시키기 - Ironclad는 고객들이 제품을 예상과 다르게 사용하는 현상을 발견한 뒤, 10~15명의 고객으로 라운드테이블을 구성했다. - 고객 의견은 이후 18개월간의 제품 로드맵에 큰 영향을 미쳤다. - 일부 고객은 아이디어 구상부터 FigJam을 통한 디자인 검토, 베타 테스트까지 참여했다. - 공동 제작은 고객의 전문성을 활용하는 것뿐 아니라 제품 결과에 대한 고객의 관심과 투자도 높인다. - 고객과 함께 만들면 팀은 실제 사용 맥락에서 벗어나지 않고, 고객 역시 제품 방향에 대한 기대와 신뢰를 갖게 된다. ## 아이디어가 너무 많을 때의 세 가지 질문 - 협업 도구가 발전하면서 팀이 짧은 기간에 수십 개의 아이디어를 만들어내는 상황이 생길 수 있다. - Work & Co.는 IBM Research의 R&D 플랫폼 프로젝트에서 몇 주 만에 약 50개의 아이디어를 도출했다. - 모든 아이디어를 고객이나 클라이언트에게 제시할 수 없으므로, 실행 가능성을 기준으로 압축해야 한다. - 다음 세 가지 질문이 아이디어를 현실에 맞게 평가하도록 돕는다. - 이 플랫폼은 왜 존재해야 하는가? - 무엇을 해야 하는가? - 우리는 그것을 어떻게 만들 것인가? - 흥미롭기만 한 아이디어보다 실제로 출시할 수 있는 아이디어를 선택하는 것이 중요하다. ## 아이젠하워식으로 우선순위 유지하기 - 방향을 정한 뒤에는 팀이 핵심 과제에서 벗어나지 않도록 우선순위를 관리해야 한다. - Oura Ring의 매니저는 아이젠하워 매트릭스를 활용하는 전략을 소개한다. - 아이젠하워 매트릭스는 업무를 중요도와 긴급도에 따라 분류해, 무엇을 먼저 처리하고 무엇을 위임하거나 미룰지 판단하는 방식이다. - 제품 개발에서는 고객 가치가 크고 즉시 대응이 필요한 과제에 집중하고, 중요하지 않은 작업이 팀의 시간을 잠식하지 않도록 관리하는 데 활용할 수 있다. 관리자는 아이디어를 많이 만드는 사람보다 고객 문제를 명확히 정의하고, 실행 가능성을 검증하며, 팀의 우선순위를 지켜주는 사람에 가까워야 한다. 고객 인터뷰와 공동 제작, 프로토타입, 세 가지 핵심 질문, 우선순위 매트릭스를 함께 사용하면 조직 목표가 아니라 실제 고객 가치에 기반한 제품을 만들 가능성이 높아진다.

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

프로토타이핑Figma사용자 경험figjam+4

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

리틀 빅 아웃테이크 |

Figma의 30개 이상 소규모 기능 업데이트는 처음 계획한 대로만 구현된 결과가 아니라, 개발 과정에서 발견한 엣지 케이스와 팀의 피드백을 반영해 완성됐다. 다중 선택 검색은 계층 구조를 시각화해 사용자의 혼란을 줄였고, 오버레이 블러는 위치 정보를 전달하는 방식으로 해결했으며, 캔버스 미리보기는 범위를 과감히 줄여 빠르게 출시했다. 이 글은 작은 기능도 실제 사용 맥락과 예외 상황을 깊이 검토할 때 훨씬 나은 사용자 경험으로 이어진다는 점을 보여준다. ## 엣지 케이스에서 출발한 다중 선택 검색 - 기능: 검색 결과에서 `Shift + Click` 또는 `Cmd`(Windows에서는 `Ctrl`)를 사용해 원하는 항목만 여러 개 선택하고 편집·교체할 수 있다. - 기존 Find and Replace 기능을 확장하면 비교적 간단할 것으로 예상했지만, 실제 구현 과정에서 복잡한 문제가 드러났다. - Figma에서는 프레임·컴포넌트·그룹 같은 부모 객체와 그 안의 자식 객체를 서로 독립적으로 선택하기 어렵다. - 검색 결과에 부모와 자식이 동시에 나타나면, 두 번째 항목을 선택하는 순간 의도하지 않은 하위 항목까지 함께 선택될 수 있었다. - 중첩 구조가 많은 파일에서는 어떤 객체가 실제로 선택되는지 파악하기 어려워, 기능은 작동하지만 사용자에게는 버그처럼 느껴졌다. - 해결책으로 검색 사이드바에 시각적 계층 구조를 도입했다. - 자식 항목이 어느 부모에 속하는지 표시 - `Command` 또는 `Shift`를 누른 상태에서 선택될 항목을 미리 강조 - 자동으로 포함되는 간접 선택 항목과 직접 선택한 자식 항목을 구분 - 이 사례에서 엣지 케이스는 부수적인 예외가 아니라, 다중 선택 기능의 핵심 설계를 결정하는 요소가 됐다. ## 팀 피드백으로 해결한 오버레이 블러 - 기능: 프로토타이핑에서 배경 블러가 적용된 오버레이가 실제로 뒤의 콘텐츠를 흐리게 표시한다. - 기존 렌더링 방식은 프레임 바로 아래에 있는 대상을 가져와 블러 처리하는 방식이었다. - 하지만 오버레이는 일반 프레임처럼 바로 아래에 대상이 존재하지 않기 때문에 블러가 안정적으로 렌더링되지 않았다. - 엔지니어 Brandon은 가능한 해결책과 예상되는 문제를 문서로 정리해 팀에 공유했다. - 팀은 오버레이의 위치 정보를 코드에 전달해 어느 영역을 블러 처리해야 하는지 정확히 판단하도록 제안했다. - 이후 오버레이와 해당 프레임의 관계를 명확히 연결하는 데이터를 추가했다. - 그 결과 여러 오버레이가 각자의 위치에 올바르게 그려지고, 서로 겹치는 레이어도 정확하게 합성될 수 있었다. - 이 과정은 특히 새로 합류한 구성원이 자신의 접근 방식을 팀의 검토와 피드백으로 검증하면서 자신감을 얻은 사례이기도 하다. ## 범위를 줄여 완성도를 높인 캔버스 미리보기 - 기능: 디자인 패널의 옵션 위에 마우스를 올리면 설정을 확정하기 전에 캔버스에서 결과를 미리 볼 수 있다. - 초기에는 블렌드 모드와 효과뿐 아니라 다음 기능까지 포함하려 했다. - Boolean 연산 - 컴포넌트 속성 - 폰트 선택기 - 그러나 모든 기능을 한 번에 지원하려 하면 구현 범위와 기술적 복잡도가 크게 증가했다. - 팀은 Figma 편집기에서 드롭다운으로 제공되는 속성을 전수 조사한 뒤, 구현 난이도와 사용자 가치에 따라 우선순위를 정했다. - 최종적으로는 기하 구조를 크게 변경하거나 캔버스 렌더링 방식을 대폭 수정하지 않아도 되는 기능을 우선 구현했다. - 처음에는 기능 수가 적으면 충분한 가치가 없을 수 있다는 우려가 있었지만, 제한된 범위만으로도 미리보기 경험은 충분히 강력하다는 결론에 도달했다. - 작은 기능을 빠르게 출시하려면 모든 경우를 다 지원하기보다, 사용자에게 즉시 가치를 주면서 기술적 위험이 낮은 영역부터 선택하는 것이 효과적이다. ## 작은 업데이트를 만드는 방식 - 30개 이상의 기능은 거대한 단일 프로젝트가 아니라 여러 팀의 작은 개선과 반복적인 의사결정으로 만들어졌다. - 초기 아이디어를 그대로 구현하기보다 실제 사용 상황에서 발생하는 혼란과 실패 가능성을 먼저 확인했다. - 설계와 엔지니어링이 긴밀하게 협업하며 시각적 피드백, 데이터 구조, 구현 범위를 함께 조정했다. - 문서화와 팀 리뷰는 특히 복잡한 문제를 구조화하고, 새로운 구성원이 해결책을 검증하는 데 중요한 역할을 했다. - 결과적으로 “작은 기능”도 사용자의 선택 방식, 렌더링 구조, 프로젝트 범위 같은 세부 사항을 깊이 고려해야 완성도 높은 기능이 된다. 실무적으로는 기능을 설계할 때 정상 동작만 확인하지 말고, 중첩 구조·동시 선택·레이어 순서 같은 엣지 케이스를 초기에 테스트하는 것이 좋다. 동시에 모든 기능을 한 번에 구현하려 하기보다, 사용자 가치가 크고 구조 변경이 적은 범위부터 출시한 뒤 점진적으로 확장하는 접근이 현실적이다.

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

프로토타이핑Figmafigjam사용자 인터페이스+2

figma·2023년 3월 5일원문

메이커를 만나다: 마 (새 탭에서 열림)

Figma의 디자인 매니저 마르신 위치하리(Marcin Wichary)는 150년의 키보드 역사를 다룬 저서 'Shift Happens'를 집필하며, 소프트웨어 개발 방법론인 '프로토타이핑'을 도서 제작 공정에 도입했습니다. 그는 단순히 글을 쓰는 것에 그치지 않고 직접 플러그인을 개발하고 빈티지 하드웨어를 복원하는 등 기술적 탐구를 병행했으며, Figma를 활용해 디자인과 피드백 과정을 혁신적으로 효율화했습니다. 이 프로젝트는 일상의 도구를 깊이 있게 탐구하는 제작자(Maker)의 태도와 현대적인 디자인 도구가 전통적인 출판 방식에 어떻게 새로운 흐름을 만들 수 있는지를 보여줍니다. #### 프로토타입 중심의 제작 방식 - 소프트웨어 개발과 유사하게 '생각하고, 구축하고, 사용해보고, 다시 개선하는' 프로토타이핑 사이클을 반복하며 책을 디자인했습니다. - 원고가 완성되기 전부터 사진을 배치하기 시작했으며, 텍스트와 이미지가 인쇄 프로그램에 자동으로 흐르도록 전용 플러그인과 소프트웨어를 직접 작성했습니다. - 오탈자를 점검하기 전인 초기 원고 단계에서 이미 주문형 인쇄(Print-on-demand)로 프로토타입을 제작하여 실제 물리적인 느낌과 레이아웃의 한계를 테스트했습니다. - 검정색 배경, 선명한 색상, 세밀한 디테일이 포함된 사진 등 '엣지 케이스(Edge cases)'에 해당하는 페이지들을 미리 인쇄해 봄으로써 잠재적인 인쇄 사고를 방지했습니다. #### 기술적 호기심과 제작의 즐거움 - 집필 과정의 번아웃을 방지하기 위해 빈티지 키보드를 역공학하여 현대 컴퓨터에 연결하거나, 피아노를 타자기로 개조하는 등 실험적인 '장난감' 프로젝트를 병행했습니다. - 80년대 키보드에서 주로 쓰였으나 디지털 폰트로 존재하지 않던 'Gorton' 서체를 Figma와 Glyphs를 활용해 직접 복원 및 디자인했습니다. - 타자기 시뮬레이터와 미니 게임 등을 제작하며 프로젝트에 대한 흥미를 유지했고, 이 과정에서 Figma의 폰트 UI 버그를 발견해 본업인 제품 개선에 기여하기도 했습니다. #### Figma를 활용한 디자인 시스템과 협업 - Figma의 오토 레이아웃(Auto Layout)과 플러그인을 활용해 복잡한 도서 레이아웃 작업을 자동화하고 관리했습니다. - 전 세계에 흩어져 있는 3D 렌더러 및 동료들과 Figma 공유 URL을 통해 실시간으로 소통하며, 캔버스 위에 직접 스케치하거나 댓글을 남기는 방식으로 피드백 루프를 단축했습니다. - 무드보드 제작부터 킥스타터 캠페인, 뉴스레터 디자인까지 모든 자산을 Figma에서 관리하며, 공식적인 디자인 시스템 없이도 일관성을 유지할 수 있는 환경을 구축했습니다. #### 피드백 수집의 혁신 - 전통적인 워드 프로세서 방식의 편집에서 벗어나, 지인들이 비밀 URL을 통해 이모지나 짧은 반응을 남길 수 있는 전용 피드백 앱을 직접 개발했습니다. - 피드백을 받는 과정을 하나의 '게임'처럼 만들어 참여자들에게 즐거움을 주는 동시에, 제작자 자신도 글쓰기에서 잠시 벗어나 개발자로서의 뇌를 환기하는 창구로 활용했습니다. 마르신 위치하리의 사례처럼 본업에서 사용하는 기술(소프트웨어 프로토타이핑, 플러그인 개발)을 개인적인 창작 프로젝트에 이식해 보세요. 과정을 세분화하고 각 단계마다 눈에 보이는 결과물을 만들어내는 방식은 거대한 프로젝트를 완수하는 데 실질적인 도움이 됩니다.

프로토타이핑Figmatypographyauto-layout+4

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

피그마의 피드백 선물

피드백은 단순한 지적이 아니라 상황과 관계에 맞게 전달해야 하는 ‘선물’이다. 효과적인 피드백을 위해서는 프로젝트 단계, 팀의 협업 문화, 상대방의 시간대와 업무 방식 등을 고려해야 하며, 의도와 전달 방식이 어긋나면 관계가 악화되고 프로젝트가 불필요한 반복 논의에 빠질 수 있다. 특히 디자인의 완성도에 맞춰 피드백의 범위와 깊이를 조절하는 것이 중요하다. ## 피드백을 전달할 적절한 시점 - 좋은 피드백은 내용뿐 아니라 **언제 전달하느냐**에 따라 효과가 달라진다. - 회사, 팀, 프로젝트, 개인마다 일정과 제약이 다르므로 가장 건설적으로 받아들여질 시점을 선택해야 한다. - 프로젝트 단계에 따라 피드백의 목적을 명확히 해야 한다. - **브레인스토밍**: 다양한 가능성을 확장하는 단계이므로 너무 일찍 범위를 좁히는 피드백은 피한다. - **초기 콘셉트**: 리서치와 데이터를 활용해 선택지를 합리적으로 좁힌다. - **제품 리뷰**: 결과물이 제품 및 비즈니스 목표와 일치하는지 확인한다. - **디자인 크리틱**: 구체적인 UX·비주얼 개선 의견과 제품 간 일관성을 논의한다. - **프로토타입**: 사용성 및 애니메이션에 초점을 맞춘다. - **고해상도 디자인**: 세부 요소를 꼼꼼히 검토해 디자이너가 놓친 부분을 보완한다. - **최종 디자인**: 모든 주요 플로우와 사용 사례가 다뤄졌는지 확인한다. - 피드백을 요청할 때 어떤 종류의 의견이 필요한지 미리 설명하면 참여자들이 논의의 초점을 맞출 수 있다. ## 팀의 피드백 문화에 맞추기 - 협업 중심의 문화는 하루아침에 만들어지지 않으며, 조직의 변화에는 수년이 걸릴 수 있다. - 팀이 피드백 문화를 구축하는 초기 단계라면: - 피드백의 목적과 프로젝트 맥락을 충분히 설명한다. - 중요한 논의를 초기에, 그리고 자주 진행한다. - 피드백을 주고받는 방식은 실제 협업 과정에서 조정될 수 있으며 처음부터 완벽하지 않아도 된다. - 이미 피드백 문화가 정착된 팀이라면: - 검증된 채널과 절차를 활용해 보다 직접적으로 의견을 전달한다. - 팀원들이 익숙한 협업 방식과 커뮤니케이션 규칙을 존중한다. - 팀의 문화 수준에 맞지 않는 방식으로 피드백하면 좋은 의도라도 부담이나 저항으로 받아들여질 수 있다. ## 시간대와 업무 리듬 존중하기 - 다른 시간대에서 일하는 동료에게 이른 아침이나 늦은 밤에 갑작스럽게 메시지를 보내는 일을 피한다. - 팀원마다 근무 시간과 집중이 잘되는 시간이 다르므로 일정과 개인 선호를 파악해야 한다. - 상대방의 시간과 에너지를 존중하고, 자신의 업무 방식과 응답 가능 시간도 명확히 공유한다. - 작은 일정 조율과 기대치 설정만으로도 협업 과정의 마찰을 크게 줄일 수 있다. ## 실용적인 적용 방법 - 피드백 전에 “지금 이 단계에서 어떤 결정을 내려야 하는가?”를 먼저 확인한다. - 의견을 전달할 때 원하는 피드백의 범위와 우선순위를 구체적으로 제시한다. - 초기 단계에서는 가능성을 열어 두고, 후반 단계로 갈수록 실행 가능성·세부 품질·누락된 사용 사례를 집중적으로 검토한다. - 팀의 협업 성숙도와 상대방의 일정에 맞춰 채널, 표현, 전달 시점을 조정한다.

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

프로토타이핑Figma사용자 경험프로덕트 디자인+2

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년 4월 20일·3분 읽기큐레이션 요약

좋은 아이디어는 기억에 남

FigJam의 디지털 와시 테이프는 커뮤니티의 작은 아이디어를 실제 제품 경험으로 발전시킨 사례다. Figma는 와시 테이프의 장식성뿐 아니라 쉽게 붙이고, 떼고, 겹치고, 다시 배치할 수 있는 실용성을 디지털 환경에 구현했다. 24시간 한정 기능으로 시작했지만 사용자들의 폭발적인 사용과 지속 요청을 통해 정식 경험으로 남을 가능성을 확인했다. ## 커뮤니티의 한마디에서 시작된 기능 - 커뮤니티 사용자 May-Li가 “디지털 와시 테이프가 있으면 좋겠다”고 제안한 트윗이 출발점이 되었다. - Figma는 이 아이디어를 바탕으로 Figma와 FigJam 파일을 꾸밀 수 있는 장식용 테이프 기능을 프로토타이핑했다. - 2022년 만우절 이벤트인 April Fun Day를 통해 24시간 동안 한정 공개했다. - 단순한 장식 기능이지만 사용자들이 자신의 파일을 개성 있게 꾸미고, 아이디어를 시각적으로 표현하는 수단으로 활용했다. ## 실제 와시 테이프의 특징 - 와시 테이프는 일본 전통 종이인 와시를 활용한 얇은 마스킹 테이프의 일종이다. - 선물 포장, 스크랩북, 그림, 가구 배치 계획 등 다양한 용도로 사용할 수 있다. - 주요 특징은 다음과 같다. - 손으로 쉽게 찢을 수 있음 - 원하는 위치에 붙였다가 다시 떼어낼 수 있음 - 표면을 손상시키지 않음 - 글씨를 쓰거나 여러 겹으로 붙일 수 있음 - 색상, 패턴, 투명도를 통해 창의적인 표현이 가능함 - 따라서 와시 테이프는 아름다움과 기능성을 동시에 갖춘 일상용품으로 자리 잡았다. ## 산업용 테이프에서 새로운 제품 카테고리로 - 2007년 일본의 산업용 테이프 제조사 Kamoi Kakoshi는 자신들의 마스킹 테이프로 콜라주와 아트북을 만들던 세 명의 여성으로부터 새로운 색상의 테이프를 만들어 달라는 요청을 받았다. - 회사는 이들의 작업 방식에서 기존 산업용 제품의 새로운 가능성을 발견했다. - 이후 ‘mt’라는 이름으로 20가지 색상의 제품을 출시했고, 오늘날의 장식용 와시 테이프가 탄생했다. - 제조사는 단순히 색상만 늘린 것이 아니라 다음과 같은 ‘적당히 강한 접착력’을 발전시켰다. - 벽에 붙여도 페인트를 손상하지 않음 - 손으로 쉽게 찢을 수 있음 - 표면에 글씨를 쓸 수 있음 - 여러 겹으로 겹쳐 붙일 수 있음 - 산업 현장에서만 보던 제품을 사용자들이 전혀 다른 방식으로 활용하면서 새로운 시장과 사용 경험이 만들어진 사례다. ## 디지털 환경에 맞춘 와시 테이프 - Figma 팀은 실제 와시 테이프의 감각을 디지털 인터페이스에 옮기려 했다. - 디지털 테이프 역시 파일 위에서 시각적 포인트를 만들고, 요소를 강조하거나 분위기를 바꾸는 역할을 하도록 설계되었다. - 실제 제품의 핵심인 장식성, 유연성, 재배치 가능성, 가벼운 즐거움을 디지털 오브젝트로 재해석했다. - 프로토타입 공개 후 단 하루 만에 약 224,000개의 ‘테이프 롤’이 사용될 만큼 높은 반응을 얻었다. ## 한정 이벤트에서 지속 기능으로 - 사용자들은 와시 테이프를 스티키 노트와 결합하거나, 파일을 꾸미고, 재미있는 방식으로 활용했다. - 기능이 사라진 뒤에도 사용자들은 테이프를 다시 제공해 달라고 요청했다. - 단순한 만우절 장난으로 기획된 기능이 실제 사용성과 정서적 만족을 모두 제공한다는 점이 드러났다. - Figma는 사용자 반응을 통해 “재미있는 기능”도 충분한 실용성과 제품 가치를 가질 수 있음을 확인했다. ## 실용적인 시사점 제품 아이디어는 반드시 거대한 문제 해결에서만 나오지 않는다. 사용자가 기존 도구를 예상 밖의 방식으로 활용하는 모습을 관찰하고, 그 행동의 즐거움과 효용을 제품에 반영하면 새로운 경험을 만들 수 있다. 특히 기능을 작고 실험적인 형태로 먼저 공개한 뒤 실제 사용량과 사용자 반응을 바탕으로 발전시키는 접근이 효과적이다.

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

프로토타이핑Figmafigjamcollaborative-design+1

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

피그마의 새로운

2021년 12월 Figma 업데이트는 FigJam과 Figma에서 협업과 제작을 더 쉽고 풍부하게 만드는 데 초점을 맞췄다. FigJam에서는 외부 미디어 재생, 동영상·웹캠 녹화, 하이라이터와 지우개 기능이 추가됐고, 모바일 앱에서는 데스크톱 없이도 프로토타입과 파일을 확인·공유할 수 있게 됐다. 결과적으로 아이디어 발상부터 검토, 모바일 테스트까지 작업 흐름이 한층 간소화됐다. ## FigJam에서 풍부해진 미디어 협업 - FigJam 공간에 링크를 붙여 넣는 것만으로 다양한 외부 미디어를 활용할 수 있다. - Vimeo 영상을 재생하고 Spotify 음악을 들을 수 있어 회의나 아이디어 세션에 맥락과 영감을 더할 수 있다. - 새로운 Vimeo 플러그인을 사용하면 Figma와 FigJam 파일 안에서 직접 화면 및 웹캠 녹화를 만들 수 있다. - 녹화 기능은 상태 업데이트, 제품 데모, 사용 방법 안내 등을 공유하는 데 활용할 수 있다. - 실시간 회의뿐 아니라 비동기 협업에서도 미디어를 통해 설명과 의사소통을 보완할 수 있다. ## 아이디어를 강조하고 불필요한 작업을 정리하는 도구 - FigJam 툴바에 **하이라이터**가 추가됐다. - 텍스트나 다른 객체를 강조해 중요한 아이디어가 눈에 띄게 만들 수 있다. - 하이라이트할 때 `Shift` 키를 누르면 곧은 선을 그릴 수 있다. - **지우개** 기능으로 그림의 개별 선을 삭제할 수 있다. - 전체 작업물을 지우지 않고 특정 스트로크만 수정할 수 있어 스케치와 아이디어를 빠르게 다듬을 수 있다. - 브레인스토밍 결과에서 좋은 아이디어를 부각하고, 진행 중인 작업은 정리하는 데 유용하다. ## 모바일에서 프로토타입과 파일 확인 Figma 모바일 앱 업데이트를 통해 모바일 디자이너가 데스크톱에 연결되지 않은 상태에서도 디자인을 검토할 수 있게 됐다. - 데스크톱 없이 프로토타입을 재생할 수 있다. - 프로토타입 재생 중 핫스팟 표시를 켜거나 끌 수 있다. - 데스크톱에서 선택한 프레임을 모바일 기기로 미러링할 수 있다. - Figma 파일과 프로토타입을 모바일에서 공유하고 탐색하며 확인할 수 있다. - FigJam 파일도 모바일에서 공유·탐색·열람할 수 있다. - 팀과 프로젝트를 이동하고 여러 워크스페이스 사이를 전환할 수 있다. - iPhone·iPad용 iOS 앱과 스마트폰·태블릿용 Android 앱에서 이용할 수 있다. ## 업데이트 활용 방법 - 비동기 회의에서는 Vimeo 녹화로 진행 상황이나 데모를 파일 안에 직접 남긴다. - FigJam 브레인스토밍에서는 하이라이터로 핵심 의견을 표시하고 지우개로 불필요한 선을 정리한다. - 모바일 앱을 사용해 실제 기기에서 프로토타입의 화면 전환과 상호작용을 수시로 검증한다. - 세부 변경 사항은 Figma 릴리스 노트에서 확인할 수 있다.

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

프로토타이핑FigmafigjamAndroid+4

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

피그마 프로토타

고해상도 프로토타입은 사용자 테스트, 개발자 핸드오프, 디자인 리뷰에서 실제 사용 경험을 검증하고 팀의 합의를 돕는다. 이 글은 Figma의 최신 프로토타이핑 기능을 활용해 15일 동안 기초 기능부터 복잡한 인터랙션까지 단계적으로 익히는 챌린지를 소개한다. 특히 Smart Animate와 인터랙티브 컴포넌트를 조합하면 연결 작업을 줄이면서도 풍부한 마이크로인터랙션을 구현할 수 있다. ## 프로토타이핑 챌린지의 목적 - 2주 동안 매일 하나의 프로토타이핑 기법을 연습하도록 구성했다. - 기초적인 전환 효과에서 시작해 점차 복잡한 프로토타입으로 발전한다. - 사용자 테스트, 개발자 전달, 디자인 크리틱에 활용할 수 있는 고해상도 프로토타입 제작을 목표로 한다. - Figma Community 파일을 함께 제공해 각 단계의 결과물을 직접 확인하고 실습할 수 있도록 했다. - 실제 참여자들은 지도 인터랙션, 디지털카메라의 확대·축소 및 사진 촬영 애니메이션 등을 제작했다. ## Smart Animate로 자연스러운 전환 만들기 - Smart Animate는 화면 간 레이어의 변화를 자동으로 보간해 자연스러운 애니메이션을 만든다. - 화면 사이에서 대응되는 레이어의 이름을 동일하게 유지해야 올바르게 매칭된다. - 고해상도 프로토타입에서 기본 전환 효과로 활용하기 좋다. - 다른 전환 방식과 함께 사용하면 단순한 화면 이동보다 정교한 전환을 만들 수 있다. ## Smart Animate와 프리셋 전환 조합 - Smart Animate 매칭 레이어는 Slide, Push 같은 기본 전환 효과와 함께 사용할 수 있다. - 화면 전체는 프리셋 전환으로 이동시키고, 일부 요소는 Smart Animate로 자연스럽게 변화시킬 수 있다. - 탭 내비게이션처럼 선택 상태와 콘텐츠 위치가 동시에 바뀌는 인터페이스에 유용하다. - 레이어 구조와 이름을 일관되게 관리하는 것이 안정적인 애니메이션의 핵심이다. ## 인터랙티브 컴포넌트 - 인터랙티브 컴포넌트는 하나의 컴포넌트 세트 안에서 여러 Variant 간 상호작용과 애니메이션을 정의하는 기능이다. - 컴포넌트의 Variant 사이에 프로토타이핑 링크를 연결하면 인스턴스가 프로토타이핑 모드에서 즉시 동작한다. - 버튼, 토글, 체크박스처럼 반복되는 UI 요소에 상태 변화와 마이크로인터랙션을 내장할 수 있다. - 개별 화면마다 링크를 반복해서 연결할 필요가 없어 프로토타입의 크기와 복잡도를 줄인다. ## 중첩 인터랙티브 컴포넌트 - 인터랙티브 컴포넌트를 다른 컴포넌트 안에 중첩하면 더 복잡한 동작을 조합할 수 있다. - 예를 들어 리스트 아이템 내부에 선택, 토글, 확장 등의 상호작용을 포함할 수 있다. - 각 Variant 사이에 필요한 프로토타이핑 링크 수를 줄일 수 있다. - 재사용 가능한 컴포넌트 자체에 동작을 포함하므로 여러 화면에서 일관된 인터랙션을 유지하기 쉽다. ## 모바일 하단 내비게이션 구현 - 첫 4일 동안 배운 Smart Animate, 레이어 매칭, 인터랙티브 컴포넌트, 중첩 컴포넌트를 하나의 모바일 프로토타입에 적용한다. - 인터랙티브 하단 내비게이션을 만들어 탭 선택 상태와 화면 전환을 표현한다. - 여러 화면에 동일한 내비게이션을 배치하더라도 컴포넌트 기반으로 관리해 연결 작업을 줄일 수 있다. - 기본 기능을 독립적으로 익힌 뒤 실제 화면 구조에 통합하는 점진적 학습 방식이 특징이다. ## 실용적인 적용 방법 - 먼저 레이어 이름과 구조를 화면 간 일관되게 정리한 뒤 Smart Animate를 적용한다. - 반복되는 UI 요소는 인터랙티브 컴포넌트로 만들어 상태와 애니메이션을 재사용한다. - 작은 마이크로인터랙션부터 시작해 탭 내비게이션이나 모바일 전체 흐름으로 확장하는 것이 좋다. - 제공된 Community 파일을 단계별로 복제해 직접 수정하면서 기능 차이를 확인하면 학습 효과를 높일 수 있다.

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

프로토타이핑Figmauser-testinginteractive-components+2