Building a Figma Plugin from Scratch: An Expert

Guide
Introduction: Figma plugins are custom extensions that run within Figma’s environment, allowing
developers to automate tasks, integrate external services, and enhance design workflows. This guide walks
through advanced techniques for building a Figma plugin from scratch – from understanding the Figma
Plugin API and UI architecture, to handling authentication, messaging, and file access permissions. We’ll
also cover best practices for security and performance, ensuring your plugin meets the high standards
expected by the Figma community. Finally, we provide a curated list of top Figma plugins categorized by
focus area, complete with examples and reference resources.

Figma Plugin Architecture and API Usage

Plugin Execution Context: Figma plugins run in a sandboxed JavaScript environment. The plugin’s main
code has access to Figma’s document (the “scene”, i.e. nodes in the design file) but does not have direct
access to DOM or browser APIs like window or XMLHttpRequest 1 . Conversely, if you create a plugin
UI (an HTML iframe), that UI can use browser APIs and HTML/CSS, but it cannot directly access the Figma
document. In other words, the plugin’s main code and its UI run in separate contexts – one with Figma
API access, one with web capabilities 2 . They communicate via message passing (covered below). This
architecture keeps plugins secure and performant.

Plugin API Capabilities: The Figma Plugin API (exposed through the global figma object in your code)
provides methods to inspect and modify the document. For example, you can traverse the layer tree
( figma.currentPage.selection , figma.root.children ), create or clone nodes
( figma.createRectangle() , figma.createText() ), apply styles, etc. Many operations are
asynchronous – e.g., loading fonts with figma.loadFontAsync before setting text. The API is strongly
typed if you use TypeScript, with official type definitions available 3 . Notably, plugins must call
figma.closePlugin() when done to terminate execution; otherwise the plugin will run indefinitely and
the user will see a “Running plugin…” indicator 4 . If the user cancels manually, Figma will also call
figma.closePlugin() automatically 5 .

Working with Figma Documents: As an experienced developer, you’ll want to handle large files efficiently.
Figma now uses dynamic page loading, meaning pages load on demand. Your plugin’s manifest should
include "documentAccess": "dynamic-page" (this is required for new plugins) so that running the
plugin doesn’t force all pages to load unnecessarily 6 7 . You can explicitly load additional pages only if
needed (using methods like figma.loadOnePageAsync from the API) to improve performance on big
files 3 . The Plugin API also allows subscribing to events like selection changes or node edits during a
session: for example, figma.on("selectionchange", callback) can react to user selections while
your plugin remains open. Use these events to build interactive or real-time features (such as updating your
UI as the user selects different layers).

1
Making Network Requests: Historically, plugin code had no network access without a UI iframe. Now,
Figma provides a Fetch API for plugins that works similarly to the browser fetch. You can call await
fetch(url) in plugin code (with certain CORS limitations) to retrieve data or call external APIs 8 9 . By
default, the plugin iframe’s origin is null , so only APIs permitting Access-Control-Allow-Origin: *
can be called directly 10 . As a developer, you should also be aware of Figma’s network access controls:
before publishing, you are expected to declare allowed domains for fetch (see “File Access Scopes &
Permissions” below). In summary, your plugin’s main thread can manipulate the Figma file and (with proper
manifest settings) make web requests, but complex browser-based functionality requires a UI iframe.

Building the Plugin UI with Iframes

Many advanced plugins include a custom UI for user input or output – anything from a settings panel to a
mini-app embedded in Figma. Figma displays plugin UIs in an <iframe> via the figma.showUI() API
call 2 . The UI content is defined in an HTML file (specified in the manifest, e.g. "ui": "ui.html" ).
When you call figma.showUI(__html__, options) , Figma loads your HTML into an iframe inside the
Figma editor 11 . The plugin’s main code continues running in the background, separate from the UI.

UI Integration Basics: In your plugin code, call figma.showUI(htmlStringOr__html__, { width,

height, ... }) to open the interface. The __html__ variable (double-underscore) is a special constant
that includes the contents of your ui.html at build time 11 . You can specify UI size and other options
(like themeColors to automatically apply Figma’s light/dark theme to your UI via CSS variables 12 ). The
UI runs as a regular webpage (with full DOM, CSS, JS capabilities) – so you can use frameworks or libraries if
needed. However, keep the UI lightweight for performance; often vanilla JS or a small library (some
developers use Preact or lightweight React) is sufficient.

Styling and UX: It’s recommended to match Figma’s look and feel in your plugin UI for a seamless user
experience. Figma provides resources like the Figma Plugin Design System (DSP) – a CSS stylesheet with
components and styles that mimic Figma’s UI – and community libraries like “Create Figma Plugin UI” (a
Preact component library replicating Figma editor UI elements) 13 . Using these ensures your plugin’s
dialog feels native to Figma’s interface 13 . For example, your buttons, inputs, and toggles can look identical
to Figma’s. This consistency is not only aesthetic but also mentioned in Figma’s review guidelines as a mark
of quality 14 . Of course, you are free to design custom UIs if your plugin demands it (e.g. a unique canvas
or visualization), but always aim for clarity and responsiveness.

Communication between UI and Main Code: The main plugin code and the UI iframe communicate via
postMessage. Figma offers a straightforward API for this message passing:

• From UI to plugin: In the HTML context, you use window.parent.postMessage() to send a

message. By convention, you wrap your payload in an object with a pluginMessage property. For
example: parent.postMessage({ pluginMessage: { type: 'submit', data:
'hello' } }, '*') will send a message to the plugin 15 . In the plugin code, you set an event
handler with figma.ui.onmessage = msg => { ... } to receive the msg (which will be the
value of that pluginMessage object) 15 . You can then act on it – e.g., if msg.type ===
'submit' do something with msg.data .

2
 • From plugin to UI: In plugin code, use figma.ui.postMessage(payload) to send any data to the
UI 16 . On the UI side, listen for the message event. You can simply define window.onmessage =
event => { const msg = event.data.pluginMessage; ... } in your UI script to handle
incoming messages 17 . Figma ensures that messages from your plugin iframe carry a
pluginMessage field; the payload you sent (e.g. 42 or an object) will appear there 18 .

The documentation emphasizes the slight difference in syntax (UI must use the pluginMessage wrapper;
plugin code can send/receive raw values directly) 19 . You can exchange almost any JSON-serializable data,
including objects and arrays . This messaging system is powerful: it lets your UI be decoupled from the
20

Figma logic. For instance, a UI form might send user inputs to the plugin, the plugin performs some
document edits or external API calls, then sends results back for the UI to display.

Advanced UI Integration: You can navigate your plugin’s iframe to an external URL if needed (for example,
if you want to host your UI or direct to an OAuth page). Using
figma.showUI("<script>window.location.href = 'https://external-site.com'</script>")
will open the iframe at that URL 21 . In such cases, the messaging requires specifying your plugin ID and
allowed origin to maintain security 22 23 . This is an advanced scenario mostly used for authentication
flows (discussed next). Note that a non- null origin iframe can directly use normal network calls, but you
must still pass messages back to the plugin for Figma API calls or to close the plugin, etc.

Plugin Authentication Patterns (OAuth, API Keys, etc.)

Integrating third-party services often requires authenticating the user (e.g., connecting to Google Sheets, a
design API, or any external service with user-specific data). There are two common patterns for plugin
authentication:

• 1. API Token (Personal Access Token or API Key): If the external service allows it, the simplest
method is to ask the user for an API key or token (perhaps via your plugin UI) and store it. Figma
provides figma.clientStorage – a persistent key-value storage scoped to your plugin and the
user – to save such credentials securely on the user’s machine. For example, the first time the plugin
runs you might prompt for an API key, then save it with await
figma.clientStorage.setAsync('apiKey', keyValue) . Subsequent runs can retrieve it with
figma.clientStorage.getAsync . This avoids needing a complex OAuth flow. Best practice: if
using this method, inform the user how their key is stored and never expose it (e.g., don’t
accidentally include it in messages or logs). Many plugins (like Map integrations, etc.) use API keys in
this manner.

• 2. OAuth 2.0 (Third-Party Sign-In): OAuth is more complex due to Figma’s environment. You
cannot directly perform a typical OAuth web redirect flow inside the Figma desktop app
because window.open() from the plugin opens an external browser where window.opener is
null (so the browser page can’t post a message back to the plugin) 24 . Also, you can’t use custom
URL schemes or localhost callbacks as in native apps because the plugin cannot listen on a local
server or receive custom protocol redirects 25 . The only secure way is to involve an external server
as an intermediary 26 .

3
A recommended OAuth pattern for Figma plugins is outlined by Figma’s official docs 26 27 :

1. Launch an OAuth iframe: Use figma.showUI() to open an iframe pointed at your own server or
domain. By specifying your server URL in the showUI (or by immediately redirecting the UI to your
domain), you give the iframe a non-null origin that you control 28 . From this iframe, you can use
regular web APIs (fetch, window.open, etc.).

2. Initiate OAuth via server: Your iframe (now loaded from your domain) can communicate with your
server (e.g., via fetch) to start the OAuth process. Typically, you’ll generate a one-time code or use
PKCE. The Figma doc suggests generating a unique read/write key pair on your server to securely
pass the eventual token 29 . Then the iframe opens a new browser window for the OAuth provider
( window.open(authUrl, '_blank') ), including the keys in the state parameter 30 . The user
logs in and the provider redirects back to your server with an auth code.

3. Complete OAuth on server: Your server exchanges the auth code for an access token (never
exposing the token to the browser). Then it stores the token temporarily keyed by the one-time key,
or directly posts it to the waiting plugin iframe via a secure channel.

4. Plugin receives token: The plugin’s iframe, which has been polling or waiting, gets the token or a
success message from the server (e.g., your server could redirect the iframe to a page that calls
parent.postMessage({ pluginMessage: { token: "ABC123" } }, 'https://
www.figma.com') targeting the Figma editor origin) 22 . The plugin main code (listening via
figma.ui.onmessage ) receives the token and can store it with figma.clientStorage 27 31 .

In summary, OAuth in Figma requires an external web service. This is more effort to implement securely
(you must use HTTPS and validate the state to prevent CSRF). Figma explicitly notes that the sensitive
token can be intercepted in transit, so steps like Proof Key for Code Exchange (PKCE) are strongly
recommended 32 . Using PKCE and short-lived one-time keys greatly improves security.

“The only way to do OAuth in a Figma plugin is to run your own server... and have the user
authenticate via OAuth. You then send the access token from your server back down to the Figma
plugin.” 26 . This flows adds complexity but ensures the token never directly passes through
the Figma client where it could be accessed by other plugins or intercepted.

Authentication UX: Whichever method you use, design the plugin to clearly guide the user. If using OAuth,
explain that a browser window will open. Use figma.notify() to show messages if needed (e.g.,
“Authenticating with Google...”). Also handle the case where the Figma plugin runs in the browser (Figma
Web) versus desktop – test in both, as the OAuth window behavior can differ 33 . Always provide a way to
log out or disconnect (e.g., a button that clears the token from storage). Finally, follow Figma’s review
guidelines for security: if your plugin connects to a third-party or requires login, state this in your plugin
description so users know beforehand 34 .

4
Event and Message Handling between Plugin and Figma
Beyond the UI-plugin message passing, Figma plugins can handle certain events and interactions:

• Figma Canvas Events: While a plugin is running (i.e., between figma.showUI() and
figma.closePlugin() ), it can subscribe to Figma editor events. The most commonly used are:
• figma.on("selectionchange", callback) : Triggered whenever the user’s selection changes.
Use this to enable interactive plugins that respond to what the user selects (for instance, a plugin
could highlight certain information about the selection in real-time).
• figma.on("currentpagechange", callback) : Fires if the user switches to a different page in
the file.
• figma.on("documentchange", callback) : A more granular event that can notify of any
changes in the document’s structure or properties 35 36 . This is useful for plugins that need to
react to edits (e.g., a design linter plugin that monitors changes).
• In Dev Mode (the code inspection mode introduced for developers), plugins can also run – for
example, to provide code snippets. If you target Dev Mode features, use editorType: "dev" in
the manifest appropriately 37 .

These events let your plugin act more like a persistent panel or tool. For example, an accessibility plugin
might listen for selection changes and automatically evaluate contrast on the selected layers. Remember to
remove listeners if you manually set any, to avoid memory leaks (though when the plugin closes, they
should automatically clear).

• Plugin UI Events: Within your iframe UI, you’ll handle normal DOM events (clicks, inputs) and then
send messages to the main plugin as needed. Debounce or throttle events if the UI is sending very
frequent messages (for instance, slider dragging could send dozens of values per second – perhaps
only send final value or at intervals to avoid overwhelming the main thread).

• Inter-plugin Communication: Figma does not allow plugins to directly talk to each other for
security reasons. The only channel is via the UI’s window.parent.postMessage to its own plugin.
So you cannot, for example, have one plugin listen to events from another plugin. If you need to
share data between plugins, consider using a shared cloud service or having the user copy-paste
data. Each plugin is isolated (with the exception that Widgets in FigJam or Dev Mode have their own
patterns – but those are outside this plugin guide’s scope).

• Keeping Plugins Responsive: If your plugin runs long operations (e.g., iterating thousands of nodes
to find something), use asynchronous patterns to avoid freezing the UI. You can chunk work using
await new Promise(requestAnimationFrame) or simply allow the event loop to breathe. The
Figma runtime may flag unresponsive plugins as “frozen” if they don’t yield control – which can lead
to termination 38 . Test with large files to ensure your plugin remains snappy. Provide progress
feedback via figma.ui.postMessage or figma.notify() if an operation takes more than a
second or two, so users know it’s working.

5
File Access Scopes & Permissions
When we talk about “file access” in Figma plugins, it usually means two things: what parts of the user’s
Figma data the plugin can access, and what external resources the plugin can reach. Figma has introduced
manifest settings to make these explicit:

• Document Access: As noted, all new plugins must use "documentAccess": "dynamic-page" in
the manifest 6 . This isn’t an optional scope but a requirement – it ensures your plugin doesn’t
inadvertently cause large files to fully load. Older plugins without this field still function, but Figma
will show a loading prompt and load all pages when they run, which is suboptimal 39 . For an
experienced dev, the takeaway is: always include "documentAccess": "dynamic-page" in your
manifest for performance.

• Network Access Restrictions: Figma requires plugins to declare allowed network domains when
publishing. In your manifest.json , you can add a "networkAccess" section listing domains
your plugin will contact 7 40 . For example:

"networkAccess": {
"allowedDomains": ["api.example.com", "*.googleapis.com"],
"reasoning": "Needed to fetch design data and Google Sheets",
"devAllowedDomains": ["http://localhost:3000"]
}

By whitelisting domains, you improve security and transparency – the list of domains will be shown
on your plugin’s Community page for users to review 41 . If the plugin tries to access any other URL,
Figma blocks it with a Content Security Policy error 42 43 . You can use wildcards for subdomains or
specific path prefixes 44 45 . During development, devAllowedDomains can include localhost or
staging URLs, which you should remove or move to allowedDomains with reasoning when
releasing 45 . For maximum safety, if your plugin doesn’t need any web access, use ["none"] (the
strictest setting) 46 .

• User Data and File APIs: By default, a plugin can only access the currently open Figma file (its
nodes, styles, etc.). You do not have access to other user files or teams through the Plugin API. If you
need cross-file access, you must use the REST API (which requires an OAuth token with the necessary
scopes for file access). This is beyond typical plugin use-cases, but for completeness: your plugin
could perform REST calls to Figma’s API (via fetch ) if the user provides a personal access token or
you implement OAuth for Figma. This would allow, say, pulling components from another file or
publishing changes – but again, you must handle those tokens and respect Figma’s API usage
policies 47 . Most plugins don’t do this due to complexity and security review implications.

• Current User and Settings: The plugin can get basic info about the user via figma.currentUser
(e.g., name, ID). This doesn’t usually require special permission. However, if your plugin is using this
to, say, log usage or identify the user externally, be mindful of privacy (get user consent in your UI or
clearly state it). Figma’s review guidelines encourage transparency about any data being sent out of
Figma 48 34 .

6
 • File System Access: Plugins cannot freely read or write local files from the user’s computer for
security. The way to import data (like JSON or images) is typically through an <input
type="file"> in your UI, which lets the user choose a file and then your UI can read it (e.g., as text
or DataURL) and postMessage it to the plugin. To save data out, you might generate a download link
in the UI (for things like exporting a JSON or SVG). There is no direct Node.js-like filesystem access.
Keep these limitations in mind when designing features that require reading/writing files.

Secure and Performant Plugin Best Practices

Building an expert-level plugin means not only implementing features but doing so robustly. Here are some
best practices to ensure security and performance:

• Optimize Performance: Avoid long-blocking operations on the main thread. Use asynchronous
patterns and consider splitting work. Figma plugins run in a single JS thread shared with the editor’s
UI, so heavy computation can lag the whole app. If you must process lots of data, process
incrementally and yield between chunks (using await or setTimeout with 0 delay). Utilize
Figma’s built-in utilities when possible – e.g., figma.group() to group multiple nodes at once, or
bulk-changing properties via arrays, rather than looping and updating one by one, which can be
slow.

• Memory Management: Figma tries to manage memory by unloading pages not in use. If your
plugin accesses a lot of nodes, be mindful of storing large references. Once you’re done with nodes,
setting references to null (or letting variables go out of scope) helps garbage collect them. Also
consider using figma.closePlugin() as soon as your task is complete to free resources. For
persistent UIs, you might leave it open to listen to events, but don’t keep it running needlessly if it’s
idle and not providing value.

• Security and Privacy: Always ask for user consent or clearly document if your plugin sends any
data externally. For example, if you have analytics or error logging that calls out to a server, mention
this on your plugin listing (and possibly provide an opt-out). Figma’s guidelines warn that reading or
modifying a file without the user’s awareness is grounds for rejection 48 . So, be transparent in your
plugin description about any external connections or data usage 34 . Also, never request more
network access than necessary – limit allowedDomains strictly, and if your plugin uses an account
or payment outside Figma, disclose that in the description clearly 34 .

• Match Figma’s UI & UX: As noted, a polished plugin should integrate with Figma’s workflow. Use
Figma’s UI style for controls 13 , follow the conventions (e.g., pressing Enter in a text field triggers
the primary action, etc.), and support both light and dark themes (the themeColors option in
showUI simplifies this 12 ). If your plugin runs in Dev Mode, ensure the experience is similarly well-
integrated (e.g., output code snippets to the Code panel if appropriate, using the Dev Mode API).

• Error Handling and Logging: Provide meaningful feedback if something goes wrong. Use
figma.notify("Error: ...") for critical errors that the user should know about (but don’t
spam notifications). In your code, catch promises and exceptions, and perhaps send them to your
server or console.error for debugging. Remember that users can open the developer console in
Figma to see console.log output from plugins – it’s often helpful for support if they can report

7
 logs. But avoid logging sensitive info (like tokens or user data) in case someone else looks at the
logs.

• Test Thoroughly: As an experienced dev, you know the importance of testing. Try your plugin on
different platforms (Figma desktop on Mac/Win, and Figma in browser) to catch environment
differences. Test with various file sizes and complexities. Use the Figma Plugin Review checklist: the
plugin should not crash, all UI elements should work, it should do what the description says, and it
shouldn’t degrade Figma’s performance or violate policies 49 38 . If your plugin uses network, test
scenarios where the user is offline or the request fails, and handle those gracefully (perhaps by
notifying “Internet connection required” etc.).

• Publish and Support: Once built, you’ll fill out details in the Figma Community when publishing.
Provide clear instructions and a support contact (email or link). Figma requires plugin publishers to
be responsive to user issues 50 . Maintain versioning – update your plugin for breaking API changes
or new Figma features (Figma’s API versioning allows you to target a specific version; keep an eye on
announcements and update the api field in manifest accordingly 51 ).

By following these best practices, you not only increase the chances of a smooth review and publication, but
you also ensure your plugin remains trustworthy and efficient for users.

Top Figma Plugins by Category

The Figma Community hosts thousands of plugins. Below is a curated list of top plugins, organized into
three categories: Design-Focused, Engineering-Focused, and Workflow & Automation. Each plugin is
noted with its primary purpose and real-world usage examples. (Many of these plugins are available free on
the Figma Community; a few have premium tiers.)

Most Popular Design-Focused Plugins (UI, UX, Accessibility, Assets)

• Stark – An accessibility toolkit that checks color contrast and simulates various vision impairments
across your designs. Stark can audit an entire design system for compliance issues, helping ensure
your product meets WCAG standards 52 . Example: Use Stark to select a text layer and background; it
will report the contrast ratio and whether it passes AA or AAA guidelines. It also includes a colorblind
simulator to preview how designs appear to users with color vision deficiencies. (Free with optional
Pro plan for advanced features.)

• A11y - Color Contrast Checker – A lightweight contrast checker that provides instant feedback on
text/background contrast and suggests accessible color alternatives 53 54 . It also simulates certain
types of color blindness. Example: Run A11y plugin and it will automatically detect all text layers on
the current canvas, highlighting which ones fail contrast and offering suggestions to fix them. This is
great for quick checks during design iterations 54 .

• Material Design Icons (Google) – Brings the entire official Material Icons library (over 6,000 icons)
into Figma 55 56 . Designers can search and insert icons without leaving Figma, ensuring

8
 consistent and up-to-date iconography. Example: Instead of copying SVGs from Google’s site, use this
plugin to search “menu” or “user” and directly drop in the icon, already optimized for use. It auto-
updates when Google releases new icons 56 .

• Unsplash – Quick access to millions of free stock photos from Unsplash, searchable by keyword 57 .
This hugely popular plugin lets you insert images with one click – great for placeholders or final
assets. Example: Designing a hero section? Run Unsplash and search “mountains” to fill a frame with
a randomly chosen high-res mountain photograph. All images are royalty-free and no attribution is
needed 58 . (Unsplash+ subscribers can even link their account for premium images 59 .)

• Content Reel – Fills your design with realistic text and imagery content, rather than generic
placeholders 60 . Developed by Microsoft, it offers libraries of names, emails, cities, avatars, and
more. Example: If you have a list design with repeated items, Content Reel can populate each with
actual-looking data (e.g., different person names and profile photos) to make your prototype feel
real. This helps uncover layout issues, like how a very long name might overflow a card 61 .

• Autoflow – Streamlines the creation of user flow diagrams by drawing connectors between frames.
Usage: Select two frames and Autoflow will draw an arrow connecting them, following your desired
style. It’s perfect for quickly illustrating navigation flows or screen transitions in app design 62 .
Designers no longer need to manually draw arrows for each connection.

• Figmotion – A full-fledged animation timeline inside Figma 63 64 . Allows you to animate layers
(position, opacity, etc.) with keyframes and easing, then export the animations as GIFs or JSON
(Lottie) files. Example: Use Figmotion to animate a loading spinner or a button hover effect. You set
keyframes on the Figma canvas and preview the animation in real time. This is great for
communicating motion design to developers 64 . (Free plugin; somewhat advanced to use, but
powerful.)

• Charts – Generates clean, customizable charts (bar, line, pie, etc.) from data, directly in Figma 65
66 . You can input data manually or even link a Google Sheet. Example: If you need a quick bar chart

in a dashboard mockup, you can input values into Charts and it will create vector bars and labels that
you can style to match your design. It supports real data import and updates, making it invaluable
for data-heavy UI design 67 68 .

• Remove BG (Icons8 Background Remover) – Uses AI to remove the background from images (e.g.,
product photos or profile pics) right within Figma 69 . Example: Import a photo of a person or object,
run Remove BG, and you get a PNG with the background gone – no need to use Photoshop. It’s
surprisingly accurate at maintaining edge details 70 71 . This is useful for creating collages or
showcasing products with a transparent background. (Requires a free Icons8 account for API usage
after a certain number of images.)

• Clean Document – An essential housekeeping plugin that cleans up Figma files 72 73 . It can
remove unused layers and styles, delete empty groups, rename layers consistently, and generally
tidy up a messy document. Example: Before handing off a design file to developers, run Clean
Document to ensure there are no stray layers or duplicate styles. It can consolidate identical color
styles, remove hidden layers, and apply consistent naming (like “Rectangle” to “Bg/Rectangle”) 74

9
 73 . This improves file performance and team clarity. (Pro tip: always duplicate your file or work on a

copy when running cleanup plugins, just in case 75 .)

• Stark, Able, A11y (Accessibility) – (We already listed Stark and A11y above, but another mention:) Able
is another quick contrast checker similar to Stark but more lightweight 76 77 . It’s handy for on-the-
fly checks with a minimal UI. Many designers pin either Stark or Able in their toolbar for daily use 78
77 . Both reinforce inclusive design practices and catch issues early.

(The design category has many more great plugins – Honorable mentions include: Iconify (access to dozens of icon
libraries beyond Material Design) 79 , Blush (inserts beautiful illustrations), Mapsicle (inserts real maps by
location), Lorem Ipsum (for placeholder text), and Image Palette (creates color palettes from images).)

Engineering-Focused Plugins (Tokens, Code Export, Handoff,

Integration)
• Tokens Studio (Figma Tokens) – A plugin for managing design tokens (colors, typography, spacing,
etc.) and syncing them with code. It allows you to define tokens in a JSON schema, use them in
Figma styles, and export or sync to repositories 80 81 . It supports aliases and thematic modes
(e.g., light/dark themes referencing a core set of tokens) 82 . Example: You maintain a color palette
as tokens (primary, secondary, success, etc.). In Figma, you apply these tokens to your styles. Tokens
Studio can then sync these to GitHub in JSON format, becoming a single source of truth for
designers and developers 83 . This ensures consistency across design and code. (Open-source core,
with a paid “Pro” version for advanced features.)

• Storybook Connect – An official integration plugin that embeds Storybook components in Figma
and links Figma components to Storybook stories 84 . This bridges design and development:
designers can see live coded components next to their designs, and developers can see the Figma
design alongside code. Example: A designer selects a Figma component (say a Button component in
the design system file), uses Storybook plugin to paste a Storybook URL (hosted via Chromatic), and
links them. Now in Figma’s sidebar, that component shows a link to the live Storybook
implementation 85 84 . This way, one can visually compare and ensure parity between design and
the real coded component. It’s extremely useful for design system maintenance and QA. (Free;
requires Storybook and Chromatic setup on the dev side.)

• Zeplin – While not exclusively a Figma plugin (Zeplin is a separate handoff app), the Figma Zeplin
plugin lets you export frames/artboards to Zeplin for developer handoff 86 . Zeplin then provides
specs, CSS code snippets, and asset export in a structured way. Many teams use it to complement
Figma’s native handoff features. Example: Select your final screens in Figma, run the Zeplin plugin to
publish them. In Zeplin, developers can now hover to get spacing measurements, download assets
(which Zeplin extracts at 1x,2x,3x), and see style guides. It streamlines the design-to-dev process by
organizing screens and components outside of Figma. Zeplin is praised for generating styleguides
and assets automatically 87 .

• Anima – A powerful code generation plugin that converts Figma designs into developer-ready code
(HTML, React, Vue, CSS) 88 . Anima stands out by supporting Figma prototyping links – meaning if
you set up interactive prototypes (e.g., on click go to screen X), it can generate code that includes

10
 those interactions (like React Router links or proper anchor tags) 89 . Example: Design a responsive
webpage in Figma with proper constraints; use Anima to export it. Anima will produce clean HTML/
CSS and even preserve things like hover states or embedded videos. It’s useful for quickly generating
a starting codebase for a website or for prototyping with real code. Note that code quality is decent
(though not hand-written level) 90 . Anima is subscription-based for full features, but it can save a
ton of time for developers as a starting point.

• Locofy – Another design-to-code plugin, currently popular for generating React/React Native code
from Figma. Locofy allows setting up some element attributes (like defining which frame is a
scrollable container, or marking a button as a link) and then exports code. It’s free while in beta 91 .
Example: Use Locofy to turn a Figma mobile app design into a React Native project. You can preview
the code in Locofy’s web app and download it. This accelerates front-end development – though
developers will likely refactor the code, the UI structure and assets are all there. Locofy also offers an
interactive preview to test the generated app before downloading code 91 92 .

• Figma to Code (DhiWise) – DhiWise offers a Figma plugin (and platform) for generating code in
various frameworks (Flutter, React, etc.) with additional options like choosing state management
patterns 93 . It’s geared towards engineers who want to jump-start app development. Example: After
designing an app, you export to DhiWise, choose a Clean Architecture or MVVM template (for Flutter,
say), and get a downloadable project with screens set up. It even attempts to wire up basic
navigation. The plugin speeds up the mundane part of setting up files and folders, letting engineers
focus on business logic. Like others, code might need optimization, but it’s a significant time-saver
94 95 .

• Story.to.design (Storybook ↔ Figma) – Related to Storybook Connect, there are plugins that import
Storybook components into Figma as design objects. For instance, story.to.design can take a live
Storybook and generate Figma layers from it 96 97 . Example: A developer coded a new component
but the designer hasn’t drawn it in Figma – using story.to.design, they can import that coded
component (via Storybook) into the Figma file, ensuring the design file stays up-to-date with
implementation. This kind of plugin fosters a two-way sync between design and code.

• Design Lint – An honorable mention: while more design-side, it’s a linters for design files, catching
inconsistencies (e.g., a text that doesn’t use a style, or a color that’s off the style sheet). It’s very
useful for developers who receive Figma files – ensuring that the design system is consistently
applied before coding. Example: Run Design Lint and it flags that 5 text layers are pure black
(#000000) instead of the designated “Body text” style color. The designer can fix these, so the
developer doesn’t have to guess the intention. This plugin thus indirectly serves engineering by
enforcing consistency 98 99 .

(Other engineering plugins include: AVE Code (export SwiftUI code for iOS), Figma Export (export styles to CSS
variables or Android XML), Svg Generator (export layers as clean SVG code), and Accessibility plugins that generate
code snippets for accessible labels. Many handoff tools like Avocode or Supernova also have plugins to send Figma
assets to their platforms.)

11
Workflow & Automation Plugins (Productivity, Automation,
Localization, Data Sync)
• Rename It – A batch renaming tool to quickly rename layers or frames in bulk with patterns. This is
invaluable for keeping files organized without tedious manual renaming. Example: Suppose you
imported 100 images and they’re named randomly – with Rename It, you can select them and
rename to “Photo #” where # will number them sequentially. You can also find and replace text in
layer names, add prefixes/suffixes, etc. (e.g., prepend all selected layers with “nav/” to categorize) –
all in one go. This speeds up housekeeping tasks significantly.

• Batch Styler – Allows you to bulk-edit multiple text styles or color styles at once 100 . For instance, if
your design system decided to update the font family for all heading styles, Batch Styler can change
all text styles named “Heading” to the new font in one operation. Example: Change the font size of 10
different styles (H1, H2, H3, etc.) simultaneously instead of editing each one manually. This plugin
reads all styles and provides an interface to modify them in groups 100 . It’s a huge time-saver for
design system maintenance.

• Similayer – Selects layers similar to the current selection based on criteria (like same fill color, same
layer type, text content, etc.). This helps in performing batch operations. Example: Click on one red
rectangle, run Similayer to select all rectangles with that red fill, and then you can collectively change
them to a different color or delete them. Essentially, it’s like a “Select All Similar” command. Great for
cleaning files or making sweeping changes uniformly.

• Google Sheets Sync – Automates populating content from Google Sheets into your designs. Usage:
Designers can tag text layers with a specific syntax or use the plugin’s UI to bind a cell range to those
layers. Then Google Sheets Sync will pull in the latest spreadsheet data 101 . Example: You have a
design of a pricing table in Figma and a Google Sheet with actual pricing data. With this plugin, link
the Figma text nodes to the sheet cells. Whenever the content updates (e.g., marketing updates
prices in the sheet), you run the plugin to refresh the Figma text. This ensures data consistency and
saves copy-paste time. It’s very useful for localization and dynamic data as well – e.g., you can have a
sheet with translations and swap the content for different languages in your mockups. According to
its docs, “Google Sheets Sync can take content from your Google Sheet and pull it into your Figma file,
populating content and manipulating your design” 101 . (This plugin typically requires giving it access to
your Google sheet; many teams use a public or dummy sheet for this).

• Localization & Translation Plugins: If you design in multiple languages, plugins like
SimpleLocalize, Localazy, or Phrase can help. SimpleLocalize, for example, connects to a web
translation editor and lets you push/pull text strings from your Figma file 102 . Example: Your design
has text layers in English. Using SimpleLocalize, you can extract all text to their platform, get
translations, and then the plugin can create duplicate frames in Spanish or French by inserting the
translated text (adjusting for length). This helps designers evaluate layouts in different languages
(especially important for longer German text or right-to-left scripts like Arabic). It prevents the error-
prone manual process of replacing text for each language.

• Automater (Figma Automation) – There are emerging plugins that let you create mini-scripts or
automations (somewhat like Actions in Photoshop). For instance, Execution or Figma Automation

12
 plugin allows sequencing of commands: e.g., “select all circles, then enlarge by 2x, then apply this
style”. These are a bit niche but can supercharge power-users’ workflows for repetitive tasks.

• Instance Finder / Swap – For design system updates, plugins that find and replace components are
gold. Example: Instance Finder can list all instances of a certain component (say “Old Button”) and
then you can decide to swap them to a new component. Similarly, Master plugin (by Yordan from
the community) allowed re-linking of instances to a different master component, which Figma didn’t
originally allow natively. These kinds of tools automate what would otherwise be very tedious
(manually updating dozens of components).

• Project Cleanup Tools: We already covered Clean Document and Destroyer. Another is Design Lint
(again) which automates the process of finding style deviations. Breaker is a plugin that finds
broken image fills (missing links) or missing fonts. Archive/Unarchive plugin can bulk-hide or show
layers across pages. These all automate maintenance.

• Data Populator – A plugin by Microsoft (and others) that populates placeholder data from JSON or
CSV files. Example: If you have a card design, you prepare a JSON with an array of objects (each with
title, subtitle, image URL). Data Populator can duplicate the card for each entry in the JSON and fill in
the text and images accordingly. This is great for generating realistic mockups at scale (like 50
product cards with real text/images in seconds). It’s a more advanced form of content fill, useful for
data-intensive designs.

• Automation with Figma API & Scripting: For very advanced use, some developers use the REST API
outside of plugins to script repetitive tasks (using the Figma API in Node.js). However, within the
plugin ecosystem, you’re somewhat limited to user-triggered actions (the user must run the plugin;
you can’t have a plugin auto-run on a schedule or something in Figma). That said, consider building
internal plugins for your team that automate your specific workflow – many companies do this (e.g.,
a plugin to automate exporting assets to their particular folder structure, or syncing design tokens
with their repo). Figma’s API and plugin model is powerful enough to implement these, and the
above plugins are excellent exemplars of what’s possible.

Open-Source Templates & Resources: To kickstart plugin development, check out the official Figma Plugin
Samples repository on GitHub, which contains many example plugins covering various features 103 . You’ll
find samples for things like posting messages, handling images, UI with React, etc. The repository is a great
reference to see how Figma expects certain tasks to be done (e.g., the “post-message” sample demonstrates
UI communication). For a more structured approach, the community-built toolkit “Create Figma Plugin” (by
Yuan Qing) is available – it provides a CLI to scaffold a plugin with modern TypeScript, build process, and
even a UI library. Using such templates can save time on setup and ensure you follow best practices from
the start.

Documentation & Learning: Don’t forget to refer to the official Figma Developer Documentation for
Plugins (on Figma’s developers site) – it covers all APIs, manifest fields, and guides for common tasks (text
manipulation, network fetch, etc.). The Figma Help Center also has a “Build your first plugin” tutorial course
104 105 which, while basic, can be skimmed by experienced devs to ensure you didn’t miss any

fundamental setup steps. And Figma’s plugin review guidelines 106 38 are worth reviewing before
publishing, to avoid common pitfalls that might lead to rejection.

13
By combining the insights from this guide with these resources, an experienced developer should be well-
equipped to create a Figma plugin that is not only feature-rich but also robust, secure, and user-friendly.
Good luck with your Figma plugin development, and happy coding!

Sources:

• Figma Developer Docs – Plugin Architecture, UI, Network & OAuth 2 107 26 28
• Figma Plugin Manifest Documentation – dynamic page loading and networkAccess 6 44

• Figma Plugin Review Guidelines – Quality, Performance, Security expectations 14 48

• Popular Figma Plugins (2025) – Clay Global & Figmentor blogs 52 108 74
• Jan Six, Figma Tokens – Design Tokens plugin description 83 109
• Figma Help Center – Storybook plugin integration 84
• Google Sheets Sync Documentation 101 (data population example)
• GitHub – Figma plugin samples repository (UI styling and messaging) 13 15

14
 1 2 3 4 5 How Plugins Run | Developer Docs
https://developers.figma.com/docs/plugins/how-plugins-run/

6 7 37 39 40 41 44 45 46 51 Plugin Manifest | Developer Docs

https://developers.figma.com/docs/plugins/manifest/

8 9 10 42 43 Making Network Requests | Developer Docs

https://developers.figma.com/docs/plugins/making-network-requests/

11 12 15 16 17 18 19 20 21 22 23 107 Creating a User Interface | Developer Docs

https://developers.figma.com/docs/plugins/creating-ui/

13 35 36 103 GitHub - figma/plugin-samples: Sample Figma plugins.

https://github.com/figma/plugin-samples

14 34 38 48 49 50 106 Plugin and widget review guidelines – Figma Learn - Help Center
https://help.figma.com/hc/en-us/articles/360039958914-Plugin-and-widget-review-guidelines

24 25 26 27 28 29 30 31 32 33 OAuth with Plugins | Developer Docs

https://developers.figma.com/docs/plugins/oauth-with-plugins/

47 Figma | Appmixer Docs Site

https://docs.appmixer.com/connector-configuration/figma

52 53 54 55 56 57 58 59 60 61 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 20 Best Figma
Plugins for UI/UX and Web Designers in 2025 | Clay
https://clay.global/blog/web-design-guide/figma-plugin

62 What are your must use Figma plugins? that actually saved you time.
https://www.reddit.com/r/FigmaDesign/comments/1ntbeuw/what_are_your_must_use_figma_plugins_that/

79 86 87 98 99 108 Top 10 Figma Plugins to Boost Your Design Workflow in 2025 | Figmentor Blog
https://figmentor.io/blog/top-figma-plugins-for-designers-in-2025/

80 81 82 83 100 109 Figma Tokens: Design Tokens Plugin for Figma › Jan Six › Product Designer who codes
https://jansix.at/resources/figma-tokens

84 85 Storybook and Figma – Figma Learn - Help Center

https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma

88 89 90 91 92 93 94 95 6 Figma Code-Generator Plugins to Try | ICS

https://www.ics.com/blog/6-figma-code-generator-plugins-try

96 Storybook Figma plugin • Chromatic docs

https://www.chromatic.com/docs/figma-plugin/

97 Storybook to Figma - The ultimate guide - story.to.design

https://story.to.design/blog/from-storybook-to-figma

101 Google Sheets Sync: Getting Started

https://docs.sheetssync.app/

102 Figma Plugin for multi-language designs - SimpleLocalize

https://simplelocalize.io/figma-plugin/

104 105 BYFP: Overview – Figma Learn - Help Center

https://help.figma.com/hc/en-us/articles/4407260620823-BYFP-Overview

15