figma-plugin-api

3 posts

figma

How Magician uses Figma’s text review API | Figma Blog (opens in new tab)

Magician, an AI-powered Figma plugin from Diagram, uses Figma’s text review API to generate copy suggestions directly while designers edit text layers. The API runs in the background and integrates with Figma’s editor rather than requiring a separate plugin window. Diagram argues that this creates a productive intersection between product design and AI, helping users overcome writer’s block and iterate faster. ## Figma’s Text Review API - The API lets developers create default text review plugins that run automatically while users type on the canvas. - Plugins can highlight text ranges and provide replacement suggestions. - Potential applications include: - Spell checking and grammar correction - Improving marketing copy - Enforcing company style guides - Generating alternative wording ## Magician and Its AI “Spells” - Magician is a Figma design tool created by Diagram to support creativity and ideation. - Its initial features are organized as “magic spells”: - **Magic Icon** for generating icons - **Magic Image** for creating imagery - **Magic Copy** for writing assistance - The plugin is designed as an extensible platform so new AI capabilities can be added consistently. ## Magic Copy in Practice - Magic Copy uses the text review API to suggest alternatives as users edit text layers. - It can generate options for: - Headlines - Body text - Calls to action - Suggestions appear directly within the editing workflow, making the feature useful when designers are unsure what to write or want to improve existing copy. ## A New Plugin Interaction Model - Unlike traditional plugins that require users to open and interact with a separate window, the text review API works in the background. - Its results are integrated into Figma’s native editor interface. - Although the API was primarily intended for spell checking, Diagram repurposed it for AI-assisted copywriting. ## Iteration and Experimentation - Diagram began with Magic Copy and other features as separate plugins before combining them into Magician. - The team continuously fine-tuned each spell’s output to make it useful and consistent across different contexts. - Its development was influenced by accessible generative AI tools and models such as Stable Diffusion and OpenAI. - The team’s approach emphasizes starting small, testing ideas quickly, and refining what works. Magician demonstrates how Figma’s text review API can extend beyond correction tools into creative assistance. Developers can use the API’s seamless editor integration to build focused AI experiences that help designers write, explore, and iterate without interrupting their workflow.

figma

Behind the build: a Q&A with developer Tekeste Kidanu | Figma Blog (opens in new tab)

Tekeste Kidanu, known online as tk made it, builds Figma and FigJam plugins that address practical needs from the design community. His best-known project, SPELLL, provides grammar and spell checking inside design files, while his newer FigJam tools support note-taking, color customization, and voting. He credits community feedback, Figma’s approachable plugin API, and his interest in design for shaping his work. ## Background and Motivation - Tekeste is an introverted frontend developer who moved to the U.S. in 2016 to study computer science. - He became interested in improving his design skills, particularly in color theory and typography. - He contributes to the Figma Community by creating tools that help designers work more productively. ## SPELLL: Spell Checking for Figma and FigJam - SPELLL scans Figma and FigJam documents for spelling and grammar errors. - Users can correct mistakes directly, similar to using Grammarly. - The plugin aims to save designers time and prevent embarrassing typos during presentations. - Tekeste developed the idea after seeing requests on the Figma Forum, Designer News, Twitter, and other design communities. ## Learning the Figma Plugin API - Tekeste researched how the plugin should work before beginning development. - He taught himself the Figma plugin API through its documentation and questions in the Figma Plugins Slack workspace. - He was surprised by how easy it was to begin, finding that his existing JavaScript and web-development knowledge provided a strong foundation. ## Building for FigJam - When FigJam introduced plugin support, Tekeste began adapting his existing Figma tools. - The similar APIs and development processes for Figma and FigJam made migration straightforward. - His FigJam projects include: - **Notes**, a widget for storing detailed plain-text or Markdown notes without cluttering a board. - **Color Picker**, which adds custom-colored stickies and shapes. - **Voting**, which supports anonymous and non-anonymous voting sessions. ## Community-Driven Inspiration - Tekeste frequently finds ideas in feature requests and discussions on Twitter, the Figma Forum, and Friends of Figma Slack. - He notes that many requested features can be implemented through the plugin API before Figma adds them natively. - He hopes another developer will build a FigJam widget showing what music participants are listening to. ## Looking Ahead - Tekeste plans to improve his voting widget and make it the best possible tool for FigJam sessions. - He is excited about the public release of FigJam plugins and widgets and the creativity it may encourage. - He is also inspired by the growing popularity of playful, animated, and interactive interfaces, citing Apple Maps and the Honk app as examples. Figma’s open plugin and widget platform gives developers like Tekeste a practical way to turn community requests into useful design tools. His work demonstrates how existing web skills, combined with active listening to users, can produce focused improvements to collaborative workflows.

figma

An in-depth sneak peak at what 5 plugin developers are cooking up | Figma Blog (opens in new tab)

Figma’s first Plugin Show & Tell highlighted the creativity and practical value emerging from its newly opened plugin ecosystem. The livestream featured five developers demonstrating tools for design-system quality checks, spell checking, icon management, documentation, typography, and even voice control. Figma encouraged developers to explore its Plugin API, build tools for their own workflows, and participate in future community events. ## Community Plugin Showcase - The event was created to: - Promote community-built plugins. - Encourage developers to experiment with the Figma Plugin API. - Give users an early look at upcoming tools and features. - The recorded livestream included live demos from five plugin developers. ## Design Quality and Productivity Tools - **Toybox Roller**, presented by Jono Kolnik, helps identify and correct design errors and inconsistencies against an organization’s design system. - **Tekeste Kidanu’s Spell Check plugin** brings spelling assistance into Figma. - Tekeste also demonstrated integrating **Cleanmock** directly into Figma. ## Icons, Documentation, and Object Management - **Iconify**, presented by Vjacheslav Trushkin, provides access to hundreds of icon sets for use in both design work and production workflows. - Jackie Chui demonstrated several utilities: - Improvements to **Find & Replace**. - A plugin for adding documentation links to components. - **Paste to Fill**, which converts pasted content into image fills. - A forthcoming tool for managing margins and object sizing within frames using configurable presets. ## Typography and Voice Control - Andrew Goodwin showed a plugin for selecting and applying typography rules. - He also demonstrated a voice interface for controlling Figma. - The project aimed to map the entire Figma Plugin API to voice commands, allowing users to operate many Figma features verbally. ## Resources for Plugin Developers Figma directed developers to several resources: - Setup guides explaining plugin architecture, canvas communication, browser APIs, and development workflows. - Official Plugin API documentation. - Figma Plugin DS, a dependency-free HTML, CSS, and JavaScript design system modeled after Figma’s interface. - Open-source plugin examples on GitHub. - FigPlug for TypeScript, React/JSX, asset bundling, and manifest generation. - A community Slack workspace for questions and collaboration. The event demonstrates that Figma plugins can automate repetitive work, connect external data and services, and tailor Figma to specialized team workflows. Developers interested in extending Figma should start with the API documentation and open-source examples, or build a private plugin for internal needs.