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

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

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

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

Figmagraphic-designdesign-componentscolor-palette+2

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

유용한 플러그인으로 디자인

접근성을 디자인 초기부터 반영하지 않으면 시각·운동 능력 등에 제약이 있는 많은 사용자가 제품에서 배제될 수 있다. 이 글은 Figma에서 색상 대비와 키보드 포커스 순서를 점검할 수 있는 네 가지 플러그인을 소개하며, WCAG 기준을 디자인·개발 과정에 적용할 것을 권한다. 접근성 검사를 별도 단계가 아니라 디자인 워크플로의 일부로 만드는 것이 핵심이다. ## 색상 대비와 WCAG 기준 - 텍스트와 배경 사이의 충분한 대비는 다양한 시각 능력을 가진 사용자가 콘텐츠를 읽는 데 필수적이다. - WCAG는 색상 대비를 AA 또는 AAA 등급으로 평가하는 기준을 제공한다. - 소개된 플러그인들은 선택한 두 객체의 색상을 분석해 대비 비율과 기준 충족 여부를 확인한다. - 단순히 색상을 고르는 데 그치지 않고, 실제 텍스트 크기와 배경 조합을 고려해 가독성을 검증할 수 있다. ## Able: 대비 검사와 색각 이상 시뮬레이션 - 선택한 두 객체의 색상 대비를 분석한다. - 선택 영역이 바뀌면 결과도 자동으로 업데이트된다. - 텍스트와 배경 조합을 미리 볼 수 있는 프리뷰를 제공한다. - 다양한 색각 이상 유형에서 색상이 어떻게 보이는지 시뮬레이션할 수 있다. - 텍스트 색상과 배경 색상을 서로 바꿔 비교할 수 있다. - 각 색각 이상 유형별 영향을 받는 인구 비율도 확인할 수 있다. ## Contrast Checker: 대비 비율과 등급 확인 - 선택한 두 객체의 정확한 색상 대비 비율을 표시한다. - 선택된 레이어 중 텍스트 레이어가 있는지에 따라 상황에 맞는 미리보기를 제공한다. - AA/AA+와 AAA/AAA+ 등 여러 접근성 등급별 충족 여부를 보여준다. - 글꼴 크기가 18pt를 초과하는 경우에 적용되는 대비 기준도 별도로 확인할 수 있다. - Sketch 사용자에게 익숙한 Stark의 Figma용 대비 검사 도구다. ## Color Blind: 캔버스에서 보는 색각 이상 결과 - 선택한 디자인 요소가 여러 색각 이상 유형에서 어떻게 보이는지 확인한다. - 단순한 미리보기 대신, 선택한 요소를 복제해 캔버스에 직접 결과물을 생성한다. - 각 복제본은 해당 시각 유형을 나타내는 이름의 그룹으로 정리된다. - 완성된 화면 전체의 색상 체계와 정보 전달 방식이 색각 이상 사용자에게도 충분히 구분되는지 검토하는 데 유용하다. ## Focus Orderer: 키보드 탐색 순서 설계 - 브라우저가 키보드 포커스를 이동시킬 요소와 순서를 디자인에 표시한다. - 요소를 선택해 포커스 지점을 만들고, 캔버스에 순번을 표시할 수 있다. - 플러그인 UI에서 항목을 드래그하면 포커스 순서가 변경되고 캔버스의 번호도 자동으로 갱신된다. - 실제로 모든 요소를 탭 키로 순회하며 포커스 흐름을 테스트할 수 있다. - 디자인 단계에서 키보드 내비게이션을 고려하게 해, 구현 과정에서 접근성 요구사항이 누락되는 것을 줄인다. ## 접근성을 워크플로에 포함하기 - 색상 대비 검사는 시각적 가독성을, 포커스 순서 검사는 키보드 사용성을 다룬다. - 두 영역 모두 개발 완료 후 수정하기보다 디자인 단계에서 문제를 발견하는 편이 효율적이다. - WCAG 문서를 기준으로 플러그인 결과를 해석하고, 실제 사용자 환경에서의 사용성도 함께 검증해야 한다. - Figma 플러그인 API와 개발자 커뮤니티를 활용하면 팀에 맞는 접근성 검사 도구를 직접 만들 수도 있다. 이 플러그인들을 디자인 시스템과 리뷰 과정에 포함하면 접근성을 일회성 점검이 아니라 지속적인 품질 기준으로 운영할 수 있다. 특히 텍스트·배경 대비, 색각 이상 시뮬레이션, 키보드 포커스 순서를 모든 주요 화면에서 반복적으로 확인하는 것이 실용적인 접근이다.

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

Figma접근성JavaScriptwcag+3

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

와이어프레임 제작 방법 |

와이어프레임은 웹사이트나 디지털 제품의 구조와 기능을 빠르게 표현하는 설계 청사진이다. 시각적 장식보다 레이아웃과 사용자 경험에 집중하게 하므로, 팀의 의견과 사용성 조사 결과를 반영하며 아이디어를 반복적으로 개선하는 데 유용하다. 초기에는 단순하게 시작하고, 필요에 따라 시각적 디테일을 단계적으로 추가하는 것이 핵심이다. ## 와이어프레임의 의미와 역할 - 웹사이트나 디지털 제품의 **골격과 구조**를 보여주는 간단한 시각 가이드다. - 최종 디자인의 청사진이지만, 색상·그래픽·세부 스타일을 확정하는 단계는 아니다. - 디자이너뿐 아니라 기획자, 개발자, 이해관계자, 사용자도 이해할 수 있을 만큼 단순해야 한다. - 시각 요소를 최소화하면 색상이나 미적 요소에 매몰되지 않고 다음에 집중할 수 있다. - 기능이 제대로 동작하는가 - 사용자가 서비스를 어떻게 이용하는가 - 아이디어를 어떻게 개선할 수 있는가 - 확정된 결과물이 아니라 사용성 테스트와 이해관계자 피드백을 수집하기 위한 반복 설계 도구다. ## 로우 피델리티 와이어프레임 - 가장 기본적인 형태로, 종이와 펜만으로도 제작할 수 있다. - 보통 흑백 또는 회색조로 구성하며 다음을 중심으로 표현한다. - 페이지 레이아웃 - 콘텐츠의 큰 구조 - 주요 상호작용 - UI 요소와 콘텐츠는 사각형, 삼각형, 원, 선 같은 기본 도형으로 표시한다. - Figma로 제작하면 팀원과 쉽게 공유하고, 변경된 아이디어를 최신 상태로 유지할 수 있다. - 전통적인 디자인 과정에서는 손으로 그린 스케치 다음, 고해상도 목업이나 프로토타입 이전 단계에 해당한다. ## 하이 피델리티 와이어프레임 - 로우 피델리티 단계의 구조를 바탕으로 더 구체적인 시각 요소를 추가한다. - 다음과 같은 요소가 포함될 수 있다. - 브랜드를 나타내는 색상 - 그래픽과 이미지 - 글꼴 스타일 - 실제와 유사한 UI 컴포넌트 - 질감과 그림자 - 실제 이미지와 문구 - 경우에 따라 하이 피델리티 와이어프레임을 별도 단계로 거치지 않고, 로우 피델리티 와이어프레임에서 바로 프로토타입으로 진행할 수도 있다. ## 시각 요소를 단순하게 유지하기 - 와이어프레임의 목적은 완성된 디자인을 꾸미는 것이 아니라 구조와 경험을 검증하는 것이다. - 색상은 흰색, 검은색, 회색 중심의 그레이스케일로 제한하는 것이 좋다. - 타이포그래피는 정보의 위계를 전달하는 용도로 사용한다. - 글꼴은 최대 두 종류로 제한하고, 다음 방식으로 중요도를 구분한다. - 글자 크기 조절 - 굵게 또는 기울임꼴 적용 - 제목과 본문의 시각적 대비 조정 ## 이미지와 그래픽을 도형으로 표현하기 - 실제 이미지나 그래픽을 넣기보다 배치될 위치를 보여주는 단순한 기호를 사용한다. - 이미지 영역은 사각형이나 직사각형 안에 X 표시를 넣어 표현할 수 있다. - 동영상 영역은 박스 안에 재생 버튼 모양의 삼각형을 표시한다. - 이렇게 하면 콘텐츠 자체보다 화면 구성과 배치에 집중할 수 있다. ## 화면 크기와 사용 환경 고려하기 와이어프레임은 창의적인 설계 도구인 동시에 기술적 제약을 검토하는 도구이기도 하다. - **지원 기기** - 데스크톱과 모바일에서 디자인이 어떻게 달라지는지 각각 설계한다. - 반응형 레이아웃에서 콘텐츠와 UI 요소가 어떻게 재배치되는지 확인한다. - **화면 방향** - 세로형과 가로형 화면에서 레이아웃이 적절히 작동하는지 검토한다. - 기기와 방향에 따라 별도의 와이어프레임이나 변형 버전이 필요할 수 있다. - 디자인이 실제로 사용될 장소, 단계, 방식까지 고려하면 초기 단계에서 기술적 문제를 발견할 수 있다. ## 실용적인 적용 순서 - 아이디어를 빠르게 손그림이나 로우 피델리티 형태로 표현한다. - 레이아웃, 기능, 사용자 흐름에 대한 팀 피드백을 수집한다. - 사용성 조사 결과를 반영해 구조를 반복 수정한다. - 구조가 충분히 검증된 뒤 필요한 경우 색상, 이미지, 글꼴, 그림자 등 하이 피델리티 요소를 추가한다. - 협업과 버전 관리를 위해 Figma에서 공유 가능한 형태로 제작하는 것이 효과적이다.

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

Figma사용자 경험프로토타이핑반응형 디자인+2

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

워크플로우 속도를 높여주는

플러그인은 Figma에서 반복 작업을 자동화하고 디자인 데이터를 효율적으로 다루도록 돕는다. 이 글은 플러그인 생태계 출시 직후 주목할 만한 유틸리티 플러그인 5개를 소개하며, 화면 크기 조정부터 컴포넌트 복제·텍스트 편집·유사 레이어 선택까지 다양한 작업을 간소화하는 방법을 설명한다. 또한 단축키를 활용하면 플러그인을 더 빠르게 실행할 수 있다고 강조한다. ## Viewports: 기기 화면 크기 빠르게 확인 - 프레임을 스마트폰 등 일반적인 기기 화면 크기로 변경할 수 있다. - 디자인 요소에 먼저 Figma의 **Constraints**를 설정해야 화면 크기 변경에 따른 레이아웃 변화를 제대로 확인할 수 있다. - 각 뷰포트별로 해당 기기를 사용하는 사용자의 예상 글로벌 시장 점유율을 보여준다. - 이를 통해 어떤 화면 크기를 우선 고려할지 판단할 수 있다. - 플러그인은 별도의 수동 업데이트 없이 새 기능이 배포되면 사용할 수 있다. ## Component Cloner: 컴포넌트와 인스턴스 복제 - 선택한 마스터 컴포넌트만 복제하거나, 해당 컴포넌트의 인스턴스까지 함께 복제한다. - 색상 오버라이드가 적용된 아이콘을 별도로 실험하거나 아이콘 스프라이트를 제작할 때 유용하다. - 컴포넌트와 연결된 여러 인스턴스를 일일이 다시 만들 필요가 없어 반복 작업을 줄여준다. ## Nisa Text Splitter: 텍스트를 개별 객체로 분리 - 한 텍스트 박스에 입력된 여러 줄을 줄바꿈 기준으로 각각의 텍스트 박스로 분리한다. - 분리된 텍스트 객체를 알파벳순 또는 역순으로 정렬할 수 있다. - Figma의 **Smart Selections**와 함께 사용하면 여러 객체의 순서를 편리하게 재배치할 수 있다. - 반대로 여러 텍스트 박스를 하나의 텍스트 객체로 합치는 기능도 제공한다. - 목록, 메뉴 항목, 데이터 샘플처럼 줄 단위 편집이 필요한 작업에 적합하다. ## Find and Replace: 텍스트와 레이어 이름 일괄 변경 - 문서 전체에서 텍스트를 검색하고 다른 문자열로 치환한다. - 캔버스 위의 텍스트뿐 아니라 레이어 이름도 검색·변경할 수 있다. - 대소문자 구분 여부를 설정할 수 있다. - 검색 범위를 문자열의 어느 위치에 적용할지 선택할 수 있다. - 문자열 어디에서나 일치 - 문자열의 시작 부분 - 문자열의 끝 부분 - 전체 문자열이 정확히 일치 - 대규모 문서의 문구 수정이나 카피 변경 시 특히 유용하다. ## Similayer: 조건이 같은 레이어 일괄 선택 - 기준이 될 요소를 선택한 뒤, 원하는 속성을 지정해 동일한 조건의 레이어를 찾아 선택한다. - Figma의 “같은 속성을 가진 항목 모두 선택” 기능을 확장한 방식이다. - 다음과 같은 속성을 조합할 수 있다. - 테두리 반경 - 채우기 - 선 - 그림자 - 여러 속성을 동시에 조건으로 지정할 수 있어, 복잡한 디자인 요소도 빠르게 선별할 수 있다. - 유사한 레이어를 한꺼번에 수정해야 할 때 반복 클릭을 크게 줄여준다. ## 플러그인 실행 단축키 - Mac에서는 `⌘ + /`, Windows에서는 `Ctrl + /`로 메뉴 검색을 연다. - 검색창에 플러그인 이름을 입력한 뒤 키보드만으로 실행할 수 있다. - 직전에 실행한 플러그인은 다음 단축키로 다시 실행할 수 있다. - Mac: `⌘ + ⌥ + P` - Windows: `Ctrl + Alt + P` 반복적인 화면 검증, 컴포넌트 복제, 텍스트 정리, 일괄 수정이 자주 발생한다면 이 플러그인들을 작업 흐름에 맞게 조합해 사용하는 것이 좋다. 특히 플러그인 이름을 메뉴 검색으로 실행하는 습관을 들이면 마우스 조작까지 줄일 수 있다.

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

Figma사용자 경험웹 개발figma-plugins+1

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

Inter의 탄생 | Figma 블

Inter는 컴퓨터 화면과 텍스트 중심의 사용자 인터페이스에서 읽기 쉽도록 설계된 오픈소스 서체다. Figma에서 작은 글씨에 Roboto의 한계를 느낀 Rasmus Andersson이 직접 개발했으며, 2017년 첫 글리프를 공개한 뒤 지속적으로 개선하고 있다. 글자는 단순히 만드는 데 그치지 않고, 다양한 문자 체계와 장기간의 조정이 필요한 5~10년 규모의 프로젝트라는 점이 핵심이다. ## UI용 서체로 시작한 배경 - Figma는 오랫동안 Google의 Roboto를 기본 서체로 사용했다. - Roboto는 제목과 본문을 모두 처리하도록 설계됐지만, Figma처럼 작은 텍스트가 많은 UI에서는 읽기 어려운 한계가 있었다. - Figma 팀은 한 달간 대안을 조사했지만 Roboto가 여전히 가장 적합하다고 판단했다. - 이 경험을 계기로 Rasmus Andersson은 특정 목적 없이 범용적으로 쓰이는 서체가 아니라, 컴퓨터 UI에만 집중한 서체를 만들기로 했다. - Inter는 2017년 8월 첫 글리프가 공개됐고, 이후 계속 업데이트되고 있다. ## 예상보다 훨씬 큰 서체 제작 작업 - Rasmus는 이전에 취미로 서체를 만들거나 Spotify에서 디스플레이용 서체를 제작한 경험은 있었지만, 본문용 대규모 서체는 처음이었다. - 처음에는 완성까지 약 1년이 걸릴 것으로 예상했다. - 그러나 실제로는 완성도 있게 발전시키는 데 5~10년이 걸릴 수 있는 장기 프로젝트임을 깨달았다. - 서체 제작은 글자 모양뿐 아니라 글자 간 간격, 크기 비율, 다양한 굵기와 언어 지원까지 함께 설계해야 하는 작업이다. ## 문자 체계별 설계의 복잡성 - 전 세계에는 널리 인정되는 문자 체계만 150개 이상 존재한다. - 라틴 문자 외에도 그리스 문자, 키릴 문자, 아랍 문자, 한글 등은 글자 구조와 조판 방식이 크게 다르다. - 대문자와 소문자의 개념, 글자 간 간격, 획의 구조가 문자 체계마다 다르기 때문에 하나의 서체 가족으로 모두 지원하는 데는 평생이 걸릴 수도 있다. - Rasmus는 자신에게 익숙한 라틴 문자부터 시작했고, 첫해에 가장 많이 사용되는 라틴 문자 약 200자를 구현했다. ## Roboto를 활용한 초기 확장 - 초기 Inter는 라틴 문자 외의 글자를 빠르게 확보하기 위해 Roboto의 글리프를 가져와 사용했다. - 오랫동안 키릴 문자의 일부와 그리스 문자의 상당수가 Roboto에서 비롯됐다. - 이 때문에 Inter는 한동안 이중 라이선스 방식으로 배포됐다. - 이후 프로젝트가 발전하면서 해당 글리프를 하나씩 Inter의 시각적 스타일에 맞게 다시 제작했다. - 기존 서체를 임시 기반으로 활용한 덕분에 처음부터 모든 문자를 직접 만들지 않고도 빠르게 범위를 넓힐 수 있었다. ## 소문자와 대문자의 비율 - Rasmus는 Roboto의 소문자 x-height와 대문자 높이의 비율을 특히 긍정적으로 평가했다. - 소문자 x와 대문자 X의 높이를 비교하면, 서체마다 대문자와 소문자의 상대적 크기가 크게 다르다. - Roboto는 소문자와 대문자의 크기 차이가 균형 잡혀 있어 작은 화면에서도 안정적인 인상을 준다. - 이러한 비율은 San Francisco, Akkurat, Graphik, Aeonik, Helvetica 등 여러 현대적 그로테스크 계열 서체에서도 공통적으로 나타난다. - Inter 역시 화면에서 텍스트가 또렷하고 일관되게 보이도록 이런 비율과 크기 관계를 중요하게 다뤘다. ## 서체는 지속적으로 발전하는 시스템 - Inter는 한 번 완성해 배포하는 고정된 결과물이 아니라, 새로운 글리프와 언어 지원을 추가하며 계속 다듬는 프로젝트다. - 라틴 문자로 시작하더라도 국제적인 서체가 되려면 그리스어, 키릴 문자 등 다양한 문자를 동일한 디자인 언어 안에 통합해야 한다. - 따라서 오픈소스 공개는 완성의 끝이 아니라, 더 많은 사용과 피드백을 통해 서체를 발전시키는 출발점으로 기능한다. UI나 제품용 서체를 선택할 때는 단순히 글자 모양만 비교하기보다 작은 크기에서의 가독성, 대문자·소문자 비율, 지원 언어, 라이선스와 장기 유지 가능성까지 함께 검토하는 것이 좋다. Inter의 사례는 좋은 UI 서체가 명확한 사용 목적과 지속적인 개선 과정을 통해 만들어진다는 점을 보여준다.

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

Figma오픈 소스typographytypeface-design+2

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

디자인 스프린트 진행

디자인 스프린트는 복잡한 문제를 짧은 기간 안에 팀이 함께 해결하기 위한 방법론으로, 보통 5일 동안 진행된다. 이해, 정의, 스케치, 결정, 프로토타입, 검증의 여섯 단계를 거치며, 빠른 정렬과 사용자 테스트를 통해 아이디어의 실행 가능성을 확인한다. 성공적인 스프린트를 위해서는 진행 자체보다 사전 준비와 적절한 팀 구성이 중요하다. ## 디자인 스프린트의 목적과 구조 - 디자인, 프로토타이핑, 사용자 조사와 테스트를 결합해 큰 문제를 해결한다. - 제한된 기간과 명확한 목표·산출물을 설정해 팀이 공동의 방향에 빠르게 합의하도록 한다. - 일반적으로 다음 여섯 단계로 진행된다. - **Understand**: 문제와 사용자, 기존 데이터를 이해한다. - **Define**: 해결할 핵심 문제와 목표를 구체화한다. - **Sketch**: 다양한 해결 아이디어를 개별적으로 제안한다. - **Decide**: 가장 유망한 아이디어를 선택한다. - **Prototype**: 선택한 아이디어를 검증 가능한 형태로 만든다. - **Validate**: 실제 사용자에게 테스트해 가설을 확인한다. - 새 프로젝트의 시작, 일정이 촉박한 상황, 정체된 제품이나 팀을 다시 움직여야 할 때 활용할 수 있다. ## 구글에서 시작된 디자인 스프린트 - 구글은 조직 내 UX 문화와 디자인 리더십을 강화하기 위해 디자인 스프린트 방법론을 발전시켰다. - 전통적인 UX, IDEO, 스탠퍼드 d.school, 비즈니스 전략, 심리학의 사고방식과 프로세스를 바탕으로 한다. - 기본 프레임워크는 고정된 규칙이라기보다 조직의 문제와 일정에 맞게 수정할 수 있는 유연한 방법이다. ## 명확한 스프린트 브리프 작성 - 브리프에는 다음 내용을 포함해야 한다. - 해결할 문제와 목표 - 기대하는 산출물 - 일정과 진행 방식 - 프로젝트 배경 - 기존 사용자 조사와 관련 데이터 - 스프린트는 한 번에 하나의 큰 과제에 집중해야 한다. - “홈페이지를 더 구매하기 쉽게 만든다”보다 “전환율을 높이기 위해 특정 사용자 흐름을 재설계한다”처럼 답해야 할 질문을 하나로 명확히 표현하는 것이 좋다. - 이미 확보한 정보를 미리 제공하면 스프린트 중 자료를 찾느라 시간을 낭비하지 않을 수 있다. ## 적절한 팀 구성 - 참가자는 보통 5~7명으로 제한한다. - 인원이 많다면 같은 문제를 다루는 소규모 그룹으로 나누는 것이 좋다. - 스프린트 이후 실제 실행을 담당할 사람을 반드시 포함해야 한다. - 일반적으로 다음 역할이 참여한다. - UX 디자이너 - 사용자 연구자 - 제품 관리자 - 개발자 - 주요 의사결정권자 또는 리더십 구성원 - 다양한 직무의 참여는 더 많은 아이디어와 여러 형태의 프로토타입을 만드는 데 도움이 된다. ## 목적에 맞는 일정 설계 - 기본 일정은 여섯 단계의 순서를 따른다. - 팀이 이미 문제 영역을 충분히 알고 있다면 **Understand** 단계에 시간을 적게 배정하고 프로토타이핑에 더 투자할 수 있다. - 팀의 지식 수준, 목표, 전체 일정에 따라 단계별 시간을 조정해야 한다. - 스프린트 기간만큼의 준비 시간을 별도로 확보하는 것이 권장된다. 예를 들어 5일 스프린트라면 준비에도 충분한 시간을 투입해야 한다. ## 시각 자료와 사전 정보 준비 - 현재 웹사이트나 제품 화면의 스크린샷을 준비한다. - 참고할 만한 영감과 경쟁 제품 자료를 수집한다. - 데이터, 기존 사용자 조사, 제품 사용 현황과 관련된 요약 자료를 한곳에 정리한다. - 발표 자료나 보드 등 팀이 진행 중 빠르게 확인할 수 있는 시각 자료로 제공한다. - 사전에 충분한 사용자 조사를 수행하면 팀이 근거 없이 아이디어를 만드는 일을 줄일 수 있다. - 기존 데이터는 사용자가 현재 제품을 어떻게 이용하는지, 어떤 행동 변화를 유도해야 하는지 파악하는 데 활용된다. ## 전문가 발표와 라이트닝 토크 - 외부 전문가나 조직 내 관련 담당자를 초대해 새로운 관점을 제공할 수 있다. - 구글의 방식에서는 이를 **라이트닝 토크**라고 하며, 보통 10~15분의 짧은 발표로 진행한다. - 발표 주제의 예시는 다음과 같다. - 고객지원팀의 고객 조사 결과 - 분석 담당자의 경쟁사 분석 - 제품 관리자의 제품 성과 검토 - 발표자는 미리 섭외해야 하며, 직접 참석이 어렵다면 전화나 화상회의로 참여시킬 수 있다. ## 창의성을 지원하는 환경 조성 - 밝고 참가자가 공간을 자유롭게 바꿀 수 있는 장소를 선택한다. - 가구를 이동하거나 벽면 화이트보드를 활용할 수 있는 공간이 유리하다. - 일주일 내내 같은 장소에 머무르기보다 카페나 공원 등으로 장소를 바꾸는 것도 새로운 사고를 촉진할 수 있다. - 아이스브레이커를 활용하면 참가자들이 서로 편안해지고 창의적인 사고를 시작하는 데 도움이 된다. - 스프린트에 필요한 문구류와 기타 준비물을 미리 확보해야 한다. ## 실용적인 적용 방법 디자인 스프린트를 시작하기 전, 해결할 질문을 하나로 좁히고 필요한 데이터와 발표자를 먼저 준비하는 것이 좋다. 또한 아이디어를 내는 사람뿐 아니라 스프린트 결과를 실제로 구현할 담당자까지 참여시켜야 하며, 정해진 여섯 단계를 조직의 상황에 맞게 조정하는 것이 효과적이다.

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

Figma사용자 경험프로토타이핑design-thinking+3

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

플러그인 비하인드

재키 추이는 Microsoft의 UX 디자이너이자 Figma API와 플러그인 베타 초기 사용자로, 디자이너의 작업을 더 빠르고 효율적으로 만드는 도구를 개발해왔다. 그는 접근성 기능을 만들기 위한 해커톤에서 Figma API를 접한 뒤 플러그인 개발에 매료되었고, 개인 프로젝트를 커뮤니티용 플랫폼으로 확장했다. 이 인터뷰는 디자이너와 개발자의 경계가 가까워지는 흐름과 Figma 플러그인 생태계의 가능성을 보여준다. ## 디자이너이자 도구 제작자가 된 배경 - 어린 시절 LEGO로 무언가를 만들고 발명하는 것을 좋아했던 경험이 UX 디자인과 개발에 대한 관심으로 이어졌다. - UX 디자이너로 일하면서 코딩을 익혀 자신이 설계한 제품을 직접 구현할 수 있게 되었다. - 다른 사람들이 만든 작업을 관찰하고, 서로 다른 아이디어를 연결해 자신의 프로젝트에 적용하는 방식으로 영감을 얻는다. - 디자인과 개발을 함께 수행하며 아이디어가 실제 결과물로 완성되는 과정을 중요하게 여긴다. ## Figma API를 접한 계기 - 2018년 Microsoft OneWeek Hackathon에서 팀원들과 디자인 도구에 접근성 기능을 추가하는 프로젝트를 진행했다. - Figma가 웹 기반으로 만들어졌다는 점에 흥미를 느껴 Figma 플랫폼과 API를 탐색하기 시작했다. - API를 이용해 사용자 동작을 프로그래밍 방식으로 시뮬레이션할 수 있다는 사실을 발견하면서 본격적으로 플러그인 개발에 빠져들었다. - 기능을 하나씩 발견할 때마다 새로운 가능성이 열린다고 느꼈으며, 공식 API의 사용 편의성과 안정성을 높이 평가했다. ## 개발한 Figma 플러그인 - **Find and Replace** - Figma 커뮤니티를 위해 만든 대표적인 플러그인이다. - 디자인 파일 안의 텍스트나 요소를 찾아 일괄적으로 변경하는 작업을 지원한다. - **Paste to Fill** - 복사한 콘텐츠를 디자인 요소의 채우기 영역에 적용하는 도구다. - **Button Resizer** - 버튼의 크기를 보다 쉽게 조정할 수 있도록 돕는다. - 이외에도 Microsoft의 업무와 일반 Figma 사용자 모두에게 유용한 다양한 플러그인을 제작했다. ## Figma Plus로 확장된 개인 프로젝트 - 초기에는 브라우저에서만 동작하는 Chrome 확장 프로그램 형태로 플러그인을 만들었다. - 커뮤니티의 긍정적인 반응을 통해 Figma 데스크톱 앱에서도 사용할 수 있는 도구에 대한 수요를 확인했다. - Mirko Santangelo, Ahmad Al Haddad와 협업해 자신들이 알고 있던 Figma API 지식을 통합하는 플랫폼을 개발했다. - 작은 프로젝트로 시작했지만 다음 요소를 포함한 완전한 시스템으로 발전했다. - 자체 API - 플러그인 스토어 - 플러그인 게시 및 배포 프로세스 - Figma가 공식적으로 플러그인 베타를 시작하자 팀도 베타 프로그램에 참여했다. - 추이는 여러 플러그인 중에서도 역설적으로 이 대규모 시스템 프로젝트인 **Figma Plus**를 가장 자랑스럽게 여긴다. ## 디자인과 개발의 미래 - 앞으로 5년 동안 디자이너와 개발자는 업무 과정에서 더욱 긴밀하게 협업하게 될 것으로 전망한다. - 미래의 디자인 도구는 현재 존재하는 디자인과 개발 사이의 간극을 줄일 것이다. - 디자이너가 기본적인 코딩 역량을 갖추고 직접 도구를 제작하는 흐름이 이런 변화를 촉진할 수 있다. ## Figma 커뮤니티를 위한 개발 - Microsoft에서 Figma가 주요 디자인 도구로 자리 잡았기 때문에, 팀의 업무 흐름을 개선하는 플랫폼 위에서 개발하는 것이 자연스러운 선택이었다. - 내부 업무용 도구를 만드는 데서 멈추지 않고, 더 넓은 Figma 커뮤니티에 공개해 다른 사용자에게도 혜택을 주려 했다. - 2019년 8월 1일부터 추이의 플러그인들이 Figma 커뮤니티에 공개될 예정이었다. 디자이너가 자신의 반복 작업과 불편을 직접 관찰하고 Figma API로 해결책을 구현하면, 업무 효율을 높이는 동시에 커뮤니티 전체에 기여할 수 있다. 이 사례는 디자인 도구를 단순히 사용하는 것을 넘어, 필요한 기능을 직접 만들고 공유하는 방식이 Figma 생태계를 확장한다는 점을 보여준다.

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

Figma사용자 경험접근성plugins+3