figma2025년 3월 12일

eBay가 Figma로 브랜드 (새 탭에서 열림)

eBay는 브랜드와 제품 팀이 따로 관리하던 디자인 시스템을 Figma 중심의 통합 문서 플랫폼인 ‘Evo Playbook’으로 재구축했다. 300쪽이 넘는 Playbook은 접근성, 디자인, 코드 정보를 한곳에 모으고, Figma 변경 사항을 자동 검증·게시해 문서를 살아 있는 업무 흐름으로 만들었다. 핵심은 중앙화된 문서, 라이브러리 메타데이터, Component Status API, Figma 플러그인 자동화다. ## 기존 문서화 방식의 한계 - 디자인 시스템 정보가 여러 Figma 파일에 흩어져 있었다. - 디자이너, 개발자, 접근성 담당자가 각각 별도의 문서를 관리했다. - 디자이너가 Figma의 정적 파일을 수정한 뒤, 별도 티켓을 통해 문서 사이트에 반영해야 했다. - 컴포넌트 상태를 수동 테이블로 관리해 정보가 빠르게 오래되었다. - 외부 에이전시가 만든 기존 Playbook은 실제 eBay의 디자인·개발 업무와 분리되어 유지보수가 어려웠다. ## Evo와 eBay Playbook의 통합 방향 - eBay는 기존 시스템을 부분 수정하지 않고 문서화 파이프라인을 처음부터 다시 설계했다. - 브랜드 가이드, 제품 디자인 시스템, 기술 문서를 별도 사이트가 아닌 하나의 공간에 통합했다. - 2024년 11월 공개된 Evo는 약 30년 된 eBay의 시각 언어를 현대화한 디자인 시스템이다. - 300쪽 이상의 Playbook을 통해 내부 팀과 외부 에이전시가 동일한 기준을 참고할 수 있도록 했다. - 문서를 단순한 참고 자료가 아니라 영감과 사용 경험을 제공하는 제품처럼 설계했다. ## Component Status API로 구현 상태 통합 - eBay는 모든 디자인 시스템 라이브러리의 컴포넌트 상태를 추적하는 내부 API를 만들었다. - Figma 컴포넌트 설명에 컴포넌트 이름과 버전 메타데이터를 기록한다. - API는 다음 라이브러리의 구현 여부와 버전을 통합적으로 확인한다. - Figma 컴포넌트 라이브러리 - 네이티브 라이브러리 - Skin, Marko, React 등 웹 컴포넌트 라이브러리 - Playbook의 컴포넌트 페이지에는 플랫폼별 리소스 링크, 최신 버전, 상태가 표시된다. - 개발자는 자신이 사용하는 프레임워크에 컴포넌트가 존재하는지, Figma 버전 및 문서와 일치하는지 바로 확인할 수 있다. ## Figma 기반 자동화와 게시 - 모든 컴포넌트, 가이드라인, 접근성 안내는 Figma에서 작성하고 수정한다. - eBay는 문서 내보내기 기능을 수행하는 자체 Figma 플러그인을 개발했다. - 플러그인은 변경 내용을 다음과 같이 처리한다. - 문서 구조와 콘텐츠를 추출 - 린팅을 통해 형식과 규칙을 검사 - 유효성을 검증 - CMS에 자동 게시 - 과거에는 문서 업데이트에 며칠이 걸렸지만, 자동화 이후 Figma 수정 사항이 2분 이내에 Playbook에 반영된다. - 개발자가 CMS를 직접 수정할 필요가 없어 문서 업데이트의 진입 장벽이 낮아졌다. ## 브랜드와 제품 조직 사이의 사일로 해소 - OneExperience 팀은 브랜드, 디자인 시스템, 디자인 기술, 콘텐츠를 아우르는 교차 기능 조직으로 구성됐다. - 디자인과 개발 문서가 서로 다른 원천에서 관리되지 않고 동일한 workflow에서 생성된다. - 디자인 시스템 문서가 실제 라이브러리와 자동으로 연결되므로 문서와 구현 사이의 불일치가 줄어든다. - 빠른 업데이트 덕분에 팀들이 문서화를 별도의 행정 업무가 아니라 일상적인 설계 과정의 일부로 받아들이게 되었다. ## 실용적인 적용 시사점 - 디자인 시스템 문서를 정적 웹 페이지로 관리하기보다 실제 설계 도구와 연결된 살아 있는 문서로 운영하는 것이 효과적이다. - 컴포넌트 이름과 버전을 메타데이터로 표준화하면 여러 플랫폼의 구현 상태를 자동으로 추적할 수 있다. - Figma 플러그인, 린터, API를 결합하면 문서 품질 검증과 게시를 자동화할 수 있다. - 브랜드 가이드와 제품 디자인 시스템을 분리하기보다 하나의 소스 오브 트루스로 통합하면 조직 간 협업과 일관성이 향상된다.

figma-pluginsfigmadesign-systemsaccessibility+3

figma2025년 3월 10일

Zine)까지: 피그마 (새 탭에서 열림)

Figma는 화면용 UI 도구를 넘어, 진·언더그라운드 음악·리소그래프 인쇄처럼 물리적 결과물을 만드는 창작 도구로 활용되고 있다. 창작자들은 Figma의 빠른 반복 작업, 캔버스 기반 편집, Auto layout, 플러그인을 이용해 아날로그 진의 거친 감성과 디지털 제작의 효율을 결합한다. 글은 이러한 작업이 온라인 커뮤니티와 실제 만남을 연결하는 새로운 디지털 DIY 문화로 확장되고 있음을 보여준다. ## 진(zine)의 역사와 부활 - 진은 원래 과학소설 팬 잡지에서 시작된 독립 출판물이다. - 1970~1980년대 펑크 문화와 복사기의 보급으로 음악·정치·하위문화 진이 확산됐다. - 1990년대 Riot Grrrl 운동과 함께 진 문화가 정점에 이르렀다. - 2000년대에는 블로그와 웹사이트 형태의 e-zine으로 확장됐다. - 2010년대 이후에는 인쇄물에 대한 관심이 되살아나 진 페스티벌과 진 도서관이 다시 등장했다. - 진은 주류 출판에서 다루기 어려운 커뮤니티와 하위문화를 기록하고 연결하는 매체로 기능해왔다. ## Dance Data Underground Fanzine 제작 - Jesse Pimenta와 Cheyce Batchelor는 브루클린 아파트에서 97쪽 분량의 진을 약 3개월 만에 제작했다. - Jesse의 레이블 Dance Data를 기반으로, 미국 언더그라운드 음악 신과 파티 크루, 아티스트, 프로듀서의 이야기를 담았다. - 흩어지고 빠르게 사라지는 음악 현장을 물리적 기록물로 남기는 것이 중요한 목표였다. - 1990년대 진 특유의 손으로 만든 듯한 분위기와 복사본의 거친 질감을 재현하려 했다. - 각 인터뷰 페이지가 서로 다른 경험처럼 느껴지도록 매우 반복적인 방식으로 디자인했다. ## Figma가 제공한 제작 효율 - 넓은 캔버스에서 전체 작업을 한눈에 확인할 수 있어 페이지 구성과 흐름을 빠르게 조정할 수 있었다. - Auto layout을 활용하면 요소를 다시 배치할 때 큰 인지 부담 없이 레이아웃을 정리할 수 있었다. - 가벼운 인터페이스와 빠른 수정 속도 덕분에 페이지별로 다양한 시안을 실험할 수 있었다. - 디지털 환경에서 작업하면서도 최종 결과물은 복사 진과 유사한 물리적 출판물로 제작됐다. ## 1990년대 복사 진의 시각적 재현 - Jesse는 Archive.org의 `The Magazine Rack`에서 본 레이브 전단, 컴퓨터 뉴스레터, 기술 잡지에서 시각적 영감을 얻었다. - 당시의 사이버펑크적 분위기와 해커 문화를 그래픽 방향의 기반으로 삼았다. - Figma 플러그인을 활용해 아날로그 인쇄물의 질감을 만들었다. - **Noise & Texture**: 거칠고 얼룩진 복사본 같은 표면 효과 적용 - **Photopea**: 노이즈와 threshold 필터를 이용한 이미지 변형 - **Skew Skew**: Xerox로 왜곡된 듯한 비정형 타이포그래피 제작 - 레트로 레이브 전단, 오래된 클립아트, 변형된 글자를 결합해 과거 진의 분위기를 재구성했다. ## 디지털 도구와 실제 커뮤니티의 연결 - Figma는 디지털 화면을 만드는 도구에 그치지 않고 인쇄물, 음반 패키지, 카세트·CD 아트워크 제작에도 사용된다. - Figma의 아시아계·태평양계 미국인 직원 커뮤니티는 AZINE을 제작해 Figma Community에 공개했다. - Dominique Saiegh는 카세트와 CD용 아트 및 패키지를 만든다. - Sebastián Ortega는 온라인 라디오 방송국 SutroFM의 홍보·브랜드 그래픽을 제작한다. - Secret Riso Club은 Figma를 활용해 원격 리소그래프 워크숍을 운영한다. - 이 사례들은 디지털 협업 도구가 물리적 창작물과 지역·문화 커뮤니티를 연결할 수 있음을 보여준다. ## 인쇄 제작 과정의 한계 - 인쇄 품질을 확보하려면 각 페이지를 실제 크기의 4배로 내보낸 뒤, 인쇄용 PDF로 변환하고 최종 문서 크기를 다시 조정해야 했다. - 수천 개의 작은 그래픽 자산 때문에 페이지 내보내기 작업에는 시간이 많이 걸렸다. - 즉, Figma는 디자인과 반복 작업에는 효율적이지만 대규모 인쇄용 파일을 최종 처리하는 단계에서는 별도의 변환·출력 워크플로가 필요하다. Figma를 활용해 진을 만들 때는 디지털 편집의 속도와 협업성을 이용하되, Noise·threshold·왜곡 플러그인으로 물리적 인쇄물의 질감을 보완하는 방식이 효과적이다. 다만 최종 인쇄 전에는 고해상도 출력, PDF 변환, 색상과 파일 용량을 별도로 점검하는 것이 좋다.

figma-pluginsfigmagraphic-designpdf+2

figma2025년 2월 25일

디자인을 포기하지 않 (새 탭에서 열림)

Figma Slides가 플러그인을 지원하면서, 프레젠테이션 제작 과정에서도 Figma의 디자인 확장성을 활용할 수 있게 되었다. 이 글은 이미지·아이콘 수집, 배경 제작, PDF 재활용 등 슬라이드 제작 단계별로 유용한 플러그인을 소개하며, 디자인 품질을 유지하면서 작업 시간을 줄이는 방법을 설명한다. 플러그인은 슬라이드의 시각적 완성도와 스토리텔링을 강화하는 보조 도구로 제안된다. ## Figma Slides와 플러그인 생태계 - Figma Slides는 팀 전체가 사용하기 쉬운 인터페이스에 Figma의 디자인 기능을 결합한 프레젠테이션 도구다. - 기존 Figma와 FigJam처럼 플러그인을 설치해 기능을 확장할 수 있다. - 플러그인은 이미지 검색, 색상·그라디언트 조정, 애니메이션 등 슬라이드 제작의 여러 단계에 활용된다. - 발표 목적에 맞는 시각적 스토리를 더 빠르고 일관되게 구성하는 것이 목표다. ## 아이콘과 일러스트를 활용한 슬라이드 구성 ### IconScout - 수백만 개의 아이콘, 일러스트, 3D 에셋, Lottie 애니메이션, Unicons를 제공한다. - 슬라이드 제작 중 별도의 이미지 검색 과정 없이 필요한 그래픽을 바로 가져올 수 있다. - 사용자 지정 색상 팔레트로 에셋의 색상을 조정할 수 있다. - 역 이미지 검색을 사용해 기존 이미지와 유사한 그래픽을 찾을 수 있다. - 제품 설명, 데이터 시각화, 추상적 개념 표현 등에 적합하다. ## 브랜드에 맞는 배경 만들기 ### Mesh Gradient - 격자 구조의 꼭짓점과 모서리를 직접 편집해 맞춤형 그라디언트를 제작한다. - 편집 결과를 실시간으로 미리 볼 수 있다. - 완성한 그라디언트를 저장하고 다시 업로드해 추가 편집할 수 있다. - 브랜드 색상을 반영한 배경이나 단조롭지 않은 표지·전환 슬라이드를 만드는 데 유용하다. - 분홍, 보라, 주황 등 여러 색상을 자연스럽게 혼합해 시각적 주목도를 높일 수 있다. ## PDF 자료를 편집 가능한 디자인으로 변환 ### PDF.to.design - PDF 파일을 Figma 디자인으로 가져와 편집 가능한 레이어로 변환한다. - PDF에서 텍스트와 이미지를 개별적으로 추출해 슬라이드 구성 요소로 재활용할 수 있다. - 기존 보고서, 문서, 출판물의 일부를 프레젠테이션 자료로 바꿀 때 유용하다. - 파일이 사용자의 로컬 컴퓨터에 비공개로 보관되므로 민감한 정보를 다룰 때도 활용할 수 있다. - PDF 전체를 단순 이미지로 삽입하는 방식과 달리, 변환 후 요소를 직접 수정할 수 있다는 점이 특징이다. ## 발표용 디자인을 다듬는 단계 - 글의 다음 섹션에서는 슬라이드 디자인에 애니메이션을 추가하고, 발표 직전 결과물을 정리·완성하는 플러그인들이 소개된다. - 제공된 본문은 **Jitter를 활용한 애니메이션 제작** 항목의 도입부에서 끝나므로, 해당 플러그인의 구체적인 기능과 이후 추천 도구의 내용은 확인할 수 없다. 실무에서는 먼저 IconScout와 PDF.to.design으로 콘텐츠를 확보하고, Mesh Gradient로 브랜드에 맞는 시각적 분위기를 만든 뒤, 필요한 슬라이드에만 애니메이션을 추가하는 방식이 효율적이다. 플러그인을 많이 사용하는 것보다 발표의 메시지와 일관성을 해치지 않는 범위에서 선택적으로 활용하는 것이 중요하다.

figma-pluginsfigma-slideslottie-animationspdf-import+1

figma2024년 2월 26일

니콜 뵈쳐의 피그 (새 탭에서 열림)

니콜 부에처는 전직 UX·제품 디자이너로서 Figma를 활용해 퀼트를 설계하고, 디지털 디자인의 반복·측정·최적화 방식을 수공예에 적용한다. 그녀는 천을 자르기 전에 퀼트의 약 80%를 Figma에서 완성하며, 색상 조합과 패턴을 빠르게 실험하고 필요한 원단 수량과 재단 순서까지 계획한다. Figma는 창의적인 퀼트 작업을 체계화하면서도, 재료와 시간을 절약하게 해주는 설계 도구가 된다. ## 손으로 만드는 취미와 디지털 설계의 결합 - 니콜은 2021년 팬데믹으로 업무 방식이 바뀌면서 손을 사용하는 새로운 공예를 찾기 시작했다. - Artsy에서 2년 반 동안 제품 디자이너로 일한 경험이 있으며, 이전에도 간단한 봉제 작업은 했지만 퀼트 제작은 미뤄두고 있었다. - 온라인 튜토리얼과 초보자용 패턴을 따라 하며 독학했고, 실력이 늘면서 더 큰 퀼트를 만들게 됐다. - 직접 패턴을 설계할 단계가 되자 익숙한 도구인 Figma를 사용하기 시작했다. ## UX 경험을 바탕으로 한 계획적 제작 - 니콜은 천을 자르기 전에 퀼트 디자인의 약 80%를 Figma에서 완성한다. - UX 디자인과 엔지니어링용 에셋 준비 경험 때문에 즉흥적으로 만들기보다 먼저 구조와 치수를 계획하는 편이다. - 퀼트 제작은 각 조각을 1/4인치 단위로 측정해야 하므로, 정확한 크기 조정이 가능한 Figma가 적합하다. - 스케치나 종이 조각을 직접 옮기는 방식보다 도형의 비율과 배치를 빠르게 수정할 수 있다. ## 색상 라이브러리와 패턴 실험 - 영감은 퀼트 관련 서적과 Instagram에서 얻으며, 전통적인 퀼트 블록을 새로운 패턴으로 변형하는 방식으로 작업을 시작한다. - 이미 가지고 있는 원단을 우선 활용하기 위해 원단 제조사의 색상 견본을 Figma에 모아 색상 라이브러리를 구축했다. - 디자인 파일에서 특정 영역을 선택해 색상이나 패턴을 한꺼번에 바꿀 수 있다. - `Random Colors Fill` 같은 Figma 플러그인을 활용하면 다양한 색상 조합을 빠르게 시험할 수 있다. - 제품 디자인처럼 하나의 퀼트에 대해 수십 가지 버전을 만든 뒤 최종안을 선택한다. ## Figma에서 퀼트 구조 설계하기 - Grid Quilt처럼 격자 구조의 디자인을 Figma에서 먼저 구성한다. - 각 행을 개별적으로 수정하는 대신 Auto Layout을 사용해 여러 행의 배치를 동시에 조정할 수 있다. - 완성된 전체 디자인을 재단과 봉제에 필요한 작은 단위 조각으로 분해한다. - 조각을 어떤 순서로 연결할지까지 시각적으로 확인해 제작 과정을 단순화한다. ## 치수 계산과 원단 낭비 줄이기 - 최종 디자인을 복제한 뒤 사각형과 직사각형 등 원자 단위의 조각으로 나눈다. - `Count Things` 플러그인으로 필요한 조각의 개수를 계산한다. - 예: 청록색 직사각형 189개, 황갈색 정사각형 378개 등 - Figma의 픽셀 크기를 실제 인치 단위와 대응시켜 재단에 필요한 치수를 산출한다. - 봉제선 여유분을 고려해 각 조각의 양쪽에 1/4인치를 추가한다. - 필요한 원단의 총 길이를 계산하고, 조각을 최대한 효율적으로 배치해 불필요한 자투리 원단을 줄인다. - 어떤 조각을 먼저 봉제할지 다시 조정해 전체 작업 단계를 최소화한다. ## 디지털 도구가 공예에 주는 의미 - Figma는 단순한 화면 디자인 도구가 아니라 실제 재료를 다루는 제작 과정의 계획 도구로 활용된다. - 반복적인 시안 제작, 정확한 치수 계산, 색상 관리, 재단 최적화를 하나의 파일 안에서 처리할 수 있다. - 디지털 설계의 효율성이 수작업의 섬세함을 대체하는 것이 아니라, 수작업에 더 많은 시간과 집중력을 투입하도록 돕는다. - 니콜의 사례는 특정 산업을 위해 만들어진 도구도 사용자의 창의적인 방식에 따라 전혀 다른 제작 분야로 확장될 수 있음을 보여준다. 실용적으로는 퀼트처럼 규격과 반복이 중요한 작업을 시작할 때 Figma에서 색상 견본, 실제 치수, 조각 수량, 조립 순서를 먼저 관리하면 시행착오와 재료 낭비를 크게 줄일 수 있다.

figma-pluginsfigmaproduct-designux-design+2

figma2023년 11월 7일

주목하고 좋아하게 (새 탭에서 열림)

피그마 Creator Fund는 커뮤니티를 위해 무료 위젯·플러그인·템플릿 등을 만드는 창작자를 지원하며, 13명에게 약 30만 달러를 지원했다. 이 글은 그중 실용적이고 어려운 문제를 해결한 프로젝트들을 소개하고, 창작자가 명확한 비전과 시각 자료를 바탕으로 자신이 관심 있는 아이디어를 발전시키라고 권한다. 제공된 본문에는 세 프로젝트 중 **Figma to Code** 사례가 중심적으로 포함되어 있다. ## Creator Fund의 목적과 성과 - Figma Community에서 누구나 사용할 수 있는 무료 리소스 제작을 지원한다. - 2023년 3월 시작 이후: - 수백 건의 지원서를 접수했다. - 9개국 13명의 창작자에게 약 30만 달러를 지원했다. - 디자인 시스템 튜토리얼, Figma 개발자 플랫폼 학습 플러그인 등 다양한 결과물이 나왔다. - Figma는 단순히 흥미로운 프로젝트보다 다음과 같은 프로젝트를 선호한다. - 해결하기 어려운 문제를 다루는 프로젝트 - 사용자의 시간을 절약하는 실용적인 도구 - 커뮤니티 전체가 무료로 사용할 수 있는 리소스 ## Creator Fund 지원서 작성 시 고려할 점 - 만들고 싶은 것이 무엇인지 명확한 비전을 제시해야 한다. - 몇 문장으로 급하게 작성하기보다 아이디어와 목표를 충분히 구체화해야 한다. - 추가 설명을 요청받을 수 있으므로 시각 자료를 준비하는 것이 좋다. - 심사위원이 원하는 것을 추측하기보다 자신이 실제로 관심 있는 문제를 선택해야 한다. - 지원 프로그램은 단순한 자금 제공을 넘어, 창작자가 프로젝트를 완성하도록 돕는 역할을 한다. ## Figma to Code: 디자인을 코드로 변환 - 브라질 쿠리치바의 Bernardo Ferrari가 만든 프로토타이핑 플러그인이다. - Figma 레이아웃을 다음 형식의 코드로 변환한다. - HTML - Tailwind - Flutter - SwiftUI - 디자인 시안을 실제 프론트엔드 코드로 빠르게 옮길 수 있어 프로토타이핑과 초기 개발 과정을 단축한다. - 디자인을 기반으로 제품을 만들고 사업화하려는 창작자에게 특히 유용하다. ## 코로나19 프로젝트에서 시작된 플러그인 - Bernardo는 코로나19 확산 정보를 제공하는 브라질 지역 웹사이트의 유지보수를 맡으며 플러그인을 구상했다. - 웹 개발 경험이 2015년 이후 거의 없었기 때문에 Figma에서 디자인한 화면을 직접 코드로 재현하는 방식으로 작업했다. - 기존 디자인-코드 변환 플러그인에는 다음과 같은 한계가 있었다. - 코드 생성 속도가 느림 - 여러 단계를 거쳐야 함 - 전체 기능을 사용하려면 유료 결제가 필요함 - Figma API 지원 범위가 좁고 오토 레이아웃 같은 기능이 빠짐 - 하나의 언어나 프레임워크만 지원함 - 반응형 디자인과 접근성을 충분히 고려하지 않음 - 이를 해결하기 위해 약 두 달 동안 플러그인을 개발했고, 2020년 7월 출시했다. ## Creator Fund를 통한 기능 개선 - 출시 후 몇 년 동안 Figma와 웹 프레임워크가 크게 바뀌었지만, 플러그인은 이를 따라가지 못했다. - 초기 버전은 다음과 같은 제한이 있었다. - 패딩을 수직·수평 방향으로만 설정 가능 - 오토 레이아웃에서 `min`과 `fixed` 정도만 지원 - Creator Fund 지원을 계기로 플러그인을 유료화하지 않고 대대적으로 개선할 기회를 얻었다. - Figma의 새로운 Dev Mode를 지원하는 작업도 진행했으며, 2023년 Config에서 업데이트를 공개했다. - 지원금은 기존 프로젝트를 유지하는 데 그치지 않고, 최신 Figma 기능과 개발 환경에 맞춰 제품을 발전시키는 촉진제가 되었다. ## 실용적인 시사점 - 디자인-코드 변환 도구는 단순한 코드 생성뿐 아니라 반응형 레이아웃, 접근성, 최신 Figma API 지원까지 고려해야 한다. - 무료 도구를 지속적으로 유지하려면 개발 비용과 기능 업데이트를 지원하는 구조가 필요하다. - Creator Fund에 지원하려는 창작자는 명확한 문제 정의, 구체적인 해결 방법, 실제 사용자가 얻는 이점을 함께 제시하는 것이 좋다. - 제공된 글 본문은 Figma to Code 사례 중간에서 끝나므로, 나머지 두 프로젝트의 구체적인 내용은 포함되어 있지 않다.

figma-pluginsfigmadesign-to-codehtml+3

figma2021년 11월 10일

제작 비하인드: 개발 (새 탭에서 열림)

개빈 맥팔랜드는 사용자들이 겪는 불편에서 아이디어를 얻어 Figma 플러그인과 FigJam 위젯을 개발해 왔다. 대표작인 Table Creator와 테이블 위젯은 FigJam을 떠나지 않고 표 데이터를 생성·관리하도록 돕는다. 그는 단순한 API 실험에서 출발했지만, 실시간 협업과 대규모 데이터 처리 같은 문제로 관심을 확장하며 도구가 팀의 생산성과 협업을 높여야 한다고 강조한다. ## 사용자 문제에서 출발한 개발 - 개빈은 사용자 중심 디자인을 바탕으로 기업의 디지털 전환을 돕는 프리랜서 디자인 컨설턴트다. - 친구와 가족의 웹사이트를 제작하던 경험에서 시작해, 새로운 기술과 작업 방식을 꾸준히 시도해 왔다. - 트위터에서 “Figma에서 표를 더 쉽게 만들고 싶다”는 요청을 본 것이 플러그인 개발의 계기가 됐다. - Figma의 `Rectangle Creator` 예제를 수정해 표 생성 기능을 만들었고, 이를 **Table Creator**라는 첫 플러그인으로 출시했다. - 해당 플러그인은 수만 명이 사용할 정도로 확산됐다. ## FigJam용 테이블 위젯 - 첫 플러그인 개발 경험을 바탕으로 FigJam용 테이블 위젯을 제작했다. - 위젯의 주요 기능은 다음과 같다. - 행과 열 추가 - 데이터 가져오기 - 열 기준 정렬 - 표의 디자인과 구조 조정 - 별도의 도구로 이동하지 않고 FigJam 작업 공간에서 표 데이터를 바로 확인하고 활용할 수 있도록 설계됐다. - 디자인 작업, 협업 회의, 데이터 정리 등 표 형식의 정보를 사용하는 다양한 팀을 대상으로 한다. ## 예제 코드로 시작한 개발 방식 - 처음에는 FigJam 위젯의 `notepad` 예제를 수정하며 API 동작을 단계적으로 익혔다. - 간단한 변경을 반복하면서 위젯의 구조와 동작 방식을 파악했다. - 기존에 익숙하지 않았던 JSX 코드도 개발 과정에서 학습했다. - 기본적인 사용법을 이해한 뒤 행과 열을 표시하고, 여러 레이아웃과 디자인을 실험했다. - 완성된 설계에서 시작하기보다 작은 프로토타입을 빠르게 수정하는 방식으로 기능을 발전시켰다. ## 단순한 기능에서 협업 문제로 확장 - 처음에는 위젯 API를 익히기 위한 연습 프로젝트였지만, 팀 협업을 개선할 수 있는 도구로 발전했다. - 여러 사용자가 같은 표를 동시에 편집할 때 발생하는 문제에 관심을 갖게 됐다. - 특히 다음과 같은 과제가 중요하다고 보았다. - 다른 사용자가 같은 표를 편집 중임을 어떻게 표시할 것인가 - 실시간 멀티플레이어 상호작용을 어떻게 설계할 것인가 - 대량의 데이터를 다루면서도 인터페이스가 느려지지 않게 하려면 어떻게 해야 하는가 - 시각적 디자인과 기술적 구현을 함께 고민해야 한다는 점이 개발의 매력으로 작용했다. ## 영감과 개발자 커뮤니티 - 영감은 사람들이 디자인 과정에서 어떤 부분을 어렵게 느끼는지 관찰하는 데서 얻는다. - Friends of Figma Slack 그룹에서 사용자들의 요구와 작업상의 불편을 파악한다. - 플러그인 개발자 커뮤니티에도 적극적으로 참여하며 다른 제작자들과 아이디어와 개선 방법을 공유한다. - 사용자 피드백과 개발자 간 협업을 통해 실제 업무 문제를 해결하는 기능을 찾으려 한다. ## 생산성과 협업을 위한 도구 - 위젯을 사용하는 사람들이 더 생산적으로 일하고, 중요한 문제에 집중하기를 기대한다. - 개인의 작업 속도 향상뿐 아니라 팀원 간 협업을 더욱 긴밀하게 만드는 것이 목표다. - 개빈에게 좋은 도구란 기능을 추가하는 데 그치지 않고, 사람들이 일상적으로 겪는 문제를 함께 해결하도록 돕는 도구다. - 이후에도 Figma 플러그인인 **Node Decoder**를 만드는 등 새로운 개발 작업을 이어가고 있다. 사용자들이 반복적으로 겪는 불편을 관찰하고, 작은 예제에서 출발해 실제 협업 환경에 필요한 기능으로 확장한 점이 이 사례의 핵심이다. Figma·FigJam 플러그인을 개발할 때도 기능 자체보다 사용자의 작업 흐름, 실시간 협업, 데이터 규모와 성능을 함께 고려하는 것이 중요하다.

figma-pluginsfigmafigjamreal-time-collaboration+3

figma2021년 8월 23일

FigJam에 도입된 오픈 플랫폼의 (새 탭에서 열림)

FigJam은 Figma의 개방형 플랫폼을 확장해 플러그인과 위젯을 누구나 만들 수 있도록 지원한다. 플러그인은 반복 작업과 데이터 처리를 자동화하고, 위젯은 투표·설문·게임처럼 여러 사용자가 동시에 상호작용하는 협업 경험을 제공한다. 두 API 모두 JavaScript·HTML 또는 React 지식을 바탕으로 쉽게 시작할 수 있도록 설계되었다. ## Figma 플러그인에서 FigJam으로 확장 - Figma는 약 2년 전부터 플러그인을 통해 외부 데이터 연동, 워크플로 자동화, 디자인 프로세스 개선을 지원했다. - 핵심 원칙은 “웹사이트를 만들 수 있다면 플러그인도 만들 수 있어야 한다”는 것이다. - 따라서 기본적인 JavaScript와 HTML 지식만으로도 플러그인 개발을 시작할 수 있도록 API의 진입장벽을 낮췄다. - FigJam에도 같은 개방형 플랫폼 원칙을 적용하되, 협업 중심의 사용 사례를 추가로 고려했다. ## 플러그인과 위젯의 역할 차이 - **플러그인** - 개인 또는 팀의 작업 흐름을 자동화한다. - CSV 데이터를 스티키 노트 격자로 변환하거나, 스티키 노트에 태그를 붙이는 작업 등을 처리할 수 있다. - 보드의 객체를 정리·분석하거나 외부 콘텐츠를 가져오는 데 적합하다. - **위젯** - FigJam 보드에 직접 배치해 여러 사용자가 함께 조작하는 인터랙티브 객체다. - 투표, 설문, 게임 등 협업형 기능을 구현할 수 있다. - 사용자가 보드에 드래그 앤 드롭해 사용할 수 있다. ## React 기반의 선언형 위젯 API - 위젯 API는 플러그인 API와 달리 선언적·함수형 방식으로 설계되었다. - `<Frame />`, `<Rectangle />`, `<Text />`, `<SVG />` 같은 컴포넌트로 위젯의 화면 구조를 정의한다. - 클릭 이벤트와 같은 사용자 상호작용에 임의의 코드를 연결할 수 있다. - FigJam의 기본 객체처럼 인라인 속성 메뉴도 제공할 수 있다. - React 컴포넌트와 유사한 구조를 사용하며, 컴포넌트 속성은 CSS의 레이아웃·스타일 속성과 비슷하다. - 예시 카운터 위젯은 다음 방식으로 동작한다. - `useSyncedState('count', 0)`으로 여러 사용자에게 동기화되는 상태를 만든다. - 사용자가 숫자를 클릭하면 `setCount(count + 1)`을 호출해 값을 증가시킨다. - `Frame`으로 자동 레이아웃과 패딩을 지정하고, `Text`로 현재 값을 표시한다. - `widget.register(SimpleCounter)`로 위젯을 등록한다. ## FigJam 플러그인의 주요 활용 분야 ### 보드 정리와 인사이트 도출 - 보드의 객체를 체계적으로 정리하고 분석할 수 있다. - 스티키 노트를 색상별로 정렬하거나 카테고리용 태그를 추가할 수 있다. - 스티키 노트의 내용을 분석해 워드 클라우드처럼 주제를 시각화할 수 있다. - 투표 수를 자동으로 집계하는 스탬프 카운터 플러그인도 활용 사례로 제시된다. - 텍스트를 입력하면 여러 개의 스티키 노트를 자동 생성하는 플러그인도 소개된다. ### 반복 작업 자동화 - 맞춤법 검사, 찾기 및 바꾸기 같은 수작업을 줄일 수 있다. - 동일한 스타일의 스티키 노트 100개를 한 번에 만드는 등 반복적인 작업을 자동화할 수 있다. - 사용자는 여러 단계를 직접 수행하는 대신 몇 번의 클릭만으로 작업을 완료할 수 있다. - Figma에서 사용되던 맞춤법 검사 플러그인을 FigJam으로 확장하는 사례가 언급된다. ### 콘텐츠 라이브러리 연동 - 외부 서비스나 라이브러리의 콘텐츠를 FigJam 보드로 가져올 수 있다. - 아이콘, 이모지, 회사 로고 등을 빠르게 삽입하는 플러그인을 만들 수 있다. - Icons8, Material Design, Iconify, Brandfetch 등 기존 Figma 콘텐츠 플러그인의 FigJam 확장이 사례로 제시된다. - 이를 통해 FigJam 사용자는 별도의 검색·복사 과정 없이 보드 안에서 필요한 시각 자료를 활용할 수 있다. ### 사용자 맞춤 설정 - 사용자가 원하는 색상, 폰트, 텍스트 스타일 등을 선택할 수 있는 기능도 플러그인 활용 분야로 제시된다. - FigJam은 기본적으로 폰트와 색상 체계를 단순하게 유지하지만, 사용자 요구에 따른 커스터마이징 수요가 존재한다. ## 실용적인 시사점 FigJam에서 자동화가 필요하면 플러그인을, 여러 사람이 동시에 조작하는 기능이 필요하면 위젯을 선택하는 것이 적합하다. 특히 React에 익숙한 개발자는 FigJam 레이어와 CSS와 유사한 컴포넌트 구조를 활용해 비교적 빠르게 인터랙티브 협업 도구를 만들 수 있다.

figma-pluginsfigjamreactjavascript+4

figma2021년 5월 16일

메이커 위크 내부 살펴보기 (새 탭에서 열림)

Figma의 Maker Week는 단순한 해커톤이 아니라, 모든 직군의 구성원이 본업을 잠시 벗어나 창의성과 협업을 실험하는 사내 메이커 축제다. 기술 전문성이 없어도 참여할 수 있도록 설계해 팀과 지역, 직무를 넘나드는 아이디어 교류와 공동체 의식을 강화한다. 2018년 이후 수백 개 프로젝트가 만들어졌고, 그중 일부는 Auto Layout·인터랙티브 컴포넌트·플러그인·FigJam 같은 실제 제품과 문화로 발전했다. ## 메이커 문화의 의미 - Figma는 주간 전체 회의인 ‘FigNation’에서 구성원에게 자신이 어떤 방식으로 메이커인지 공유하도록 한다. - 메이커는 예술가나 제작자처럼 특정 정체성을 가진 사람만을 뜻하지 않는다. - 큐레이션, 교육, 문제 해결 등 각자에게 자연스러운 방식으로 창의성을 표현하는 것도 메이커 활동으로 본다. - 이를 통해 구성원은 창작에 대한 심리적 장벽을 낮추고 자신의 방식으로 회사에 기여할 수 있다. ## Maker Week의 운영 방식 - 1년에 두 번, 구성원들이 일상적인 업무를 잠시 멈추고 혁신과 교류에 집중한다. - 엔지니어링·제품·디자인 중심의 일반적인 해커톤과 달리, 모든 직군·제품 영역·시간대의 구성원이 참여한다. - 기술적 전문성은 참여 조건이 아니며, 비기술 직군도 프로젝트를 제안하고 실행할 수 있다. - 목표는 회사의 가치에 따라 대담한 아이디어를 시도하고, 서로 연결되며, 사업·커뮤니티·조직문화에 자신의 흔적을 남기는 것이다. - 예를 들어 채용 담당자는 후보자에게 팀을 소개하는 직원 야구 카드를 만들고, 인턴은 구성원을 알아가는 ‘Name That Figmate’ 게임을 제작했다. - 데이터 과학자는 베이킹 수업을 활용해 화학 기초를 가르치기도 했다. ## 해커톤을 넘어선 효과 - 직무와 전문 영역이 다른 구성원 사이에서 아이디어가 교차하는 ‘크로스 폴리네이션’이 일어난다. - 구성원들이 회사가 만드는 결과물에 대해 더 큰 공동 소유 의식을 갖게 된다. - 각자가 제품과 조직을 만드는 과정에서 어떤 역할을 하는지 이해하게 된다. - 2018년부터 다섯 차례 진행되었으며 수백 개의 프로젝트가 만들어졌다. - 일부 프로젝트는 실제 외부 제품으로 출시되었다. - Auto Layout - 인터랙티브 컴포넌트 - Figma 플러그인 - Figma의 격리 기간 뮤지컬 등 조직문화를 보여주는 프로젝트 - 여러 Maker Week 프로젝트가 축적된 결과로 FigJam이 탄생했다고 볼 수 있다. ## 다양한 프로젝트 사례 ### 사용자 공감 카드 - 리서치, 세일즈 지원, 브랜드 디자인 구성원이 함께 제작했다. - 다양한 페르소나와 상황을 조합해 사용자의 입장에서 문제를 바라보도록 돕는다. - 구성원이 사용자가 겪는 어려움을 구체적으로 상상하고, 제품 설계에 공감적 관점을 적용하게 한다. ### Figma in 3D - 소프트웨어 엔지니어와 제품 지원 담당자가 협업했다. - Figma 캔버스의 레이어를 화면 밖으로 돌출시켜 3차원 공간처럼 보여준다. - 마우스로 화면을 회전하며 Figma를 3D 지도처럼 탐색할 수 있는 확장 기능이다. - 기존 인터페이스를 다른 공간적 관점에서 실험한 사례다. ### 사용자 협업 데이터 시각화 - 데이터 과학과 엔터프라이즈 세일즈 구성원이 제작했다. - Mode를 사용해 특정 회사 도메인 안에서 여러 국가의 사용자들이 어떻게 협업하는지 지도 형태로 시각화했다. - 지역과 시간대가 다른 팀들이 실제로 어떻게 연결되는지 파악할 수 있다. - 데이터 분석과 영업 인사이트를 결합한 프로젝트라는 점이 특징이다. ### Figma 속 기계식 키보드 - 글에서 소개되는 Maker Week 프로젝트 중 하나로, Figma라는 디지털 도구 안에서 기계식 키보드라는 물리적·개인적 취향을 표현하려는 시도로 제시된다. - 이 사례 역시 Maker Week가 제품 기능뿐 아니라 구성원의 관심사와 문화를 실험하는 장이라는 점을 보여준다. ## 실용적인 시사점 Maker Week의 핵심은 짧은 기간에 결과물을 많이 만드는 데 있지 않다. 조직 전체가 직무 장벽 없이 실험하고, 구성원이 사용자·동료·제품을 새로운 관점에서 이해하도록 만드는 데 있다. 따라서 유사한 프로그램을 운영하려면 기술 직군에 한정하지 않고, 참여 시간 보장·자유로운 주제 선택·실험 결과의 실제 적용 기회를 함께 제공하는 것이 중요하다.

figma-pluginsfigmafigjamdata-visualization+1

figma2020년 4월 8일

개방형 플랫폼의 확장: (새 탭에서 열림)

Figma는 사용자의 데이터가 특정 서비스에 갇히지 않아야 한다는 철학을 바탕으로 개방형 플랫폼과 외부 도구 연동을 확장해 왔다. 이 글에서는 Figma에서 협업 디자인을 진행한 뒤 Framer Web로 파일을 가져와 더 표현력 있는 프로토타입을 제작할 수 있는 통합 기능을 소개한다. 결론적으로 Figma는 모든 기능을 독점하기보다 다양한 전문 도구와 연결되어 사용자가 자신의 디자인 워크플로를 자유롭게 구성하도록 하는 방향을 강조한다. ### 데이터 잠금을 피하는 개방형 플랫폼 - Figma는 창립 초기부터 사용자가 자신의 데이터를 서비스 안에 가둬두지 않아야 한다고 주장했다. - 웹 기반으로 서비스를 구축하고, 외부 개발자가 활용할 수 있는 API를 제공한 것도 이러한 철학의 일부다. - 2018년 Figma API 공개 이후 Uber와 GitHub 같은 기업은 Figma 파일 데이터를 사내 도구로 가져와 활용했다. - 일부 사용자는 Figma를 콘텐츠 관리 시스템(CMS)처럼 사용하기도 했다. - 플러그인 API를 통해 개발자가 데이터를 Figma로 가져오거나 외부로 내보내는 자동화 도구를 만들 수 있게 했다. ### 커뮤니티 피드백으로 방향을 수정한 API 전략 - Figma는 생태계 확장을 위해 Sketch 변환기를 만드는 API 챌린지를 개최하고 상금을 제공하려 했다. - 그러나 커뮤니티는 이 방식이 디자이너의 작업을 무상으로 활용하는 ‘스펙 워크’처럼 보일 수 있다고 지적했다. - Figma는 피드백을 받아 해당 계획이 적절하지 않았음을 인정하고 철회했다. - 이는 개방성을 추구하더라도 개발자와 디자이너 커뮤니티의 이해관계 및 작업 가치를 고려해야 한다는 사례로 제시된다. ### 어떤 디자인 워크플로에도 맞는 생태계 - Figma 하나로 브레인스토밍, 와이어프레임, 디자인, 프로토타이핑, 사용자 조사, 핸드오프까지 수행하는 사용자도 있다. - 하지만 고급 프로토타이핑이나 개발자 핸드오프처럼 특정 영역에서는 전문 도구가 더 적합할 수 있다. - 예를 들어 일부 고객은 Figma보다 Zeplin의 개발자 핸드오프 방식을 선호한다. - Figma는 모든 기능을 직접 제공하려 하기보다, 외부 파트너와 협력해 각 도구의 강점을 연결하는 전략을 택한다. - 사용자가 선호하는 도구를 선택하고 필요에 따라 오갈 수 있도록 하는 것이 핵심이다. ### Framer Web에서 Figma 파일 프로토타이핑 - Framer Web의 Figma 임포터를 이용하면 Figma 파일을 Framer Web로 가져올 수 있다. - 디자인 팀은 Figma에서 실시간 협업으로 화면을 설계한 뒤, Framer Web에서 더 복잡하고 표현력 있는 상호작용을 구현할 수 있다. - 이를 통해 Figma는 협업 디자인에, Framer는 고급 프로토타이핑에 집중하는 역할 분담이 가능해진다. - 당시 Framer Web는 베타 단계였으며, 사용자는 대기자 명단에 등록해야 했다. - Figma는 연동 방법을 안내하는 별도 문서도 제공했다. ### 디자인 기술 스택 전반으로 확장되는 통합 - 프로토타이핑 및 사용자 테스트: - Flinto - Principle - ProtoPie - Maze - 개발자 핸드오프 및 문서화: - Avocode - Storybook - ZeroHeight - Zeplin - 협업과 커뮤니티 연계: - Coda - Dribbble - Dropbox - Jira - Notion - Slack - Trello - Figma는 향후에도 여러 파트너와 새로운 통합 기능을 출시하고, 사용자가 원하는 연동에 대한 의견을 수렴하겠다고 밝혔다. Figma를 중심 도구로 사용하되 모든 작업을 Figma 안에서 끝내려 하기보다, 목적에 맞는 전문 도구와 연결하는 방식이 효율적이다. 특히 협업 디자인은 Figma에서 진행하고, 고급 인터랙션과 프로토타입은 Framer Web 같은 도구로 분리하면 각 서비스의 장점을 활용할 수 있다.

figma-pluginsfigmaprototypingdesign-collaboration+3

figma2020년 3월 10일

플러그인으로 사용자와 팀 (새 탭에서 열림)

Figma 플러그인은 반복적이고 팀별로 특수한 작업을 자동화해 디자이너의 생산성과 협업 품질을 높일 수 있다. 공개 플러그인을 사용하는 것만으로 해결되지 않는 문제라면, 제품·컴포넌트·스타일에 맞춘 맞춤형 플러그인을 직접 만드는 것이 효과적이다. GitHub, Atlassian, Uber의 사례는 작은 유틸리티에서 출발해 팀 전체의 통합 도구로 발전시키는 방법을 보여준다. ## 반복 작업을 줄이는 맞춤형 플러그인 - 공개 플러그인이 400개 이상 제공되더라도 특정 조직의 컴포넌트나 디자인 시스템에 맞는 기능은 직접 만들어야 할 수 있다. - 플러그인 개발의 좋은 출발점은 반복적이고 번거로우며 실수하기 쉬운 작업을 발견하는 것이다. - 처음에는 작은 유틸리티로 시작한 뒤, 팀의 여러 요구를 하나의 플러그인으로 통합할 수 있다. ## GitHub: 컴포넌트 관리와 테마 전환 자동화 ### 레이어 테두리 제어 - GitHub는 다양한 위치와 크기의 구분선을 하나의 리스트 아이템 컴포넌트 안에서 관리했다. - 여러 변형 컴포넌트를 따로 유지하는 대신, 플러그인이 필요한 레이어 조합의 표시 여부를 자동으로 전환했다. - 그 결과 컴포넌트 수와 유지보수 부담을 줄일 수 있었다. ### 색상 테마 관리 - 모바일 앱에서 라이트 테마, 다크 테마, 고대비 모드를 지원하기 위해 네 가지 색상 세트를 관리해야 했다. - 플러그인은 기능적 이름으로 지정된 스타일을 검색하고 관리하도록 도왔다. - 전체 디자인을 몇 번의 클릭만으로 다른 테마로 전환할 수 있게 했다. ### 실제 데이터 삽입 - 정확한 목업과 디자인 스트레스 테스트를 위해 API에서 실제 데이터를 가져오는 데이터 채우기 플러그인을 만들었다. - 무작위 데이터 샘플을 가져와 아바타, 사용자명, 이름 등을 컴포넌트의 레이어 이름에 맞춰 자동 매핑했다. - 이후 테두리, 테마, 데이터 삽입 기능을 하나의 ‘모노 플러그인’으로 통합해 팀원들이 단일 UI에서 여러 기능을 사용할 수 있게 했다. ## Atlassian: 제품에 맞는 콘텐츠와 가상 사용자 이미지 - 일반적인 더미 텍스트가 아니라 제품별로 서로 연결된 데이터를 생성하기 위해 ADG Data Generator를 개발했다. - Jira에서는 프로젝트명과 티켓 번호, Bitbucket에서는 브랜치명과 커밋 메시지처럼 작업 중인 제품에 맞는 콘텐츠를 제공했다. - 실제 인물 사진 대신 실제로 존재하지 않는 사람을 표현하는 AI 생성 이미지를 사용해 개인정보나 이미지 라이선스 문제를 줄였다. - Atlassian은 이 플러그인의 소스 코드를 공개해 유사한 도구를 만들려는 커뮤니티가 참고할 수 있도록 했다. ## Uber: 협업과 디자인 검증 지원 - Uber에서는 여러 플러그인을 만들어 협업을 강화하고 디자인 불일치를 줄이며 작업 속도를 높였다. - 모바일 디자인 리뷰를 위해 선택한 Figma 프레임을 URL과 QR 코드로 기기에 미러링하는 플러그인을 개발했다. - 리뷰 참가자들이 대형 화면을 함께 보는 대신 각자의 스마트폰에서 디자인을 직접 확인할 수 있어, 실제 사용 환경에 가까운 피드백을 제공할 수 있었다. - Uber 사례는 플러그인이 단순한 제작 자동화뿐 아니라 디자인 크리틱과 협업 방식 자체도 개선할 수 있음을 보여준다. ## 플러그인 개발 기회를 찾는 방법 - 자주 반복하는 수작업을 목록으로 만들고, 클릭·검색·레이어 전환이 많은 작업부터 자동화한다. - 팀의 제품 데이터나 디자인 시스템처럼 일반 플러그인이 알기 어려운 내부 맥락을 활용한다. - 하나의 거대한 도구를 처음부터 만들기보다 작은 기능을 검증한 후 관련 기능을 통합한다. - 팀 전체가 사용할 경우 설치와 실행 과정을 단순화하고, 하나의 통합 UI로 제공하는 것이 좋다. 실무에서는 “반복적으로 시간을 빼앗기지만 규칙이 명확한 작업”부터 플러그인화하는 것이 가장 효율적이다. 특히 테마 전환, 콘텐츠 생성, 컴포넌트 상태 변경, 실제 기기 검토처럼 오류가 발생하기 쉬운 작업이 좋은 대상이다.

figma-pluginsdesign-systemsaccessibilityapi-integration+3

figma2019년 10월 29일

피그마의 첫 번째 사용자 컨 (새 탭에서 열림)

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는 단순히 제품을 소개하는 행사가 아니라, 사용자들이 직접 지식과 경험을 나누며 함께 프로그램을 만들어가는 커뮤니티 행사로 첫 컨퍼런스를 기획했다. 참여를 원한다면 발표 제안이나 참가 신청을 제출하고, 비용 부담이 있다면 장학금 신청을 함께 고려하는 방식이 적절하다.

figma-pluginsfigmacollaborative-designfigma-community+1

figma2019년 9월 5일

5명의 플러그인 개발자가 (새 탭에서 열림)

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

figma-pluginsreacttypescriptjavascript+4

figma2019년 8월 27일

마이크로소프트가 워 (새 탭에서 열림)

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-pluginsfigmadesign-systemsaccessibility+2

figma2019년 8월 22일

몇 초 만에 디자인에 실제 콘텐츠 (새 탭에서 열림)

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

figma-pluginsprototypinggoogle-sheetsunsplash+2

figma2019년 8월 8일

워크플로우 속도를 높여주는 (새 탭에서 열림)

플러그인은 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-pluginsfigmaux-designfrontend-development+1