figma-plugin-api

3 개의 포스트

figma

Magician이 Figma의 텍스트 (새 탭에서 열림)

Figma의 텍스트 리뷰 API는 플러그인이 별도 창을 띄우지 않고 Figma 편집기 안에서 텍스트를 감지하고 대체 문구를 제안하도록 한다. Diagram은 이를 맞춤법 검사 대신 AI 카피라이팅 기능인 Magician의 “Magic Copy”에 활용해, 사용자가 입력하는 헤드라인·본문·CTA의 대안을 실시간으로 제시한다. 이 사례는 디자인 도구와 AI를 결합할 때 작게 시작해 반복적으로 실험하고, 상황에 맞는 출력 품질을 다듬는 것이 중요하다는 점을 보여준다. ## Figma 텍스트 리뷰 API의 역할 - 텍스트 리뷰 API는 Figma Plugin API의 새로운 기능이다. - 사용자가 캔버스에서 입력하는 텍스트를 자동으로 실행 중인 기본 텍스트 리뷰 플러그인이 분석할 수 있다. - 플러그인은 텍스트의 특정 범위를 강조하고, 수정 또는 대체를 위한 제안 목록을 제공한다. - 맞춤법과 문법 교정뿐 아니라 다음과 같은 기능에도 활용할 수 있다. - 더 나은 카피 제안 - 기업 스타일 가이드 준수 - 문장 표현 개선 - 특정 문구의 대체안 생성 - 일반적인 플러그인 창과 달리 백그라운드에서 동작하며 Figma 편집기 UI에 자연스럽게 통합된다. ## Magician과 Magic Copy - Magician은 Diagram이 만든 Figma용 AI 디자인 도구다. - 디자인 작업 중 아이디어를 확장하고 창의적 작업을 돕는 것을 목표로 한다. - 주요 기능은 “매직 스펠”이라는 형태로 제공된다. - **Magic Icon**: 새로운 아이콘 생성 - **Magic Image**: 디자인에 사용할 이미지 생성 - **Magic Copy**: 문구 작성과 대안 제안 - Magic Copy는 텍스트 레이어를 편집할 때 기존 문구를 바탕으로 여러 대안을 제시한다. - 헤드라인, 본문, 행동 유도 문구(CTA) 등 다양한 디자인 문구에 사용할 수 있다. ## 텍스트 리뷰 API를 활용한 AI 카피라이팅 - Magic Copy는 사용자가 입력하는 텍스트를 텍스트 리뷰 API를 통해 감지한다. - 사용자가 별도의 플러그인 창을 조작하지 않아도 편집 흐름 안에서 제안이 나타난다. - 글이 잘 떠오르지 않는 상황에서 기존 문구를 개선하거나 새로운 표현을 탐색하는 데 유용하다. - AI가 작성한 대안을 비교하면서 디자이너가 더 빠르게 문구를 결정할 수 있다. - 텍스트 리뷰 API의 본래 용도인 맞춤법 검사를 넘어, 글쓰기 보조 도구로 확장한 사례다. ## 하나의 확장 가능한 플러그인으로 통합 - Magician은 처음에는 Magic Copy와 Magic Icon 등이 각각 별도의 플러그인으로 계획됐다. - 이후 여러 AI 기능을 하나의 플러그인에 모으는 방향으로 전환했다. - 이를 통해: - 여러 “매직 스펠”을 하나의 경험으로 제공할 수 있고 - 새로운 기능을 일관된 방식으로 추가할 수 있으며 - 아이디어를 빠르게 실험하고 검증할 수 있게 됐다. - 핵심은 개별 기능을 독립적으로 만드는 대신, 새로운 AI 기능을 계속 수용할 수 있는 기반과 플랫폼을 먼저 마련한 것이다. ## AI 기능을 반복적으로 개선하는 방식 - Diagram은 Magician의 각 기능이 다양한 상황에서도 일관되고 유용한 결과를 내도록 출력 품질을 조정했다. - 이를 위해 많은 입력과 결과를 시험하고, 효과적인 방식이 무엇인지 반복적으로 확인했다. - Stable Diffusion과 OpenAI 같은 생성형 AI 모델의 발전은 이러한 실험을 빠르게 수행할 수 있게 했다. - AI 도구를 처음부터 완성된 제품으로 만들기보다 작은 기능으로 시작해 사용자 경험과 출력 결과를 계속 개선하는 접근을 강조한다. 실용적으로는 텍스트 리뷰 API를 단순한 맞춤법 검사에만 한정하지 말고, 제품 문구·브랜드 가이드·콘텐츠 생성 등 편집 흐름에 직접 연결되는 기능에 활용할 수 있다. 다만 AI 제안은 반복적인 품질 검증과 세밀한 출력 조정이 필요하므로, 작은 사용 사례부터 시작해 점진적으로 확장하는 것이 적절하다.

figma

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

Tekeste Kidanu는 디자이너의 생산성을 높이는 Figma·FigJam 플러그인과 위젯을 개발하며, 커뮤니티의 요구에서 제품 아이디어를 얻는 개발자다. 대표작인 SPELLL은 문서의 맞춤법과 문법 오류를 찾아 수정하도록 돕고, FigJam용 Notes·색상 선택기·투표 위젯 등으로 영역을 확장하고 있다. 그는 Figma 플러그인 API가 기존 JavaScript·웹 개발 지식만으로도 접근하기 쉽고, 공개 플랫폼 전환이 더욱 다양한 창작물을 이끌 것이라고 기대한다. ## 개발자 배경과 디자인 학습 - Tekeste Kidanu는 `tkmadeit`이라는 이름으로 활동하는 프론트엔드 개발자다. - 2016년 미국으로 이주해 컴퓨터 과학을 공부했으며, 웹 기술에 관심이 많다. - Figma 플러그인을 만들면서 디자인 자체에도 흥미를 느끼게 됐다. - 좋은 UI를 구별하는 것에서 나아가 직접 디자인하기 위해 색채 이론과 타이포그래피 같은 UI 디자인 기초를 학습하고 있다. ## SPELLL: Figma·FigJam용 맞춤법 검사기 - 대표 플러그인인 SPELLL은 Figma와 FigJam 문서의 철자 및 문법 오류를 검사한다. - Grammarly와 유사하게 오류를 찾아내고 사용자가 쉽게 수정할 수 있게 한다. - 디자이너가 파일을 수동으로 검토하는 시간을 줄이고, 발표나 공유 과정에서 오탈자로 곤란을 겪는 일을 방지하는 것이 목표다. - Figma뿐 아니라 FigJam에서도 사용할 수 있도록 확장됐다. ## 커뮤니티에서 얻는 아이디어 - 플러그인 아이디어는 Figma Forum, Designer News, Twitter 등 디자인 커뮤니티에서 주로 얻는다. - 사용자들이 요청하는 기능과 반복적으로 제기되는 불편을 관찰해 실제 수요가 있는 문제를 찾는다. - Figma 공식 계정의 트윗이나 디자이너들의 기능 요청도 중요한 영감의 원천이다. - Friends of Figma와 같은 Slack 커뮤니티에서는 실제 Figma 사용자를 만나고 요구사항을 파악할 수 있다. - 새 플러그인을 구상할 때 Twitter나 포럼에서 기능 요청을 검색해보는 방법을 추천한다. ## Figma 플러그인 API로 시작하기 - 먼저 플러그인이 어떤 방식으로 동작해야 하는지 조사한 뒤 개발에 착수했다. - Figma 플러그인 API 공식 문서를 읽으며 기능과 구조를 익혔다. - Figma Plugins Slack 워크스페이스에서 질문하고 다른 개발자들의 도움을 받았다. - 디자인 플러그인을 처음 만들었지만, 기존 JavaScript와 웹 개발 경험만으로도 시작할 수 있었다. - API가 직관적이고 진입 장벽이 낮았다는 점을 개발 과정에서 가장 놀라운 부분으로 꼽았다. ## FigJam으로의 확장 - FigJam이 플러그인을 지원한다는 소식을 듣고 기존 Figma 플러그인을 FigJam으로 이전하기 시작했다. - Figma와 FigJam의 API 및 개발 절차가 거의 비슷해 확장이 수월했다. - 이를 통해 하나의 플러그인 개발 경험을 두 협업 도구로 넓힐 수 있었다. - Figma가 기본 기능으로 제공하지 않는 기능도 플러그인 API를 통해 먼저 구현할 수 있다는 점을 활용했다. ## Notes와 색상 선택기 위젯 - Notes는 FigJam 보드 안에서 상세한 메모를 작성할 수 있는 위젯이다. - 일반 텍스트와 Markdown 형식을 지원한다. - 보드 위에 메모를 직접 배치해 화면을 복잡하게 만들지 않고 별도로 정리할 수 있도록 설계됐다. - FigJam용 색상 선택기는 사용자가 원하는 색상의 스티키와 도형을 만들도록 돕는다. ## 투표 위젯과 향후 계획 - Tekeste는 FigJam용 투표 위젯의 첫 버전을 공개했다. - 익명 투표와 실명 투표를 모두 지원한다. - 기존 기능을 계속 개선해 최고의 투표 위젯으로 발전시키는 것이 목표다. - 앞으로는 FigJam 파일 참여자들이 현재 듣고 있는 음악을 보여주는 위젯도 만들어보고 싶다고 밝혔다. ## 공개 플랫폼에 대한 기대 - Figma는 내부에서 몇 주간 위젯을 개발한 뒤 외부 개발자 커뮤니티에도 API를 개방했다. - Tekeste는 FigJam 플러그인과 위젯의 공개 출시가 다양한 실험과 창작을 촉진할 것으로 기대한다. - 특히 장난스럽고 생동감 있는 인터페이스가 인기를 얻는 흐름에 관심을 보였다. - Apple Maps의 3D 랜드마크 표현과 Honk의 playful한 iOS UI를 인상적인 사례로 언급했다. 새로운 Figma·FigJam 기능을 만들고 싶다면 사용자가 반복해서 제기하는 불편을 커뮤니티에서 찾고, 공식 API 문서와 개발자 커뮤니티를 활용해 작은 프로토타입부터 시작하는 접근이 효과적이다. Figma와 FigJam의 유사한 API 덕분에 하나의 아이디어를 두 환경으로 확장하기도 쉽다.

figma

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와 오픈소스 사례를 참고해 사내 전용 플러그인부터 작게 만들어보는 것이 현실적인 접근이다.