techlist.io
KREN
figma

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

reacttypescriptjavascriptcsshtmlfigma-pluginsfigma-plugin-apiwebpack

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.