# Table of Contents

- [Introduction | Plugin API](#introduction-plugin-api)
- [Updates | Plugin API](#updates-plugin-api)
- [Prerequisites | Plugin API](#prerequisites-plugin-api)
- [API Reference | Plugin API](#api-reference-plugin-api)
- [Setting Editor Type | Plugin API](#setting-editor-type-plugin-api)
- [How Plugins Run | Plugin API](#how-plugins-run-plugin-api)
- [Plugin Quickstart Guide | Plugin API](#plugin-quickstart-guide-plugin-api)
- [API Reference | Widget API](#api-reference-widget-api)
- [ERROR: The request could not be satisfied](#error-the-request-could-not-be-satisfied)
- [Publishing | Plugin API](#publishing-plugin-api)
- [loadFontAsync | Plugin API](#loadfontasync-plugin-api)
- [Introduction | Widget API](#introduction-widget-api)
- [Updates | Widget API](#updates-widget-api)
- [Introduction | Code Connect](#introduction-code-connect)
- [Libraries and Bundling | Plugin API](#libraries-and-bundling-plugin-api)
- [Making Network Requests | Plugin API](#making-network-requests-plugin-api)
- [Working in Dev Mode | Plugin API](#working-in-dev-mode-plugin-api)
- [Accepting Parameters as Input | Plugin API](#accepting-parameters-as-input-plugin-api)
- [figma | Plugin API](#figma-plugin-api)
- [Asynchronous Tasks | Plugin API](#asynchronous-tasks-plugin-api)
- [ERROR: The request could not be satisfied](#error-the-request-could-not-be-satisfied)
- [Creating a User Interface | Plugin API](#creating-a-user-interface-plugin-api)
- [Figma: The Collaborative Interface Design Tool](#figma-the-collaborative-interface-design-tool)
- [Plugin Manifest | Plugin API](#plugin-manifest-plugin-api)
- [Figma Enterprise | Building Great Products at Scale](#figma-enterprise-building-great-products-at-scale)
- [Careers at Figma](#careers-at-figma)
- [FigJam: The Online Collaborative Whiteboard for Teams](#figjam-the-online-collaborative-whiteboard-for-teams)
- [The Typings File | Plugin API](#the-typings-file-plugin-api)
- [Accessing the Document | Plugin API](#accessing-the-document-plugin-api)
- [Updates for 2024-12-19 | Widget API](#updates-for-2024-12-19-widget-api)
- [Global Objects | Plugin API](#global-objects-plugin-api)
- [API Errors | Plugin API](#api-errors-plugin-api)
- [figma.clientStorage | Plugin API](#figma-clientstorage-plugin-api)
- [Figma for Education | Free Tools for the Classroom](#figma-for-education-free-tools-for-the-classroom)
- [Editing Properties | Plugin API](#editing-properties-plugin-api)
- [Prerequisites | Widget API](#prerequisites-widget-api)
- [Updates for 2024-09-27 | Widget API](#updates-for-2024-09-27-widget-api)
- [Node Types | Plugin API](#node-types-plugin-api)
- [figma.ui | Plugin API](#figma-ui-plugin-api)
- [Version 1.9.2 | Widget API](#version-1-9-2-widget-api)
- [figma.util | Plugin API](#figma-util-plugin-api)
- [Setup Guide | Widget API](#setup-guide-widget-api)
- [Resource Links | Plugin API](#resource-links-plugin-api)
- [CSS Variables and Theming | Plugin API](#css-variables-and-theming-plugin-api)

---

# Introduction | Plugin API

[Skip to main content](#)

On this page

Welcome to the Plugin API!

Plugins are programs or applications [created by the Community](https://www.figma.com/community/plugins)
 that extend the functionality of Figma's editors. Plugins run in files and perform one or more actions. Users and organizations take advantage of plugins to customize their experience and create more efficient workflows.

Plugins are created using two common languages of web development: JavaScript and HTML. You’ll need an understanding of these languages to develop plugins. You’ll write the functionality of your plugins in **JavaScript** and build your user interface (UI) using **HTML**. [**Explore required knowledge →**](/plugin-docs/prerequisites/)

Plugins interact with Figma's editors using the dedicated **Plugin API**. They can also leverage the external web APIs available in most modern browsers. You can build plugins that run immediately when invoked by the user, or that require users to input information via custom UI. [**Explore how plugins are run →**](/plugin-docs/how-plugins-run/)

The [API reference](/plugin-docs/api/api-reference/)
 and this accompanying documentation has the information you need to build plugins. To ask questions, give feedback, or connect with other plugin developers: [**Join our community-driven Discord server →**](https://discord.gg/xzQhe2Vcvx)

Our quickstart guide takes you through the process of setting up your environment and running a sample plugin. [**Get started with the Plugin API →**](/plugin-docs/plugin-quickstart-guide/)

[](#plugin-api-access "Direct link to heading")
Plugin API access
-----------------------------------------------------------------

The Plugin API supports both **read** and **write** access to Figma’s editors, allowing developers to view, create, and modify the contents of files. You can access most of the plugin API through the [**figma**](/plugin-docs/api/figma/)
 global object.

Plugins interact with, first and foremost, the content of files. That's anything that exists in the layers panel and any properties associated with those layers in the properties panel. Plugins can view and modify aspects of these layers (or nodes), like the color, position, hierarchy, text, etc.

Figma files are [loaded dynamically](https://help.figma.com/hc/en-us/articles/1500005554982-Guide-to-files-and-projects#h_01HHDQ77YC3D3NK7K9DEE3SQKQ)
. This means that [pages](https://help.figma.com/hc/en-us/articles/1500005554982-Guide-to-files-and-projects#design-pages)
 are only loaded by the editor as needed (for example, when a user navigates to a page). Plugins must use asynchronous APIs to access parts of the file that are outside of the currently-viewed page.

There are some limitations to what plugins can access:

*   Styles and components from any team or organization libraries. The Plugin API can only access styles, components, and instances that are currently in the file, or have been imported into the file via a function like [`importComponentByKeyAsync()`](/plugin-docs/api/figma/#importcomponentbykeyasync)
    .
*   External fonts or web fonts accessed via a URL. Plugins can only access fonts that are accessible in the editor, which includes Figma's default fonts, [shared organization fonts](https://help.figma.com/hc/en-us/articles/360039956774)
    , or [fonts stored locally on your computer](https://help.figma.com/hc/en-us/articles/360039956894)
    . The Plugin API can only access editor fonts that have been [loaded via `loadFontAsync()`](/plugin-docs/api/properties/figma-loadfontasync/)
    . This doesn't apply to fonts that you use in your plugin's UI.
*   Other file metadata like the file's team or location, permissions, or any comments associated with that file. The includes the version history of that file. You can get read access to these aspects of a file via [Figma's REST API](https://www.figma.com/developers/api#intro)
    .

Plugins can behave differently depending on what the user is doing, such as whether they're in Figma Design Mode, Dev Mode, FigJam, or Figma Slides. Plugins running in Dev Mode have certain differences that are important to understand. Learn more in our [**Working in Dev Mode →**](/plugin-docs/working-in-dev-mode/)
 guide.

**Document structure**

Every file in Figma consists of a tree of nodes, and at the root of every file is a DocumentNode. The DocumentNode is how you access and explore the contents of a file.

In a Figma design or FigJam file, every DocumentNode will have PageNodes that represent each page in that Figma file. In the case of Figma Slides, there is only one PageNode, representing the slide deck. There is only one DocumentNode per browser tab and each of its children are PageNodes. Because Figma files are [loaded dynamically](https://help.figma.com/hc/en-us/articles/1500005554982-Guide-to-files-and-projects#h_01HHDQ77YC3D3NK7K9DEE3SQKQ)
, not all PageNodes are immediately loaded and available to a plugin. Developers can use the Plugin API to load and traverse additional PageNodes as needed.

The **DocumentNode** can have any number of child nodes. Each subtree that stems from the DocumentNode represents a layer or object on the canvas. There are specific nodes or classes for different types of layers in Figma — like frames, components, vectors, and rectangles.

Nodes have a number of properties associated with them. Some of these are **global properties**, that exist on every node, whereas other properties will be specific to the type of node.

You can create plugins for a specific editor type, for multiple editors, or build plugins that perform different actions in different editors. While some node types can only be created in a specific file or editor type, you will generally be able to read and modify most nodes, regardless of the editor type, unless your plugin is running in Dev Mode. [**Working in Dev Mode guide →**](/plugin-docs/working-in-dev-mode/)

**Asynchronous**

The Plugin API is designed to be used asynchronously, and Figma encourages plugin developers to utilize the asynchronous methods provided by the Plugin API. A number of critical operations for Figma plugins, like loading pages and working with fonts and images, are asynchronous. [**Asynchronous Tasks →**](/plugin-docs/async-tasks/)

**Browser based**

Figma is predominantly browser-based software, which means it can be run on all full desktop operating systems (MacOS, Windows, Linux, etc), as well as Chrome OS .

Like Figma, plugins are powered by web technologies. Part of the Plugin API runs in an `<iframe>`, which means you can also access browser APIs. This includes making network requests, opening local files, and using functionality like `<canvas>`, WebGL, and WebAssembly, etc. [**How Plugins Run →**](/plugin-docs/how-plugins-run/)

[](#user-actions "Direct link to heading")
User actions
-------------------------------------------------------

Plugins run in files and perform one or more user actions. These user actions are usually short-lived and must be initiated by the user.

*   Users can only run one plugin and one action at a time.
*   It’s not possible to build plugins that run in the background.

You can choose whether your plugin runs immediately, or if users can enter in [parameters](/plugin-docs/plugin-parameters/)
.

**Plugin UI** A plugin can also open a modal as an `<iframe>` and write HTML, CSS and JavaScript inside that `<iframe>`. You're free to create any UI you want inside that modal. [**Create a user interface →**](/plugin-docs/creating-ui/)

Being able to pull from a library of components that match Figma's design system can significantly speed up plugin development and helps you create a UI that's mirrors Figma's own UI. While we don't provide these components as part of the core Figma Plugin API, Figma employee and plugin developer Tom Lowry has put together a library of React components which you can use to build the UI of your plugin. [**Open the GitHub repo →**](https://github.com/thomas-lowry/figma-plugins-on-github)

**Plugin parameters** Developers can create plugins with parameters that allow plugins to accept input from users via [the quick actions menu](https://help.figma.com/hc/en-us/articles/360040328653-Use-shortcuts-and-quick-actions#:~:text=To%20access%20the%20quick%20actions,Control%20%2B%20%2F%20or%20Control%20%2B%20P)
.

Adding parameters means that in many cases you don't need to build a custom UI. It also provides a streamlined experience for users of the plugin, who can run a plugin directly from the quick actions menu using their keyboard.

**Relaunch plugins** When building a plugin, you have the option to create buttons in Figma's UI that allows users to relaunch your plugin. This makes it easier to run a plugin multiple times and allows collaborators to relaunch the plugin from the same file. You can do this using the `[setRelaunchData()](/plugin-docs/api/properties/nodes-setrelaunchdata/)` function.

manifest.json:

    "relaunchButtons": [  {"command": "edit", "name": "Edit shape"},  {"command": "open", "name": "Open Shaper", "multipleSelection": true}]

In Figma design files, the relaunch button will appear in the **Properties** panel. In Dev Mode, relaunch buttons appear in the Inspect panel.

In FigJam files, the relaunch button appears in the properties menu for a node. Relaunch buttons are not available on page or document nodes in FigJam.

Multiple relaunch buttons can be added to the same node. If multiple relaunch buttons from the same plugin are added to the same node, they are grouped together into one button with submenus. The order of buttons is determined by the order of the elements in the manifest's `relaunchButtons` array. [Learn more in the plugin manifest documentation →](/plugin-docs/manifest/)

[](#plugin-management "Direct link to heading")
Plugin management
-----------------------------------------------------------------

**Support**

Figma does not provide support for third-party applications. As the plugin's developer, it's your responsibility to assist your plugin's users with technical issues. You need to add a **Support contact** when you submit your plugin for approval. This can be an email address users can contact, or a link to a website or help center. [**Manage plugins as a developer →**](https://help.figma.com/hc/en-us/articles/360042293714)

**Versioning**

Once Figma approves your plugin, you don't need to submit your plugin for further review. This means you can publish any updates immediately. You'll be able to added a detailed description of any changes or updates in the plugin's **Version history**. You’ll also be able to update the plugin’s [security disclosure form](https://help.figma.com/hc/en-us/articles/16354660649495)
 if you’ve changed your plugin’s data practices. When you publish an update, Figma will update the plugin for every user. It's not possible for users to revert to a previous version of the plugin. If you need to roll back any changes, you can republish an earlier version of the plugin.

**Analytics**

Figma doesn't currently provide any analytics or reporting around plugin usage or error/crash reporting. We recommend using your own analytics or crash reporting service to monitor your plugins performance. Figma will send plugin developers a notification each week about any engagement they've gotten from users in the [Figma Community](https://www.figma.com/community)
.

On this page

*   [Plugin API access](#plugin-api-access)
    
*   [User actions](#user-actions)
    
*   [Plugin management](#plugin-management)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Updates | Plugin API

[Skip to main content](#)

We're making some changes to plugin data storage.

New:

*   The total [client storage](/plugin-docs/api/figma-clientStorage/)
     limit is now 5 MB, up from 1 MB previously
*   [`setSharedPluginData`](/plugin-docs/api/properties/nodes-setplugindata/)
     and [`setSharedPluginData`](/plugin-docs/api/properties/nodes-setsharedplugindata/)
     have new per-entry 100 kB limits

Bug fixes:

*   Fix the return type for [node.getRangeBoundVariable()](/plugin-docs/api/TextNode/#getrangeboundvariable)
    .

* * *

We've added a timeout to the `figma.codegen.on` callback. Now, if code generation takes longer than 3 seconds, it will automatically stop and an error message will be displayed in the codegen panel.

For more information, see:

*   [Codegen plugins](/plugin-docs/codegen-plugins/)
    
*   [`figma.codegen.on` callback](/plugin-docs/codegen-plugins/)
    

* * *

To help developers enhance decks and presentations, Figma Slides now supports plugins! You can use the new API features to effectively enable users to create beautiful, functional slide decks.

New:

*   Figma's Plugin API typings now support Figma Slides.
*   Figma Slides has four new node types: [SLIDE](/plugin-docs/working-in-slides/#slide)
    , [SLIDE\_ROW](/plugin-docs/working-in-slides/#slide_row)
    , [SLIDE\_GRID](/plugin-docs/working-in-slides/#slide_grid)
    , and [INTERACTIVE\_SLIDE\_ELEMENT](/plugin-docs/working-in-slides/#interactive_slide_element)
    .
*   `figma.editorType` can now return `slides` when a plugin is running in Figma Slides.
*   `figma.viewport.slidesMode` can be used to toggle between `grid` view or `single-slide` view.
*   `figma.currentPage.focusedSlide` identifies the slide currently focused on in the interface.
*   `figma.getSlideGrid()` returns the slide grid, a 2D representation of slides within a deck.
*   `figma.setSlideGrid()` is used to reorder slides in the grid.
*   `getSlideTransition()` gets the current transition for a given `SLIDE` node.
*   `setSlideTransition()` is used to set the transition for a given `SLIDE` node.

For more information, see the [Working in Slides](/plugin-docs/working-in-slides/)
 guide.

* * *

Figma now supports proportional resizing via the `Lock aspect ratio` option. This replaces the legacy `constrainProportions` option. `constrainProportions` maintains backwards compatibility by setting the new [`targetAspectRatio`](/plugin-docs/api/properties/nodes-targetaspectratio/)
 field, but we encourage you to use the new property.

* * *

Previously, [createPage](/plugin-docs/api/properties/figma-createpage/)
 could incorrectly create more pages than supported by Figma's Starter plan. This issue has been fixed.

* * *

**New**:

Figma now supports customizing underlines. The following changes were made to support getting and setting new underline features:

*   [textDecorationStyle](/plugin-docs/api/TextNode/#textdecorationstyle)
    , [textDecorationOffset](/plugin-docs/api/TextNode/#textdecorationoffset)
    , [textDecorationThickness](/plugin-docs/api/TextNode/#textdecorationthickness)
    , [textDecorationColor](/plugin-docs/api/TextNode/#textdecorationcolor)
    , and [textDecorationSkipInk](/plugin-docs/api/TextNode/#textdecorationskipink)
     are now supported on [TextNode](/plugin-docs/api/TextNode/)
    
*   Added support for [textDecorationStyle](/plugin-docs/api/TextNode/#textdecorationstyle)
    , [textDecorationOffset](/plugin-docs/api/TextNode/#textdecorationoffset)
    , [textDecorationThickness](/plugin-docs/api/TextNode/#textdecorationthickness)
    , [textDecorationColor](/plugin-docs/api/TextNode/#textdecorationcolor)
    , and [textDecorationSkipInk](/plugin-docs/api/TextNode/#textdecorationskipink)
     in [getStyledTextSegments()](/plugin-docs/api/properties/TextNode-getstyledtextsegments/)
    
*   Added ranged getters [getRangeTextDecorationStyle()](/plugin-docs/api/node-properties/#getrangetextdecorationstyle)
    , [getRangeTextDecorationOffset()](/plugin-docs/api/node-properties/#getrangetextdecorationoffset)
    , [getRangeTextDecorationThickness()](/plugin-docs/api/node-properties/#getrangetextdecorationthickness)
    , [getRangeTextDecorationColor()](/plugin-docs/api/node-properties/#getrangetextdecorationcolor)
    , and [getRangeTextDecorationSkipInk()](/plugin-docs/api/node-properties/#getrangetextdecorationskipink)
    .
*   Added ranged setters [setRangeTextDecorationStyle()](/plugin-docs/api/node-properties/#setrangetextdecorationstyle)
    , [setRangeTextDecorationOffset()](/plugin-docs/api/node-properties/#setrangetextdecorationoffset)
    , [setRangeTextDecorationThickness()](/plugin-docs/api/node-properties/#setrangetextdecorationthickness)
    , [setRangeTextDecorationColor()](/plugin-docs/api/node-properties/#setrangetextdecorationcolor)
    , and [setRangeTextDecorationSkipInk()](/plugin-docs/api/node-properties/#setrangetextdecorationskipink)
    .

* * *

**New**:

Figma now supports per-paragraph fields. The following changes were made to support getting and setting indent and spacing per paragraph:

*   Added support for [paragraphSpacing](/plugin-docs/api/node-properties/#paragraphspacing)
    , [paragraphIndent](/plugin-docs/api/node-properties/#paragraphindent)
    , and [listSpacing](/plugin-docs/api/node-properties/#listspacing)
     in [getStyledTextSegments()](/plugin-docs/api/properties/TextNode-getstyledtextsegments/)
    
*   Added ranged getters [getRangeParagraphSpacing()](/plugin-docs/api/node-properties/#getrangeparagraphspacing)
    , [getRangeParagraphIndent()](/plugin-docs/api/node-properties/#getrangeparagraphindent)
    , and [getRangeListSpacing()](/plugin-docs/api/node-properties/#getrangelistspacing)
    .
*   Added ranged setters [setRangeParagraphSpacing()](/plugin-docs/api/node-properties/#setrangeparagraphspacing)
    , [setRangeParagraphIndent()](/plugin-docs/api/node-properties/#setrangeparagraphindent)
    , and [setRangeListSpacing()](/plugin-docs/api/node-properties/#setrangelistspacing)
    .
*   [paragraphSpacing](/plugin-docs/api/node-properties/#paragraphspacing)
     and [paragraphIndent](/plugin-docs/api/node-properties/#paragraphindent)
     are now supported on [boundVariables](/plugin-docs/api/node-properties/#boundvariables)
    

* * *

**New**:

We’ve made updates to our Plugin and REST APIs so you can build more powerful plugins that increase efficiency and create more dynamic user experiences.

*   **Annotations and measurements**: Create and edit annotations and measurements from Dev Mode through the Plugin API. Generate bulk annotations, format annotations according to a style or template, add context or links from other tools to annotations, and more. Learn more about [annotations](/plugin-docs/api/Annotation/)
     and [measurements](/plugin-docs/api/Measurement/)
    .
    
*   **Rich text formatting for component description**: Build plugins that can read and edit the full rich-text version of the component description, giving users the same level of detail as Figma's UI. [Learn more](/plugin-docs/working-with-rich-text/)
    
*   **Advanced prototyping interactions**: Access all prototyping reactions through the Plugin and REST APIs to bring Figma prototypes to life in other interaction tools. [Learn more](/plugin-docs/api/Reaction/)
    

* * *

**New**:

The Plugin API now contains support for page dividers:

*   Create a page divider node appended to the document node's list of children using [createPageDivider](/plugin-docs/api/properties/figma-createpagedivider/)
    .
*   Change the [name](/plugin-docs/api/properties/nodes-name/)
     of an empty [PageNode](/plugin-docs/api/PageNode/)
     to a page divider name to turn the node into a page divider.
*   Read a page node's [isPageDivider](/plugin-docs/api/PageNode/#ispagedivider/)
     property to determine whether the node is a page divider.

* * *

This version of the plugin-typings package was skipped.

* * *

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Prerequisites | Plugin API

[Skip to main content](#)

Figma plugins are lightweight web applications that extend the functionality of Figma’s products. Plugins are written in **JavaScript** and their UI is created with **HTML**.

The Figma Plugin API is intended to be easy to use. We do our best to abstract away the complexities of design tools and provide quality-of-life improvements such as a linter, TypeScript type definitions, and helper functions. However, at least some basic experience with JavaScript and HTML are necessary to build Figma plugins.

If you have no prior experience in programming or web development, there are many free education resources out there that can help you. Here are just a few of the popular ones:

*   [The Odin Project](https://www.theodinproject.com/courses/web-development-101)
    
*   [Codecademy: Web Development](https://www.codecademy.com/learn/paths/web-development)
    
*   [Khan Academy: Intro to JS](https://www.khanacademy.org/computing/computer-programming/programming)
    

In addition, many of the tools used in modern web development will be useful for building more complex plugins. You don't need to learn these tools before starting to write plugins, but they will come in handy eventually. We opted to build on top of the most popular open-source tools in the web development community rather than to roll out our own proprietary solutions. Here are some examples of things you might end up using:

*   An integrated development environment (IDE) such as [VS Code](https://code.visualstudio.com/)
    , [Eclipse IDE](https://eclipseide.org/)
    , or [IntelliJ IDEA](https://www.jetbrains.com/idea/)
    : As a developer, IDEs can be a useful way to work across multiple files or sources and often provide extensions that make life easier. JavaScript and HTML are well-supported languages in most IDEs.
*   [Asynchronous JavaScript](/plugin-docs/async-tasks/)
    : Async operations are an important part of Figma plugins, such as for loading pages or requesting and using data that may take a brief time to return.
*   TypeScript: Figma provides TypeScript types for the various methods, interfaces, and other features that are a part of the Plugin API.
*   Webpack, to [bundle](/plugin-docs/libraries-and-bundling/)
     large multi-file projects and import libraries: Bundling helps pack dependencies into the format required for Figma plugins.
*   React, Vue, etc. to create complex user interfaces.

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# API Reference | Plugin API

[Skip to main content](#)

On this page

The API reference includes the resources and materials to navigate the Plugin API. You can explore the Plugin API using any of the entry points in the sidebar.

If you’re new to Figma or plugins, we’ve outlined some of the key resources involved below. Make sure to read through our development guides for tips and best practices!

[](#global-objects-and-variables "Direct link to heading")
Global objects and variables
---------------------------------------------------------------------------------------

You can access most of the Plugin API through the [`figma`](/plugin-docs/api/figma/)
 global object and its sub-objects. You’ll find properties and functions that allow you to view, create, and update the contents of files.

There are also global variables available across the Plugin API: [`__html__`](/plugin-docs/api/global-objects/#html)
 and [`__uiFiles__`](/plugin-docs/api/global-objects/#uifiles)
. You can use these variable to access the contents of your ui files.

[**Explore global objects and variables →**](/plugin-docs/api/global-objects/)

[](#node-types "Direct link to heading")
Node types
---------------------------------------------------

In Figma, nodes are the way we represent the contents of a file. Every layer in a Figma design or FigJam file corresponds to a node.

Each node supports a range of properties. Some properties are universal, some are shared between nodes and some are unique to specific node types.

Select a [**Node type**](/plugin-docs/api/nodes/)
 to see which properties are supported on that node.

[](#node-properties "Direct link to heading")
Node properties
-------------------------------------------------------------

Some node properties are supported across node types. You can use the [Shared Node Properties](/plugin-docs/api/node-properties/)
 section to explore these shared properties. We show which node types a property is supported on.

[](#data-types "Direct link to heading")
Data types
---------------------------------------------------

To assist you with writing your plugin code, we provide a TypeScript [typings file](/plugin-docs/api/typings/)
 for the entire Plugin API. The typings file is a collection of type and interface declarations you can use for type checking.

These declarations represent groups of related properties, parameters, and other data you’ll interact with in Figma. You’ll see types and interfaces in a few places in the API reference.

*   To get and set properties on nodes or global objects
*   Passed as parameters in a function
*   Returned by a method

You can access types and interfaces from any properties and methods that use them. Or, you can explore types and interfaces in the [Data Types](/plugin-docs/api/data-types/)
 section of the sidebar.

[](#other-resources "Direct link to heading")
Other resources
-------------------------------------------------------------

### [](#plugin-manifest "Direct link to heading")
Plugin manifest

Every plugin must define a `manifest.json` file that describes the plugin. Figma creates a simple manifest when you register a plugin for development.

You can extend this manifest to take advantage of optional functionality. For example: accept plugin parameters, or create private plugins in an organization.

**[View plugin manifest properties →](/plugin-docs/manifest/)
**

### [](#typings-file "Direct link to heading")
Typings file

The API reference and documentation explain the structure of the the API and how it works. This is great when exploring the API or understanding supported features and functions.

We provide a [typings file](/plugin-docs/api/typings/)
 with type annotations for the entire Plugin API. When used with an editor, like [VSCode](https://code.visualstudio.com/)
, this provides you with suggestions as you code. This helps to reduce errors and catch edge cases.

We also provide a set of [typescript-eslint rules](https://github.com/figma/eslint-plugin-figma-plugins?tab=readme-ov-file#eslint-plugin-figma-plugins)
 that ensure you're correctly using the Plugin API. The GitHub repository includes detailed instructions for installing and using the rules to test your plugin code.

You don’t have to use TypeScript when developing plugins, but we strongly recommend you do! The API reference and all associated guides use it.

**[Set up TypeScript →](/plugin-docs/typescript/)
**

##### tip

💡 We update the typings file any time we make changes to the API. To get the latest typings, run `npm install --save-dev @figma/plugin-typings`.

On this page

*   [Global objects and variables](#global-objects-and-variables)
    
*   [Node types](#node-types)
    
*   [Node properties](#node-properties)
    
*   [Data types](#data-types)
    
*   [Other resources](#other-resources)
    *   [Plugin manifest](#plugin-manifest)
        
    *   [Typings file](#typings-file)
        

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Setting Editor Type | Plugin API

[Skip to main content](#)

The [editorType](/plugin-docs/manifest/#editortype)
 field is a required field in plugin manifests. Use it to specify which editor your plugin works in. You can create plugins for a specific editor type (i.e. one of Figma's editor products), a combination of editor types, or build plugins that perform different actions in each editor. You can use any of the below combinations of editor types:

Specifying supported editor types in manifest.json

    // A plugin that works in Figma design and FigJam"editorType": [  "figjam",  "figma"]// A plugin that works in Figma design and Dev Mode"editorType": [  "figma",  "dev"]// A plugin that only works in Figma design"editorType": [  "figma"]// A plugin that only works in FigJam"editorType": [  "figjam"]// A plugin that only works in Dev Mode"editorType": [  "dev"]// A plugin that only works in Figma Slides"editorType": [  "slides"]

##### caution

Plugins cannot specify both `"dev"` and `"figjam"` editor types at the same time.

Keep in mind, when you specify multiple editor types, your plugin won't have access to certain functions and events depending on the editor the plugin runs in. For example, if you use `figma.createSticky()`, the code will work while the plugin is running in FigJam, but not when you run it in Figma.

Learn more about which APIs are accessible in each editor:

*   [Working with FigJam](/plugin-docs/working-in-figjam/)
    
*   [Working in Dev Mode](/plugin-docs/working-in-dev-mode/)
    
*   [Working in Slides](/plugin-docs/working-in-slides/)
    

If you want to set conditional logic in your plugin to assign behavior based on the editor the plugin is running in, you can use the method [`figma.editorType`](/plugin-docs/api/figma/#editortype)
. This will return a string value of `figma`, `figjam`, `dev` or `slides`.

Using figma.editorType to check where the plugin is being run

    if (figma.editorType === 'figjam') {  // In FigJam}if (figma.editorType === 'figma') {  // In Figma design mode}if (figma.editorType === 'dev') {  // In Figma's Dev Mode}if (figma.editorType === 'slides') {  // In Figma Slides}

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# How Plugins Run | Plugin API

[Skip to main content](#)

On this page

Figma plugins are written using primarily JavaScript and HTML. The environment exposed to plugins by the Figma editor, FigJam, and Figma Slides is very similar to a standard web browser and includes many of the same features. There are, however, some important differences.

In order for a plugin system to be secure and stable, some browser APIs are unavailable or need to be accessed differently. This is imporant to understand so you can answer questions like:

*   How do I [access the contents of a Figma file](/plugin-docs/accessing-document/)
    ?
*   How do I create a [user interface for my plugin](/plugin-docs/creating-ui/)
    ?
*   How do I [make network requests](/plugin-docs/making-network-requests/)
    ?

[](#plugin-environment "Direct link to heading")
Plugin environment
-------------------------------------------------------------------

For performance, Figma uses an execution model where plugin code runs on the **main thread in a sandbox**. The sandbox is a minimal JavaScript environment and **does not expose browser APIs**. This means that you have all of standard JavaScript ES6+ available, including the standard types, the JSON and Promise APIs, binary types like Uint8Array, etc. We have also added a minimal version of the console API. But browser APIs like XMLHttpRequest and the DOM are not _directly_ available from the sandbox.

To use browser APIs or show a custom UI for your plugin, you need to create an `<iframe>` with a `<script>` tag inside. This can be done with [`figma.showUI()`](/plugin-docs/creating-ui/)
. Inside of this `<iframe>`, you can write any HTML/JavaScript and access any browser APIs. To see the list of available JavaScript/Browser APIs on the main thread, run `console.log(this)` as the first line of your plugin.

The main thread can access the Figma "scene" (the hierarchy of layers that make up a Figma document) but not the browser APIs. Conversely, the iframe can access the browser APIs, but not the Figma scene. The main thread and the iframe can communicate with each other through **message passing**.

![](https://static.figma.com/uploads/04c4c6293fce2a7fe67bccd385ee5ab998705780)

Additional network security is enforced if your plugin [limits network access](/plugin-docs/manifest/#networkaccess)
. When network access is limited, if your plugin attempts to access a domain that isn't specified in your plugin's manifest, Figma blocks that attempt and returns a content-security policy (CSP) error.

The enforcement of domain access is limited only to requests made by the plugin, such as Fetch API requests to a public REST API. If your plugin renders a website in an iframe, network access limits only apply directly to the website's domain. Network access limits do not affect resources needed by that website. For example, suppose your plugin limits access only to `figma.com`. Your plugin would be prevented from rendering content from other domains. However, `figma.com` would still be able to load external resources, such as scripts for Google Analytics.

When the plugin is finished with its work, it must call `figma.closePlugin()` to tell Figma that it is finished. If a plugin is not properly closed, the plugin runs indefinitely and the user sees a "Running \[your plugin name\]" toast notification until they close the tab.

Note that the user can cancel the plugin at any point by using the UI that Figma displays while the plugin is running. When this happens, Figma will itself call `figma.closePlugin()`.

[](#file-loading "Direct link to heading")
File loading
-------------------------------------------------------

Pages in Figma files are loaded as needed, and most plugins will _not_ require access to a user’s complete Figma document. If your plugin acts on multiple or all pages in a user's file, you can still improve the experience of users in a very large file by having your plugin [load more pages only as needed](/plugin-docs/accessing-document/)
. To help, TypeScript type definitions are available in our [official typings](https://github.com/figma/plugin-typings)
.

On this page

*   [Plugin environment](#plugin-environment)
    
*   [File loading](#file-loading)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Plugin Quickstart Guide | Plugin API

[Skip to main content](#)

On this page

This QuickStart guide takes you through the setup of our recommended development environment: using TypeScript in Visual Studio Code. You don’t have to use this combination. You can write directly in JavaScript—or any language that translates to JavaScript—and use your preferred text editor.

By the end of this guide, you will have a plugin that opens a modal, asks the user for a number, and creates that many rectangles on the canvas of a Figma design file. If you’re new to Figma plugin development, make sure to read through our plugin concepts. They cover information, such as required knowledge, how plugins run, and what you can do with plugins.

[](#download-tools "Direct link to heading")
Download tools
-----------------------------------------------------------

Before we begin, you need to install the following tools:

*   **[The Figma desktop app](https://www.figma.com/downloads/)
    :** Plugin development and testing requires the Figma desktop app. Figma will need to read your plugin code saved as a local file. You can download it from the [Figma downloads page](https://www.figma.com/downloads/)
    . If you already have the desktop app installed, make sure you’re running the latest version.
*   **[Visual Studio Code](https://code.visualstudio.com/)
    :** This is the development environment you’ll be using for the QuickStart guide.

[](#create-a-new-plugin "Direct link to heading")
Create a new plugin
---------------------------------------------------------------------

1.  Log into the desktop app and create a new design file.
2.  From the menu, navigate to **Plugins** > **Development**, then select **New plugin.**
3.  From the **Create a plugin** modal, select **Figma design** and give your plugin a name.

![Create plugin modal with “my-first-plugin” in the name field and the Figma design template selected](https://static.figma.com/uploads/0d570b32b3be687096ba80b276c762a076a7b06d)

4.  Select **Custom UI**
5.  Click **Save as** to save it anywhere on your disk.

[](#open-the-plugin-code-folder "Direct link to heading")
Open the plugin code folder
-------------------------------------------------------------------------------------

1.  Launch Visual Studio Code.
2.  Go to **File** > **Open Folder** and then select the folder you saved when you created a new plugin.
3.  If you see a verification modal, check the box and click **Yes, I trust the authors** to proceed.

![“MY FIRST PLUGIN” folder open in the Visual Studio Code explorer](https://static.figma.com/uploads/2a7c7f094a751cd1937dda5b2290f7db03892121)

[](#install-project-dependencies "Direct link to heading")
Install project dependencies
---------------------------------------------------------------------------------------

When you first open the project in Visual Studio Code, you may notice a few errors highlighted in our files. To fix this, we’ll need to install some project dependencies.

![The contents of the “code.ts” file for a sample plugin in Visual Studio Code](https://static.figma.com/uploads/c123dd90666139daf89852d9cff8d5ce9bb23253)

### [](#nodejs-and-npm "Direct link to heading")
Node.js and npm

**Node** provides a way to run JavaScript outside of the browser and npm is the default package manager for Node.

**Npm** is both a command-line tool and an online repository of open source Node.js projects. Instead of manually including dependencies in our project, npm makes it easy to install these dependencies using scripts.

When you download Node from the [Nodejs.org](https://nodejs.org/en/)
 website, your download also includes npm.

1.  Select the installer to start the Node.js Setup Wizard.
2.  When the installer asks about tools for native modules, check **Automatically install the necessary tools** and select **Next**.
3.  Select **Install**.
4.  After the install is complete, select **Finish**.

##### info

You can check that Node.js was successfully installed in Visual Studio Code.

In Visual Studio Code, select **Terminal** > **New terminal**. Type `node` into the terminal and press `enter`.

The terminal should return the version of Node.js you installed. If you’re not seeing this message, restart Visual Studio and run the command again.

Hit `Ctrl`\-`C` twice to exit Node.

![Developer terminal with the user typing node and pressing enter](https://static.figma.com/uploads/a486c870fc6bf4f6fc69b2449e984bd334fd81d5)

### [](#typescript "Direct link to heading")
TypeScript

We recommend using [TypeScript](https://www.typescriptlang.org/)
 for developing Figma plugins. We provide a [typings file](/plugin-docs/api/typings/)
 with type annotations for the entire Plugin API.

When you install the typings for the Plugin API, Visual Studio Code provides you with suggestions as you code.

![Developer typing figma.create in Visual Studio Code and typescript suggesting possible options](https://static.figma.com/uploads/010c735d46dc7cce00561c195bfb06af9af217c0)

This helps to reduce errors and catch edge cases. You can only use the typings file with TypeScript.

If you take a look at the file named `package.json`, under `devDependencies` you’ll notice that we’ve already included:

*   TypeScript: `typescript`
*   The plugin typings: `@figma/plugin-typings`
*   ESLint and the linter dependencies:
    *   `eslint`
    *   `@typescript-eslint/eslint-plugin`
    *   `@typescript-eslint/parser`
    *   `@figma/eslint-plugin-figma-plugins`
*   The configuration for the [plugin linter](#plugin-linter)
    

![This example shows the package.json file open in Visual Studio Code.](https://static.figma.com/uploads/09ea3bc2e7b8245ff78779c8d43c27a20e2e97f0)

`npm` allows us to install all dependencies from `package.json` using a single command.

1.  Open the terminal in Visual Studio Code. You can toggle the terminal view under **View** > **Terminal**. If you want to start with a new terminal, go to **Terminal** > **New terminal**.
2.  In the terminal type `npm install` and press `Enter`.

If the dependencies were installed, there should be no errors highlighted in our files. You’ll also notice a new dropdown in the Explorer named `node_modules`.

A new dropdown directory will be available under **Explorer.** If you expand this, you’ll see a few starter files already exist in our project.

##### info

You can check that TypeScript was successfully installed in Visual Studio Code.

In Visual Studio Code, select **Terminal** > **New terminal**. Type `tsc -v` into the terminal and press `enter`.

The terminal should return the version of TypeScript you installed. If you’re not seeing this message, restart Visual Studio and run the command again.

### [](#plugin-linter "Direct link to heading")
Plugin linter

Linting, the automated validation of source code for issues, can be very helpful for catching errors early in the development of your plugin. Figma provides a set of [typescript-eslint rules](https://github.com/figma/eslint-plugin-figma-plugins?tab=readme-ov-file#eslint-plugin-figma-plugins)
 to help support plugin development. These rules can identify, and in many cases automatically fix, issues in your plugin code.

When you create your plugin, the plugin linter is already included in the dependencies and ready to go. We provide the following configuration in `package.json`:

package.json

    "eslintConfig": {  "extends": [    "eslint:recommended",    "plugin:@typescript-eslint/recommended",    "plugin:@figma/figma-plugins/recommended"  ],  "parser": "@typescript-eslint/parser",  "parserOptions": {    "project": "./tsconfig.json"  },  "root": true,  "rules": {    "@typescript-eslint/no-unused-vars": [      "error",      {        "argsIgnorePattern": "^_",        "varsIgnorePattern": "^_",        "caughtErrorsIgnorePattern": "^_"      }    ]  }}

[Find the `eslint-plugin-figma-plugins` repository on GitHub →](https://github.com/figma/eslint-plugin-figma-plugins?tab=readme-ov-file)

[](#set-up-typescript-compilation "Direct link to heading")
Set up TypeScript compilation
-----------------------------------------------------------------------------------------

With your dependencies installed, all that's left for us to do is to make sure that TypeScript compiles to JavaScript in order for the plugin to run.

Since Figma plugins run in the browser, and browsers only support JavaScript, the `main` field in our manifest will **always** point to a JavaScript file.

Compilation is the process responsible for making sure that our TypeScript gets turned into usable JavaScript that allows our plugin to run.

![Illustration that shows the code.ts being compiled before being sent to Figma as a plugin](https://static.figma.com/uploads/91d10bd4458aa106ef287fc3dd1bfcd92a919bd2)

To setup your project to watch for changes then automatically compile:

1.  Hit `Ctrl`\-`Shift`\-`B` in Windows, or `Command`\-`Shift`\-`B` for Mac.
2.  Select **watch-tsconfig.json**

##### info

You’ll need to run this command each time you close the project folder or relaunch Visual Studio Code.

[](#run-the-sample-plugin "Direct link to heading")
Run the sample plugin
-------------------------------------------------------------------------

1.  Open up the design file you created in the Figma desktop app.
2.  Navigate to **Plugins** > **Development**, then select the name of your plugin.
3.  When the plugin modal pops up, click **Create** to run the plugin.

You should see five orange rectangles in the canvas.

![An animation of a plugin functioning in the Figma interface. The plugin window says "Rectangle creator" and shows a cursor entering the number "5" into a text input then hitting a "create" button which shows five rectangles being drawn on the Figma canvas.](https://static.figma.com/uploads/5edc8a8b67eddbf98ac3bd911b5c67ebefa0a6b8)

Your set up is now complete! Ready to start coding your first plugin? Check out the [fourth video](https://www.youtube.com/watch?v=ExwP3Kmh-vI)
 in our [Build Your First Plugin video series](https://www.youtube.com/watch?v=-JAphRkjV9g&list=PLXDU_eVOJTx5YBAszyuOTyxlgIxkQVyii)
.

[](#hot-reloading "Direct link to heading")
Hot reloading
---------------------------------------------------------

Figma provides the option to hot reload your plugin to speed up the development process. As you edit the plugin code and rebuild, the plugin will automatically restart with the latest changes. If turned off, you will need to manually restart the plugin.

![Hot reloading setting](https://static.figma.com/uploads/d8cf8d1e1f383f26fa6c800a33dbcfdaf201a807)

On this page

*   [Download tools](#download-tools)
    
*   [Create a new plugin](#create-a-new-plugin)
    
*   [Open the plugin code folder](#open-the-plugin-code-folder)
    
*   [Install project dependencies](#install-project-dependencies)
    *   [Node.js and npm](#nodejs-and-npm)
        
    *   [TypeScript](#typescript)
        
    *   [Plugin linter](#plugin-linter)
        
*   [Set up TypeScript compilation](#set-up-typescript-compilation)
    
*   [Run the sample plugin](#run-the-sample-plugin)
    
*   [Hot reloading](#hot-reloading)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# API Reference | Widget API

[Skip to main content](#)

On this page

The Widget API allows you to create custom, interactive objects that extend the functionality of Figma design files and FigJam boards. You’ll likely use both the widget API and plugin API when building widgets.

*   Widget API: defines the custom object and how people can interact with it
*   Plugin API: access external resources or manipulate other nodes in the file

The Widget API is a component-based API similar to React. It gives you access to the tools you need to build a widget node on the canvas that responds to a variety of interactions.

There are three main aspects of the Widget API: components, functions, and hooks. Together they control rendering the widget in a file and managing its [state](/widget-docs/widget-state/)
 as you interact with it.

If you’ve used the Plugin API, you’ll already be familiar with the `figma` global object. You can access the Widget API from that same `figma` object, via `figma.widget`.

[](#components "Direct link to heading")
Components
---------------------------------------------------

Components are the layers you’ll use to build your custom interactive widget. You can think of them as building blocks.

Each component supports a range of properties, which you can use to customize their appearance. Some properties are shared across components and some are unique to specific components.

There are components based on layers or node types you can already find and use in files:

*   [`AutoLayout`](/widget-docs/api/component-AutoLayout/)
    
*   [`Frame`](/widget-docs/api/component-Frame/)
    
*   [`Text`](/widget-docs/api/component-Text/)
    
*   [`Rectangle`](/widget-docs/api/component-Rectangle/)
    
*   [`Image`](/widget-docs/api/component-Image/)
    
*   [`Ellipse`](/widget-docs/api/component-Ellipse/)
    
*   [`SVG`](/widget-docs/api/component-SVG/)
    
*   [`Line`](/widget-docs/api/component-Line/)
    

There are three other components available that aren’t based on layers:

*   [`Input`](/widget-docs/api/component-Input/)
    : allows you to make a text component editable. This makes it possible for people to input or update text components within the widget.
*   [`Fragment`](/widget-docs/api/component-Fragment/)
    : allows you to render children without having to group them in a parent node. You can’t pass properties to a fragment.
*   [`Span`](/widget-docs/api/component-Span/)
    : allows you to style ranges of text inside of a `Text` component.

[](#functions "Direct link to heading")
Functions
-------------------------------------------------

Functions are statements or blocks of code that perform a specific task. Functions accept parameters and other data as input and return a related output. There are only two functions defined in the Widget API:

*   [`register`](/widget-docs/api/properties/widget-register/)
    : the main entry point for rendering a widget. This function expects a widget function that describes your widget and returns the widget node made up of the components we mentioned above.
*   [`waitForTask`](/widget-docs/api/properties/widget-waitfortask/)
    : this function enables asynchronous work, such as data fetching. It accepts a promise and only terminates when that promise resolves.
*   [`colorMapToOptions`](/widget-docs/api/properties/widget-colormaptooptions/)
    : this function is called on a color palette defined in `figma.constants.colors.*`, and returns `WidgetPropertyMenuColorSelectorOption[]`.

[](#hooks "Direct link to heading")
Hooks
-----------------------------------------

Hooks are a specific type of function. They allow you to reuse state-based logic or behavior across your components. You can identify hooks by their `use` prefix.

*   [`useEffect`](/widget-docs/api/properties/widget-useeffect/)
    : this hook can run any time the widget’s state changes. It allows you to perform asynchronous tasks, bundle calls, or consolidate the side-effects of event handlers.
*   [`usePropertyMenu`](/widget-docs/api/properties/widget-usepropertymenu/)
    : this hook allows you to define an interactive property menu that displays when the widget is selected.
*   [`useStickable`](/widget-docs/api/properties/widget-usestickable/)
    : this FigJam only hook allows your widget to be stuck to other nodes in the file. This is similar to how stamps work in FigJam files.
*   [`useStickableHost`](/widget-docs/api/properties/widget-usestickablehost/)
    : this FigJam only hook allows other nodes in the file to stick to your widget.
*   [`useSyncedState`](/widget-docs/api/properties/widget-usesyncedstate/)
    : this hook declares that rendering your widget relies on a changeable state. You give this hook a key and default value, which you can use and update across different states.
*   [`useSyncedMap`](/widget-docs/api/properties/widget-usesyncedmap/)
    : this hook also allows you to manage widget state. You can give this hook multiple keys and values and update widget state based on changes to individual values, not the entire map. This allows you to accurately render widget state when multiple people interact with a widget at once.
*   [`useWidgetId`](/widget-docs/api/properties/widget-usewidgetid/)
    : this hook allows you to reference a currently active widget. It returns a unique `id` which allows you to reference that WidgetNode in the Plugin API.

[](#destructure-globals "Direct link to heading")
Destructure globals
---------------------------------------------------------------------

We recommend [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring)
 components, hooks, and functions at the beginning of your widget code. This saves you from having to reference each of these components by their qualified names, such as `figma.widget.AutoLayout`.

    const { widget } = figmaconst {  // Components  AutoLayout,  Frame,  Text,  Input,  Rectangle,  Image,  SVG,  Ellipse,  Line,  Fragment,  // Hooks  useSyncedState,  useSyncedMap,  usePropertyMenu,  useEffect,  useStickable,  useStickableHost,  useWidgetId,  // Functions  register,  waitForTask} = widget

In our sample counter widget, we’ve done this to `figma.widget` as well as the individual hooks (`useSyncedState` and `usePropertyMenu`) and components (`AutoLayout`, `Text`, `SVG`) we’ll use in our widget code:

    const { widget } = figmaconst { useSyncedState, usePropertyMenu, AutoLayout, Text, SVG } = widget

On this page

*   [Components](#components)
    
*   [Functions](#functions)
    
*   [Hooks](#hooks)
    
*   [Destructure globals](#destructure-globals)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021)
[No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/widget-samples)

---

# ERROR: The request could not be satisfied

403 ERROR
=========

The request could not be satisfied.
-----------------------------------

* * *

Request blocked. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.  
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.  

* * *

Generated by cloudfront (CloudFront)
Request ID: OmpQaGqCenWO7rrWdAlLXFGFJc2sQkTSiOjqezE1kwrHagqmgO2Fig==

---

# Publishing | Plugin API

[Skip to main content](#)

When developing a plugin, it's reasonable (sometimes even advisable) to focus on the core use case of your plugin and make sure that it works when the user does what you expect. That's the "first 80% of the work".

However, there's often a "second 80% of the work" needed to make sure that your plugin does something reasonable in situations that you didn't expect. Here's a checklist of things worth thinking about. This list is not meant to be exhaustive, and we will add to it over time:

*   Have you loaded all the data your plugin needs?
    *   Do you need to [access pages](/plugin-docs/accessing-document/#loading-pages-and-nodes)
         other than the user's current page?
*   If your plugin is only meant to do something if a certain [type of nodes](/plugin-docs/api/nodes/)
     is selected, what happens when:
    *   The user has nothing selected?
    *   The wrong type of node selected?
    *   Multiple things selected?
    *   A component selected? Are you alright with the change propagating to potentially hundreds of instances?
*   If your plugin modifies a text layer, what happens [if the font for that text layer is missing?](/plugin-docs/working-with-text/#missing-fonts)
    
*   If your plugin can edit a [component](/plugin-docs/api/ComponentNode/)
    , what happens if the component comes from the team library?
*   If your plugin needs to load resources over the network, what happens if the user is temporary offline when they run your plugin?
*   If your plugin stays open for a while:
    *   What happens if the user [deletes a node](/plugin-docs/api/properties/nodes-removed/)
         you currently have a reference to?
    *   What happens a multiplayer even causes changes in the document?
*   If your plugin is concerned with the position of layers, what happens if something is rotated?
*   If your plugin can traverse large parts of the document (e.g. search for a node), what happens if the document is [very large](/plugin-docs/frozen-plugins/)
    ?
    *   Can you [load pages only as needed](/plugin-docs/how-plugins-run/#file-loading)
         instead of loading the whole document?
*   If you're using a bundler, have you checked the output size of your plugin? Could you make it smaller (e.g. by running your bundler in release mode)?

Read more about our [plugin review guidelines](https://help.figma.com/hc/en-us/articles/360039958914)
.

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# loadFontAsync | Plugin API

[Skip to main content](#)

On this page

Makes a font available _in the plugin_ for use when creating and modifying text. Calling this function is **necessary** to modify any property of a text node that may cause the rendered text to change, including `.characters`, `.fontSize`, `.fontName`, etc.

You can either pass in a hardcoded font, a font loaded via `listAvailableFontsAsync`, or the font stored on an existing text node.

Read more about how to work with fonts, when to load them, and how to load them in the [Working with Text](/plugin-docs/working-with-text/)
 page.

[](#signature "Direct link to heading")
Signature
-------------------------------------------------

### [loadFontAsync](/plugin-docs/api/properties/figma-loadfontasync/)
(fontName: [FontName](/plugin-docs/api/FontName/)
): Promise<void>

[](#remarks "Direct link to heading")
Remarks
---------------------------------------------

This function only works to load fonts _already accessible in the Figma editor_ available to _plugins_. It does not load fonts from the internet.

Tip: to load multiple fonts at the same time, you may find [Promise.all](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
 helpful.

A common question is whether a plugin needs to be careful about calling `loadFontAsync(font)` for the same font multiple times. The answer is somewhat nuanced. The result of loading a font is cached, so calling `loadFontAsync` won't re-fetch the same font from disk. Therefore, calling `loadFontAsync` on every frame would be perfectly ok.

However, note that `loadFontAsync` returns a Promise. Even a Promise resolves immediately, it still needs to round-trip to the JavaScript event loop. So you probably shouldn't call `loadFontAsync` on the same font repeatedly inside a loop.

On this page

*   [Signature](#signature)
    
*   [Remarks](#remarks)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Introduction | Widget API

[Skip to main content](#)

On this page

Introduction
============

Welcome to the Widget API!

Widgets are interactive objects that extend the functionality of design files and FigJam boards. Unlike plugins that run for a specific person, everyone can see and interact with the same widget. You can add as many widgets to the board as you need and even run them at the same time. This makes them great for collaboration!

If a widget does not contain the manifest field `"documentAccess": "dynamic-page"`, the entire document will be loaded when a widget runs or is interacted with. In large or complex files, loading the entire document the first time your widget runs can sometimes cause a delay of 20 to 30 seconds. If your widget needs to access other pages in the document, update your widget to contain the `documentAccess` manifest field and only [load the pages the user needs](https://www.figma.com/plugin-docs/accessing-document/)
, rather than the whole document.

Here’s a few examples of the types of widgets you can create:

*   Import data to create tables or interactive visualizations
*   Gather insight through live polls and voting counters
*   Build timelines and manage projects with calendars
*   Connect and play games in multiplayer

Not sure what you want to create? Check out these guides:

*   **[Widgets vs plugins →](/widget-docs/widgets-vs-plugins/)
    **
*   **[Figma design or FigJam widgets →](/widget-docs/figma-figjam-widgets/)
    **
*   **[Explore widgets in the Community →](https://www.figma.com/community/widgets)
    **

[](#build-widgets "Direct link to heading")
Build widgets
---------------------------------------------------------

We've designed the Widget API around two JavaScript-based technologies: TypeScript and JSX. You'll need to have a basic understanding of JavaScript to build widgets. If you have written React before you’ll feel right at home! **[Required knowledge →](/widget-docs/prerequisites/)
**

A widget is a function that renders components inside a dedicated widget object. You build your widget interface from a combination of components or sublayers. Then pass in properties to customize the look and feel of the widget.

When we talk about components, we’re using language from [React components](https://reactjs.org/docs/components-and-props.html)
. These are different to the components and instances you'd use in Figma. Most of the components in the Widget API are layers you’d interact with in files—such as frames, text, and shapes. **[Explore Widget API reference →](/widget-docs/api/api-reference/)
**

![Widget components](https://static.figma.com/uploads/a1de4b17f2223c038bce3d888fc4dbc9a65fe66c)

Widgets are objects in files that everyone can see and use. You can choose how people can interact with your widget. You can specify a property menu, create a custom interface, or run widgets in response to click events. **[Customize widget interactions →](/widget-docs/handling-user-events/)
**

![Widget interaction](https://static.figma.com/uploads/415e9599a57feae0a9936db7eb96c17099bbb21d)

Widgets can also access the functionality of the Plugin API. This allows you to pull data from external resources, open an iFrame to show more UI, or edit other objects in a file. If you’re building a standalone widget, you may not use the Plugin API at all. [**Using the Plugin API →**](/widget-docs/using-the-plugin-api/)

[](#resources "Direct link to heading")
Resources
-------------------------------------------------

Our [QuickStart](/widget-docs/setup-guide/)
 guide show you how to set up your environment and run a sample widget. You can [explore our sample widgets](https://github.com/figma/widget-samples)
 in GitHub for more inspiration.

The [API reference](/widget-docs/api/api-reference/)
 covers the components, hooks, and functions you’ll use build widgets. Our development guides explore concepts and outline the process for building successful widgets.

Get help with your plugin and widget related questions in the [Figma Community forum](https://forum.figma.com/c/plugin-widget-api/20)
. To connect with other widget and plugin developers [join our community-driven Discord server](https://discord.gg/xzQhe2Vcvx)
.

On this page

*   [Build widgets](#build-widgets)
    
*   [Resources](#resources)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021)
[No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/widget-samples)

---

# Updates | Widget API

[Skip to main content](#)

The type definitions for the [`BlendMode`](/widget-docs/api/type-BlendMode/)
 enum now include a `pass-through` variant. Support for this variant is not new, but it was undocumented.

* * *

In February 2024, Figma [implemented dynamic page loading](https://www.figma.com/plugin-docs/updates/page/2/#apis-for-dynamic-page-loading)
 for Figma design files. Now, dynamic page loading has been extended to FigJam files. If your widget handles FigJam files, you should follow the steps in [Migrating Plugins to Dynamically Load Pages](https://www.figma.com/plugin-docs/migrating-to-dynamic-loading/)
. The same steps and considerations apply to widgets.

* * *

This change introduces `widget-api-standalone.d.ts`, an experimental feature which allows for importing types explicitly.

* * *

Version 1.9.1 was published to NPM, but does not contain any changes relative to 1.9.0.

* * *

*   Add a property [colorMapToOptions](/widget-docs/api/properties/widget-colormaptooptions/)
    , which takes in a [ColorPalette](https://www.figma.com/plugin-docs/api/ColorPalette/)
     and returns a `WidgetPropertyMenuColorSelectorOption[]`. This allows widget developers to use predefined color palettes in widget color property menus
*   Add support for localhost in the manifest networkAccess allowedDomains field. See [manifest networkAccess docs](/widget-docs/widget-manifest/#networkaccess)
    .

* * *

This update exposes some new features introduced in AutoLayout v5.

*   All components that have a `height` and `width` property now allow you to specify maximum and minimum heights and widths.
*   The [AutoLayout](/widget-docs/api/component-AutoLayout/)
     component has a couple of property changes:
    *   The [spacing](/widget-docs/api/component-AutoLayout/#spacing)
         property now accepts a [LayoutGap](/widget-docs/api/type-LayoutGap/)
         object, which allows you to specify a horizontal or vertical gap.
    *   A new [wrap](/widget-docs/api/component-AutoLayout/#wrap)
         property allows you to enable wrapping.
*   The [Text](/widget-docs/api/component-Text/)
     component has a new [truncate](/widget-docs/api/component-Text/#truncate)
     property for controlling text truncation behavior.

* * *

This update introduces the optional `networkAccess` key to the widget manifest.

Add the `networkAccess` to your widget's `manifest.json` file to limit the domains that your widget is permitted to access. When `networkAccess` is applied, if your widget makes a network request to a domain that is not specified in the list of permitted domains, that request is blocked.

For example:

    {  "name": "MyWidget",  "id": "737805260747778093",  "api": "1.0.0",  "widgetApi": "1.0.0",  "editorType": ["figma", "figjam"],  "containsWidget": true,  "main": "code.js",  "ui": "ui.html",  "networkAccess": {    "allowedDomains": ["https://my-app.cdn.com", "wss://socket.io", "*.example.com", "example.com/api/",  "exact-path.com/content"]  }}

When you publish your widget, the list of domains that you specify for `networkAccess` is displayed on your widget's Community page. This information is also visible for org admins when widgets are reviewed for approval.

To try this out:

1.  In the `manifest.json` file for your widget, add the following:
    
        "networkAccess": {  "allowedDomains": ["none"]}
    
    `none` is a special keyword for `allowedDomains` that prevents any network access from your widget.
2.  In Figma, create a new Figma or FigJam file and add your widget. Try to use the widget as normal.
3.  Check the developer console. If your widget makes network requests, such as calls to an API or fetching images, Figma blocks the requests and throws [content-security policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
     errors.
4.  To fix the CSP errors, in your widget manifest, replace `["none"]` with the domains that your widget needs to access.

For more information about network access, see:

*   [How Widgets Run](/widget-docs/how-widgets-run/)
    
*   [Making Network Requests](/widget-docs/making-network-requests/)
    
*   [Widget Manifest](/widget-docs/widget-manifest/)
    

* * *

We updated the “New widget…” templates to use esbuild for bundling to make it easier for new widgets created to extend beyond a single source file.

To try this out:

1.  Log in to your account and open the Figma desktop app
2.  You can open any existing Figma / FigJam document or create a new one.
3.  Go to Menu > Widgets > Development > New widget...

* * *

*   You can now create widgets in Figma Design!
    *   Start by adding `figma` to the `editorType` array in your [`manifest.json`](/widget-docs/widget-manifest/)
         file.
*   There are two new property menu options for [`usePropertyMenu`](/widget-docs/api/properties/widget-usepropertymenu/)
    : `toggle` and `link`
    *   `toggle` lets you create a button in the property menu with an on and off state
    *   `link` will let you create a button that opens a link in a new tab
*   We've added a new [`Span`](/widget-docs/api/component-Span/)
     component that lets you style inline ranges of text inside of a [`Text`](/widget-docs/api/component-Text/)
     component.

Span example

    <Text  fill="#0F0"  fontSize={20}  fontFamily="Roboto"  fontWeight={400}  textCase="upper"  textDecoration="underline">  Hello{' '}  <Span    fontSize={50}    fontFamily="Poppins"    fontWeight={800}    textCase="original"    textDecoration="none"  >    World    <Span fontSize={30} fill="#F00" italic>      d    </Span>  </Span></Text>

* * *

*   We added a new [`positioning`](/widget-docs/api/component-Frame/#positioning)
     to support absolutely positioned [AutoLayout](/widget-docs/api/component-AutoLayout/)
     children
    *   By default, positioning is set to `'auto'`, which preserves the existing behavior of layout out the child using auto layout.
*   We've updated [`AlignItems`](/widget-docs/api/type-AlignItems/)
     to accept a new `baseline` value.

Bug fixes:

*   Fixed a bug in undo/redo where multiple updates to synced state might clobber the values on the undo/redo stack.
*   Removed `flipVertical` from our docs and types since it is not implemented.

Additionally, we updated the Plugin API with some improvements to [`WidgetNode`](https://www.figma.com/plugin-docs/api/WidgetNode/)
. For more information see: [Plugin API Version 1, Update 46](https://www.figma.com/plugin-docs/blog/2022/05/04/version-1-update-46/)
.

* * *

Was this page helpful?

[Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021)
[No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/widget-samples)

---

# Introduction | Code Connect

[Skip to main content](#)

On this page

Code Connect is a bridge between your codebase and Figma’s Dev Mode, connecting components in your repositories directly to components in your design files. When implemented, Code Connect generates custom code snippets for connected components, enhancing consistency for your developers. It’s easy to set up, easy to maintain, type-safe, and extensible.

##### important

**Important:** Code Connect is available on Organization and Enterprise plans and requires a full Design or Dev Mode seat to use.

[](#leverage-automation-to-connect-design-with-code-seamlessly "Direct link to heading")
Leverage automation to connect design with code seamlessly
---------------------------------------------------------------------------------------------------------------------------------------------------

Use Figma’s Code Connect to make your design system easily accessible to your developers and create a shared source of truth for both the design and code elements.

Our Getting Started guide will walk you through the process of setting up Code Connect, using our interactive setup to automatically map components, and publishing your first components. **[Getting Started with Code Connect →](/code-connect-docs/quickstart-guide/)
**

[](#refine-those-mappings-with-a-flexible-api "Direct link to heading")
Refine those mappings with a flexible API
-----------------------------------------------------------------------------------------------------------------

Code Connect comes with support for different frameworks and languages. Our integration guides will walk you through the process of refining your components by mapping props and variants for:

*   **[React (and React Native) →](/code-connect-docs/react/)
    **
*   **[HTML (e.g. Web Components, Angular and Vue) →](/code-connect-docs/html/)
    **
*   **[SwiftUI →](/code-connect-docs/swiftui/)
    **
*   **[Jetpack Compose →](/code-connect-docs/compose/)
    **.

Button.figma.tsx

    import figma from '@figma/code-connect/react'figma.connect(Button, 'https://...', {  props: {    label: figma.string('Text Content'),    disabled: figma.boolean('Disabled'),    size: figma.enum('Size', {      Large: 'large',      Medium: 'medium',      Small: 'small',    }),  },  example: ({ disabled, label, size }) => {    return (      <Button size={size} disabled={disabled}>        <Text>{label}</Text>      </Button>    )  },})

[](#publish-to-figma-to-make-handoff-a-breeze "Direct link to heading")
Publish to Figma to make handoff a breeze
-----------------------------------------------------------------------------------------------------------------

Once published, your components will be available in Figma’s Dev Mode, displaying the true-to-production code snippets from your design system instead of autogenerated code examples.

![image](https://static.figma.com/uploads/d98e747613e01685d6a0f9dd3e2dcd022ff289c0.png)

On this page

*   [Leverage automation to connect design with code seamlessly](#leverage-automation-to-connect-design-with-code-seamlessly)
    
*   [Refine those mappings with a flexible API](#refine-those-mappings-with-a-flexible-api)
    
*   [Publish to Figma to make handoff a breeze](#publish-to-figma-to-make-handoff-a-breeze)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Libraries and Bundling | Plugin API

[Skip to main content](#)

On this page

In the [plugin manifest section](/plugin-docs/manifest/)
, we covered how to set up a simple Figma project with all plugin code in a single file. For a basic plugin with limited functionality, having everything in one place makes sense. But all the code must be in one file, which doesn’t scale for very long. These days, most websites use hundreds of files and libraries in a single project.

##### info

Libraries are collections of prewritten code. They allow you to reuse common JavaScript functions or patterns in your own websites and applications.

Take a look at the following example:

    <html>  <head>    <meta charset="UTF-8">    <link rel="stylesheet" href="main.css">    <script src="libraries/scripts.js" type="text/javascript"></script>    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>    <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>  </head>  <body>  </body></html>

While `<script>` tags can be used to include multiple libraries, having hundreds of these tags would not be the most efficient way to include your project dependencies. A common solution is to bundle all code and dependencies into one file. Because everything is technically in one file, bundling can optimize your project by making less server requests.

![An animation showing two rectangles. One labeled "Plugin" and the other "API". In an animation labeled "unbundled request" many requests are shown going from plugin to API, then many responses going from API to plugin. In an animation labeled "bundled request" one "bundle" goes from plugin to API, then one responses going from API to plugin](https://static.figma.com/uploads/483677af4f38b1ddcfa0dd6839c1ecb61787b532)

[](#bundling-with-webpack "Direct link to heading")
Bundling with Webpack
-------------------------------------------------------------------------

Webpack is a widely used JavaScript library and module bundler that packages your project files for use in a browser. Loading scripts individually in a web app can be very costly and Webpack can improve a project’s load speed by bundling script files. Instead of making multiple requests, a bundle of script files only needs to be requested once. In this section, we’ll go over how you can bundle your projects with this tool. We are going to:

1.  Install Webpack
2.  Setup Typescript with Webpack
3.  Create a bundle
4.  Import modules

##### caution

We recommend taking a look at the [Plugin Quickstart Guide](/plugin-docs/plugin-quickstart-guide/)
 before using Webpack to install other dependencies required to build a Figma plugin.

### [](#install-webpack "Direct link to heading")
Install Webpack

1.  Open your project folder in Visual Studio Code.
2.  Go to **Terminal** > **New terminal** to open a command line window in VS Code.
3.  In the terminal, run the following commands. These commands will save Webpack to your current project and install other dependencies into your project:
    
        npm install
    
        npm install webpack webpack-cli --save-dev
    

If the commands are successful, the `node_modules` folder is created in Visual Studio Code and Webpack is added to our list of devDependencies in `package.json`.

![A screenshot of the VSCode open to a package.json file with webpack and webpack-cli indicated as installed in devDependencies. It also shows the file explorer for the project containing the following 10 items: node_modules, .gitignore, code.js, code.ts, manifest.json, package-lock.json, package.json, README.md, tsconfig.json, ui.html](https://static.figma.com/uploads/611a970d53bd4422af3ac50a2822ae5b2e8428f1)

##### info

If you followed our Plugin Quickstart guide, you’ll already have a `node_modules` folder in your project.

### [](#setup-typescript-with-webpack "Direct link to heading")
Setup Typescript with Webpack

We recommend using [Typescript](/plugin-docs/typescript/)
 for developing Figma plugins. In order for our plugin to compile properly, we need to configure Webpack to use Typescript.

1.  Install the Typescript compiler and loader by running the following command. You can verify the installation by checking that `ts-loader` is now under the list of dependencies in `package.json`.

    npm install --save-dev typescript ts-loader

2.  Now, we’ll change up the project structure by creating a directory named `dist`. Right-click in the file explorer and select **New Folder…**

![A screen recording of VSCode with the right click menu open saying "New folder..." as the second item in the menu. A folder named ‘dist’ is created.](https://static.figma.com/uploads/b08456080055b93f07e2512506436a375fe71ba1)

3.  Then, drag `code.js` and drop it into the new `dist` directory.
4.  Create another directory named `src` then move `code.ts` into it. Our updated project structure should look something like this:

![A partial screenshot of the project directory open in the VSCode file explorer. It highlights two directories: "dist" containing a code.js file and "src" containing a code.ts file.](https://static.figma.com/uploads/bad0ab8a30ee58ac07765ba385a2e9168ddfc150)

5.  Since we changed the location of our `code.js`, we also need to update the `main` field in `manifest.json` to reflect the change:

    // manifest.json{  "name": "bundling-test2",  "id": "1174728261122583026",  "api": "1.0.0",  "main": "dist/code.js",  "editorType": [    "figma",    "figjam"  ]}

6.  Open `package.json` then update `build` to `"webpack"`. This will allow us to run a webpack build with a simple terminal command.

    // package.json..."scripts": {  "build": "webpack",  "watch": "npm run build -- --watch"},...

7.  Then, open `tsconfig.json` and replace it with the following. This sets our compiler options to include Typescript files from the `src` folder and assigns `dist` as the output directory.

    // tsconfig.json{  "compilerOptions": {    "target": "es6",    "lib": ["es6"],    "strict": true,    "typeRoots": [      "./node_modules/@types",      "./node_modules/@figma"    ],    "outDir": "./dist",    "jsx": "react",    "allowJs": true,    "moduleResolution": "node"  },  "include": ["src/**/*.ts"]}

8.  Since the Figma desktop app works a little differently than the browser, we need to add some Webpack configurations. We are going to create a `webpack.config.js` file at the root of our project.

![A screen recording of a new file named “webpack.config.js” being created in the project directory.](https://static.figma.com/uploads/4de33046bd086d03e81f001c323bbfa4aaf5f039)

9.  Copy the following code and add it to your `webpack.config.js` file:

    const path = require('path');const webpack = require('webpack');module.exports = (env, argv) => ({mode: argv.mode === 'production' ? 'production' : 'development',// This is necessary because Figma's 'eval' works differently than normal evaldevtool: argv.mode === 'production' ? false : 'inline-source-map',  entry: {    code: './src/code.ts' // This is the entry point for our plugin code.  },  module: {    rules: [      // Converts TypeScript code to JavaScript      {        test: /\.tsx?$/,        use: 'ts-loader',        exclude: /node_modules/,      },    ],  },  // Webpack tries these extensions for you if you omit the extension like "import './file'"  resolve: {    extensions: ['.ts', '.js'],  },  output: {    filename: '[name].js',    path: path.resolve(__dirname, 'dist'),  },});

##### info

If you want to learn more about how `webpack.config.js` works, we recommend reading the [Webpack documentation](https://webpack.js.org/guides/getting-started/#using-a-configuration)
 →

After all the changes, our project structure should look something like this:

![A VSCode file explorer screenshot containing the following 12 files and folders: dist with code.js in side of it, a collapsed node_modules folder, src with code.ts inside of it, .gitignore, manifest.json, package-lock.json, package.json, README.md, tsconfig.json, and webpack.config.js](https://static.figma.com/uploads/42e95840e350f24797108a04c35fbf13cf209ea8)

10.  Now, our Webpack modules should compile and our plugin should run properly. Save all your changes, then run a build of the project by running `npm run build` in the terminal. You’ll see a success message if the modules compiled with no errors.

![A screenshot of a CLI that is running the command "npm run build". That is running build and webpack scripts and indicating that it converted src/code.ts to dist/code.js successfully.](https://static.figma.com/uploads/0b30f9339f2a8bc59b9e77318d2a92f6131d7103)

11.  Check that your plugin runs in the Figma desktop app by going to **Plugins** > **Development** then selecting your plugin.
    
    If you are working with the starter code from the **Plugin Quickstart Guide**, you’ll see five orange rectangles in the canvas.
    

![An animation of a plugin functioning in the Figma interface. The plugin window says "Rectangle creator" and shows a cursor entering the number "5" into a text input then hitting a "create" button which shows five rectangles being drawn on the Figma canvas.](https://static.figma.com/uploads/5edc8a8b67eddbf98ac3bd911b5c67ebefa0a6b8)

### [](#create-a-bundle "Direct link to heading")
Create a bundle

Now that we have Webpack installed and integrated with Typescript, we can start splitting up our plugin code into multiple files. This can be done through the use of JavaScript **modules**. A **module** is a bundle of code that can **export** functionality to other modules and **import** functionality from other modules.

In this section, we’ll take a look at how we can import and export modules between files.

1.  Cut the following lines of code from `code.ts` :
    
        const rect = figma.createRectangle();rect.x = i * 150;rect.fills = [{type: 'SOLID', color: {r: 1, g: 0.5, b: 0}}];figma.currentPage.appendChild(rect);nodes.push(rect);
    
2.  In `rectangle-module.ts` create an exported function named `createRectangles()` and paste in the code from `code.ts`:
    
        export function createRectangles(i:number, nodes: SceneNode[]) {  const rect = figma.createRectangle();  rect.x = i * 150;  rect.fills = [{ type: "SOLID", color: { r: 1, g: 0.5, b: 0 } }];  figma.currentPage.appendChild(rect);  nodes.push(rect);}
    
3.  Then, go back to `code.ts`. At the top of the file, create an import statement for the `createRectangles` function:
    
        import { createRectangles } from "./rectangle-module"
    
4.  Finally, in `code.ts` call the `createRectangles` function under the `nodes` declaration:
    
        const nodes: SceneNode[] = [];for (let i = 0; i < msg.count; i++) {  createRectangles(i,nodes);}
    
5.  Save your changes, then run a build of the project using `npm run build`.
    
6.  Run your plugin again in the Figma desktop app. The plugin should work the same way, but with Webpack bundling our modules together behind the scenes. Rather than making requests to multiple TypeScript files, a single request is made to `code.ts`.
    

If you have issues running your plugin after creating modules, check that you have an `export` statement in your `createRectangles()` function and that your `import` statement in `code.ts` is correct.

### [](#import-all-modules "Direct link to heading")
Import all modules

You can further simplify your import statements by importing everything from a library:

    import * as MyCode from "./rectangle-module";

`MyCode` is the alias for our library. This is what we’ll use to reference the file and the pre-written code from it. Update your `createRectangles` function call to reflect the new import:

    MyCode.createRectangles(i, nodes);

The concept of importing and exporting modules is the basic idea behind bundling. You can see how in a larger project, importing modules from a library saves you time and prevents redundancies in your code.

Webpack only understands JavaScript and JSON, so HTML and CSS files are converted into modules in a format that a browser can consume.

To see what bundling with Webpack and React looks like for a Figma plugin, take a look at the [Webpack sample](https://github.com/figma/plugin-samples/tree/master/webpack-react)
 directory in the [plugin-samples](https://github.com/figma/plugin-samples)
 repository. This may require additional Webpack configuration.

[Learn more about these concepts on the Webpack JS website →](https://webpack.js.org/concepts/)

[](#using-plugma "Direct link to heading")
Using Plugma
-------------------------------------------------------

[Plugma](https://plugma.dev)
 is a community-created toolkit to create plugins with support for common frameworks and additional development tools. To get started run the following command and follow the prompts:

    npm create plugma@latest

For more information on what Plugma offers you can visit their [documentation](https://www.plugma.dev/docs/getting-started)
.

##### info

Plugma is a third-party library and not officially maintained by the Figma team.

[](#using-create-figma-plugin "Direct link to heading")
Using Create Figma Plugin
---------------------------------------------------------------------------------

[Create Figma Plugin](https://yuanqing.github.io/create-figma-plugin/)
 is a community-created toolkit to create plugins with bundling, UI components, and helpful utilities configured out of the box. To get started, run the following command and follow the prompts:

    npx --yes create-figma-plugin

For more information on what Create Figma Plugin offers you can visit their [documentation](https://yuanqing.github.io/create-figma-plugin/)
.

##### info

Create Figma Plugin is a 3rd party library and not officially maintained by the Figma team.

[](#ai-plugin-template "Direct link to heading")
ai-plugin-template
-------------------------------------------------------------------

If you want to create a plugin that integrates with OpenAI we have an official Figma starter template that uses [Next.js](https://nextjs.org/)
 that can get you up and running.

![Gif of ai-plugin-template](https://static.figma.com/uploads/cd663ea9256a71040227bc4af94c614febc8fc56)

To get started run the command below in your terminal and follow the instructions in the generated `README.md` file:

    npx create-next-app@latest --example https://github.com/figma/ai-plugin-template/

To learn more you can visit the repository [here](https://github.com/figma/ai-plugin-template/)
.

[](#bundling-with-esbuild "Direct link to heading")
Bundling with Esbuild
-------------------------------------------------------------------------

[Esbuild](https://esbuild.github.io/)
 is a JavaScript bundler built with [Go](https://go.dev/)
 that is even faster than Webpack. Much like Webpack, Esbuild converts your files into modules then creates a bundle for the browser to consume. Esbuild also supports Typescript and JSX out of the box, so you don’t need to worry about these extra configurations.

[Learn more about bundling with Esbuild on their website →](https://esbuild.github.io/getting-started/)

There are a lot of bundling tools out there, so feel free to use the module bundler you feel is best for your project. Take a look at this [esbuild-react](https://github.com/figma/plugin-samples/tree/master/esbuild-react)
 example in our [plugin-samples](https://github.com/figma/plugin-samples)
 repository.

On this page

*   [Bundling with Webpack](#bundling-with-webpack)
    *   [Install Webpack](#install-webpack)
        
    *   [Setup Typescript with Webpack](#setup-typescript-with-webpack)
        
    *   [Create a bundle](#create-a-bundle)
        
    *   [Import all modules](#import-all-modules)
        
*   [Using Plugma](#using-plugma)
    
*   [Using Create Figma Plugin](#using-create-figma-plugin)
    
*   [ai-plugin-template](#ai-plugin-template)
    
*   [Bundling with Esbuild](#bundling-with-esbuild)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Making Network Requests | Plugin API

[Skip to main content](#)

On this page

This guide describes how to make basic network requests, test network access, and specify the scope of your plugin's network access. As a best practice, Figma recommends that your plugin only allows domains that are needed for your plugin to work.

In practice, you first develop your plugin and implement all the required network requests. Then, before publishing, you can use the instructions in this guide to specify access to only the domains used by your plugin.

*   [Make network requests](#make-network-requests)
    
*   [Test network access](#test-network-access)
    
*   [Specify network access](#specify-network-access)
    

* * *

[](#make-network-requests "Direct link to heading")
Make network requests
-------------------------------------------------------------------------

To make network requests from within a plugin, such as calls to your own API or to request resources from a server, use Figma’s [Fetch API](/plugin-docs/api/properties/global-fetch/)
. The Figma Fetch API is used in a similar way to the WhatWG Fetch API that is standard in most browsers.

##### note

This guide assumes that you’re familiar with the basics of creating Figma plugins. If you’re new to developing plugins, check out the [Build your first plugin](https://help.figma.com/hc/en-us/articles/4407260620823--BYFP-1-Overview)
 course — you can copy and paste the code from this guide into the plugin you build.

The following code sample makes a request to an external API and returns the JSON response to the console.

Fetch to the console

    (async () => {  const response = await fetch('https://httpbin.org/get?success=true')  const json = await response.json()  console.log(JSON.stringify(json.args, null, 2))  figma.closePlugin()})()

By adding a text node to the canvas, we can deliver content from the response directly into a Figma file.

Fetch to the canvas

    (async () => {  const response = await fetch("https://httpbin.org/get?success=true");  const json = await response.json();  const textNode = figma.createText();  await figma.loadFontAsync(textNode.fontName as FontName);  // success=true!  textNode.characters = JSON.stringify(json.args, null, 2);  figma.closePlugin();})();

Because plugins run inside a browser environment, [Cross-Origin Resource Sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
 policies apply. Plugin iframes have a `null` origin. This means that they will only be able to call APIs with `Access-Control-Allow-Origin: *` (i.e., those that allow access from any origin).

##### info

Previously, to make network requests within a plugin, you had to implement an iframe to handle sending requests and receiving data. While plugins implemented this way will continue to function normally and do not need to be modified, we recommend using the simpler [Fetch API](/plugin-docs/api/properties/global-fetch/)
 approach.

* * *

[](#test-network-access "Direct link to heading")
Test network access
---------------------------------------------------------------------

After you've implemented network requests in your plugin (e.g. calling an API or getting images from a server), test the impact of limiting your plugin's network access. Then, use the results of your testing to build the list of domains you need to appropriately [limit network access](#limit-network-access)
.

To test the impact of limiting your plugin's network access:

1.  In your plugin's `manifest.json`, add the `networkAccess` key with the `allowedDomains` property set to `["none"]`.
    
    Manifest.json
    
        {  "name": "MyPlugin",  "id": "737805260747778092",  "api": "1.0.0",  "main": "code.js",  "ui": "ui.html",  "networkAccess": {    "allowedDomains": ["none"]  }}
    
2.  In Figma, try to use your plugin as normal. In the developer console, note any content-security policy (CSP) errors. For example, if the request in [Make network requests](#make-network-requests)
     was blocked:
    
    CSP error
    
        Refused to connect to 'https://httpsbin.org/' because it violates the following Content Security Policy directive: "default-src data:".Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
    
3.  As you identify CSP errors, follow the [Limit network access](#limit-network-access)
     steps to remove `"none"` and add the domains that your plugin requires to the `allowedDomains` list.
    

When you're confident that all the required domains are listed in `allowedDomains` and you no longer encounter CSP errors, testing is complete.

* * *

[](#specify-network-access "Direct link to heading")
Specify network access
---------------------------------------------------------------------------

To specify a list of domains that your plugin is allowed to access, you update the plugin's `manifest.json` file:

1.  In your plugin's `manifest.json`, add the `networkAccess` key. `networkAccess` has the following properties: `allowedDomains`, `reasoning`, and `devAllowedDomains`.
    
    Manifest.json
    
        {  "name": "MyPlugin",  "id": "737805260747778092",  "api": "1.0.0",  "main": "code.js",  "ui": "ui.html",  "networkAccess": {    "allowedDomains": [],    "reasoning": "",    "devAllowedDomains": []  }}
    
2.  Add domains to the `allowedDomains` list. The domains that you add to the list should correspond to the domains that you are making requests to. This includes any requests you make for external resources using methods like createImageAsnyc().
    
    For example, to limit a plugin's access to only the `httpbin.org` domain used in [Make network requests](#make-network-requests)
    :
    
    Manifest.json
    
        {  "name": "MyPlugin",  "id": "737805260747778092",  "api": "1.0.0",  "main": "code.js",  "ui": "ui.html",  "networkAccess": {    "allowedDomains": ["httpbin.org"],    "reasoning": "",    "devAllowedDomains": []  }}
    
    If the only endpoint the plugin uses is `/get`, make the string in the `allowedDomains` list even more granular:
    
    Manifest.json
    
        {  "name": "MyPlugin",  "id": "737805260747778092",  "api": "1.0.0",  "main": "code.js",  "ui": "ui.html",  "networkAccess": {    "allowedDomains": ["httpbin.org/get"],    "reasoning": "",    "devAllowedDomains": []  }}
    
    This way, no unexpected requests can be made to other endpoints on the domain.
    
    ##### note
    
    There are several patterns that can be used to specify domains for `allowedDomains`. For a complete list, see [Plugin Manifest](/plugin-docs/manifest/)
    . You can also specify:
    
    *   `["none"]`: `none` is a special keyword that prevents all network access. Use this if your plugin doesn't make any network requests.
        
    *   `["*"]`: `*` is a special character that permits your plugin to access any domain. If your plugin includes `*` in `allowedDomains`, then `reasoning` is required.
        
    
3.  For `reasoning`, provide a brief explanation for the access scope permitted by `allowedDomains`. When you publish your plugin, this explanation is visible on your plugin's Community page along with the list of allowed domains.
    
    For example:
    
    Manifest.json
    
        {  "name": "MyPlugin",  "id": "737805260747778092",  "api": "1.0.0",  "main": "code.js",  "ui": "ui.html",  "networkAccess": {    "allowedDomains": ["httpbin.org/get"],    "reasoning": "MyPlugin queries httpbin.org/get for example responses.",    "devAllowedDomains": []  }}
    
4.  If you need to access a local or development web server to build your plugin, add its domain(s) to the `devAllowedDomains` list. The domains that you add to the list should correspond to the local URL(s) for your development server. If you want to access a local or development web server in `allowedDomains`, then `reasoning` is required.
    
    For example:
    
    Manifest.json
    
        {  "name": "MyPlugin",  "id": "737805260747778092",  "api": "1.0.0",  "main": "code.js",  "ui": "ui.html",  "networkAccess": {    "allowedDomains": ["httpbin.org/get"],    "reasoning": "MyPlugin queries httpbin.org/get for example responses.",    "devAllowedDomains": ["http://localhost:3000"]  }}
    
5.  Save the changes to your manifest.
    

After `networkAccess` is implemented, Figma enforces the list of domains that you gave for `allowedDomains`. If a request originates from your plugin to a domain not in `allowedDomains`, Figma blocks the request and throws a [content-security policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
 error.

For example, if our plugin attempts to make a request to `httpbin.org/post`, we get the following error:

CSP error

    Refused to connect to 'https://httpbin.org/post' because it violates the following Content Security Policy directive: "default-src data:". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

On this page

*   [Make network requests](#make-network-requests)
    
*   [Test network access](#test-network-access)
    
*   [Specify network access](#specify-network-access)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Working in Dev Mode | Plugin API

[Skip to main content](#)

On this page

[](#figma-designs-dev-mode "Direct link to heading")
Figma design's Dev Mode
----------------------------------------------------------------------------

[Dev Mode](https://help.figma.com/hc/en-us/articles/15023124644247)
 is a mode in Figma design files that is dedicated to giving front-end developers everything they need to navigate design files and implement designs into code.

Key differences between Dev Mode and Figma's design mode are:

*   The layers panel in Dev Mode is simplified and organized around [Sections](/plugin-docs/api/SectionNode/)
    
*   In Dev Mode, the Inspect panel has information that's helpful for design implementation, such as a CSS box model and a simplified view of properties, code, and assets
*   Dev Mode is a read-only surface, since developers implementing designs often don't have write access to a Figma file

[](#plugins-for-dev-mode "Direct link to heading")
Plugins for Dev Mode
-----------------------------------------------------------------------

Like Figma's other products, plugins can also integrate with Dev Mode.

Plugins for Dev Mode help ensure developers have all of the relevant information that they need to implement a design in one place. Plugins for Dev Mode can be used for inspection and code generation.

**Inspection:** Plugins can take over the Inspect panel in Dev Mode and pull in relevant context from other tools that’s needed for design implementation, such as Jira, GitHub, or an internal API specific to your organization.

**Code generation:** Plugins can customize code generation using languages and frontend frameworks that Figma doesn’t support natively.

Plugins in Dev Mode have some key differences when compared to other plugins:

*   **Pages are always dynamically loaded**: Unlike other plugins for the Figma editor, plugins for Dev Mode will _not_ [load all pages in a file](/plugin-docs/how-plugins-run/#file-loading)
    , even if `"documentAccess": "dynamic-page"` isn't included in the [plugin manifest](/plugin-docs/manifest/)
    . By default, a plugin in Dev Mode will only run on the user's current page. You can use the methods provided by the Plugin API to [load additional pages as needed](/plugin-docs/accessing-document/#loading-pages-and-nodes)
    .
*   **Read-only:** Plugins in Dev Mode are read-only, meaning they can use plugin APIs that read from the document, modify some metadata like [pluginData](/plugin-docs/api/properties/nodes-setplugindata/)
     and [relaunchData](/plugin-docs/api/properties/nodes-setrelaunchdata/)
    , respond to API events emitted by Figma, [make network requests](/plugin-docs/making-network-requests/)
    , or [open iframes to create UIs](/plugin-docs/creating-ui/#usage-example)
    . However, these plugins **won’t** be able to edit the contents of the document.
*   **Plugin UIs:** If a plugin in Dev Mode opens an iframe, the iframe will take up the full height and width of the Inspect panel. This ensures the plugin’s iframe doesn’t obscure the canvas or what developers need to implement.
*   **Visual Studio Code:** Dev Mode plugins can run in [Figma for VS Code](https://help.figma.com/hc/en-us/articles/15023121296151)
    , in addition to running in Figma's web and desktop apps. Dev Mode plugins need to explicitly indicate that they are compatible with Figma for VS Code.

##### caution

The Inspect panel is resizeable in Dev Mode. In Visual Studio Code, the Inspect panel is oriented horizontally, rather than vertically as in the Figma web and desktop apps. Because of these varied orientations, it's important to make sure that your plugin's iframe is responsive. [Learn more →](/plugin-docs/working-in-dev-mode/#responsive-iframes)
.

[](#plugins-for-inspection "Direct link to heading")
Plugins for inspection
---------------------------------------------------------------------------

Plugins in Dev Mode can be used for inspection, meaning they can show context associated with a selected layer in Dev Mode's Plugins panel.

### [](#how-to-get-started "Direct link to heading")
How to get started

To start building a plugin for inspection, you must update your plugin manifest in the following ways:

*   Set the `"editorType"` to `"dev"`
*   Add `"inspect"` to the `"capabilities"` field
*   Add `"vscode"` to the `"capabilities"` field if you want your plugin to work in Figma for VS Code

For example:

manifest.json for Dev Mode

    {  "name": "Plugin for inspection",  "id": "000000000000000000",  "api": "1.0.0",  "main": "code.js",  "documentAccess": "dynamic-page",  "editorType": ["dev"],  "capabilities": ["inspect", "vscode"]}

##### info

See all of the options for the [Plugin Manifest →](/plugin-docs/manifest/)

When structuring your code, you can utilize `figma.editorType` and `figma.mode` to determine what plugin behavior is allowed.

main.ts for Dev Mode

    if (figma.editorType === "dev") {  // Read the current page and listen to API events  const numChildren = figma.currentPage.children.length  figma.notify(    `This is running in Dev Mode.    The current page has ${numChildren}`  );} else {  figma.notify(    `This is NOT running in Dev Mode.    We can modify the file!`  );  const node = figma.createRectangle();  node.name = "I proved that I can edit files!";}figma.closePlugin();

[](#plugins-for-code-generation "Direct link to heading")
Plugins for code generation
-------------------------------------------------------------------------------------

Plugins in Dev Mode can also be used for custom code generation ("codegen"). These plugins can read the user's current selection and send Figma any generate code or related metadata associated with the layer. Importantly, any content generated by these plugins is rendered in the code section of the Inspect panel, in the same place you’d find Figma’s native code snippets. This means that you don't need to build or open an iframe in order to show users generated code.

You can use plugins to generate code for languages or framework that Figma doesn’t support natively, or to surface other metadata that a user might want, such as where to import icons in a codebase or internationalization string extraction.

Learn more about how to build [Plugins for Codegen →](/plugin-docs/codegen-plugins/)
.

[](#key-differences-between-plugins-in-dev-mode-and-other-plugins "Direct link to heading")
Key differences between plugins in Dev Mode and other plugins
---------------------------------------------------------------------------------------------------------------------------------------------------------

### [](#limited-access-to-the-document "Direct link to heading")
Limited access to the document

Plugin in Dev Mode can access the current page, load additional pages as needed, listen to events, and make network requests, but crucially they cannot modify the document, with the exception of writing certain metadata like [pluginData](/plugin-docs/api/properties/nodes-setplugindata/)
 and [relaunchData](/plugin-docs/api/properties/nodes-setrelaunchdata/)
. So, any method or operation in the plugin API that creates new nodes, deletes existing nodes, or modifies an existing node isn’t available in Dev Mode.

For example, here are a few operations that would not work in Dev Mode:

Plugin trying to write to the document in Dev Mode

    // This will throw an error because we are trying to create a new node.const node = figma.createRectangle();// This will throw an error because we are trying to remove an existing node.node.remove();// This will throw an error because we are trying to update a property on a node.node.name = "Button";

The following operations are valid to perform while in Dev Mode:

Plugin valid operations in Dev Mode

    // Get a nodeconst node = await figma.getNodeByIdAsync('1:12');// Read a propertyconsole.log(node.name)// showUIfigma.showUI(__html__)// listen to eventsfigma.on('selectionchange', () => {  // Do something})

##### info

In general, setter methods in the Plugin API do not work in Dev Mode. The only exceptions to this rule are for [pluginData](/plugin-docs/api/properties/nodes-setplugindata/)
, [relaunchData](/plugin-docs/api/properties/nodes-setrelaunchdata/)
, and [`exportAsync()`](/plugin-docs/api/properties/nodes-exportasync/)
, which plugins can use regardless of the file permissions of the user who is running the plugin.

### [](#reading-from-the-document "Direct link to heading")
Reading from the document

When reading the document, the plugin will have access to the current page and ComponentNodes that the page references.

Plugin reading from the document in Dev Mode

    // ✅ Works the same as in Figma design// Children of the current pagefigma.currentPage.children// findAll and findAllWithCriteriafigma.currentPage.findAll(node => node.name === 'Button')// Getting the main componentinstance.mainComponent// Changing the pagefigma.currentPage = figma.root.children[2]// Accessing data directly on the document rootfigma.root.getPluginData("plugin-data-id")

To load additional pages for your plugin to act on, follow the instructions in [Accessing the Document](/plugin-docs/accessing-document/#loading-pages-and-nodes)
.

### [](#skipinvisibleinstancechildren "Direct link to heading")
skipInvisibleInstanceChildren

The [skipInvisibleInstanceChildren](/plugin-docs/api/properties/figma-skipinvisibleinstancechildren/)
 property is set to `true` in Dev Mode by default. This helps ensure plugins are more performant.

### [](#responsive-iframes "Direct link to heading")
Responsive iframes

Because plugins in Dev Mode will take up the full width and height of the Inspect panel in Dev Mode, and because this panel is resizable by users, we recommend that you design your plugin iframes using the following guidelines:

1.  Make sure the content inside of your plugin iframe can handle being responsively resized
2.  Design your content around being vertically tall and handling scrolling overflow
3.  The content of your iframe should be optimized around having a minimum width of 300px

[](#dev-mode-plugins-in-visual-studio-code "Direct link to heading")
Dev Mode plugins in Visual Studio Code
-----------------------------------------------------------------------------------------------------------

Dev Mode plugins require some minor updates to work in Visual Studio Code:

*   `"vscode"` must be added to the `"capabilities"` field
*   Plugins that open links must use `figma.openExternal` to do so
*   Plugins that show UI that contains text fields should handle keyboard shortcuts
*   Plugins that show dialogs in the UI like `alert()` or `confirm()` should implement custom UI for this functionality. VS Code blocks extensions from showing native dialogs like alert and confirm.

### [](#opening-links-in-visual-studio-code "Direct link to heading")
Opening links in Visual Studio Code

VS Code limits how extensions, like Figma for VS Code, can open links.

If your plugin needs to open links, like to sign in to a backend service, it must use the `figma.openExternal` method rather than `window.open` or `<a href="...">`\-style links.

Opening links in VS Code: plugin iframe

    // ui.html<script>  function handleClick(event) {    event.preventDefault();    var url = event.currentTarget.getAttribute("href");    parent.postMessage(      { pluginMessage: { type: "OPEN_IN_BROWSER", url: url } },      "*"    );  }</script><a href="https://google.com" onclick="handleClick(event)">Click Me</a>

Opening links in VS Code: plugin code

    figma.ui.onmessage = (message) => {  if (message.type === 'OPEN_IN_BROWSER') {    figma.openExternal(message.url)  }}

### [](#handling-keyboard-shortcuts-in-visual-studio-code "Direct link to heading")
Handling keyboard shortcuts in Visual Studio Code

Text-related keyboard shortcuts work differently in plugin UIs in VS Code.

Specifically, plugin UIs that are hosted elsewhere (i.e. you are navigating the plugin iframe to a custom URL, rather than HTML included with your plugin) do not support text-related keyboard shortcuts by default. This means that, unless you implement custom handlers as described in this section, users cannot use the following shortcuts within your plugin:

*   Cut/copy/paste: `Cmd` (Mac) or `Ctrl` (Windows) + `X`/`C`/`V`
*   Undo/redo: `Cmd-Z`, `Cmd-Shift-Z` (Mac), `Ctrl-Z`, `Ctrl-Y` (Windows)
*   Select all: `Cmd` (Mac) or `Ctrl` (Windows) + `A`

If you have text inputs in your plugin UI, or text that users expect to copy, you should test these keyboard shortcuts to ensure they work as expected in VS Code. If they do not, we recommend adding custom keyboard event handling code.

In your plugin sandbox code:

1.  Wait for your plugin UI to load.
2.  Send a message to your plugin UI to tell it if your plugin is running in VS Code.

Keyboard shortcuts in VS Code: plugin code

    figma.showUI(`<script>window.location = 'https://...'</script>`);figma.ui.onmessage = (msg) => {  // Message sent from plugin UI when it's ready to receive messages  // We don't want to send a message if the UI hasn't loaded yet  if (msg === 'ready') {    figma.ui.postMessage({      type: 'isVsCode',      isVsCode: !!figma.vscode, // Tell our plugin UI whether we're running in VS Code    })  }}

Then, in your UI code, you must listen for the keyboard shortcuts you want to handle, and execute the corresponding commands:

Keyboard shortcuts in VS Code: plugin iframe

    window.onmessage = (e) => {  if (e.data.pluginMessage) {    const message = e.data.pluginMessage    // If we get a message from the plugin sandbox saying that we're running    // in VS Code, then we need to handle keyboard shortcuts ourselves    if (message.type === 'isVsCode' && message.isVsCode) {      console.log('in VSCode, adding keydown listener')      document.addEventListener('keydown', (e) => {        const ctrlDown = e.metaKey || e.ctrlKey        if (ctrlDown) {          if (e.key === 'a') {            document.execCommand('selectAll')          } else if (e.key === 'z') {            if (e.shiftKey) {              document.execCommand('redo')            } else {              document.execCommand('undo')            }          } else if (e.key === 'x') {            document.execCommand('cut')          } else if (e.key === 'c') {            document.execCommand('copy')          } else if (e.key === 'v') {            document.execCommand('paste')          }        }      })    }  }}// Tell our plugin code that we're ready to receive messagesparent.postMessage(  { pluginMessage: 'ready', pluginId: 'USE-ID-FROM-MANIFEST-HERE' },  'https://www.figma.com')

### [](#determine-if-plugin-is-running-in-vs-code "Direct link to heading")
Determine if plugin is running in VS Code

Figma has reserved the `figma.vscode` namespace. Currently, we do not provide any VS Code-specific APIs, but we may add some in the future.

`figma.vscode` will be `undefined` if you are outside of the VS Code extension, so you can use this value to determine if your plugin is running inside of VS Code.

Determine if running in VS Code

    if (figma.vscode) {  // Do something in VS Code}

On this page

*   [Figma design's Dev Mode](#figma-designs-dev-mode)
    
*   [Plugins for Dev Mode](#plugins-for-dev-mode)
    
*   [Plugins for inspection](#plugins-for-inspection)
    *   [How to get started](#how-to-get-started)
        
*   [Plugins for code generation](#plugins-for-code-generation)
    
*   [Key differences between plugins in Dev Mode and other plugins](#key-differences-between-plugins-in-dev-mode-and-other-plugins)
    *   [Limited access to the document](#limited-access-to-the-document)
        
    *   [Reading from the document](#reading-from-the-document)
        
    *   [skipInvisibleInstanceChildren](#skipinvisibleinstancechildren)
        
    *   [Responsive iframes](#responsive-iframes)
        
*   [Dev Mode plugins in Visual Studio Code](#dev-mode-plugins-in-visual-studio-code)
    *   [Opening links in Visual Studio Code](#opening-links-in-visual-studio-code)
        
    *   [Handling keyboard shortcuts in Visual Studio Code](#handling-keyboard-shortcuts-in-visual-studio-code)
        
    *   [Determine if plugin is running in VS Code](#determine-if-plugin-is-running-in-vs-code)
        

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Accepting Parameters as Input | Plugin API

[Skip to main content](#)

On this page

This page goes over how to accept parameters as input to your plugin. Plugin parameters offer a way to receive user input without building a UI. They can be flexible, fast to develop, and convenient for users.

![SVG Inserter plugin accepting parameters](/plugin-docs/assets/images/svg-inserter-62a23a624a1c40c97d86d0332f1d585e.png)

To support parameter input, there are a few changes you have to make:

1.  Add a [parameter list](#parameter-list)
     to your plugin’s manifest.
2.  Add a handler for the `figma.parameters.on('input')` event to provide [suggested parameter values](#suggestions)
    .
3.  Add a handler for the `figma.on('run')` event to [run](#run)
     your plugin with the selected values.

To get started building plugins with parameters, check out [these samples in the Figma Plugin Samples repository](https://github.com/figma/plugin-samples#examples-with-parameters)
.

[](#parameter-list "Direct link to heading")
Parameter List
-----------------------------------------------------------

To accept parameters, your plugin must define a list of parameters in the [manifest](/plugin-docs/manifest/#parameters)
. You can either define a single list of parameters on the manifest root, or you can create multiple [submenu items](/plugin-docs/manifest/#menu)
, each with its own unique parameter list. A parameter list is an array of parameters that looks something like this:

manifest.json

    {  "name": "Plugin with parameters",  "api": "1.0.0",  "main": "code.js",  "editorType": [    "figma",    "figjam"  ],  "documentAccess": "dynamic-page",  "parameters": [      {        "name": "Icon name",        "key": "icon-name"      },      {        "name": "Size",        "key": "size",        "allowFreeform": true      },      {        "name": "Color",        "key": "color",        "allowFreeform": true,        "optional": true      }  ]}

Each parameter requires a `name` and a `key`. The `name` is the text that appears in the UI and the `key` is used to uniquely identify the value for that parameter when your plugin is run.

Parameters can optionally set `allowFreeform` and `optional` flags. Freeform parameters (`allowFreeform == true`) allow any value to be entered, not just those suggested by the plugin. Optional parameters are skippable, meaning their values may be undefined when your plugin runs. In the UI, parameters are entered in the order they appear in the manifest, with optional parameters coming last. If optional parameters aren’t last in the manifest, we will throw an error.

By default, any time that a parameter-enabled command is triggered by the user, the parameter entry UI is launched and the user is asked to provide parameter values. This includes all contexts from which a plugin can be run: quick actions, context menus, the desktop app menu, etc.

However, you can make your plugin runnable without parameters by setting [`"parameterOnly": false`](/plugin-docs/manifest/#parameteronly)
 in the manifest for the command. For plugins or commands with `"parameterOnly": false`, users will only be able to provide parameters by pressing tab in quick actions. All other menus will launch your plugin without parameters. It is the responsibility of the plugin to get the necessary information from the user, usually using [`showUI`](/plugin-docs/api/properties/figma-showui/)
. This can be useful if you want to allow advanced users to quickly enter parameter values, while allowing other users to use a richer UI created by your plugin.

[](#suggestions "Direct link to heading")
Suggestions
-----------------------------------------------------

Your plugin can dynamically provide suggestions as a user types in values for parameters. To enable this, your plugin is launched in “query mode,” during which it can read from the document, and make [network requests](/plugin-docs/making-network-requests/)
, but can’t make changes to the document or display visible UI. The [Capital sample plugin](https://github.com/figma/plugin-samples/tree/master/capital)
 demonstrates how to make network requests in a plugin that accepts parameters. For a more advanced example, refer to the [Trivia sample plugin](https://github.com/figma/plugin-samples/tree/master/trivia)
.

Users enter parameters one at a time in quick actions. Every time the user makes a change, we clear out old suggestions and trigger an event in the plugin. Plugins provide updated suggestions by handling the [`figma.parameters.on('input')`](/plugin-docs/api/figma-parameters/#on)
 event and calling [`setSuggestions`](/plugin-docs/api/figma-parameters/#setsuggestions)
 on the object passed in.

Suggestions represent valid parameter values. For freeform parameters, any value can be entered, so these suggestions enable convenient autocompletions. But, for all other parameters, these suggestions are the only valid values accepted for that parameter. Users can’t progress to the next parameter until they select one of these valid values.

Here is an example of what this looks like in practice:

Filtering suggestions

    figma.parameters.on(  'input',  ({ parameters, key, query, result }: ParameterInputEvent) => {    switch (key) {      case 'icon':        const icons = [          'menu',          'settings',          'search',          'angle',          'checkbox',          'logout'        ]        result.setSuggestions(icons.filter(s => s.includes(query)))        break      ...      default:        return    }  })

You have a lot of flexibility in the suggestions you choose to present. You can filter suggestions using the simple function shown above, or you could implement a more complex ‘fuzzy’ search, among other options.

The [`setSuggestions`](/plugin-docs/api/figma-parameters/#setsuggestions)
 API also allows you to display icons and associate hidden metadata with each suggestion. With metadata, you can pass around useful information like node IDs while still displaying user friendly suggestion text.

For more details, see [`setSuggestions`](/plugin-docs/api/figma-parameters/#setsuggestions)
 and [`setError`](/plugin-docs/api/figma-parameters/#seterror)
.

[](#run "Direct link to heading")
Run
-------------------------------------

After all parameters have been entered, your plugin is run via the [`figma.on('run')`](/plugin-docs/api/properties/figma-on/#run)
 event. The selected parameter values are passed as an input to the run event handler. This event is called on all plugin runs, not just plugins with parameters, making it a convenient place to put all of your top level plugin code.

Run plugin with parameters

    figma.on('run', ({ command, parameters }: RunEvent) => {  switch (command) {    case "resize":      handleResize(parameters.width, parameters.height)      break    case "move":      handleMove(parameters.dx, parameters.dy)      break    ...  }})

The `'run'` event also signals the end of “query mode”, which means you can start using all normal plugin APIs. It is possible that your plugin will be run with parameters, but never enter “query mode”. This can happen, for example, when using the “Run last plugin” shortcut.

The `'run'` event is always fired when a plugin is first launched, even when the user has not used the parameters UI. If the user did not use the parameter UI the `parameters` property is set to `undefined` rather than a map of parameter values.

This is especially useful for plugins and submenu items that contain `"parameterOnly": false`. For such plugins, you can always use the `'run'` event as an entry point to your plugin logic, and then check if `parameters === undefined` to check if the parameter UI was used.

On this page

*   [Parameter List](#parameter-list)
    
*   [Suggestions](#suggestions)
    
*   [Run](#run)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# figma | Plugin API

[Skip to main content](#)

On this page

These are methods and properties available on the `figma` global object.

[](#general "Direct link to heading")
General
---------------------------------------------

### [](#apiversion "Direct link to heading")
apiVersion: '1.0.0' \[readonly\]

The version of the Figma API this plugin is running on, as defined in your `manifest.json` in the `"api"` field.

* * *

### [](#filekey "Direct link to heading")
fileKey: string | undefined \[readonly\]

The file key of the current file this plugin is running on. **Only [private plugins](https://help.figma.com/hc/en-us/articles/4404228629655-Create-private-organization-plugins)
 and Figma-owned resources (such as the Jira and Asana widgets) have access to this.** To enable this behavior, you need to specify `enablePrivatePluginApi` in your `manifest.json`.

* * *

### [](#command "Direct link to heading")
command: string \[readonly\]

The currently executing command from the `manifest.json` file. It is the command string in the `ManifestMenuItem` (more details in the [manifest guide](/plugin-docs/manifest/)
). If the plugin does not have any menu item, this property is undefined.

* * *

### [](#pluginid "Direct link to heading")
pluginId?: string \[readonly\]

The value specified in the `manifest.json` "id" field. This only exists for Plugins.

* * *

### [](#widgetid "Direct link to heading")
widgetId?: string \[readonly\]

Similar to `figma.pluginId` but for widgets. The value specified in the `manifest.json` "id" field. This only exists for Widgets.

* * *

### [](#editortype "Direct link to heading")
editorType: 'figma' | 'figjam' | 'dev' | 'slides' \[readonly\]

The current editor type this plugin is running in. See also [Setting editor type](/plugin-docs/setting-editor-type/)
.

* * *

### [](#mode "Direct link to heading")
[mode](/plugin-docs/api/properties/figma-mode/)
: 'default' | 'textreview' | 'inspect' | 'codegen' | 'linkpreview' | 'auth' \[readonly\]

Return the context the plugin is current running in.

*   `default` - The plugin is running as a normal plugin.
*   `textreview` - The plugin is running to provide text review functionality.
*   `inspect` - The plugin is running in the Inspect panel in Dev Mode.
*   `codegen` - The plugin is running in the Code section of the Inspect panel in Dev Mode.
*   `linkpreview` - The plugin is generating a link preview for a [Dev resource](https://help.figma.com/hc/en-us/articles/15023124644247#Add_external_links_and_resources_for_developers)
     in Dev Mode.
*   `auth` - The plugin is running to authenticate a user in Dev Mode.

##### caution

The `linkpreview` and `auth` modes are only available to partner and Figma-owned plugins.

[View more →](/plugin-docs/api/properties/figma-mode/)

* * *

### [](#skipinvisibleinstancechildren "Direct link to heading")
[skipInvisibleInstanceChildren](/plugin-docs/api/properties/figma-skipinvisibleinstancechildren/)
: boolean

When enabled, causes all node properties and methods to skip over invisible nodes (and their descendants) inside [`instances`](/plugin-docs/api/InstanceNode/)
. This makes operations like document traversal much faster.

##### info

Defaults to true in Figma Dev Mode and false in Figma and FigJam

[View more →](/plugin-docs/api/properties/figma-skipinvisibleinstancechildren/)

* * *

### [](#currentpage "Direct link to heading")
currentPage: [PageNode](/plugin-docs/api/PageNode/)

The page that the user currently viewing. You can set this value to a [`PageNode`](/plugin-docs/api/PageNode/)
 to switch pages.

*   If the manifest contains`"documentAccess": "dynamic-page"`, this property is read-only. Use [`figma.setCurrentPageAsync`](/plugin-docs/api/figma/#setcurrentpageasync)
     to update the value.

* * *

### [](#setcurrentpageasync "Direct link to heading")
setCurrentPageAsync(page: [PageNode](/plugin-docs/api/PageNode/)
): Promise<void>

Switch the active page to the specified [`PageNode`](/plugin-docs/api/PageNode/)
.

* * *

### [](#root "Direct link to heading")
root: [DocumentNode](/plugin-docs/api/DocumentNode/)
 \[readonly\]

The root of the entire Figma document. This node is used to access other pages. Each child is a [`PageNode`](/plugin-docs/api/PageNode/)
.

* * *

### [](#showui "Direct link to heading")
[showUI](/plugin-docs/api/properties/figma-showui/)
(html: string, options?: [ShowUIOptions](/plugin-docs/api/properties/figma-showui/#ShowUIOptions)
): void

Enables you to render UI to interact with the user, or simply to access browser APIs. This function creates a modal dialog with an `<iframe>` containing the HTML markup in the `html` argument.

[View more →](/plugin-docs/api/properties/figma-showui/)

* * *

### [](#ui "Direct link to heading")
ui: [UIAPI](/plugin-docs/api/figma-ui/#UIAPI)
 \[readonly\]

This property contains methods used to modify and communicate with the UI created via `figma.showUI(...)`.

Read more in the [UI section](/plugin-docs/api/figma-ui/)
.

* * *

### [](#util "Direct link to heading")
util: [UtilAPI](/plugin-docs/api/figma-util/#UtilAPI)
 \[readonly\]

This property contains convenience functions for common operations.

Read more in the [util section](/plugin-docs/api/figma-util/)
.

* * *

### [](#constants "Direct link to heading")
constants: [ConstantsAPI](/plugin-docs/api/figma-constants/#ConstantsAPI)
 \[readonly\]

This property contains constants that can be accessed by the plugin API.

Read more in the [constants section](/plugin-docs/api/figma-constants/)
.

* * *

### [](#timer "Direct link to heading")
timer?: [TimerAPI](/plugin-docs/api/figma-timer/#TimerAPI)
 \[readonly\]

##### info

This API is only available in FigJam

This property contains methods used to read, set, and modify the built in FigJam timer.

Read more in the [timer section](/plugin-docs/api/figma-timer/)
.

* * *

### [](#viewport "Direct link to heading")
viewport: [ViewportAPI](/plugin-docs/api/figma-viewport/#ViewportAPI)
 \[readonly\]

This property contains methods used to read and set the viewport, the user-visible area of the current page.

Read more in the [viewport section](/plugin-docs/api/figma-viewport/)
.

* * *

### [](#clientstorage "Direct link to heading")
clientStorage: [ClientStorageAPI](/plugin-docs/api/figma-clientStorage/#ClientStorageAPI)
 \[readonly\]

This property contains methods to store persistent data on the user's local machine.

Read more in the [client storage section](/plugin-docs/api/figma-clientStorage/)
.

* * *

### [](#parameters "Direct link to heading")
parameters: [ParametersAPI](/plugin-docs/api/figma-parameters/#ParametersAPI)
 \[readonly\]

This property contains methods to handle user inputs when a plugin is launched in query mode. See [Accepting Parameters as Input](/plugin-docs/plugin-parameters/)
 for more details.

* * *

### [](#payments "Direct link to heading")
payments?: [PaymentsAPI](/plugin-docs/api/figma-payments/#PaymentsAPI)
 \[readonly\]

##### info

`payments` must be specified in the permissions array in `manifest.json` to access this property.

This property contains methods for plugins that require payment.

* * *

### [](#currentuser "Direct link to heading")
currentUser: [User](/plugin-docs/api/User/)
 | null \[readonly\]

##### info

`currentuser` must be specified in the permissions array in `manifest.json` to access this property.

This property contains details about the current user.

* * *

### [](#activeusers "Direct link to heading")
activeUsers: [ActiveUser](/plugin-docs/api/ActiveUser/)
\[\] \[readonly\]

##### info

This API is only available in FigJam.

`activeusers` must be specified in the permissions array in `manifest.json` to access this property.

This property contains details about the active users in the file. `figma.activeUsers[0]` will match `figma.currentUser` for the `id`, `name`, `photoUrl`, `color`, and `sessionId` properties.

* * *

### [](#textreview "Direct link to heading")
textreview?: [TextReviewAPI](/plugin-docs/api/figma-textreview/#TextReviewAPI)
 \[readonly\]

##### info

`textreview` must be specified in the capabilities array in `manifest.json` to access this property.

This property contains methods that enable text review features in your plugin.

* * *

### [](#variables "Direct link to heading")
variables: [VariablesAPI](/plugin-docs/api/figma-variables/#VariablesAPI)
 \[readonly\]

This property contains methods to work with Variables and Variable Collections within Figma.

##### caution

This API is currently in public beta and is subject to change.

* * *

### [](#teamlibrary "Direct link to heading")
teamLibrary: [TeamLibraryAPI](/plugin-docs/api/figma-teamlibrary/#TeamLibraryAPI)
 \[readonly\]

This property contains methods to work with assets residing in a team library.

* * *

### [](#closeplugin "Direct link to heading")
[closePlugin](/plugin-docs/api/properties/figma-closeplugin/)
(message?: string): void

Closes the plugin. You should always call this function once your plugin is done running. When called, any UI that's open will be closed and any `setTimeout` or `setInterval` timers will be cancelled.

[View more →](/plugin-docs/api/properties/figma-closeplugin/)

* * *

### [](#on "Direct link to heading")
[on](/plugin-docs/api/properties/figma-on/)
(type: [ArgFreeEventType](/plugin-docs/api/properties/figma-on/#ArgFreeEventType)
, callback: () => void): void

### [](#on "Direct link to heading")
[on](/plugin-docs/api/properties/figma-on/)
(type: 'run', callback: (event: [RunEvent](/plugin-docs/api/RunEvent/)
) => void): void

### [](#on "Direct link to heading")
[on](/plugin-docs/api/properties/figma-on/)
(type: 'drop', callback: (event: [DropEvent](/plugin-docs/api/DropEvent/)
) => boolean): void

### [](#on "Direct link to heading")
[on](/plugin-docs/api/properties/figma-on/)
(type: 'documentchange', callback: (event: [DocumentChangeEvent](/plugin-docs/api/DocumentChangeEvent/)
) => void): void

### [](#on "Direct link to heading")
[on](/plugin-docs/api/properties/figma-on/)
(type: 'slidesviewchange', callback: (event: [SlidesViewChangeEvent](/plugin-docs/api/SlidesViewChangeEvent/)
) => void): void

### [](#on "Direct link to heading")
[on](/plugin-docs/api/properties/figma-on/)
(type: 'textreview', callback: (event: [TextReviewEvent](/plugin-docs/api/TextReviewEvent/)
) => Promise<[TextReviewRange](/plugin-docs/api/TextReviewRange/)
\[\]> | [TextReviewRange](/plugin-docs/api/TextReviewRange/)
\[\]): void

### [](#on "Direct link to heading")
[on](/plugin-docs/api/properties/figma-on/)
(type: 'stylechange', callback: (event: [StyleChangeEvent](/plugin-docs/api/StyleChangeEvent/)
) => void): void

Registers an callback that will be called when an event happens in the editor. Current supported events are:

*   The selection on the current page changed.
*   The current page changed.
*   The document has changed.
*   An object from outside Figma is dropped onto the canvas
*   The plugin has started running.
*   The plugin closed.
*   The plugin has started running.
*   The timer has started running.
*   The timer has paused.
*   The timer has stopped.
*   The timer is done.
*   The timer has resumed.

[View more →](/plugin-docs/api/properties/figma-on/)

* * *

### [](#once "Direct link to heading")
once(type: [ArgFreeEventType](/plugin-docs/api/properties/figma-on/#ArgFreeEventType)
, callback: () => void): void

### [](#once "Direct link to heading")
once(type: 'run', callback: (event: [RunEvent](/plugin-docs/api/RunEvent/)
) => void): void

### [](#once "Direct link to heading")
once(type: 'drop', callback: (event: [DropEvent](/plugin-docs/api/DropEvent/)
) => boolean): void

### [](#once "Direct link to heading")
once(type: 'documentchange', callback: (event: [DocumentChangeEvent](/plugin-docs/api/DocumentChangeEvent/)
) => void): void

### [](#once "Direct link to heading")
once(type: 'slidesviewchange', callback: (event: [SlidesViewChangeEvent](/plugin-docs/api/SlidesViewChangeEvent/)
) => void): void

### [](#once "Direct link to heading")
once(type: 'textreview', callback: (event: [TextReviewEvent](/plugin-docs/api/TextReviewEvent/)
) => Promise<[TextReviewRange](/plugin-docs/api/TextReviewRange/)
\[\]> | [TextReviewRange](/plugin-docs/api/TextReviewRange/)
\[\]): void

### [](#once "Direct link to heading")
once(type: 'stylechange', callback: (event: [StyleChangeEvent](/plugin-docs/api/StyleChangeEvent/)
) => void): void

Same as `figma.on`, but the callback will only be called once, the first time the specified event happens.

* * *

### [](#off "Direct link to heading")
[off](/plugin-docs/api/properties/figma-off/)
(type: [ArgFreeEventType](/plugin-docs/api/properties/figma-on/#ArgFreeEventType)
, callback: () => void): void

### [](#off "Direct link to heading")
[off](/plugin-docs/api/properties/figma-off/)
(type: 'run', callback: (event: [RunEvent](/plugin-docs/api/RunEvent/)
) => void): void

### [](#off "Direct link to heading")
[off](/plugin-docs/api/properties/figma-off/)
(type: 'drop', callback: (event: [DropEvent](/plugin-docs/api/DropEvent/)
) => boolean): void

### [](#off "Direct link to heading")
[off](/plugin-docs/api/properties/figma-off/)
(type: 'documentchange', callback: (event: [DocumentChangeEvent](/plugin-docs/api/DocumentChangeEvent/)
) => void): void

### [](#off "Direct link to heading")
[off](/plugin-docs/api/properties/figma-off/)
(type: 'slidesviewchange', callback: (event: [SlidesViewChangeEvent](/plugin-docs/api/SlidesViewChangeEvent/)
) => void): void

### [](#off "Direct link to heading")
[off](/plugin-docs/api/properties/figma-off/)
(type: 'textreview', callback: (event: [TextReviewEvent](/plugin-docs/api/TextReviewEvent/)
) => Promise<[TextReviewRange](/plugin-docs/api/TextReviewRange/)
\[\]> | [TextReviewRange](/plugin-docs/api/TextReviewRange/)
\[\]): void

### [](#off "Direct link to heading")
[off](/plugin-docs/api/properties/figma-off/)
(type: 'stylechange', callback: (event: [StyleChangeEvent](/plugin-docs/api/StyleChangeEvent/)
) => void): void

Removes a callback added with `figma.on` or `figma.once`.

[View more →](/plugin-docs/api/properties/figma-off/)

* * *

### [](#notify "Direct link to heading")
[notify](/plugin-docs/api/properties/figma-notify/)
(message: string, options?: [NotificationOptions](/plugin-docs/api/properties/figma-notify/#NotificationOptions)
): [NotificationHandler](/plugin-docs/api/properties/figma-notify/#NotificationHandler)

Shows a notification on the bottom of the screen.

[View more →](/plugin-docs/api/properties/figma-notify/)

* * *

### [](#commitundo "Direct link to heading")
[commitUndo](/plugin-docs/api/properties/figma-commitundo/)
(): void

Commits actions to undo history. This does not trigger an undo.

[View more →](/plugin-docs/api/properties/figma-commitundo/)

* * *

### [](#triggerundo "Direct link to heading")
triggerUndo(): void

Triggers an undo action. Reverts to the last `commitUndo()` state.

* * *

### [](#saveversionhistoryasync "Direct link to heading")
[saveVersionHistoryAsync](/plugin-docs/api/properties/figma-saveversionhistoryasync/)
(title: string, description?: string): Promise<[VersionHistoryResult](/plugin-docs/api/properties/figma-saveversionhistoryasync/#VersionHistoryResult)
\>

Saves a new version of the file and adds it to the version history of the file. Returns the new version id.

[View more →](/plugin-docs/api/properties/figma-saveversionhistoryasync/)

* * *

### [](#openexternal "Direct link to heading")
[openExternal](/plugin-docs/api/properties/figma-openexternal/)
(url: string): void

Open a url in a new tab.

[View more →](/plugin-docs/api/properties/figma-openexternal/)

* * *

[](#nodes "Direct link to heading")
Nodes
-----------------------------------------

This section contains to get or create new nodes.

### [](#getnodebyidasync "Direct link to heading")
getNodeByIdAsync(id: string): Promise<[BaseNode](/plugin-docs/api/nodes/#BaseNode)
 | null>

Finds a node by its id in the current document. Every node has an `id` property, which is unique within the document. If the id is invalid, or the node cannot be found (e.g. removed), returns a promise containing null.

* * *

### [](#getnodebyid "Direct link to heading")
getNodeById(id: string): [BaseNode](/plugin-docs/api/nodes/#BaseNode)
 | null

**DEPRECATED:** Use [`figma.getNodeByIdAsync`](/plugin-docs/api/figma/#getnodebyidasync)
 instead. This function will throw an exception if the plugin manifest contains `"documentAccess": "dynamic-page"`.

Finds a node by its id in the current document. Every node has an `id` property, which is unique within the document. If the id is invalid, or the node cannot be found (e.g. removed), returns null.

* * *

### [](#createrectangle "Direct link to heading")
[createRectangle](/plugin-docs/api/properties/figma-createrectangle/)
(): [RectangleNode](/plugin-docs/api/RectangleNode/)

Creates a new rectangle. The behavior is similar to using the `R` shortcut followed by a click.

[View more →](/plugin-docs/api/properties/figma-createrectangle/)

* * *

### [](#createline "Direct link to heading")
[createLine](/plugin-docs/api/properties/figma-createline/)
(): [LineNode](/plugin-docs/api/LineNode/)

Creates a new line.

[View more →](/plugin-docs/api/properties/figma-createline/)

* * *

### [](#createellipse "Direct link to heading")
[createEllipse](/plugin-docs/api/properties/figma-createellipse/)
(): [EllipseNode](/plugin-docs/api/EllipseNode/)

Creates a new ellipse. The behavior is similar to using the `O` shortcut followed by a click.

[View more →](/plugin-docs/api/properties/figma-createellipse/)

* * *

### [](#createpolygon "Direct link to heading")
[createPolygon](/plugin-docs/api/properties/figma-createpolygon/)
(): [PolygonNode](/plugin-docs/api/PolygonNode/)

Creates a new polygon (defaults to a triangle).

[View more →](/plugin-docs/api/properties/figma-createpolygon/)

* * *

### [](#createstar "Direct link to heading")
[createStar](/plugin-docs/api/properties/figma-createstar/)
(): [StarNode](/plugin-docs/api/StarNode/)

Creates a new star.

[View more →](/plugin-docs/api/properties/figma-createstar/)

* * *

### [](#createvector "Direct link to heading")
[createVector](/plugin-docs/api/properties/figma-createvector/)
(): [VectorNode](/plugin-docs/api/VectorNode/)

Creates a new, empty vector network with no vertices.

[View more →](/plugin-docs/api/properties/figma-createvector/)

* * *

### [](#createtext "Direct link to heading")
[createText](/plugin-docs/api/properties/figma-createtext/)
(): [TextNode](/plugin-docs/api/TextNode/)

Creates a new, empty text node.

[View more →](/plugin-docs/api/properties/figma-createtext/)

* * *

### [](#createframe "Direct link to heading")
[createFrame](/plugin-docs/api/properties/figma-createframe/)
(): [FrameNode](/plugin-docs/api/FrameNode/)

Creates a new frame. The behavior is similar to using the `F` shortcut followed by a click.

[View more →](/plugin-docs/api/properties/figma-createframe/)

* * *

### [](#createcomponent "Direct link to heading")
[createComponent](/plugin-docs/api/properties/figma-createcomponent/)
(): [ComponentNode](/plugin-docs/api/ComponentNode/)

##### info

This API is only available in Figma Design

Creates a new, empty component.

[View more →](/plugin-docs/api/properties/figma-createcomponent/)

* * *

### [](#createcomponentfromnode "Direct link to heading")
[createComponentFromNode](/plugin-docs/api/properties/figma-createcomponentfromnode/)
(node: [SceneNode](/plugin-docs/api/nodes/#SceneNode)
): [ComponentNode](/plugin-docs/api/ComponentNode/)

##### info

This API is only available in Figma Design

Creates a component from an existing node, preserving all of its properties and children. The behavior is similar to using the **Create component** button in the toolbar.

[View more →](/plugin-docs/api/properties/figma-createcomponentfromnode/)

* * *

### [](#createbooleanoperation "Direct link to heading")
[createBooleanOperation](/plugin-docs/api/properties/figma-createbooleanoperation/)
(): [BooleanOperationNode](/plugin-docs/api/BooleanOperationNode/)

**DEPRECATED:** Use [`figma.union`](/plugin-docs/api/figma/#union)
, [`figma.subtract`](/plugin-docs/api/figma/#subtract)
, [`figma.intersect`](/plugin-docs/api/figma/#intersect)
, [`figma.exclude`](/plugin-docs/api/figma/#exclude)
 instead.

[View more →](/plugin-docs/api/properties/figma-createbooleanoperation/)

* * *

### [](#createpage "Direct link to heading")
[createPage](/plugin-docs/api/properties/figma-createpage/)
(): [PageNode](/plugin-docs/api/PageNode/)

##### info

This API is only available in Figma Design

Creates a new page, appended to the document's list of children.

[View more →](/plugin-docs/api/properties/figma-createpage/)

* * *

### [](#createpagedivider "Direct link to heading")
[createPageDivider](/plugin-docs/api/properties/figma-createpagedivider/)
(dividerName?: string): [PageNode](/plugin-docs/api/PageNode/)

Creates a new page divider, appended to the document's list of children. A page divider is a [`PageNode`](/plugin-docs/api/PageNode/)
 with `isPageDivider` true.

[View more →](/plugin-docs/api/properties/figma-createpagedivider/)

* * *

### [](#createslice "Direct link to heading")
[createSlice](/plugin-docs/api/properties/figma-createslice/)
(): [SliceNode](/plugin-docs/api/SliceNode/)

Creates a new slice object.

[View more →](/plugin-docs/api/properties/figma-createslice/)

* * *

### [](#createslide "Direct link to heading")
[createSlide](/plugin-docs/api/properties/figma-createslide/)
(row?: number, col?: number): [SlideNode](/plugin-docs/api/SlideNode/)

##### info

This API is only available in Figma Slides

[View more →](/plugin-docs/api/properties/figma-createslide/)

* * *

### [](#createsliderow "Direct link to heading")
[createSlideRow](/plugin-docs/api/properties/figma-createsliderow/)
(row?: number): [SlideRowNode](/plugin-docs/api/SlideRowNode/)

##### info

This API is only available in Figma Slides

Creates a new Slide Row, which automatically gets appended to the Slide Grid.

[View more →](/plugin-docs/api/properties/figma-createsliderow/)

* * *

### [](#createsticky "Direct link to heading")
[createSticky](/plugin-docs/api/properties/figma-createsticky/)
(): [StickyNode](/plugin-docs/api/StickyNode/)

##### info

This API is only available in FigJam

Creates a new sticky. The behavior is similar to using the `S` shortcut followed by a click.

[View more →](/plugin-docs/api/properties/figma-createsticky/)

* * *

### [](#createshapewithtext "Direct link to heading")
[createShapeWithText](/plugin-docs/api/properties/figma-createshapewithtext/)
(): [ShapeWithTextNode](/plugin-docs/api/ShapeWithTextNode/)

##### info

This API is only available in FigJam

Creates a new shape with text.

[View more →](/plugin-docs/api/properties/figma-createshapewithtext/)

* * *

### [](#createconnector "Direct link to heading")
[createConnector](/plugin-docs/api/properties/figma-createconnector/)
(): [ConnectorNode](/plugin-docs/api/ConnectorNode/)

##### info

This API is only available in FigJam

Creates a new connector. The behavior is similar to using the `Shift-C` shortcut followed by a click.

[View more →](/plugin-docs/api/properties/figma-createconnector/)

* * *

### [](#createcodeblock "Direct link to heading")
createCodeBlock(): [CodeBlockNode](/plugin-docs/api/CodeBlockNode/)

##### info

This API is only available in FigJam

Creates a new code block.

* * *

### [](#createsection "Direct link to heading")
createSection(): [SectionNode](/plugin-docs/api/SectionNode/)

Creates a new section

* * *

### [](#createtable "Direct link to heading")
[createTable](/plugin-docs/api/properties/figma-createtable/)
(numRows?: number, numColumns?: number): [TableNode](/plugin-docs/api/TableNode/)

##### info

This API is only available in FigJam

Creates a new table.

[View more →](/plugin-docs/api/properties/figma-createtable/)

* * *

### [](#createlinkpreviewasync "Direct link to heading")
[createLinkPreviewAsync](/plugin-docs/api/properties/figma-createlinkpreviewasync/)
(url: string): Promise<[EmbedNode](/plugin-docs/api/EmbedNode/)
 | [LinkUnfurlNode](/plugin-docs/api/LinkUnfurlNode/)
\>

##### info

This API is only available in FigJam.

Resolves link metadata from a URL, and inserts either an embed or a unfurled preview of the link into the document An embed will be inserted if the URL is a valid OEmbed provider (has a `<link type="application/json+oembed" ... />` tag). The returned `<iframe>` source will be converted into an EmbedNode.

Otherwise, the title, description, thumbnail, and favicon will be parsed from the HTML markup of the URL using standard `og` or `twitter` meta tags. This information will be converted into a LinkUnfurlNode.

[View more →](/plugin-docs/api/properties/figma-createlinkpreviewasync/)

* * *

### [](#creategif "Direct link to heading")
[createGif](/plugin-docs/api/properties/figma-creategif/)
(hash: string): [MediaNode](/plugin-docs/api/MediaNode/)

##### info

This API is only available in FigJam

Creates a new GIF with the given `Image` hash.

[View more →](/plugin-docs/api/properties/figma-creategif/)

* * *

### [](#createnodefromsvg "Direct link to heading")
createNodeFromSvg(svg: string): [FrameNode](/plugin-docs/api/FrameNode/)

Creates a new node from an SVG string. This is equivalent to the SVG import feature in the editor. See the [official documentation on SVG paths](https://www.w3.org/TR/SVG/paths.html)
 for more details.

* * *

### [](#createnodefromjsxasync "Direct link to heading")
[createNodeFromJSXAsync](/plugin-docs/api/properties/figma-createnodefromjsxasync/)
(jsx: any): Promise<[SceneNode](/plugin-docs/api/nodes/#SceneNode)
\>

This API creates a new node using the JSX API used by widgets.

[View more →](/plugin-docs/api/properties/figma-createnodefromjsxasync/)

* * *

### [](#combineasvariants "Direct link to heading")
[combineAsVariants](/plugin-docs/api/properties/figma-combineasvariants/)
(nodes: ReadonlyArray<[ComponentNode](/plugin-docs/api/ComponentNode/)
\>, parent: [BaseNode](/plugin-docs/api/nodes/#BaseNode)
 & [ChildrenMixin](/plugin-docs/api/node-properties/#ChildrenMixin)
, index?: number): [ComponentSetNode](/plugin-docs/api/ComponentSetNode/)

##### info

This API is only available in Figma Design

Creates a new [`ComponentSetNode`](/plugin-docs/api/ComponentSetNode/)
 by combining all the nodes in `nodes`, which should all have type [`ComponentNode`](/plugin-docs/api/ComponentNode/)
.

[View more →](/plugin-docs/api/properties/figma-combineasvariants/)

* * *

### [](#group "Direct link to heading")
[group](/plugin-docs/api/properties/figma-group/)
(nodes: ReadonlyArray<[BaseNode](/plugin-docs/api/nodes/#BaseNode)
\>, parent: [BaseNode](/plugin-docs/api/nodes/#BaseNode)
 & [ChildrenMixin](/plugin-docs/api/node-properties/#ChildrenMixin)
, index?: number): [GroupNode](/plugin-docs/api/GroupNode/)

Creates new group containing all the nodes in `nodes`. There is no `createGroup` function -- use this instead. Group nodes have many quirks, like auto-resizing, that you can read about in the [`FrameNode`](/plugin-docs/api/FrameNode/)
 section.

[View more →](/plugin-docs/api/properties/figma-group/)

* * *

### [](#union "Direct link to heading")
union(nodes: ReadonlyArray<[BaseNode](/plugin-docs/api/nodes/#BaseNode)
\>, parent: [BaseNode](/plugin-docs/api/nodes/#BaseNode)
 & [ChildrenMixin](/plugin-docs/api/node-properties/#ChildrenMixin)
, index?: number): [BooleanOperationNode](/plugin-docs/api/BooleanOperationNode/)

Creates a new [`BooleanOperationNode`](/plugin-docs/api/BooleanOperationNode/)
 using the UNION operation using the contents of `nodes`. The arguments to `union` are the same as in [`figma.group`](/plugin-docs/api/properties/figma-group/)
.

* * *

### [](#subtract "Direct link to heading")
subtract(nodes: ReadonlyArray<[BaseNode](/plugin-docs/api/nodes/#BaseNode)
\>, parent: [BaseNode](/plugin-docs/api/nodes/#BaseNode)
 & [ChildrenMixin](/plugin-docs/api/node-properties/#ChildrenMixin)
, index?: number): [BooleanOperationNode](/plugin-docs/api/BooleanOperationNode/)

Creates a new [`BooleanOperationNode`](/plugin-docs/api/BooleanOperationNode/)
 using the SUBTRACT operation using the contents of `nodes`. The arguments to `union` are the same as in [`figma.subtract`](/plugin-docs/api/figma/#subtract)
.

* * *

### [](#intersect "Direct link to heading")
intersect(nodes: ReadonlyArray<[BaseNode](/plugin-docs/api/nodes/#BaseNode)
\>, parent: [BaseNode](/plugin-docs/api/nodes/#BaseNode)
 & [ChildrenMixin](/plugin-docs/api/node-properties/#ChildrenMixin)
, index?: number): [BooleanOperationNode](/plugin-docs/api/BooleanOperationNode/)

Creates a new [`BooleanOperationNode`](/plugin-docs/api/BooleanOperationNode/)
 using the INTERSECT operation using the contents of `nodes`. The arguments to `union` are the same as in [`figma.intersect`](/plugin-docs/api/figma/#intersect)
.

* * *

### [](#exclude "Direct link to heading")
exclude(nodes: ReadonlyArray<[BaseNode](/plugin-docs/api/nodes/#BaseNode)
\>, parent: [BaseNode](/plugin-docs/api/nodes/#BaseNode)
 & [ChildrenMixin](/plugin-docs/api/node-properties/#ChildrenMixin)
, index?: number): [BooleanOperationNode](/plugin-docs/api/BooleanOperationNode/)

Creates a new [`BooleanOperationNode`](/plugin-docs/api/BooleanOperationNode/)
 using the EXCLUDE operation using the contents of `nodes`. The arguments to `union` are the same as in [`figma.exclude`](/plugin-docs/api/figma/#exclude)
.

* * *

### [](#flatten "Direct link to heading")
[flatten](/plugin-docs/api/properties/figma-flatten/)
(nodes: ReadonlyArray<[BaseNode](/plugin-docs/api/nodes/#BaseNode)
\>, parent?: [BaseNode](/plugin-docs/api/nodes/#BaseNode)
 & [ChildrenMixin](/plugin-docs/api/node-properties/#ChildrenMixin)
, index?: number): [VectorNode](/plugin-docs/api/VectorNode/)

Flattens every node in nodes into a new vector network.

[View more →](/plugin-docs/api/properties/figma-flatten/)

* * *

### [](#ungroup "Direct link to heading")
[ungroup](/plugin-docs/api/properties/figma-ungroup/)
(node: [SceneNode](/plugin-docs/api/nodes/#SceneNode)
 & [ChildrenMixin](/plugin-docs/api/node-properties/#ChildrenMixin)
): Array<[SceneNode](/plugin-docs/api/nodes/#SceneNode)
\>

Ungroups the given `node`, moving all of `node`'s children into `node`'s parent and removing `node`. Returns an array of nodes that were children of `node`.

[View more →](/plugin-docs/api/properties/figma-ungroup/)

* * *

[](#dev-mode "Direct link to heading")
Dev Mode
-----------------------------------------------

These APIs integrate your plugin with Figma's Dev Mode. Use the APIs to generate code and interfaces in Dev Mode.

### [](#codegen "Direct link to heading")
codegen: [CodegenAPI](/plugin-docs/api/figma-codegen/#CodegenAPI)
 \[readonly\]

This property contains methods used to integrate with the Dev Mode codegen functionality.

Read more in the [codegen section](/plugin-docs/api/figma-codegen/)
.

* * *

### [](#vscode "Direct link to heading")
vscode?: VSCodeAPI \[readonly\]

This property contains methods used to integrate with the Figma for VS Code extension. If `undefined`, the plugin is not running in VS Code.

Read more in [Dev Mode plugins in Visual Studio Code](/plugin-docs/working-in-dev-mode/#dev-mode-plugins-in-visual-studio-code)

* * *

### [](#devresources "Direct link to heading")
devResources?: DevResourcesAPI \[readonly\]

##### caution

This is a private API only available to [Figma partners](https://www.figma.com/partners/)

* * *

### [](#getselectioncolors "Direct link to heading")
getSelectionColors(): null | { paints: [Paint](/plugin-docs/api/Paint/)
\[\]; styles: [PaintStyle](/plugin-docs/api/PaintStyle/)
\[\] }

Returns all of the colors in a user’s current selection. This returns the same values that are shown in Figma's native selection colors feature. This can be useful for getting a list of colors and styles in the current selection and converting them into a different code format (like CSS variables for a user’s codebase).

If there are colors in a selection it will return an object with a `paints` property, which is an array of `Paint[]`, and a `styles` property, which is an array of `PaintStyle[]`.

##### info

`getSelectionColors()` returns `null` if there is no selection, or if there are too many colors in the selection (>1000).

* * *

[](#slides "Direct link to heading")
Slides
-------------------------------------------

### [](#getslidegrid "Direct link to heading")
[getSlideGrid](/plugin-docs/api/properties/figma-getslidegrid/)
(): Array<Array<[SlideNode](/plugin-docs/api/SlideNode/)
\>>

##### info

This API is only available in Figma Slides

[View more →](/plugin-docs/api/properties/figma-getslidegrid/)

* * *

### [](#setslidegrid "Direct link to heading")
[setSlideGrid](/plugin-docs/api/properties/figma-setslidegrid/)
(slideGrid: Array<Array<[SlideNode](/plugin-docs/api/SlideNode/)
\>>): void

##### info

This API is only available in Figma Slides

[View more →](/plugin-docs/api/properties/figma-setslidegrid/)

* * *

[](#styles "Direct link to heading")
Styles
-------------------------------------------

These are APIs available to create new styles and retrieve existing ones in the current document. The newly created styles are local to the current document and do not contain default properties (except for TextStyle).

### [](#getstylebyidasync "Direct link to heading")
getStyleByIdAsync(id: string): Promise<[BaseStyle](/plugin-docs/api/BaseStyle/)
 | null>

Finds a style by its id in the current document. If not found, returns a promise containing null.

* * *

### [](#getstylebyid "Direct link to heading")
getStyleById(id: string): [BaseStyle](/plugin-docs/api/BaseStyle/)
 | null

**DEPRECATED:** Use [`figma.getStyleByIdAsync`](/plugin-docs/api/figma/#getstylebyidasync)
 instead. This function will throw an exception if the plugin manifest contains `"documentAccess": "dynamic-page"`.

Finds a style by its id in the current document. If not found, returns null.

* * *

### [](#createpaintstyle "Direct link to heading")
createPaintStyle(): [PaintStyle](/plugin-docs/api/PaintStyle/)

##### info

This API is only available in Figma Design

Creates a new Paint style. This might be referred to as a Color style, or Fill style more colloquially. However, since this type of style may contain images, and may be used for backgrounds, strokes, and fills, it is called a Paint.

* * *

### [](#createtextstyle "Direct link to heading")
createTextStyle(): [TextStyle](/plugin-docs/api/TextStyle/)

##### info

This API is only available in Figma Design

Creates a new Text style. By default, the text style has the Figma default text properties (font family Inter Regular, font size 12).

* * *

### [](#createeffectstyle "Direct link to heading")
createEffectStyle(): [EffectStyle](/plugin-docs/api/EffectStyle/)

##### info

This API is only available in Figma Design

Creates a new Effect style.

* * *

### [](#creategridstyle "Direct link to heading")
createGridStyle(): [GridStyle](/plugin-docs/api/GridStyle/)

##### info

This API is only available in Figma Design

Creates a new Grid style.

* * *

The APIs below allow access to local styles, which are returned in the same order as displayed in the UI. Only local styles are returned, not the ones from the team library.

### [](#getlocalpaintstylesasync "Direct link to heading")
getLocalPaintStylesAsync(): Promise<[PaintStyle](/plugin-docs/api/PaintStyle/)
\[\]>

Returns the list of local paint styles.

* * *

### [](#getlocalpaintstyles "Direct link to heading")
getLocalPaintStyles(): [PaintStyle](/plugin-docs/api/PaintStyle/)
\[\]

**DEPRECATED:** Use [`figma.getLocalPaintStylesAsync`](/plugin-docs/api/figma/#getlocalpaintstylesasync)
 instead. This function will throw an exception if the plugin manifest contains `"documentAccess": "dynamic-page"`.

Returns the list of local paint styles.

* * *

### [](#getlocaltextstylesasync "Direct link to heading")
getLocalTextStylesAsync(): Promise<[TextStyle](/plugin-docs/api/TextStyle/)
\[\]>

Returns the list of local text styles.

* * *

### [](#getlocaltextstyles "Direct link to heading")
getLocalTextStyles(): [TextStyle](/plugin-docs/api/TextStyle/)
\[\]

**DEPRECATED:** Use [`figma.getLocalTextStylesAsync`](/plugin-docs/api/figma/#getlocaltextstylesasync)
 instead. This function will throw an exception if the plugin manifest contains `"documentAccess": "dynamic-page"`.

Returns the list of local text styles.

* * *

### [](#getlocaleffectstylesasync "Direct link to heading")
getLocalEffectStylesAsync(): Promise<[EffectStyle](/plugin-docs/api/EffectStyle/)
\[\]>

Returns the list of local effect styles.

* * *

### [](#getlocaleffectstyles "Direct link to heading")
getLocalEffectStyles(): [EffectStyle](/plugin-docs/api/EffectStyle/)
\[\]

**DEPRECATED:** Use [`figma.getLocalEffectStylesAsync`](/plugin-docs/api/figma/#getlocaleffectstylesasync)
 instead. This function will throw an exception if the plugin manifest contains `"documentAccess": "dynamic-page"`.

Returns the list of local effect styles.

* * *

### [](#getlocalgridstylesasync "Direct link to heading")
getLocalGridStylesAsync(): Promise<[GridStyle](/plugin-docs/api/GridStyle/)
\[\]>

Returns the list of local grid styles.

* * *

### [](#getlocalgridstyles "Direct link to heading")
getLocalGridStyles(): [GridStyle](/plugin-docs/api/GridStyle/)
\[\]

**DEPRECATED:** Use [`figma.getLocalGridStylesAsync`](/plugin-docs/api/figma/#getlocalgridstylesasync)
 instead. This function will throw an exception if the plugin manifest contains `"documentAccess": "dynamic-page"`.

Returns the list of local grid styles.

* * *

### [](#movelocalpaintstyleafter "Direct link to heading")
moveLocalPaintStyleAfter(targetNode: [PaintStyle](/plugin-docs/api/PaintStyle/)
, reference: [PaintStyle](/plugin-docs/api/PaintStyle/)
 | null): void

##### info

This API is only available in Figma Design

Reorders a target node after the specified reference node (if provided) or to be first if reference is null. The target and reference nodes must live in the same folder. The target and reference nodes must be local paint styles.

* * *

### [](#movelocaltextstyleafter "Direct link to heading")
moveLocalTextStyleAfter(targetNode: [TextStyle](/plugin-docs/api/TextStyle/)
, reference: [TextStyle](/plugin-docs/api/TextStyle/)
 | null): void

##### info

This API is only available in Figma Design

Reorders a target node after the specified reference node (if provided) or to be first if reference is null. The target and reference nodes must live in the same folder. The target and reference nodes must be local text styles.

* * *

### [](#movelocaleffectstyleafter "Direct link to heading")
moveLocalEffectStyleAfter(targetNode: [EffectStyle](/plugin-docs/api/EffectStyle/)
, reference: [EffectStyle](/plugin-docs/api/EffectStyle/)
 | null): void

##### info

This API is only available in Figma Design

Reorders a target node after the specified reference node (if provided) or to be first if reference is null. The target and reference nodes must live in the same folder. The target and reference nodes must be local effect styles.

* * *

### [](#movelocalgridstyleafter "Direct link to heading")
moveLocalGridStyleAfter(targetNode: [GridStyle](/plugin-docs/api/GridStyle/)
, reference: [GridStyle](/plugin-docs/api/GridStyle/)
 | null): void

##### info

This API is only available in Figma Design

Reorders a target node after the specified reference node (if provided) or to be first if reference is null. The target and reference nodes must live in the same folder. The target and reference nodes must be local grid styles.

* * *

### [](#movelocalpaintfolderafter "Direct link to heading")
moveLocalPaintFolderAfter(targetFolder: string, reference: string | null): void

##### info

This API is only available in Figma Design

Reorders a target folder after the specified reference folder (if provided) or to be first in the parent folder if reference is null. The target and reference folders must have the same parent folder. The target and reference folders must contain paint styles. When referring to nested folders, the full delimited folder name must be used. See the [`BaseStyle`](/plugin-docs/api/BaseStyle/)
 section for more info.

* * *

### [](#movelocaltextfolderafter "Direct link to heading")
moveLocalTextFolderAfter(targetFolder: string, reference: string | null): void

##### info

This API is only available in Figma Design

Reorders a target folder after the specified reference folder (if provided) or to be first in the parent folder if reference is null. The target and reference folders must have the same parent folder. The target and reference folders must contain text styles. When referring to nested folders, the full delimited folder name must be used. See the [`BaseStyle`](/plugin-docs/api/BaseStyle/)
 section for more info.

* * *

### [](#movelocaleffectfolderafter "Direct link to heading")
moveLocalEffectFolderAfter(targetFolder: string, reference: string | null): void

##### info

This API is only available in Figma Design

Reorders a target folder after the specified reference folder (if provided) or to be first in the parent folder if reference is null. The target and reference folders must have the same parent folder. The target and reference folders must contain effect styles. When referring to nested folders, the full delimited folder name must be used. See the [`BaseStyle`](/plugin-docs/api/BaseStyle/)
 section for more info.

* * *

### [](#movelocalgridfolderafter "Direct link to heading")
moveLocalGridFolderAfter(targetFolder: string, reference: string | null): void

##### info

This API is only available in Figma Design

Reorders a target folder after the specified reference folder (if provided) or to be first in the parent folder if reference is null. The target and reference folders must have the same parent folder. The target and reference folders must contain grid styles. When referring to nested folders, the full delimited folder name must be used. See the [`BaseStyle`](/plugin-docs/api/BaseStyle/)
 section for more info.

* * *

[](#team-library "Direct link to heading")
Team Library
-------------------------------------------------------

These APIs allow you to get a component, style, or variable from the team library. This requires you to have a key. You can get a key by calling `component.key` or `style.key` while a plugin is running.

### [](#importcomponentbykeyasync "Direct link to heading")
importComponentByKeyAsync(key: string): Promise<[ComponentNode](/plugin-docs/api/ComponentNode/)
\>

Loads a component node from the team library. Promise is rejected if there is no published component with that key or if the request fails.

* * *

### [](#importcomponentsetbykeyasync "Direct link to heading")
importComponentSetByKeyAsync(key: string): Promise<[ComponentSetNode](/plugin-docs/api/ComponentSetNode/)
\>

Loads a component set node from the team library. Promise is rejected if there is no published component set with that key or if the request fails.

* * *

### [](#importstylebykeyasync "Direct link to heading")
importStyleByKeyAsync(key: string): Promise<[BaseStyle](/plugin-docs/api/BaseStyle/)
\>

Loads a style from the team library. Promise is rejected if there is no style with that key or if the request fails.

* * *

### [](#importvariablebykeyasync "Direct link to heading")
importVariableByKeyAsync(key: string): Promise<[Variable](/plugin-docs/api/Variable/)
\>

Loads a variable from the team library. Promise is rejected if there is no published variable with that key or if the request fails.

[View more →](/plugin-docs/api/properties/figma-variables-importvariablebykeyasync/)

* * *

[](#other "Direct link to heading")
Other
-----------------------------------------

### [](#listavailablefontsasync "Direct link to heading")
listAvailableFontsAsync(): Promise<[Font](/plugin-docs/api/FontName/#Font)
\[\]>

Returns the lists of currently available fonts. This should be the same list as the one you'd see if you manually used the font picker.

* * *

### [](#loadfontasync "Direct link to heading")
[loadFontAsync](/plugin-docs/api/properties/figma-loadfontasync/)
(fontName: [FontName](/plugin-docs/api/FontName/)
): Promise<void>

Makes a font available _in the plugin_ for use when creating and modifying text. Calling this function is **necessary** to modify any property of a text node that may cause the rendered text to change, including `.characters`, `.fontSize`, `.fontName`, etc.

You can either pass in a hardcoded font, a font loaded via `listAvailableFontsAsync`, or the font stored on an existing text node.

Read more about how to work with fonts, when to load them, and how to load them in the [Working with Text](/plugin-docs/working-with-text/)
 page.

[View more →](/plugin-docs/api/properties/figma-loadfontasync/)

* * *

### [](#hasmissingfont "Direct link to heading")
hasMissingFont: boolean \[readonly\]

Returns true if the document contains text with missing fonts.

* * *

### [](#createimage "Direct link to heading")
[createImage](/plugin-docs/api/properties/figma-createimage/)
(data: Uint8Array): [Image](/plugin-docs/api/Image/)

Creates an `Image` object from the raw bytes of a file content. Note that `Image` objects **are not nodes**. They are handles to images stored by Figma. Frame backgrounds, or fills of shapes (e.g. a rectangle) may contain images. [Example: how to work with images](/plugin-docs/working-with-images/)
.

[View more →](/plugin-docs/api/properties/figma-createimage/)

* * *

### [](#createimageasync "Direct link to heading")
[createImageAsync](/plugin-docs/api/properties/figma-createimageasync/)
(src: string): Promise<[Image](/plugin-docs/api/Image/)
\>

Creates an `Image` object from a src URL. Note that `Image` objects **are not nodes**. They are handles to images stored by Figma. Frame backgrounds, or fills of shapes (e.g. a rectangle) may contain images.

[View more →](/plugin-docs/api/properties/figma-createimageasync/)

* * *

### [](#getimagebyhash "Direct link to heading")
getImageByHash(hash: string): [Image](/plugin-docs/api/Image/)
 | null

This gets the corresponding `Image` object for a given image hash, which can then be used to obtain the bytes of the image. This hash is found in a node's fill property as part of the ImagePaint object. If there is no image with this hash, returns null.

* * *

### [](#createvideoasync "Direct link to heading")
[createVideoAsync](/plugin-docs/api/properties/figma-createvideoasync/)
(data: Uint8Array): Promise<[Video](/plugin-docs/api/Video/)
\>

Creates a `Video` object from the raw bytes of a file content. Like `Image` objects, `Video` objects **are not nodes**. They are handles to images stored by Figma. Frame backgrounds, or fills of shapes (e.g. a rectangle) may contain videos.

[View more →](/plugin-docs/api/properties/figma-createvideoasync/)

* * *

### [](#mixed "Direct link to heading")
[mixed](/plugin-docs/api/properties/figma-mixed/)
: unique symbol \[readonly\]

This a constant value that some node properties return when they are a mix of multiple values. An example might be font size: a single text node can use multiple different font sizes for different character ranges. For those properties, you should always compare against `figma.mixed`.

[View more →](/plugin-docs/api/properties/figma-mixed/)

* * *

### [](#base64encode "Direct link to heading")
base64Encode(data: Uint8Array): string

Returns a base64-encoded string from the Uint8Array `data`.

* * *

### [](#base64decode "Direct link to heading")
base64Decode(data: string): Uint8Array

Decodes and returns a Uint8Array from the base64-encoded string `data`.

* * *

### [](#getfilethumbnailnodeasync "Direct link to heading")
getFileThumbnailNodeAsync(): Promise<[FrameNode](/plugin-docs/api/FrameNode/)
 | [ComponentNode](/plugin-docs/api/ComponentNode/)
 | [ComponentSetNode](/plugin-docs/api/ComponentSetNode/)
 | [SectionNode](/plugin-docs/api/SectionNode/)
 | null>

Gets the node that is currently being used for file thumbnail, or null if the default thumbnail is used.

* * *

### [](#getfilethumbnailnode "Direct link to heading")
getFileThumbnailNode(): [FrameNode](/plugin-docs/api/FrameNode/)
 | [ComponentNode](/plugin-docs/api/ComponentNode/)
 | [ComponentSetNode](/plugin-docs/api/ComponentSetNode/)
 | [SectionNode](/plugin-docs/api/SectionNode/)
 | null

**DEPRECATED:** Use [`figma.getFileThumbnailNodeAsync`](/plugin-docs/api/figma/#getfilethumbnailnodeasync)
 instead. This function will throw an exception if the plugin manifest contains `"documentAccess": "dynamic-page"`.

Gets the node that is currently being used for file thumbnail, or null if the default thumbnail is used.

* * *

### [](#setfilethumbnailnodeasync "Direct link to heading")
setFileThumbnailNodeAsync(node: [FrameNode](/plugin-docs/api/FrameNode/)
 | [ComponentNode](/plugin-docs/api/ComponentNode/)
 | [ComponentSetNode](/plugin-docs/api/ComponentSetNode/)
 | [SectionNode](/plugin-docs/api/SectionNode/)
 | null): Promise<void>

Set `node` to be the thumbnail for the file. If `node` is null, then use the default thumbnail.

* * *

### [](#loadallpagesasync "Direct link to heading")
loadAllPagesAsync(): Promise<void>

Loads all pages of the document into memory. This enables the use of the following features:

*   The `documentchange` event for [`figma.on`](/plugin-docs/api/properties/figma-on/)
    
*   [`findAll`](/plugin-docs/api/properties/DocumentNode-findall/)
    
*   [`findOne`](/plugin-docs/api/properties/DocumentNode-findone/)
    
*   [`findAllWithCriteria`](/plugin-docs/api/DocumentNode/#findallwithcriteria)
    
*   [`findWidgetNodesByWidgetId`](/plugin-docs/api/properties/DocumentNode-findwidgetnodesbywidgetid/)
    

Calling this method may be slow for large documents, and should be avoided unless absolutely necessary.

This method is only necessary if the plugin manifest contains `"documentAccess": "dynamic-page"`. Without this manifest setting, the full document is loaded automatically when the plugin or widget runs.

* * *

On this page

*   [General](#general)
    
*   [Nodes](#nodes)
    
*   [Dev Mode](#dev-mode)
    
*   [Slides](#slides)
    
*   [Styles](#styles)
    
*   [Team Library](#team-library)
    
*   [Other](#other)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Asynchronous Tasks | Plugin API

[Skip to main content](#)

On this page

##### info

This article covers asynchronous tasks in JavaScript and provides code examples. It may be helpful to understand some JavaScript fundamentals before you continue. [Check out the required knowledge here →](/plugin-docs/prerequisites/)

The Plugin API and Widget API include both synchronous and asynchronous functions. Usually, asynchronous functions in the Plugin API and Widget API are identified by an `Async` suffix, such as [**`loadFontAsync()`**](/plugin-docs/api/properties/figma-loadfontasync/)
.

In this article, we’ll explain the differences between the two. We'll also explore how asynchronous functions can make your API communication more effective and why Figma favors asynchronous code for some plugin operations.

[](#synchronous-requests "Direct link to heading")
Synchronous requests
-----------------------------------------------------------------------

With synchronous requests, the caller must wait for a response before other requests are made. Synchronous requests are used when data is expected to return immediately. In the case of a Figma plugin, the client is usually the active tab of a web browser or the Figma desktop app.

You have likely encountered these kinds of tasks in other situations, like waiting for a photo to upload before you can continue using an application. During this time you could see a progress bar, spinning circle, or loading screen.

You can think of synchronous requests like getting in line at the grocery store or drive through. Each request is handled one at a time. Unlike at the grocery store, synchronous tasks can’t jump the queue. Those who were in line before you must complete their transactions before you can move forward and begin your own check out process.

Typically, code written in JavaScript runs one line at a time, in the order it was written. Consider the following code:

    console.log("I am");console.log("synchronous");console.log("JavaScript");

As JavaScript is synchronous by default, the console output looks like:

1.  “I am” is the first output in the JavaScript console.
2.  “synchronous” is the next output.
3.  “JavaScript” is the final output.

While synchronous programming works in this example, synchronous tasks aren’t always the best approach. Since each task must wait for the previous request to receive a response before proceeding, it can slow down larger, more complex applications where response times are unpredictable.

This is especially true when network requests and latency are added as considerations. Since you can’t guarantee how fast or stable a user’s internet connection is (that is, how long it will take to transfer data to and from the user) or how long it might take a server to respond to a request, the potential slowdown to synchronous code can be significant.

[](#asynchronous-requests "Direct link to heading")
Asynchronous requests
-------------------------------------------------------------------------

Unlike synchronous requests, asynchronous requests don’t need to wait on a response before proceeding. Instead, a **callback** is provided to notify the client when a response is ready. Asynchronous requests are useful when an API’s response time varies based on the availability of a resource.

You can think of this as ordering something from a coffee shop. You get in line, your order is taken, then you give your name so the barista can call you when your order is ready. In an API, your name is the request **token** or unique identifier.

In a coffee shop, orders won’t always come out in the order they were placed. An americano will take less time than a frothy coffee with latte art! The same can be said of asynchronous requests.

![An animation showing two rectangles. One labeled “Plugin” and the other labeled “API”. In an animation labeled “Async request” requests go from the Plugin to the API and responses go from the API to the Plugin in no particular order. In an animation labeled “Sync request” requests go from the Plugin to the API and responses return in the same order that requests were received.](https://static.figma.com/uploads/878a79af84ac620b3d9ec15bcddf8605919b3c45)

This way, other requests can continue to process in the background and the application can keep its functionality while waiting for responses. An asynchronous approach can be an efficient solution when the API’s response time is unpredictable due to variables in data size and complexity.

[Learn more about asynchronous JavaScript in the MDN Web Docs →](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous)

### [](#promises "Direct link to heading")
Promises

As the client doesn’t need to wait for a response from the API, we need another way to communicate the status of that task. This is where **Promises** come into play.

Asynchronous programming in modern JavaScript is built on the concept of **Promises**. A **Promise** is an object returned by an asynchronous request and can be in one of three states:

*   **Pending**: The promise has been created but the request has not been **fulfilled** or **rejected**.
*   **Fulfilled**: The asynchronous request was successful. When a promise is **fulfilled**, the `.then()` handler is called.
*   **Rejected**: The asynchronous request failed. When a promise is **rejected**, the `.catch()` handler is called.

![An animation showing two rectangles. One labelled “Plugin” and the other labelled “API”. An animation labelled “Status: pending” shows a request in between the Plugin and API. An animation labelled “Status: rejected” shows the request being returned to the Plugin. An animation labelled “Status: fulfilled” shows the API sending a response to the Plugin.](https://static.figma.com/uploads/f1e3a0ef8e13236221b4df8be0c459f9e719b456)

Consider the following code:

    const fetchPromise = fetch("https://httpbin.org/anything");fetchPromise.then((response) => {  const textPromise = response.text();  textPromise.then((data) => {    console.log(data);    figma.closePlugin();  });});

In this example, we are using the `fetch()`API to request some data from the Figma API. When we `fetch()` from the Figma API, a Promise is returned. An asynchronous function is helpful here because we don’t know how long it will take for the API to respond with the requested data.

Once the Promise state is **fulfilled**, the `.then()` handler is called. We are saying that if the response was successful, turn the response into JSON then output the data. The returned data should look something like this:

    {  "args": {},  "data": "",  "files": {},  "form": {},  "headers": {    ...  },  "json": null,  "method": "GET",  "origin": "...",  "url": "https://httpbin.org/anything"}

If the Promise is **rejected**, an error is returned. We can view this error by adding the `.catch()` handler to our code:

    const fetchPromise = fetch("https://httpbin.org/anything");fetchPromise  .then((response) => {    const textPromise = response.text();    textPromise.then((data) => {      console.log(data);  })    .catch((error) => {        console.error(error);    });    figma.closePlugin();});

[Learn more about how to use Promises in the MDN Web Docs →](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises)

### [](#async-and-await "Direct link to heading")
Async and Await

The `async` and `await` keywords allow us to use asynchronous functions that look like synchronous code. Using `async` and `await` can improve the performance of your application since it continues to run while waiting on a response. These keywords allow you to write asynchronous code in a neat, organized and readable way.

Adding `async` at the start of function definition turns it into an asynchronous function. Inside an asynchronous function, the `await` keyword can be used before a function call that returns a Promise. If we rewrite our earlier example using `async` and `await`, it would look like this:

    async function fetchData(){  try {    const response = await fetch("https://httpbin.org/anything");    const text = await response.text();    console.log(`Response text is: ${text}`);  } catch (error) {    console.error(error);  }  figma.closePlugin();}fetchData();

With `async` and `await`, we can use `try...catch` blocks for error handling as if we were working with synchronous code.

[Learn more about `async` and `await` in the MDN Web Docs →](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Promises)

[](#asynchronous-tasks-in-the-figma-plugin-api "Direct link to heading")
Asynchronous tasks in the Figma Plugin API
-------------------------------------------------------------------------------------------------------------------

To make asynchronous development as easy as possible with the Plugin and Widget API, Figma provides async functions in the Plugin API. Here are some examples of asynchronous tasks in Figma:

### [](#loadasync "Direct link to heading")
[loadAsync](/plugin-docs/api/PageNode/#loadasync)

You’ll need to use this function to asynchronously load individual PageNodes that your plugin wants to access.

The Figma editor uses [dynamic page loading](https://help.figma.com/hc/en-us/articles/1500005554982-Guide-to-files-and-projects#h_01HHDQ77YC3D3NK7K9DEE3SQKQ)
, which means that pages other than a user’s current page aren’t guaranteed to be loaded. This results in nodes on unloaded pages not being available to a plugin. The `loadAsync` function ensures that a PageNode and its dependencies are completely loaded and able to be used by your plugin.

    for (const page of figma.root.children) { // PageNodes are the only children of root  await page.loadAsync()  console.log(`Page ${page.name} has ${page.children.length} children`)}

### [](#loadfontasync "Direct link to heading")
[loadFontAsync](/plugin-docs/api/properties/figma-loadfontasync/)

This is the most common async function in the Plugin API. You'll need to use this function if you want your plugin to modify or re-render text nodes.

Font files aren’t always available in the browser’s memory. Especially if the file lives on a user’s local machine. If someone runs your plugin in a file that doesn’t have those fonts loaded, they won’t be able to edit any text nodes. The `loadFontAsync` function makes sure all fonts in the file are loaded and ready to use.

    figma.ui.onmessage = async (pluginMessage) => {  await figma.loadFontAsync({ family: "Rubik", style: "Regular" });...

### [](#exportasync "Direct link to heading")
[exportAsync](/plugin-docs/api/properties/nodes-exportasync/)

This function exports a selected node as an encoded image. In the example below, a polygon is created then exported as a PNG at 2x resolution. We use `await` to ensure that the polygon object is properly created before we attempt to export it.

When settings for `format` and `constraint` aren’t specified, `exportAsync` defaults to exporting the node as a PNG at 1x resolution.

    async () => {  const polygon = figma.createPolygon()  polygon.pointCount = 6  polygon.fills = [{ type: 'SOLID', color: { r: 1, g: 0, b: 0 } }]  // Export a 2x resolution PNG of the node  const bytes = await polygon.exportAsync({    format: 'PNG',    constraint: { type: 'SCALE', value: 2 },  })}

Here are other useful asynchronous functions in the Plugin API:

*   [`saveVersionHistoryAsync`](/plugin-docs/api/properties/figma-saveversionhistoryasync/)
    : Saves a new version of the file and adds it to the version history of the file. Returns the new version id.
*   [`createLinkPreviewAsync`](/plugin-docs/api/properties/figma-createlinkpreviewasync/)
    : **(FigJam only)**
*   [`figma.clientStorage`](/plugin-docs/api/figma-clientStorage/#getasync)
    
*   [`getPublishStatusAsync`](/plugin-docs/api/ComponentSetNode/#getpublishstatusasync)
    
*   [`waitForTask`](https://www.figma.com/widget-docs/api/properties/widget-waitfortask/)
    : **(Widget API)**
*   [`Image`](/plugin-docs/api/Image/#getbytesasync)
     - [Learn more about working with images in the Plugin API →](/plugin-docs/working-with-images/)
    

[](#upgrade-synchronous-code-to-async "Direct link to heading")
Upgrade synchronous code to async
-------------------------------------------------------------------------------------------------

Figma offers a guide to help with you upgrade plugins to use asynchronous functions and to be compatible with dynamic page loading. [Migrating Plugins to Dynamically Load Pages →](/plugin-docs/migrating-to-dynamic-loading/)

On this page

*   [Synchronous requests](#synchronous-requests)
    
*   [Asynchronous requests](#asynchronous-requests)
    *   [Promises](#promises)
        
    *   [Async and Await](#async-and-await)
        
*   [Asynchronous tasks in the Figma Plugin API](#asynchronous-tasks-in-the-figma-plugin-api)
    *   [loadAsync](#loadasync)
        
    *   [loadFontAsync](#loadfontasync)
        
    *   [exportAsync](#exportasync)
        
*   [Upgrade synchronous code to async](#upgrade-synchronous-code-to-async)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# ERROR: The request could not be satisfied

403 ERROR
=========

The request could not be satisfied.
-----------------------------------

* * *

Request blocked. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.  
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.  

* * *

Generated by cloudfront (CloudFront)
Request ID: UrXwBfSnZQI3jecX1I3U8uAQBUV-pXvAOp3Tq7OR6w1bjIQ6aUkezQ==

---

# Creating a User Interface | Plugin API

[Skip to main content](#)

On this page

The [`figma.showUI()`](/plugin-docs/api/properties/figma-showui/)
 function shows a plugin's user interface. The easiest way to use this function is to do the following:

1.  Create a HTML file containing the markup for your UI.
2.  Change `manifest.json` to contain `"ui": "ui.html"` where `"ui.html"` is the filename of your HTML file.
3.  Put the following call in your plugin code:

code.ts

    figma.showUI(__html__)

This will display the contents of your HTML file in an `<iframe>` inside of Figma.

We strongly recommend using the `themeColors` option in `figma.showUI()` and using the [CSS variables](/plugin-docs/css-variables/)
 that it provides to your UI to support light and dark themes.

[](#sending-messages-between-the-ui-and-plugin-code "Direct link to heading")
Sending messages between the UI and plugin code
-----------------------------------------------------------------------------------------------------------------------------

After you've called `figma.showUI()`, you will likely want to send messages between the UI and the plugin code. For example, you might send information about the current document from the plugin code to be displayed in your plugin's user interface. Or you might send user input to the plugin code before performing some action.

### [](#sending-a-message-from-the-ui-to-the-plugin-code "Direct link to heading")
Sending a message from the UI to the plugin code

To send a message from the UI to the plugin code, write the following in your HTML:

ui.html

    <script>...parent.postMessage({ pluginMessage: 'anything here' }, '*')...</script>

To receive the message in the plugin code, write:

code.ts

    figma.ui.onmessage = (message) => {  console.log("got this from the UI", message)}

### [](#sending-a-message-from-the-plugin-code-to-the-ui "Direct link to heading")
Sending a message from the plugin code to the UI

To send a message from the plugin code to the UI, write:

code.ts

    figma.ui.postMessage(42)

To receive that message in the UI, write the following in your HTML:

ui.html

    <script>...onmessage = (event) => {  console.log("got this from the plugin code", event.data.pluginMessage)}...</script>

##### caution

Note: the syntax for sending and receiving messages in the UI and the syntax for doing the same in the plugin code are subtly different. In the plugin code, you directly send and receive the values that you want to send. However, inside in the UI, you must send values on a `pluginMessage` property. Likewise, received data will appear on a `pluginMessage` property. When calling `postMessage` in the UI, you must also specify a second argument with the value `'*'`.

You can send almost any structured data in either direction, including objects, arrays, numbers, strings, booleans, `null`, `undefined`, `Date` objects and `Uint8Array` objects. However, keep in mind that this is similar to sending a serialized JSON representation of the object. Methods of the object (or in general, the prototype chain of sent objects) will _not_ be recovered.

You can start sending messages from the plugin code to the UI as soon as `figma.showUI()` has been called. The messages will automatically be queued until the `<iframe>` containing the UI finishes loading.

##### caution

Note: currently, you cannot send `Blob` objects, `ArrayBuffer`s or `TypedArray` objects other than `Uint8Array`.

### [](#non-null-origin-iframes "Direct link to heading")
Non-null origin iframes

If you'd like, you can also navigate the iframe to a custom URL by doing:

code.ts

    figma.showUI(`<script>window.location.href = "https://..."</script>`)

If you do this, sending a message from the UI to the main plugin code becomes slightly different. You'll also need to specify a `pluginId` value as part of the message to indicate if it is safe to deliver the message to any plugin OR just the one whose id is specified.

##### caution

If the data you're sending back to your plugin is potentially sensitive, specifying a specific `pluginId` prevents other plugins from navigating their iframes to the same url to receive the pluginMessage. You should also pass in `'https://www.figma.com'` as the second argument to `parent.postMessage` to prevent other websites from embedding your iframe and intercepting the postMessage information anyway.

ui.html

    <script>...// Only the plugin with id 123456 and www.figma.com is allow to receive this message.parent.postMessage(  { pluginMessage: 'anything here', pluginId: '123456' },  'https://www.figma.com')// Any plugin id is allowed to receive the messageparent.postMessage({ pluginMessage: 'anything here', pluginId: '*' }, '*')...</script>

[](#triggering-drop-events-from-the-ui "Direct link to heading")
Triggering drop events from the UI
---------------------------------------------------------------------------------------------------

How your plugin code receives [drop events](/plugin-docs/api/properties/figma-on/#drop)
 coming from the UI will depend on whether you've [navigated the iframe to a custom URL](#non-null-origin-iframes)
.

### [](#drop-events-from-a-null-origin-iframe "Direct link to heading")
Drop events from a null origin iframe

If you have not navigated the iframe to a custom URL, then your plugin UI lives inside a null origin iframe, which prevents the Figma canvas from receiving drop events natively. Instead, we can use message passing to allow the UI to tell Figma the drop position and payload.

To trigger a drop event that can be received by the plugin code, include the following Javascript code in your UI:

ui.html

    parent.postMessage({ pluginDrop: PluginDrop }, '*')

where the `pluginDrop` property satisfies the following interface:

PluginDrop

    interface PluginDrop {  // clientX and clientY taken from the browser's DragEvent  clientX: number  clientY: number  items?: DropItem[]  // array of File objects (https://developer.mozilla.org/en-US/docs/Web/API/File)  files?: File[]  dropMetadata?: any // use this to communicate additional data for the drop event}interface DropItem {  type: string // e.g. "text/html", "text/uri-list", etc...  data: string}

Figma will then fire a drop event to your plugin code with coordinates translated into canvas space (`absoluteX` and `absoluteY`) along with coordinates relative to the parent node (`x` and `y`).

#### [](#usage-example "Direct link to heading")
Usage example

An icon library plugin could listen to `dragend` events in its UI and post a message to the plugin code with the `clientX` and `clientY` of the event along with the SVG data.

In the `drop` event callback, the event details are used to create a new node at the drop position under the correct parent node. For more information on `drop` event callbacks, please see the [`figma.on`](/plugin-docs/api/properties/figma-on/#drop)
 API reference.

See the [figma/plugin-samples](https://github.com/figma/plugin-samples#icon-drag-and-drop)
 repository for a fully working example.

ui.html

    // In UIicon.addEventListener('dragend', e => {  // Don't proceed if the item was dropped inside the plugin window.  if (e.view.length === 0) return  window.parent.postMessage(    {      pluginDrop: {        clientX: e.clientX,        clientY: e.clientY,        items: [{ type: 'image/svg+xml', data: e.target.innerHTML }],      }    },    '*'  )})

code.ts

    // In plugin codefigma.on('drop', (event) => {  const { items, node, dropMetadata } = event  if (items.length > 0 && items[0].type === 'image/svg+xml') {    const newNode = figma.createNodeFromSvg(items[0].data)    node.appendChild(newNode)    newNode.x = event.x    newNode.y = event.y    figma.currentPage.selection = [newNode]    return false  }});

### [](#drop-events-from-a-non-null-origin-iframe "Direct link to heading")
Drop events from a non-null origin iframe

If you have navigated the iframe to a custom URL, then Figma will be able to receive drop events from the plugin UI natively -- you don't need to call `postMessage` from the UI for the drop event to fire.

To send over data for the element being dragged, you can embed it in the `dataTransfer` object of the drag event.

See the [figma/plugin-samples](https://github.com/figma/plugin-samples#icon-drag-and-drop-hosted)
 repository for a fully working example.

In your UI

    icon.addEventListener('dragstart', (e) => {  e.dataTransfer.setData("image/svg+xml", e.target.innerHTML);})

You can then access the data from the drop event in your plugin code:

code.ts

    // In plugin codefigma.on('drop', (event: DropEvent) => {  console.log('[plugin] drop received!!', event);  const { items } = event;  if (items.length > 0 && items[0].type === 'image/svg+xml') {    const data = items[0].data    const newNode = figma.createNodeFromSvg(data);    newNode.x = event.absoluteX;    newNode.y = event.absoluteY;    figma.currentPage.selection = [newNode];  }  return false;});

On this page

*   [Sending messages between the UI and plugin code](#sending-messages-between-the-ui-and-plugin-code)
    *   [Sending a message from the UI to the plugin code](#sending-a-message-from-the-ui-to-the-plugin-code)
        
    *   [Sending a message from the plugin code to the UI](#sending-a-message-from-the-plugin-code-to-the-ui)
        
    *   [Non-null origin iframes](#non-null-origin-iframes)
        
*   [Triggering drop events from the UI](#triggering-drop-events-from-the-ui)
    *   [Drop events from a null origin iframe](#drop-events-from-a-null-origin-iframe)
        
    *   [Drop events from a non-null origin iframe](#drop-events-from-a-non-null-origin-iframe)
        

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Figma: The Collaborative Interface Design Tool

[Skip to main content](#main)

*   [Figma Design\
    \
    Design and prototype in one place\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC/0lEQVQokVXSbUhTYRQH8GNSqAilpXVf0rnNLbd5l29ZWeYMnXebbvfR8kMgFASJhbvqnDrtzXwJoohczm2SmVFQVJaEJWaElUSgkVhkRCFWVpYkEVm7T1zR0g8/Djwf/pzD8wfWMBWzCPtdYWJn1nB6HGBifwE0A+RnYCika6GYjASbTALtNRY4nKz2d2gVy8TpKWahNHItlEkiADaYu88vlGy+27o5p79OZ3qJWMMUzemxv7IAQznTDTY6CoqCV4GVIAOtBJlgJchcK0Em8RQVlAsgvgOoUcuPhTTIM81w5ycSzTf7UrOHCln2O2kyYlCZY6AeAHiKCrTJIlMqYmTOSrX8UUWMzFUWFZFaHE4EFcCy2UD8n+vf1CDvz0RzV0+6cdS4Kx0HQByGYio6yCaNTDm6lXGdKUgb81rZP8496ePH0rSecrkktYSmg0CDvMK8WNQ6O9Wo2SeGarmOMZ1poOZ04hfpaFjD8jJCtqlSJTvr3K0bu3Ol0Pd0qEbo7Tzgc+3LGK+KjXbzFJUOKnQWz5kNY7g2cUOfBrlxLGqb3G6877yofZMyvPqUopyQ761iogfbKnJ8gyNHhHczTcKzV7XChYOcrzpO+ZynKAeokUuYp0GeuQ1dPvF0hmv/oDM9rGuJf696EX483EbIsyrV8qsthZnfHvSUCMNv64X+vjLBa2WnHFrFdZ6kdoIKNeHFnFiNmrEGuX8nWK4/1plG8ou24WC8MtCPp+Sh5XIJV58Rf8NrZb9ebtiJW0uNU41s4i27MiqPJ6lVoEGeP4u5Z2JR63S85erQluwn1XrDpIzegf0wYMhFVeIvh9gVUVx1nPLaoQ2q19Vxyk67UppXQtOhCAAgydx1b4HeJPPt7uSc3nNiZfSGT+sserwUBjDUqS6Bg14P+8PCxL6F8CTF8iRVwpOkyUqQKx2MAkoj1gJkGj5m/jeRqTd8TjOw05rsLCHEnIWXQAeARY+hUSwuScPRrQyc3JECdqU0wCaTrLArpYEnLBuhNpWZLfZfsj9e+lps4aIAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/8b823444edce5f6c81fbd959301a33582525c23f-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/design/)
    
*   [FigJam\
    \
    Collaborate with a digital whiteboard\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADPklEQVQokTXSXWhTdxgG8L83sotdTL3ahWuFzjGvdueVCN44wWqd6Ww3xImBUVawIBOllCp+oBfDDSm1qSUfzcfJaXKanCQ9aZJz8j8nMTmJiZto7dKYNF2/WVuVxuakpu87jrDLF15+8PA8BDLynsUQ91nONrxPS8SON9LxsRxvL1/oN841XTxa+bHvYiXrt1UaanwOM7IIKu2sP4nvxdKz3beuhJrPdTDdbe1Ops3g4k8bHD4CKr1R8bP9kYe/3az43OatZKwgMIO1Y12ntE+/PaQd/fmkFnQOaPWUqGFGroBKH++otBuzivE5G7l29TI78d250eVWw+ib1nbbug6uLAa9K8rQw9W/3aMb75XItuwZwbPd3+P+499g2y8GlNhh3E5LiBm5rv+DSouYkQsLE+Lsg/7xd+2dDjx11oGn2+1IIEtxkwpY5Bw443XgphzGJZEHy8BduNrbBZaBOzAf9YGWjEEtEYVGSkJQqY7jWkxC1wMee7qZxoWfHOtnOmwFAgkZQJHhXViAWZaFVd4P72kEygEW0nYTFP0MbtIwrAg+rPjc8FYMwYeU9BHfiE3CNDeJslnQ3L8HpctdbA+B23mA2znQbqqw9GsEyr08Lll4LHlcmLeacM7HQpWGcT4whlOMFeYDHtiMh2Eh6IESx8CbmID1JK1uKfJIkaNfkbWWZzjTIoHawoF4wIHpw+6dQp93+4XN8kE1D0LR68S1SADK4wz+ZR/BEufCt+IEzvrc+g2LQS820lIVn8pDmI9/QULEjjfIFeggbXCeGHDo87sb5Z5Afj0UmloWuK1/+DEdgZzVhHTwD5zxOHBLjuDyxDjmbcPw2uvEejJWxYxiqiXEZnKP9OIRchj2kT3wNfkSez4xvnreyt1CJTnYUKVVPe6KMA6FMTvq6DQ7iv9O8jjnZ/HJ8ABMuaxYU6JVzCqmnXS8iTwi9/ES6YQT5Bj8sOsM3iHXc+mDHiPGE32QpQt6o42UBFoihhvR4MeoOv7Cacas+RG8dFlwVfBVqzRsqinRJjJNFEwRHkTCAt3lxT9JNLd8MGMEqvRBhi6gKusTAX0mOv5/3PmAR4eg4mfxpctafcXYTCXO1fwfvPx7+MfCvOMAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/64c5beb99a9fc5a0b00dd4882ab1f6a915ee0752-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/figjam/)
    
*   [Dev Mode\
    \
    Translate designs into code\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADNElEQVQokXXOXUxTdxjH8b/EBV9udrO4ZFm8mAEzlJlsTRbjFcsyMzDBDJIpxkklp6MlEiYwSmt9Q6tYakvX9kB7KJHhVDKYAkuLPbQceg6nPVRPC0vEKDUiBZRiUbgwkedZrJpd7eKTX/JcfPOQby+W6g1URdWA/grlO9+nokvUlCFfQVn2HqAGDd0q37k/Vc4fVCpD/leU9fsyavDUVdXQmR7qEnVMXXy6tGLXX0cV2xO6bLLWSRoTPxNiqFA2Xqu3eUesgRjvFOTeOlqmS9TyH5pmmWsNyrxDkHtrnTJdopGvV7XIozZODtn5eJ/eEzCp62pKtQc/JYjEgkoytXqEkFu6zsYRCzsluqIYYWQIXvbjgOF3ZJsH8e3tDgbMXhwwdCLbfAtFdwTCbglHbcPJIeN1/U2j8eM47s4KPa76gEsr15OxdkkX6YhNSZ44Sp44hJm7ILZLEHbfhUhHFET3APC0Azi7CUJOC/DtNuDbbMi7LKlQT1MXP6U+JLw4Uiiklfv4tLKISJ74m+D9SEcMIx0xyPDEQPJMQJgRIEQ3wXDrHvBb88BvzQe/dSf4rTuQde56FfQVzPCzZVFhWSkK6XKRT5eLJOKJ6SRP/P2Ha2+j8rvgKHDOahi6/BH4zAR95izIaFmHQ46NEGC/AD75IwjLShDS5RmEM7ONY21S5sM3UYEO44jFj7xDxDDDIeeoRta2BQNtG4C1Z6PPvA68JoK36U3AcV+CsHDgv+ByORB35Und32dvxHnn2KroGn/pPduzcrXSuNKv71rhHb5V3lXzKnztc5j05+J471YYdm4G9rcNKNz4BKIT30AkdRjE9FEYSyszSEVVyXFac8Lqv9DPBC0s061qYkwFxYy7rN493NLdJffVS9Pj+1cXEqX4eKIIJm9/jXGvAh9Ev8PE7E94L1WJkyk1/pNSZ5bsdh0sOKY5lN/3iz2n/8SV3NbCwzm6vLzcJkXRtqDdqHgy2WBanKl5+nz+OKZma2BhWoMLD9W4OFONz+ZrcX6+DucyajPIZ7H6jdkJTdad6GuCj5DcbGAIIpJpqYE8n6v9cCmp/XUpqZ1bSmpxKalde7f/619Q0kYqSbDbkAAAAABJRU5ErkJggg==)![](https://cdn.sanity.io/images/599r6htc/regionalized/c86a9976203e3264f89a20c5fb534a0d845d5f1b-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/dev-mode/)
    
*   [Figma Slides\
    \
    Co-create presentations\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADT0lEQVQokVXMf0zUdRzH8U+r9e0XjcTSCmrgTpFDQOWOSU1xrY2Q4+t9v3cex0Ff7jSDknAWc25OIJokdTUU+XE0Dq4doQlTOuQ6Lu4LnNz3LJN+fWuNmdWarVw/sJCuu/erOdcfvrbn9vrrwWL1OizV6/Br7QZ8bNNSyLyW5h25uN7IL9GJt+doNtiUiE7r1dFTyYLjDKcriXC5thbucbuBW2kTudXiEU7Hn+U0psNcilXg2DfVOTRXtY4CYiYO6B+hau1ycj2dTj/uNyQSw53XEJn8Kq6EPN/5x17uen3GbpampHTLPumuinzpXluBpDG1SIVlM9IqU6N0d2W+xPzCGvIUZ1Db5jQqSk2iVckc1a1fQZ/vLUF8pBuIhBIJRV74Qw5ejg6e+9r52kdq8Z5DappkVB+0mlWN2Kbq+DFVY2pVl5ebVBYyZ+H4U+loKkxFRWYKDBnJ5NzyGF1qKKXESDdRZJIoOoV4RMaCPA319AQ83W68dPAYSna6sHFHD7LEY9AKPcg1esAu1W6aH7Xqf/ZaNv11qmrzv2P2rfhy7zP42/k8yNcPioRugESKTJjxU3zcS78M9dCFjj7yHhii3XYX5e1opWxjHxXwAWKLTcaa71vszZed+/qvuhqD1wZav4i95/yJzvQukPxBDDeg6BSgyEBgiK53NtDFVwTyPbeNwnsqyb2rjQymk6QR36BUywvE4GlKgt+9EvJwFqZ9WzEzXoXwhwcxG3RBCY2TIs/FZievLIYn/omN9tHVVytoYFsmNegexohxPU5LLbAJMtJNzUiyPQGGo88yeHcxbGFs/tvfbl+8OHdP/BPlocT58Bqcn35y6dyk7bORYLff7f8heLyTJvZXUcf2UjpUJGBAcKDD9hYM4jA04pt41FIDRs38zYoYA8Dwe4Lhyp83f2L0Nl9v4P7amk/LK3eGL1h2d1C5ow4Oczu9yJ9FveCH2exGnqkN64z9KOADYFCmGBT51qIyc7f7mL3ufcY2dN2hLRsszdn+rpItdJFWbEee8A7lC4PYaPQiR+jFWvEosoVe5Bm9YP8P0VvhwrpqxtLuY7n2+juX2YrLVpRXRrVCF+l5PzJMjfSAtQwpViNWi0eg58ehMR3GMiuP/wBsd/hhCuinswAAAABJRU5ErkJggg==)![](https://cdn.sanity.io/images/599r6htc/regionalized/d5088df6b4e9cf91d8a615901b5d60e1534ce5bc-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://www.figma.com/slides/)
    
*   [AI\
    \
    New\
    \
    Explore all Figma AI features](https://www.figma.com/ai/)
    
*   [Downloads\
    \
    Get the desktop, mobile,
and font installer apps](https://www.figma.com/downloads/)
    
*   [Release notes\
    \
    See the latest features and releases](https://www.figma.com/release-notes/)
    

Use cases

*   [Design systems](https://www.figma.com/design-systems/)
    
*   [Prototyping](https://www.figma.com/prototyping/)
    
*   [UX design](https://www.figma.com/ux-design-tool/)
    
*   [Web design](https://www.figma.com/web-design/)
    
*   [Wireframing](https://www.figma.com/wireframe-tool/)
    
*   [Online whiteboard](https://www.figma.com/figjam/online-whiteboard/)
    
*   [Team meetings](https://www.figma.com/figjam/team-meetings/)
    

*   [Strategic planning](https://www.figma.com/figjam/strategic-planning/)
    
*   [Brainstorming](https://www.figma.com/figjam/brainstorming-tool/)
    
*   [Diagramming](https://www.figma.com/figjam/diagramming-tool/)
    
*   [Product development](https://www.figma.com/product-development/)
    
*   [Web development](https://www.figma.com/web-development/)
    
*   [Design handoff](https://www.figma.com/design-handoff/)
    
*   [Agile](https://www.figma.com/figjam/agile-workflows/)
    

Roles

*   [Design](https://www.figma.com/designers/)
    
*   [Engineering](https://www.figma.com/engineers/)
    
*   [Product managers](https://www.figma.com/product-managers/)
    

Organizations

*   [Enterprise](https://www.figma.com/enterprise/)
    
*   [Education](https://www.figma.com/education/)
    
*   [Figma for Government](https://www.figma.com/government/)
    

*   [Config 2025\
    \
    Register to join us in SF or online: May 6-8, 2025\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAABTElEQVR4nO2QP8uBYRTGbyaTlA2JZ7B4VgP5ADblfzJRT5GYDIbHn5XVgoiSokgKJWwGn+r3dp96P8FrfIdf55yr61zd91FKKb6M+g9Uf8PhcPAN1G+gy+UiEAgQjUYJh8N4vV78fj8+nw+Px0MwGMQwDJl1jUQi4tfo2TAMQqEQbrcbp9OJMk2TZrPJeDym1WqRy+Vot9vSF4tFOp0Otm1Tr9cZDoeMRiMajYbsaN22bfHG43F5gCqXyxyPR16vF8vlkvV6zePx4Ha7sdvtuN/vPJ9PLpcLn8+H9/vNfr8XTqeTeA+HA91ul0QigUqn06xWK1mYzWYSqo3z+ZzJZMJms2G73Yp2Pp9FXywWTKdTer2e9NfrVfRsNovSd6tUKvT7fflWqVSiVquRSqWEarWKZVlyBl21VigUyOfzxGIxMpkMg8FATpNMJvkBwtdZfGF8ewcAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/eb42e1b3e5042d96d6d542fffaae917dfba25521-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://config.figma.com/)
    

*   [Creator fund\
    \
    Build and sell what you love](https://www.figma.com/community-creators/)
    
*   [User groups\
    \
    Join a local Friends of Figma group](https://friends.figma.com/)
    

*   [Events\
    \
    Learn best practices at virtual events](https://www.figma.com/events/)
    
*   [Customer stories\
    \
    Read about leading product teams](https://www.figma.com/customers/)
    

*   [Shortcut: The Figma blog\
    \
    Stories about how products take shape—and shape our world\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACmUlEQVQokUWS3U8TaRTG528WAaFVKFuFbaAFg2ChtbS2QpVCsaVfTjv9ZjqdmfdAQFFhDWK8IMYLdzd7+du0k81eneTkyXPO86FNzAj3Hij+m/dnFAuPha1Nk8yLMm9e6jzftHm0IEz6PNzEjDfvzwrTfmHmkTDlH+0FzQP8D5r7TbGbUbSrTQp7aY72DinlBuynHSIRl2m/Gh+enFXMB4XVNWFzQwgte8SaR+SBpnxCeH1IUW9zqmpctHOc6QU+D7q875nsJocEgi5TPoU/IMS2hVpBaJSEVy+Fx0uCNpY5633pmxOiOyZvu1WUk+fOiPOzHudO6dhNi9SLIbEtm41nLttRRV9XfD3v88epgX48YDksaCNvwhFhbU2xElYkU0Na7TaX5jG3hSjXBzH6hQbxbZvVVYdy3mGgn3BSaXHjdvjr6zF3V3vUik2Ci4KWSihapQFmrUs1b5JND3mdGVDI9snvGOysG4R+P2Ha78mtHDlcDww+t/J8dyv8+vKOT26ZZKLPg4eC1iwNOW+U+djIcWU2sAyLTHLAStgem+6bd5lbsJhfGBAI2iRiNmatzcdOlRunxaVlkX9tE1z0QtXqby3O3hW5ah3w46LOz+saF1ae/JsWSyHFkyVF7pVF46jH4a5JKmFzmLVplU/oVnsUcxZPn6rxd6M8tGTcwa73uLvo8vdNh3++Z/jz2wYf7CqxLTX21yg63Lomt2JxbiqGTYVRbFDI5jCODQ6yiuATYWJEOCpxJqWwDOGTM+Raylw6RzRKPSIR4WFA2HymKB24mHXFWf+UD5aiX6tQ3U9z3tPp6cLyitflcbH9895iKyok4i7R5y5LIRnLGIEmfR7xYkhYXxfSSaG4b9KpdLCbQ3J7QiDoSf4Xgayg7OYDxFgAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/1883a9ebc4ce697b718301ad247c0fff45c572c1-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://www.figma.com/blog/)
    

Get started

*   [Plugins](/community/plugins)
    
*   [UI kits](/community/ui-kits)
    
*   [Icons](/community/icons)
    
*   [Widgets](/community/widgets)
    
*   [Templates](https://www.figma.com/templates/)
    
*   [Developer docs](/developers)
    
*   [Partners](https://www.figma.com/partners/)
    
*   [See all](/community)
    

Learn

*   [Best practices](https://www.figma.com/best-practices/)
    
*   [Reports & insights](https://www.figma.com/reports/)
    
*   [Resource library](https://www.figma.com/resource-library/)
    
*   [Demos](https://www.figma.com/demo/)
    
*   [Webinars](https://www.figma.com/webinars/)
    
*   [Help center](https://help.figma.com/hc/en-us)
    

![](https://cdn.sanity.io/images/599r6htc/regionalized/af397d4468a4ad139e2603bf947e90075bedef91-375x188.svg?q=75&fit=max&auto=format)

Think bigger. Build faster.
===========================

Figma helps design and development teams build great products, together.

[Get started for free](https://www.figma.com/signup?locale=en-us)

DesignBuildJamPresent

Design and refine products with your team, in one shared design file.

[Explore Figma Design](https://www.figma.com/design/)

Design and refine products with your team, in one shared design file.

[Explore Figma Design](https://www.figma.com/design/)

Design and refine products with your team, in one shared design file.

[Explore Figma Design](https://www.figma.com/design/)

Design and refine products with your team, in one shared design file.

[Explore Figma Design](https://www.figma.com/design/)

> Nearly everything that designers and developers need is available in Figma.

![GitHub](https://cdn.sanity.io/images/599r6htc/regionalized/a9bfb23cca986ee16b0547274bcd7461ffd373aa-67x18.svg?q=75&fit=max&auto=format)

![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAADbUlEQVQ4jV1Tx0psQRS8X6IbQUF0YQ6YIyqKoiCKG2HEgCgKZl3oGDFijmN2TOMY5jrqjIlBBD+qHlW8lsdbHLr73j51quqctl5eXvDw8ICbmxvF/f397/nq6korzz6fT/9ub2+1Pj4+grmBQADv7+/4+PjA6+srrLu7O5ydneHw8FDr9fW1gNxu9++ZICZ4nwVs28bT0xOen58FGAqF8Pn5CYuJe3t72NnZwcnJCS4vLwXGvTkT9Pz8XOH1esXWhG3bCAaDAhMgLx0cHCguLi7g8XgEQCAyPD09xdHREXZ3d1WY3ymXQTCfzyemlPv29gaL9CmRYPTLSOM3gmxsbGg9Pj5WARKgbILRS6/Xq/sEZhGLHyiRTLgygfv19XWMjo7C6XQKkA2gNAJTDZmShPtvDs9UZ9G7zc1NbG9vw+VyKZaXl9HX14e2tjYMDw/LX7/fLyYLCwsKFjX2eDweMWVYq6urAiAjMiHw5OQkWltb0dLSgrm5OcknIL0cGhpScP9/c2zbhkWgtbU1bG1tiR2Nn52dRUdHBzo7O8WeCQSk3IGBAX1nYeOb3+9XY2iLZbwzHaYfZNzb26tkAtIfgs3Pz6Onpwf9/f0qboY7GAyqwxxuy2zMHLHrS0tLGBwcxMTEhJhTHq1hAXpLD0mAQKFQCF9fX/j+/sbPzw8sfiCoCfo1MzODkZERraYJY2Nj6OrqUudpCxlTUSAQUB7JENjiLHG+eIFMVlZWBNbd3Y329nY1prm5WUG5lL2/v68msmEul0uWmDevl8LhZSNYnUkOhwPV1dXIyspCXFwc4uPjUV5erkK8y8K0hUWdTqdA2Qeq01umPxwFsmloaEB+fj4SExMRHR2N8PBwhIWFITc3V4CUyzc+NTWFxsZGEaDPv4CkS0COQm1tLcrKypCUlISYmBhFVFQUIiMjkZmZqYLj4+Pys6mpCVVVVbKFNplBt4jKMaHM4uJiZGdnIz09HWlpaYrk5GQkJCRoX1JSgpqaGlRWVqKgoEBKHA4HFhcXBUgfLTaE/tXV1SEjI0NgOTk5uszIy8tTETLkSun8zwKpqamor68XIJXq6dFgyiB9+ka5TCgsLERRUZHCsGGYfUpKCmJjY1FRUaFuUy7fusURoNmlpaW6wCCbfwH/D4LShoiICNk0PT2thvAp/gGAPShfZXAAgQAAAABJRU5ErkJggg==)![](https://cdn.sanity.io/images/599r6htc/regionalized/e544a94ec97a332ceed274228d79ef658b36c49f-640x640.png?w=48&h=48&q=75&fit=max&auto=format)

Diana MounterHead of Design

![AirBnb](https://cdn.sanity.io/images/599r6htc/regionalized/1622439415c22e4475400432eae4619d1592a8bc-71x22.svg?q=75&fit=max&auto=format)![Asana](https://cdn.sanity.io/images/599r6htc/regionalized/60b2475fef8f3b7937bf0f87d2963942bade992d-91x18.svg?q=75&fit=max&auto=format)![Atlassian](https://cdn.sanity.io/images/599r6htc/regionalized/01d4ea19e824b3596f8f6c701d3b8319e49631b0-146x18.svg?q=75&fit=max&auto=format)![Basic/Dept](https://cdn.sanity.io/images/599r6htc/regionalized/f57de7a60072186315b1f73e8bcdde7dbec4751d-137x18.svg?q=75&fit=max&auto=format)![Braintree](https://cdn.sanity.io/images/599r6htc/regionalized/2ff6045d0ab55331e071ce8d8eb1b7599e990075-133x18.svg?q=75&fit=max&auto=format)![Coinbase](https://cdn.sanity.io/images/599r6htc/regionalized/5346e3225c390cfbc1fb528a0b0d8443c50af995-102x18.svg?q=75&fit=max&auto=format)![Dribbble](https://cdn.sanity.io/images/599r6htc/regionalized/c58b8c7de2db91357b690f215db6992f3538e67b-75x18.svg?q=75&fit=max&auto=format)![Dropbox](https://cdn.sanity.io/images/599r6htc/regionalized/c641bb5bbe69c6b42344fd2333924a206ef43736-92x18.svg?q=75&fit=max&auto=format)![GitHub](https://cdn.sanity.io/images/599r6htc/regionalized/a9bfb23cca986ee16b0547274bcd7461ffd373aa-67x18.svg?q=75&fit=max&auto=format)![Herman Miller](https://cdn.sanity.io/images/599r6htc/regionalized/1bd42f01581af00431a984e96081d8af05c40051-90x22.svg?q=75&fit=max&auto=format)![Microsoft](https://cdn.sanity.io/images/599r6htc/regionalized/cc8b81fd47ded1e82d83258e2f674e0951e20fcc-86x18.svg?q=75&fit=max&auto=format)![The New York Times](https://cdn.sanity.io/images/599r6htc/regionalized/5e789db505180ee41e0612d7d53e2ec48c9c5837-153x20.svg?q=75&fit=max&auto=format)![One Medical](https://cdn.sanity.io/images/599r6htc/regionalized/a2544152178b2e3388b0eff5cdb37ceb8bb5f148-146x18.svg?q=75&fit=max&auto=format)![Rakuten](https://cdn.sanity.io/images/599r6htc/regionalized/365a922fac7ab7bd921329b8652a60d35a605e85-68x20.svg?q=75&fit=max&auto=format)![Slack](https://cdn.sanity.io/images/599r6htc/regionalized/fb78b2f382a2d2d93b155601fbc9032379d2515d-79x20.svg?q=75&fit=max&auto=format)![Vodafone](https://cdn.sanity.io/images/599r6htc/regionalized/1f96ed55745ae6e4bb23f98967e75b9bdff083d5-90x22.svg?q=75&fit=max&auto=format)![Walgreens](https://cdn.sanity.io/images/599r6htc/regionalized/13a0eef20388c9c9d42d48c82ea5211360d31ce6-107x22.svg?q=75&fit=max&auto=format)![Zoom](https://cdn.sanity.io/images/599r6htc/regionalized/3081387dc4c82dc9a24d653c3c86fa96b8c450a8-81x18.svg?q=75&fit=max&auto=format)

![AirBnb](https://cdn.sanity.io/images/599r6htc/regionalized/1622439415c22e4475400432eae4619d1592a8bc-71x22.svg?q=75&fit=max&auto=format)![Asana](https://cdn.sanity.io/images/599r6htc/regionalized/60b2475fef8f3b7937bf0f87d2963942bade992d-91x18.svg?q=75&fit=max&auto=format)![Atlassian](https://cdn.sanity.io/images/599r6htc/regionalized/01d4ea19e824b3596f8f6c701d3b8319e49631b0-146x18.svg?q=75&fit=max&auto=format)![Basic/Dept](https://cdn.sanity.io/images/599r6htc/regionalized/f57de7a60072186315b1f73e8bcdde7dbec4751d-137x18.svg?q=75&fit=max&auto=format)![Braintree](https://cdn.sanity.io/images/599r6htc/regionalized/2ff6045d0ab55331e071ce8d8eb1b7599e990075-133x18.svg?q=75&fit=max&auto=format)![Coinbase](https://cdn.sanity.io/images/599r6htc/regionalized/5346e3225c390cfbc1fb528a0b0d8443c50af995-102x18.svg?q=75&fit=max&auto=format)![Dribbble](https://cdn.sanity.io/images/599r6htc/regionalized/c58b8c7de2db91357b690f215db6992f3538e67b-75x18.svg?q=75&fit=max&auto=format)![Dropbox](https://cdn.sanity.io/images/599r6htc/regionalized/c641bb5bbe69c6b42344fd2333924a206ef43736-92x18.svg?q=75&fit=max&auto=format)![GitHub](https://cdn.sanity.io/images/599r6htc/regionalized/a9bfb23cca986ee16b0547274bcd7461ffd373aa-67x18.svg?q=75&fit=max&auto=format)![Herman Miller](https://cdn.sanity.io/images/599r6htc/regionalized/1bd42f01581af00431a984e96081d8af05c40051-90x22.svg?q=75&fit=max&auto=format)![Microsoft](https://cdn.sanity.io/images/599r6htc/regionalized/cc8b81fd47ded1e82d83258e2f674e0951e20fcc-86x18.svg?q=75&fit=max&auto=format)![The New York Times](https://cdn.sanity.io/images/599r6htc/regionalized/5e789db505180ee41e0612d7d53e2ec48c9c5837-153x20.svg?q=75&fit=max&auto=format)![One Medical](https://cdn.sanity.io/images/599r6htc/regionalized/a2544152178b2e3388b0eff5cdb37ceb8bb5f148-146x18.svg?q=75&fit=max&auto=format)![Rakuten](https://cdn.sanity.io/images/599r6htc/regionalized/365a922fac7ab7bd921329b8652a60d35a605e85-68x20.svg?q=75&fit=max&auto=format)![Slack](https://cdn.sanity.io/images/599r6htc/regionalized/fb78b2f382a2d2d93b155601fbc9032379d2515d-79x20.svg?q=75&fit=max&auto=format)![Vodafone](https://cdn.sanity.io/images/599r6htc/regionalized/1f96ed55745ae6e4bb23f98967e75b9bdff083d5-90x22.svg?q=75&fit=max&auto=format)![Walgreens](https://cdn.sanity.io/images/599r6htc/regionalized/13a0eef20388c9c9d42d48c82ea5211360d31ce6-107x22.svg?q=75&fit=max&auto=format)![Zoom](https://cdn.sanity.io/images/599r6htc/regionalized/3081387dc4c82dc9a24d653c3c86fa96b8c450a8-81x18.svg?q=75&fit=max&auto=format)

Redesign how you design.
------------------------

Explore your ideas freely and iterate quickly.

### Generate simple UI with AI

Instantly create mockups to explore a bigger option space.

[Learn more](https://www.figma.com/ai/)

![calendar image](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAAD2klEQVQ4jWWTbUxbVRjH72vPbS/cvsigfPDTYtAYaINpGNHohIUpBAQN2RRM+IB8VxNC/KAxUaPZ1MSEBggxjOk+bYoO6Ag0AxcG4sqpi5GWF0vYihnYF9rbSRv6PObcAtH54Zf/c875n/85J8+9HM/z74uieEMUxaAgCJTjuP/B8zwVRZEKgsA8twVB+Izn+dcEQbggiuIC28s8hp8QcsNms0UdDkfGYrGkeZ7XOY77DyaTSdc0jZFRVTVpNpunJUn6uKioyO9wOPZsNluGEFLwE0KCVqs1Y7fb0WKxoCAIyHEc8jx/rLIsY3FxsYGqqqAoCpUkaVhV1SDbp2ma4WF+TpZlSghJK4qChJC8JEnAkGXZ4Kg2mUxHHMiyvCxK0jALVlU1bzabjTXm4whRKCEKexYebyKEhWPhEJPBYahxKCFk2USUYdXqoFZHSb6kpARLS0vB6XQiZy1/gmplJ3Vi0VCSjdugyQghSBQWXKiPD1KUvKKQZZNiGS6yl1HbY2X5EydK0el0Qnl5OXLOp8/Qk54m/Sn3KaysrISqqip0uVzoclWhy32obOx2ARu73e58zama3184ffrqM56alSqXO8/WKyoqCjcsefxJ2tByXv/wo09xcHAQvF4v9vf3F/AWlM15vV7weo0aRi5d+uvqtWvhkZGR2NDQEAwMDGJvby/U1tYiZ7PZaFdXlz43N4fRaBQ2NjZwdXUV19bWDI7q9fV1OKyZ5yASieTu37t3sLOzAzsPHuD49evQ1NSEnN1upz09b+mBwB3UdR0SiQTG4/FjYrHYv8dQmIvjbiyO8cQepvSHmEpnYHpmBltaWpCzO1hgj34nEDAC0+k0U8xkMri/v4/ZbBZzudwRsJ/N4Z+pHP4czeLMZs5gdnMfRn68ic2tryJXVFxMOzo6dL/fj1tbW7C5uckUt7e3cXd3F9mNk8kkA/aSSYwlkrC0lTr4cimTe9efOnh7eg/e8yfwnYFxeK6uATmiKPTlxkZ99PJlXFxchIWFBaa4tLSEgUAAKaUYDAYZ8GswiDQYhNnAysOhnyLxvu9Df/d99xtcGL+LfV98Dc8+/yJyZrOZtrW16WNjP7AGQDgcxlAohI9qKBQymhIOh2F944/s7ZX76a9mt7LDtyKwcHcVR7/5Fs6efQk5TdNoa2urPjo6ivPz88C6PTU1hT6fDycnJw2dmJhgAKt9Ph/Mzt5Mjc/9Ev3gyq3UJ1f8MDY5jZ9fvAgej6fw2VRXV+vt7e3Y3d0NnZ2dyNpfV1f3KMC0vr4+39zcvHbujTd9Zxpb1xuaXoFz519n88B+wX8ArlKpai1eopkAAAAASUVORK5CYII=)![calendar image](https://cdn.sanity.io/images/599r6htc/regionalized/5ee6b7f438fa1f6a463a8c8f27cfa91f24ddb13f-1560x1248.png?rect=0,1,1560,1247&w=908&h=726&q=75&fit=max&auto=format)

### Design consistently with Auto Layout

Make designs that automatically adjust to layout size—no more manually resizing.

![list of food](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAAEAUlEQVQ4jV3R20/bVgAGcP9lfdzWPUyrOo2qVTVtnSaqsaKidtMurFuhDAqdhloqWhooFAorUMItkMTBt2M7VyeOHTtxbMf2MUu7NVtD5E2hoWfCYd26h5++73w6T+dgPZRw9ePlqeWzs8Pk6ak+6oN7fdSNzSUqKhYoVjEoVjUprlj5l9pOvmRRibJDpQz3NdhnawvTHVO9esf9i3snxs89f/OH959/Eeirr+Lb9egOWY+RdJ0CbJ1muTrN8n4naFAHfKIuykpdr1h103bqpuX4iZ1fHF89ebf7j/cCH6G3b51Ax668gbrGLqNgdB2RJIFIikQAAAQAgwALEAMYRNMU4ngO5aU8Mk0DOY6NHMfxYd0LgcCZ2z3mmfFP/uy4edZ7p/+U1zvR71Es7ck5yZOyea8gyq+6nJU8WZQ9RSp4xULRM0q6ZxuW55i2DxuZ3rg0NPpTeOjHAX1wuM8cHOw3lmYXTBWIppMum3ZK87Pd25y0bsKM/mqHmcOz4Sf2aJL5Mnh1hli8OOrMnx+Cyz2jkL27DhVcgAqVgyotwhKQoMbKvsN+uBWZPKwkihBmdAgF4xUsOEc+WPrqDpw89fWLm291NcdPXm4GByabYItoUjjRJHGiyRD0PhUj95kdap+lgL/RMbKZF8RmpWw2HcNuOoblw7bW+dXNkdnf75/7Dl0/3okG3r2AHly7g8AOg7g4jwDL+h9AMzQCOzRKhTkUjwLEcTwSpTzSTQPZjo1s6PgwPCKO8TNhNXJtujHz6fW9iQvDjdDESkOOi41iTmkogtyQ0uJfQjzTVPGsZ89lG9ZavqFllIYmFxtGodywS5WGo1k+LBqUu7Vlbr38EFfyExtqLhBSS+sJ1Qaq6vCaanHFkhRL76a22d/0zVzl6cOCWg0qKgSa6sQ1/w6Ml1U30YbxpHClGt1ifl2dh08Wp91nocfuE5Z3NS7nilTaFcn0biLK1pgQsZcMs09z0aQrxlKuRAuuxAhunsq4MpN1y0nFdUTDxcQ0u6Cv3K5mhzpfpntPvzAD37RcsNYSeNCKhCO+GI4fRCORg1AodBDeDrdwHG/txGKtGB5rRSORFkkQrVw226qYlRYmcMRKcvz7Z2udx9Hqh8deCsOdyNp5hApCEvE8jziOQ4lEwseyrL8lk0mUTCVR/GgXBAEVi0VkWRbCQIQeSU/cyjF9n9fY/ks19d6Nmh3bqlUEqaZl1ZomKH6Wj/ph6mKpLVesGXmtZheMmqOYNUep1LDtBaJLmp1fLS/MF6yVZXU3tKHuEpwKOVV14uWjR2877P98wn+5Cf1IWcVCj2e/BdMDrBgc+6VCzlVd9ucqTBNVKJeqUKlUYcGswsJh/l97dwrma/4G2xHzFlPQr6cAAAAASUVORK5CYII=)![list of food](https://cdn.sanity.io/images/599r6htc/regionalized/5023ad3065a0a3e921860efee9b350a1a5fceb1d-1560x1248.png?rect=0,1,1560,1247&w=908&h=726&q=75&fit=max&auto=format)

### Scale your edits instantly

Save time and effort by batch editing multiple frames at once, whether in a system or freeform.

![editing various lamps](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAAEuUlEQVQ4jSXMaUyTdwDH8ee1M1mmM3u3ZS6QLTs8BgIriCuXpdjOclUKQmmhRXphS1ta7lqQcMiUQ0GqEcFOFEUk1YqFcd99AAuNuOgyj2xzA90DTJn/3zL34pt8X30oH9Zu26dsv6Fdggg6Uqd0H6467j5cXeHmGrLde8Ux7mh5rKvUVn/yzuJDrdPzs7pv6an6KfNaTQDVxhuS9IR5HeB+tuI783TFx7P8yofyYe0e/ozt99suAXuVo81iJDVljKTGyvANcoadzmXic0TLJzsuPuwcn73X4hiYtw/OzN//dXl+7e9Xcy/WXw1PP37+Q/ug+6x9eLZ54slKM+XL2jX3ebjfWkBCGLgaEYSFmUjMlyFGk4xwKQ9CXRpOd1zArdEJnLvWg0pbG1oud8LhdGJ63vPPsPfhmt018tfl/rGXk4+evaR8WTvpnZxAhifjI6so5U12voCk6uIJVy0nIcocItCpyOmG42S0p4Oca6wjh5JFJCIijAjjBaSp6TQmaRpj01MYmRzHvNcDyjdoB/01J4hJkPORVyQk5SU8GE1x5KDeSL7JrQJfdZQ06tLJ2IlC0pCvIzx2MNm3w4dwA78kNaUmMjcxSJbmxsjC9MDbKN/AHfRXbH8mVBACYUYEydHvR7YuGgKVCOGKTMRKhaiUHES3WYFKtQyi6DBIokMhjWKhodSMexMDuE+PYGGiD4sTfaC+YPnRe6KCmWBeKDgpkSRRFYPvZOGISY8AVxqN2DQOtGkx+F6dijKNDHkyMcqUGSjOFKOtthKLri48uNUOb3crvM4roIIiQ2j+IT4jTI9DikJIhJoERKWGgSvaB35qBOIkB2DWS9BaU4ROWyO67Zdwt+sanNevY/JmJx61WPEgVwjv0SR4yzWg2LwwWiRJZDKOJEOcnUDiZTxwE0PBjwsGLz4U8RIBahprMDo6hFn3DGYmp+CZmcXSvUX84h7H4+ZyLKVxsCg+gAVTJqgsnYo2FpuYAosZ5hI9ySvWwmhWwWBSQpunQm6xAdUtZ3DRcRutV67DdqIWnWUWuE7VYurGNczZbRg3HsFQvgaDdRWgXMODdE/fHeZGrwM9fU7iHHKhd6gPzkEXnEP9cPY50NpWj8IqC5SGPBSI4nA56Vv0ygS4XXkMV6staJIL0SA/hDqDHNTIops+dbONKWg/hSJ7PbFcOQNrZzOsV5tQdeM8Lt6+hLNny6HWK6DKyYEtLwtTZRkYtSrRVVGIBq0EBbHBMB8MhEkQCMp2t5OOOiZjtis4+Dh7P9mu2I9PFBz4KLnYqY+DuFoLg0WPJGkGNAol7KVa9Fbp0ZSvwckiI+p0EpQmsVEiDEFxQhCoOkc7HWBKYt6XhGCbZC/ZImbh3dQgbBEH48OsSMSVZaOg2gp1XhFMuQY05cpwPlcCi1KKWmsJOuor0Fqux4VyHVqP60DV37pEB5mTmW2SvW/BrenBeC+Nha3pIfjoSCRSTuhhd3TB4RrAze4eOO3n0W+3wXnVjtEf+7FAT8MzPQYvPYGfPPT/oL9RyGxOCcCmZH+yKdkf76TsweaUPfhAug/p9QWYfuDB6toaVlZe4I/nv+PF8p9YZRisr61hdXUVzH+/vo6NjQ38C/9IJbCUrD4HAAAAAElFTkSuQmCC)![editing various lamps](https://cdn.sanity.io/images/599r6htc/regionalized/aa8ae1c56226c77b4410e114cc5a03e078d4ed90-1560x1248.png?rect=0,1,1560,1247&w=908&h=726&q=75&fit=max&auto=format)

### Make prototypes with AI

Automatically create realistic prototypes for quick testing of your flows and interactions.

![library of prototypes](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAAEcklEQVQ4jX2SbUxTVxzGT4uOBFTQFm55EZRCq8B4kRmmmBEdIPjGAAURnDgg2ooDQRkGRaso4mAqinFMkYwZlsXELNkLJiaLiRNd3C64hWAiJpCWFmiBcm9vKeWeZ+l1+7RkH34558P5P3me53+IXC5vkMvlvXK5vF8mk7GEkP/D86bPa9HiS95L/aLj9OdlXkv9SQCj8mIYZjHDMO8QX1+fXn8/P5Of3zKHt7c3J5PJeELIf5ARwi9e5MX7+PjYlzHBj1TJH+7QtPzou1wZqFQqFB8olMp8hUJRSMKCg/rXRkU6orUaqFeFY2VwEIIZBiqlAiv9l0Cz3AfaFb7QKJcgJsgf8eGBiI5azUakbitW1HUFBYSr01UqVXdISAgbGhoyQDI2bmD3ZmdzxXvyUJKfI5bk59CC3Byam7aZlq7T0PrYUImahDBanRJBqzerxQPvr3r+XmJsHik0hK/QxOlDwsKG1OoIREWpKTmYm8PWVVXyhpMncKWhml411NKz9SdRd6gMVzM24EFSJO7HqdGVpKEdqWtxY0cMPZWhfb57Y/RHmvIzq8OSUmoi12jfJK6LQXxCNCW6fXvZpobT/I1mA7ov19J7rfVo+7wJjXW1+DIvE493bsGzjwvxuKyE/nK4BL3Vn9CeU0defd9929A/+KqoufVKe8VRnen4CR2qqg5R8umB/eyN5ot8Z6sBPY0V9H5zNbraW/DFhUbcLS/Gy6bTGHv0EMa+p9T06xOYfuujo3/1cxPmsSGO416MjowMDwywwss//8DAwO+UHC8vZTuvX+HvthjwVd1B+u2FSjzo7kBn21V8c0yHoXu3MTtmwizHUW52FoLDQQVBkHA43p5Op5O6XC64XC5KdEWF7LUL5/nWhjo06vfTmw3H0HPnFtqbzqPtSCle9HRhZtwCh+CEUxCkwbm5OQiCIOF0OjE/Pw9RFKkoiiApSYns7u3b+NzMDOxITaG7t6ahOC8X2WlbUJSVhvudHZi0mOHwOHM4PMN0YWFBwu1204UFt0eIAhQAKFEqlrOhIUF8sCoQTICCMoFKBAYosMJ/GRLjYtB+/RqMRiPsdjump6fB8/w/jigo/RcRVBSlOwkOZ9g1cZF8bJIWseu1NHa9FtoENSLWhmLr1mTc+/omTMZRWK1WWCwWTE5OSuIety5P3LfdSdE9kOT0dWxRaRav0+9CmW4nPXB4F/aVZiG/OBVnTu3Bi6ffYXLChPHxCZjNYzCbzZiYmMCMzQaHxQRhdBi8cQSzNis4jgNJz9/Envwsm2+pzUL94XR6tDwTNfosnKjMRMf1Mrwe/AH26XFYrTZJyIPNZgM/a8fcyGsIj3+C8OQh5ixGqQqSUZDC1h9P59v063GuIJrW5r2LsyXJOHcsE523KjA8+DM4+ySmpqal2B4xT5dOQYDbNo75/j7MDzyDOG31LAUkfe8mtromg79UGo+mXaG0cXsQLuZrcFa/GXduVuDN0EM4OBtmZuyS2NTUlCTo+TKi2w3qmnuLuCAt5W+X9RHse4QlgwAAAABJRU5ErkJggg==)![library of prototypes](https://cdn.sanity.io/images/599r6htc/regionalized/c8174e61d33387509762b12d0033a5a3d5945252-1560x1248.png?rect=0,1,1560,1247&w=908&h=726&q=75&fit=max&auto=format)

### Embed prototypes in your presentations

Present playable, high-fidelity prototypes directly from your deck.

![slides preview with iphone ](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAAEBUlEQVR4nHXS+VMbZRzH8f0vvIo640ApMBZKKEEJoSSQQAgh4UhSznIGMFCOElCOSgUKWKdVqZWhqGCrU3sIjJ0Ew9EG6NBhHVrAA4lWQEWl3U0wGBr2+ThZq45af3jN99nnh/c8z85DuVyu991u95Tb7Z5zuVxzW1tb/Nx0Ouacm86HcMw5nf+P2t7envB4PCs7OzuMx+NhHU6Gvb1wk7VODLHmsY9Zy9ggax4fZC3jg6zZux67wppHL7Pm0UsPRd13u2cdLHvv5/V17t7GBrHbvyRn+jpIUWUKyStTk7wSDckqUpFcg5rkGVNJbpmSZBviSHax9KEo9u4GvTA7w9gsw+T2zUl8NjuJ5nYjYjXBkKkiEKuIglAsgFgWAblGBHFiIITSxyGUPPoP4TGP8KjV1RX6008uMOd6OsjI4ACmJ0f4oFz7HDRFudBWNUJRYoK6pAJaQwZiNaEQSp/4T1D4ALVot9P9H/YwzcdKyFs9x2C2XkFTuxGKrAPIOdqCyn4zjL1DyD/+JtLLiyHVhCFS9hRE8if/xYdHzduX6O6+k0xplZ60nTBh2PIRH0zKikJpSxVaz7+Dpr4zyHqpDmKdGs8r9iJG6Yv41AAkpAUhIS0Q8amBkKfsgTwlAJT9uyW6u6eLKX4hg3S+1gSz9TJ/ZVVGOMrqUtB6+jDqTlRAdigVAdHhEEj8IVHthlK/F6qDIbwkfTAvOWMfqNW1Zbqv/3XmSF0xOf12J6zjg3xQqRegoDIODV0ZKH9ZB5FGBN/9/hDE+EKq8kOi7tm/QkkPYposAai1H5bpi5d6mK5Xa8jAuVMYuzbEBxN1ocg3StDcmoYqkwrR8aEIEvpCKPWFxBvUeoMh/PRSHQyGOjMU1I/r39CjExeZ8xdOkquWAdimr/LBJJ0A5eVyvNGeg1dMWqQni3AgNgRR8j2IVjyD2GRfxKl3I1btx0+Zxp//l9RPv6zQ9MJ1ZvTGMJm5NYaZ2VE0tRmRrNuPuookvNthwNm2YnSYMmEsUkChEUCSEARJfBCiZX4QxT2NSJkPImW7IJL5gHJu3qVX1peZz+8skm+//xpz8zf4oDI9DOWGBJxqykPv8VL0dhrRbNIjOT0CCoUY+sRspCXoIZHugzDmsb8ftmfnPv3b9haz6XIS19av+GppHi2dlUjQhkGbKUaZQYmaw2mordahwKBAfGooEpXRKNRUo0hTC6UiBiKZ95S7+JNSHMfRHOEYjuPIzg6H1bU7eO+DbtQ0FqDqxUMwNRahvrkY9UcNqG0qRGV9DqpN+WioP4KGehNqTIWoqNWjvFbHowDQhBAGAOE4Dg4Hi8UvbuH6lBUTNguuTY7ANmWFbXoUk15TVn7apr173vUf33/6HXxmJBnFn0QfAAAAAElFTkSuQmCC)![slides preview with iphone ](https://cdn.sanity.io/images/599r6htc/regionalized/1fa810c230b19fb89ff3c2a50f5fb4986041a913-1560x1248.png?rect=0,1,1560,1247&w=908&h=726&q=75&fit=max&auto=format)

Bring design and dev together.
------------------------------

Easily translate designs into code with a workflow built for developers.

1/4

![icons and libraries](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACgUlEQVQ4jXWTa2/ScBjF+T7ABuNaCo0mSxxjL8Y2k8XbZxITZTfdYmL8CLrMzAFDLgWBUUppV9r1CtvUxRjfHvP/Y+bQ+eLkSZr013Oe59Rj9G0MOw7Ulgut68CQbJiDiQzJgiU7kD7LyOc2kFlcQigUwuzsLHw+H7xeL51+vx8zMzP0uYcCTyz0eRV9XoHUVCDyEuSWCqU9hCaYEBsT4OJCGsFAgL5MQLfJY0o2lLaG6mENxf0SygefUHhXRKPYRKvchtgYoMdL2MjlsbRwD5FwCJFIBHNzc9SZ1+ud0gTYGVJgab+I44NjFN4XUC/wVCdVAUK9j81cHsuZNFgmBpZlEY/HEQgEpqJTh2RnJFr9iEf5QxmVwwqFVj9W6WyVOxDqIrZyeWQzi2Djf4DBYHAKSB1SYGdIIxIYAZFJ3BFgs9RCtyZi+9kmVjNLSDEMBUZjMQr0+/1TUHqU046Gbr1Hd9YoNdGuEFc91I7q4AtNdCoCdvMv8Wj9Pu7e4ZBMJsEwDKLR6D+xqcNh14DcVmk9xIaEQeuUuu7WetQd0d7WDp48XsP8PAeOS4Flk7fG9hCgJkyqo3Ut6D0TumjhTLSgCQb0noV+Q8b28w2srWbAcQxSqRQYJoFwOHxdoanI2olDy60LpNgOyOWJyMcs2aXOXzzNI5NOI/77KLFY7Dqu72YPCZBA3KGLC5PIgaubsFQd5qmGsWFBHyh4tbmNlWyW7o84TCQStIu3XtlRHVxdjPDz+xg/rka4HJ/BNmRYZwN8PTcwslW8fbOHhw/WwXHcf2tz7dBWbFzaBOri27mDS9fE2NQxMjV8GVmwNAWvd3ewkl1GNBqh/zNx9/f+CPAXssKqh/VGCCUAAAAASUVORK5CYII=)![icons and libraries](https://cdn.sanity.io/images/599r6htc/regionalized/ed6e1575c8d6883805697d4c1520fb30973d6dc5-1200x800.png?rect=1,0,1199,800&w=700&h=467&q=75&fit=max&auto=format)

### Design systems that scale.

Streamline the product development process with a design system that’s aligned across design and code.

[Learn about design systems](https://www.figma.com/design-systems/)

![inspect feature with code preview](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAADQElEQVR4nC2S208cZRiH979Qs9sLTQyHnfnmuHPamZ3ZXXZ2ObSg1QABSYlgsSpKUy1RpIQGabFpgdJywYW90iiEVhqpJsZTk6brRcsWovWGaOJ1/4XH7ODFk9+X9+LJ9775pe5M99NYHuTwRh//rsU8u9XNsy9qHJxrY716jLGyzqsdLlVbpagLPJHFaG/BUtooOgax71GyLCJVpdbWRurO9AD7q0P8vXacw3mbpx+28+dHLdw/lWYhyNDnGUSBj5MzMDUNXVEQspRgaCp2LodjWbi6TjGbJXX7fD/7K0McLvdQf0+w3f08m93P8VXPC5wPXqTmWeTzAaaRQ1E0FEVFCAVJkpEkKXlruoapqYRHwgEay8M8vXaSn6YKfD1ssDVqsz3hMf+aTafv4Fh5bMMlp9sYmoWmGAhZQZYEsqQkUl0WFJKVPx5mb+UUf90coXF1iEdXBmlcG6L+eT8rE510Bz62FuAaYZKm8NAkG02yMISToMk2pmwStGZJ7cyM0rg+zh/rzRxhf22EJ6vD/LL4OktjVbr8Ap5WJDDKeFoJS0TkpAK2iMjrHeT1Mo5axBV5wjZB6tvZcRrr7/NobZIfF87ww/zb3Js7zTfTo3w63EvsRDgixFeL5NUSea0DT21SJjBiCmYVrzkTPlFTuLP4Lo+/nOH3W5fZXVplZ/EGd5fW2Fq4wtxb7xB7MbYc4msdBHqMr8e4ahlHKeEqJRyljC1K2JJH2CqT+n5jiv0HF9n7bYlfNy9R31nh4OfrPNxdYGVhnO5yBUcUCa1Oyu5xQqsLV49xtAq2UiYnlxIs2T9aeXdjksf1WfYeTvPg3gT79z/gn4NzPKmPcfNqLz2VCEuOCIwqkdVFwezE1as4agVLHAnNplDyCVsVUhtnTrL52Qjbl99g82I/ty8N8N3yIFtLr3DhdIU4H2DLEXk1JtBr+FoNV+nAkorkslGCmY2w2vMUWgSpT+R2Zk2ZuZzCnKlwoZk5wUxOMKorFFU3ObqvVf8nTm5nSRFONiaQewnkPrxsmbBFIXU2neZsJkOS6TRTmQxT6QyTmWMMvPQyRcXFNytJRVy1lFSnWZPmrwP5BFX1TWraOKF8gqhV5T+vkgMcNVWr2AAAAABJRU5ErkJggg==)![inspect feature with code preview](https://cdn.sanity.io/images/599r6htc/regionalized/6763a77d77f4a293f47012dbe547af93c5030cd7-1320x880.png?rect=1,0,1319,880&w=700&h=467&q=75&fit=max&auto=format)

### Keep design and code connected.

Bring your component code into Dev Mode so developers get the right code, every time.

[Learn about Dev Mode](https://www.figma.com/dev-mode/)

![ready for dev preview](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACaUlEQVR4nI2SWU8TURiG+UHT6cx02mmhtRtKUURpA60EkJrKVnaocbnBCxUlBoIaQYzW7QIVIaHsCGmiQFjEJRoXvDL4Nx4zU6XKBXjxJifnO+f53u+8J8dm11AsFsyiiKhLNiMpMoqioKqqIX1tNouYTKYd6WcVi/K7ZkZUJYQDKjlargPVakWWJKNgEk2IZhGLasHusONwOLDbNVS9qV7XgYKQASoZoL4WRBOCJJKj2e3GZaOLmHVhsVjIc+bh9rjxeDy4XC4Drtls2H5L0zRjAgMoCIZy9IIsywbkz6Yu/WBhYYBorIrmtnraOhpp7Yhn1B6nsaWOispyfH4vkiRlgTuW/4IJJsFwUFVdwd2Ht5h7Nc78yjQvV2dYWJ0lvT7L/NI4/bd7CIaOo8hKFrjbmS59TwfWNdQyl57m088tFr9+YOLdKjObS6x9f8Pn7U2GR5NEykuRFTkL3A3bcWi1EYud4sXYCFPLK1waHqXj5gBdfb0knz1gYTnFnWQ/odIS48n2BOpJqzaV4mNHSXS203buPIXRWlzBMEWhILGaas5eaKMuHsOf7zMC3R9oVXG73QQChygIFOD0etGcTnKN5F348714fR7sDsf+QH1kI+XDB6k+HSTeHqYlEaE5EaYpEaGpM0x9axnlJ4vx+T37j5xJ2UplNMjAkzOklq8wsdZNav0qkxvXmHnbzcTKRa4PxCkJFRqfe++RdaBmpaahglR6kI3tSSa/jPB88zGjG/dZ3Bpi9Ucf90Y6KTtR9D9AkwGsbYgynR7j9bf33JibpSuZ5PJgH4+meln82MPQ03ZKI0f+Af4CH+T1ZLJhCkwAAAAASUVORK5CYII=)![ready for dev preview](https://cdn.sanity.io/images/599r6htc/regionalized/771714e605eb78af505cc99d18136308a48e43a6-1320x880.png?rect=1,0,1319,880&w=700&h=467&q=75&fit=max&auto=format)

### Focus on the details in Focus View.

Select and inspect a specific design in Dev Mode, then dig into the details in Focus View so you know exactly what to build.

![version history example](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC1ElEQVQ4jUWTy3IaRxhG50X8BBqYC8MMc58BhJBtycgu7PJFMQIhCwTCQgIGgUBCciqJcykv8gCpZJFVHiHbLPNIJzWN5CxOdfXmVP//97V0OxmzGo+5vjjnpNmkWt7E83xc10XXdbIZGSWbQVcVDF1DV1Wy2SyZTAbDMHj8eJvuUZvlaCQ80mqccDtOuBlNGLQP2XtSpBxbeK5NLpdDURSUbFaQitay9WmaFnu15wz7A1bJJalLmvXmTPtXjHoLTlsdjt/6vHuusFV2CcMAz3NxHBvLMsnnDQwj95UoLNLc7zAb3rI4WzE/vUL68W2T68aA7tENB40BjbrPq50M2xWXrc2YzXJAKfaIQ4fQLxCkeAVcx2KrVKXz/iOXvVum3WuS4wXS3zWZ399VGPQGvGz3qVbL+E4O1zEJPEvguSaek8e1DZyCgV3IYZk5KsUS3Uab2emI+T3Sv3uP+POVSqf3hlr3A0+e1YijCN9zCXwPz3X+Hzeno6oK2WxGUApDeq0my/OhCDVF+qeu8MfLPCfd19Q6R2zv7FCOQspRQDEKRNqGkReJq6om0t3Y2ECWZYphSL/VFoGu7pH+qlf57fUuyfEx9YMOfqWCKcYzcSxTJK3eV+WhLrK8FsZ+zMn7DlenVwIRyvcHfb5rDZi2x3yz38WtbaNUbAq+g+s42CJhS3QulYtu3ovLUZHhYY/VYMmsuyTpLJCuhwnLswnz/gVHjRbBbgW1ZOOmI8cxYRjieR5OKrfX8lSsaSq71YhPkw98WV2yukhYfJwgPfyU5fk5nYMGURSgGbrYXRgEQmRaFvl8/usrNV1H11TqT11+uWnw609T7mbpDkepcEJKKu21WsRBgKZqOHbaNVuIHvaYjpmRZWQ5I77ki6rN59k+X36YcDefCo8Q3iWJuPQPD4nDEFVRyBs5gaZpqJom9pYGkSackoprZZtvz97w8+qMT7O15z9XYfR+V3p3iAAAAABJRU5ErkJggg==)![version history example](https://cdn.sanity.io/images/599r6htc/regionalized/59b7504fab0d1f497159295d796bbfa289771461-1200x800.png?rect=1,0,1199,800&w=700&h=467&q=75&fit=max&auto=format)

### Track progress with design statuses.

Stay informed with clear design status updates on what’s changed, completed, or ready to build—all in Dev Mode.

Build better products, together.
--------------------------------

Everything your team needs to brainstorm, design, and build.

### Create one source of truth.

Everyone can collaborate seamlessly in one shared file. Designers, developers, copywriters—even external contractors and clients.

### Talk. Chat. Comment.

Communicate via audio or chat to connect quickly within your file. Gather and keep track of feedback with comments.

> Every discipline has a centralized location to view, understand, and contribute to the work.

![Patagonia](https://cdn.sanity.io/images/599r6htc/regionalized/4a455663c4f53c62a6ba9083c960b298ff226f70-122x25.svg?q=75&fit=max&auto=format)

![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAADJUlEQVQ4jWWUSS80YRSF6x+aQtpMm2JMiDGmtCFmbZ61odHopk1diJUVkbBgZccvOfLc73s7hsVNVVP1vOece295TU1N6urqUn9/vzo7O1VbW6uqqiq7VldXq6ysTKWlpeK5yclJRaNRHR8fKxaLaWdnRxsbG1aRSERra2vyxsfHNTMzo6WlJS0uLiocDmtiYkL8vbe3VxUVFQoEAnbA9PS0Dg8PlUwm/9Tp6akd5G1vb9upnMjDBwcH2tvb0+bmpgYGBtTQ0KCWlha1tbXZ793dXZ2fn+vy8lKpVEq+7+v6+tqKew+yq5OTE8XjcTsJYF9fn9Xq6qqmpqbU0dGh+fl5nZ2d/YDd3Nzo9vbWyuM0JDvY0dGRqV1ZWVEoFDKbqCIWVBIFz6Hw6urqh0LKczAXNPYBLCwsqLu7W4ODg5qdnTV4e3u7ZcyzCLm4uDAoal15TpmDbW1tmd25uTmziCqgwIHS0UQi8SfHlAM6mzSCBq2vr1tmAGkCGQLq6ekxu6gHSI5Onf/Ntvd7plAHnPuRkRGDAsPu6OioTQFWf1v2ff9fl3mAUwExmIzO/f29PUReQBh6gMPDw+aG//EeESX+2wdOBN7+/n4aSH53d3d6f3/X09OT/cY+NTQ0ZGAaxEHck20kEjH7wIB6nEJ2WAT+8PCgz89Pvb29WRTLy8tWAFi/uro6lZSUqLCw0FYzHA7bDLsYPLLjFJpBg15eXvTx8aHn52dTzfo1NjbaPgeDQVvByspK5eTkKDs725QzKSg0IOp4EYUAHx8f9fr6ajmRH7CCggJlZmaqvLzcPiCMU3FxsYqKimyDmOW0ZRSSFSqxTx5YwAoziE1Aubm5qqmpsTFiJtlvxikajaa3hvJoCCoBOqV8pgDV19fbi2SVl5dnQMYIEFe+TvF43EBphcycgwJk+bGEHUCtra12JTMyZCbdsLPfsVgsDbQM3di45rDDzFx+fr6FDxBlWKa7dJkDyBYwzSQm95GxwQbqxofh5nS+1ACBYx0gtmlQVlaWXYkDR24V08DvtslwbGzMVAHEPmqwTKE8IyPDvuLNzc0GZHuAUl9F6Ea8gVN+nQAAAABJRU5ErkJggg==)![](https://cdn.sanity.io/images/599r6htc/regionalized/a665614100a42cf927fcf103846eb553fa982847-640x640.png?w=48&h=48&q=75&fit=max&auto=format)

Levon SharrowDirector of Experience Design

Learn how to use Figma
----------------------

[Figma Design: Beginner tutorial](https://help.figma.com/hc/en-us/sections/4405269443991-Figma-for-Beginners-tutorial-4-parts-)
[Intro to design systems](https://help.figma.com/hc/en-us/sections/14548397990423-Introduction-to-design-systems-5-parts)
[Guide to FigJam](https://help.figma.com/hc/en-us/articles/1500004362321-Guide-to-FigJam)

---

# Plugin Manifest | Plugin API

[Skip to main content](#)

Each plugin must define a `manifest.json` file that describes the plugin. If you use the "Create new plugin" dialog, Figma will automatically create a simple manifest for you. You can extend this generated manifest to take advantage of additional features, for example, to declare a submenu for your plugin.

Example:

manifest.json

    {  "name": "MyPlugin",  "id": "737805260747778092",  "api": "1.0.0",  "editorType": ["figma", "figjam"],  "main": "code.js",  "ui": "ui.html",  "documentAccess": "dynamic-page",  "networkAccess": {    "allowedDomains": ["none"]  }}

### [](#name "Direct link to heading")
name: string

The name of the plugin, as it will appear in the menu.

* * *

### [](#id "Direct link to heading")
id: string

The plugin ID to publish updates to. This ID will be assigned to you by Figma and is typically obtained using the "Create new Plugin" feature, which will generate a manifest file with a new `id`. You can also get a new plugin ID at the time of publishing your plugin.

* * *

### [](#api "Direct link to heading")
api: string

The version of the Figma API used by the plugin. **We recommend updating to the latest version whenever possible** to get the latest features, bug fixes, and documentation. However, we don't auto-upgrade the api version of plugins to give you the chance to test your plugin against the new version.

* * *

### [](#main "Direct link to heading")
main: string

The relative file path to the Javascript code of your plugin.

* * *

### [](#ui "Direct link to heading")
ui?: string | { \[key: string\]: string }

Used to specify HTML file/files that can be used in the iframe modal via [`figma.showUI`](/plugin-docs/api/properties/figma-showui/)
, if you choose to have one.

*   If a single string is specified, this is the relative file path to the HTML file whose contents will be available as a string in the Javascript code via the constant [`__html__`](/plugin-docs/api/global-objects/#html)
    .
*   If a map is specified, each entry of the map will be available at [`__uiFiles__`](/plugin-docs/api/global-objects/#uifiles)
    

* * *

### [](#documentaccess "Direct link to heading")
documentAccess?: 'dynamic-page'

This field ensures the plugin supports dynamic page loading. The field is required for all new plugins and the value must be `dynamic-page`.

*   If the manifest field is included, no additional page loads will occur when the plugin is run.
*   If the manifest field is omitted, then running the plugin will trigger additional page loads in files with more than one page. The first time the plugin is run after a user opens a file, the entire file will load and Figma will show a "Loading n pages for plugin…" notification, where `n` is the number of pages being loaded.

If your existing plugin's manifest doesn't include this field, you should [migrate your plugin to use dynamic page loading](/plugin-docs/migrating-to-dynamic-loading/)
.

* * *

### [](#networkaccess "Direct link to heading")
networkAccess?: NetworkAccess

Used to specify the list of domains that your plugin is permitted to access. When `networkAccess` is used:

*   Your plugin can only access the domains that you specify. If your plugin attempts to access other domains, the plugin is prevented from doing so.
    
    ##### note
    
    The enforcement of network access is limited only to requests made by the plugin, such as requests to a public API. In a situation such as a plugin rendering a website in a frame, network access limits only apply to the website's domain. Network access limits don’t affect the website’s resources.
    
*   The list of domains that your plugin can access is displayed on your plugin's Community page.
    

`networkAccess` has the following properties:

*   `allowedDomains` is a required list of strings. The strings are match patterns for domains that your plugin is permitted to access. If `networkAccess` is used, `allowedDomains` must include at least one pattern. Optionally, patterns can start with one of the permitted schemes: `http`, `https`, `ws`, or `wss`. The `*` character may be used as a wildcard for subdomains, or used to represent all domains.
*   `reasoning` is a usually-optional string that describes why your plugin needs to access the allowed domains. `reasoning` is required if:
    *   Your `allowedDomains` list includes `"*"`
    *   Your `allowedDomains` list includes local or development servers. If you only need local or development servers for development, please use `devAllowedDomains` instead.
*   `devAllowedDomains` is an optional list of strings. The strings are match patterns for domains that your plugin is permitted to access during development. You can use most of the same patterns in `devAllowedDomains` as you can in `allowedDomains`.

Valid patterns for `allowedDomains`:

*   `["none"]`: The plugin cannot access any external network resources. Note that we preload the Inter font for use in plugins, so you don't need to include an Inter font source in your allowedDomains.

Valid patterns for `allowedDomains` and `devAllowedDomains`:

*   `["*"]`: The plugin may access any external network resources. If this pattern is included in `allowedDomains`, the `reasoning` property is required.
*   `["*.example.com"]`: The `*` character can be used to permit all subdomains of a given domain.
*   `["http://example.com", "https://example.com", "ws://example.com", "wss://example.com"]`: `http`, `https`, `ws`, and `wss` are permitted schemes that can be used to prefix domains. Other schemes, such as `file`, cannot be used.
*   `["api.example.com/rest/get", "www.example.com/images/", "http://s3.amazonaws.com/example_bucket/"]`: URLs to specific resources can be used.
*   `["example.com", "figma.com"]`: Domains can be used without schemes, subdomains, or wildcards.
*   `["http://localhost", "https://localhost", "http://localhost:3000", "http://localhost:8081"]`: During development, the plugin can access a local/development web server. If the server is running on a port other than port 80, the port number can be provided after the URL. If this pattern is included in `allowedDomains`, the `reasoning` property is required.

##### note

In the previous example, the trailing slash in `www.example.com/images/` identifies a path to multiple resources. For example, `www.example.com/images/` lets a plugin access images at `www.example.com/images/img1.png` and `www.example.com/images/img2.png`.

A pattern with _no_ trailing slash blocks any deeper access to files on that path. For example, `api.example.com/rest/get` stops a plugin from accessing `api.example.com/rest/get/exampleresource.json`. This can be useful, for example, if your plugin uses a REST API endpoint and you want to restrict the plugin to that endpoint only.

For example:

    "networkAccess": {  "allowedDomains": [    "figma.com",    "*.google.com",    "https://my-app.cdn.com",    "wss://socket.io",    "example.com/api/",    "exact-path.com/content"  ],  "devAllowedDomains": [    "http://localhost:3000"  ]}

More formally,

    interface NetworkAccess {  allowedDomains: string[]  reasoning?: string  devAllowedDomains: string[]}

* * *

### [](#parameters "Direct link to heading")
parameters?: Parameter\[\]

Used to specify the list of parameters that your plugin accepts as input. Can also be defined on [menu items](/plugin-docs/manifest/#menu)
. Here's an example:

    "parameters": [  {    "name": "Icon name",    "key": "icon-name",    "description": "Enter the name of the icon you want to insert."  },  {    "name": "Size",    "key": "size",    "description": "Enter the size of the icon you want to insert.",    "allowFreeform": true  },  {    "name": "Color",    "key": "color",    "description": "Enter the color of the icon you want to insert.",    "allowFreeform": true,    "optional": true  }]

Each parameter has the following properties:

*   A `name` property that specifies the name given to this parameter in the UI.
*   A `key` property that is a unique id used to identify the value of this property in [`ParameterValues`](/plugin-docs/api/figma-parameters/#parametervalues)
    .
*   An optional `description` property that gives a more detailed description that is displayed in the UI.
*   An optional `allowFreeform` property that allows the user to enter any value for this parameter, not just those suggested by the plugin.
*   An optional `optional` property that indicates the parameter can be skipped in the UI.

More formally,

    interface Parameter {  name: string  key: string  description?: string  allowFreeform?: boolean  optional?: boolean}

* * *

### [](#parameteronly "Direct link to heading")
parameterOnly?: boolean

Allows you to specify that your plugin can only be launched with parameters. You must also specify a valid parameter list: [`parameters`](/plugin-docs/manifest/#parameters)
. Can also be defined on [menu items](/plugin-docs/manifest/#menu)
 with parameters.

If `true`, users will always be prompted to enter parameters in the quick action UI before your plugin is run. If `false`, users will only be asked to enter parameters if they launch the plugin through the Quick Actions UI and hit the `tab` key. If the user launches the plugin through the context menu or the main menu, the plugin will be launched directly without displaying the parameter UI.

Defaults to `true`

* * *

### [](#editortype "Direct link to heading")
editorType: ('figma' | 'figjam' | 'dev')\[\]

This allows you to specify the editor(s) that your plugin is intended for and will impact which editor your plugin appears in.

| editorType | description |
| --- | --- |
| `"figma"` | Figma design mode |
| `"figjam"` | FigJam |
| `"dev"` | Figma Dev Mode |

The following value is unsupported:

    "editorType": ["figjam", "dev"]

* * *

### [](#menu "Direct link to heading")
menu?: ManifestMenuItem\[\]

This allows you to specify a submenu for your plugin, enabling the plugin to contain multiple commands. Use the [`figma.command`](/plugin-docs/api/figma/#command)
 property to determine which command the user selected.

The `menu` property contains a nested list of menu items, menu separators and submenus to be displayed. Here's an example:

    "menu": [  {"name": "Create Text", "command": "text"},  {"name": "Create Frame", "command": "frame"},  {"separator": true},  {"name": "Create Shape",   "menu": [     {"name": "Create Circle", "command": "circle"},     {"separator": true},     {"name": "Create Rectangle", "command": "rectangle"}   ]  }]

Each item in the `menu` property must be one of the following three:

*   A `name` and a `command` property. This creates a user-clickable submenu item. The `name` property is displayed to the user in the menu. The `command` property is never exposed to the user but is rather exposed to your plugin through the `figma.command` javascript property. You can choose any string value for `command`.
*   A `separator` property with the value `true`. This creates a separator in the menu. A separator is not selectable by the user.
*   A `name` and a `menu` property. This creates a nested submenu. The `name` property is displayed as name for the submenu. The `menu` property contains an array of menu items following the same format of the top-most `menu` manifest property. The submenu itself can not be selected by the user, but items inside the submenu can be. Submenus can be nested arbitrarily deep.

More formally,

    type ManifestMenuItem =  // Clickable menu item.  { name: string, command: string, parameters?: ParameterList[], parameterOnly?: boolean } |  // Separator  { separator: true } |  // Submenu  { name: string, menu: ManifestMenuItem[] }

* * *

### [](#relaunchbuttons "Direct link to heading")
relaunchButtons?: ManifestRelaunchButton\[\]

This configures the relaunch buttons that are set via the [`setRelaunchData`](/plugin-docs/api/properties/nodes-setrelaunchdata/)
 API call.

Example:

    "relaunchButtons": [  {"command": "edit", "name": "Edit shape"},  {"command": "open", "name": "Open Shaper", "multipleSelection": true}]

Each relaunch button in the `relaunchButtons` array is an object with the following properties:

*   A `command` property that specifies the `figma.command` that will be supplied when the plugin is run after the button is pressed. This command must match the command supplied in the [`setRelaunchData`](/plugin-docs/api/properties/nodes-setrelaunchdata/)
     API call for the button to display.
*   A `name` property that gets displayed as the text of the button.
*   An optional `multipleSelection` property (defaulting to `false`) that enables the relaunch button and description to appear when multiple nodes are selected. Without `multipleSelection` set to `true` the relaunch buttons will only appear when a single node is selected. Even when `multipleSelection` is `true`, the relaunch buttons will only display if all of the selected nodes have relaunch data attached with the same `command`.

##### info

Note that if the name of a command in the manifest changes or is removed, then all buttons with that command will disappear. This behavior can be used to remove buttons when a particular action is no longer supported by the plugin.

If multiple relaunch buttons are shown for a given node or selection of nodes, the order of the buttons is determined by the order of the elements in the manifest's `relaunchButtons` array.

More formally,

    type ManifestRelaunchButton = {  command: string  name: string  multipleSelection?: boolean}

* * *

### [](#enableproposedapi "Direct link to heading")
enableProposedApi?: boolean

See [Proposed API](/plugin-docs/proposed-api/)
. **Warning: This flag is only meant for development, and will not work in published plugins!**

* * *

### [](#enableprivatepluginapi "Direct link to heading")
enablePrivatePluginApi?: boolean

This enables API that's specific to private plugins. Setting this will also enable local plugins to work with these APIs during development.

* * *

### [](#build "Direct link to heading")
build?: string

**Experimental!** A shell command to run before we load the file specified in `main` and `ui`. This can be used to call build commands such as compiling with Typescript, running Webpack, etc. The command is run in the directory of the manifest.

* * *

### [](#permissions "Direct link to heading")
permissions?: PluginPermissionType\[\]

This allows you to specify what permissions your plugin wants access to.

The possible `PluginPermissionType` are:

    type PluginPermissionType = "currentuser" | "activeusers" | "fileusers" | "payments" | "teamlibrary"

##### info

*   `activeusers`: lets your plugin use the [`figma.activeUsers`](/plugin-docs/api/figma/#activeusers)
     API.
*   `currentuser`: lets your plugin use the [`figma.currentUser`](/plugin-docs/api/figma/#currentuser)
     API.
*   `fileusers`: lets you use the [`StampNode.getAuthorAsync`](/plugin-docs/api/StampNode/#getauthorasync)
     method.
*   `payments`: lets you use the [`figma.payments`](/plugin-docs/api/figma/#payments)
     API.
*   `teamlibrary`: lets you use the [`figma.teamLibrary`](/plugin-docs/api/figma/#teamlibrary)
     API.

* * *

### [](#capabilities "Direct link to heading")
capabilities?: ('textreview' | 'codegen' | 'inspect' | 'vscode')\[\]

This allows you to specify what capabilities your plugin has access to.

You can specify one or more of the following values:

*   `textreview`
*   `codegen`
*   `inspect`

Use `textreview` for [text review plugins](/plugin-docs/textreview-plugins/)
.

Use `codegen` for [codegen plugins](/plugin-docs/working-in-dev-mode/#plugins-for-codegen)
.

Use `inspect` for [inspect panel plugins](/plugin-docs/working-in-dev-mode/#plugins-for-inspection)
.

Use `vscode` for [Dev Mode plugins in VS Code](/plugin-docs/working-in-dev-mode/#dev-mode-plugins-in-visual-studio-code)
.

* * *

### [](#codegenlanguages "Direct link to heading")
codegenLanguages?: [CodeLanguage](/plugin-docs/api/CodeLanguage/)
\[\]

A list of code languages that your plugin supports. This is required for codegen plugins (plugins where `editorType` is `dev`, and `capabilities` is `inspect`).

Example:

    // Specify which languages the plugin supports."codegenLanguages": [  { label: "Tailwind", value: "tailwind" },  { label: "CSS", value: "css" },]

* * *

### [](#codegenpreferences "Direct link to heading")
codegenPreferences?: [CodegenPreference](/plugin-docs/api/CodegenPreference/)
\[\]

Used to specify a list of preferences for your codegen plugin, such as alternative units of measure.

Example:

    "codegenPreferences": [  // Optional but a unit itemType can be used to specify that the plugin supports a custom scaled unit. By default, all plugins  // support the pixel unit.  {    "itemType": "unit",    "scaledUnit": "Rem",    "defaultScaleFactor": 16,    // Optional, if true the scaled unit is the default.    "default": true,    // Optional, if omitted, all languages are included.    "includedLanguages": []  },  {    "itemType": "select",    "propertyName": "tabSize",    "label": "Tab Size",    "options": [      {"label": "2", "value": "2", isDefault: true },      {"label": "4", "value": "4"},      {"label": "8", "value": "8"}    ],    // Optional, if omitted, all languages are included.    "includedLanguages": ["tailwind"]  },  {    "itemType": "action",    "propertyName": "showMore",    "label": "More settings..."    // Optional, if omitted, all languages are included.    "includedLanguages": ["tailwind"],  },]

* * *

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Figma Enterprise | Building Great Products at Scale

[Skip to main content](#main)

*   [Figma Design\
    \
    Design and prototype in one place\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC/0lEQVQokVXSbUhTYRQH8GNSqAilpXVf0rnNLbd5l29ZWeYMnXebbvfR8kMgFASJhbvqnDrtzXwJoohczm2SmVFQVJaEJWaElUSgkVhkRCFWVpYkEVm7T1zR0g8/Djwf/pzD8wfWMBWzCPtdYWJn1nB6HGBifwE0A+RnYCika6GYjASbTALtNRY4nKz2d2gVy8TpKWahNHItlEkiADaYu88vlGy+27o5p79OZ3qJWMMUzemxv7IAQznTDTY6CoqCV4GVIAOtBJlgJchcK0Em8RQVlAsgvgOoUcuPhTTIM81w5ycSzTf7UrOHCln2O2kyYlCZY6AeAHiKCrTJIlMqYmTOSrX8UUWMzFUWFZFaHE4EFcCy2UD8n+vf1CDvz0RzV0+6cdS4Kx0HQByGYio6yCaNTDm6lXGdKUgb81rZP8496ePH0rSecrkktYSmg0CDvMK8WNQ6O9Wo2SeGarmOMZ1poOZ04hfpaFjD8jJCtqlSJTvr3K0bu3Ol0Pd0qEbo7Tzgc+3LGK+KjXbzFJUOKnQWz5kNY7g2cUOfBrlxLGqb3G6877yofZMyvPqUopyQ761iogfbKnJ8gyNHhHczTcKzV7XChYOcrzpO+ZynKAeokUuYp0GeuQ1dPvF0hmv/oDM9rGuJf696EX483EbIsyrV8qsthZnfHvSUCMNv64X+vjLBa2WnHFrFdZ6kdoIKNeHFnFiNmrEGuX8nWK4/1plG8ou24WC8MtCPp+Sh5XIJV58Rf8NrZb9ebtiJW0uNU41s4i27MiqPJ6lVoEGeP4u5Z2JR63S85erQluwn1XrDpIzegf0wYMhFVeIvh9gVUVx1nPLaoQ2q19Vxyk67UppXQtOhCAAgydx1b4HeJPPt7uSc3nNiZfSGT+sserwUBjDUqS6Bg14P+8PCxL6F8CTF8iRVwpOkyUqQKx2MAkoj1gJkGj5m/jeRqTd8TjOw05rsLCHEnIWXQAeARY+hUSwuScPRrQyc3JECdqU0wCaTrLArpYEnLBuhNpWZLfZfsj9e+lps4aIAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/8b823444edce5f6c81fbd959301a33582525c23f-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/design/)
    
*   [FigJam\
    \
    Collaborate with a digital whiteboard\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADPklEQVQokTXSXWhTdxgG8L83sotdTL3ahWuFzjGvdueVCN44wWqd6Ww3xImBUVawIBOllCp+oBfDDSm1qSUfzcfJaXKanCQ9aZJz8j8nMTmJiZto7dKYNF2/WVuVxuakpu87jrDLF15+8PA8BDLynsUQ91nONrxPS8SON9LxsRxvL1/oN841XTxa+bHvYiXrt1UaanwOM7IIKu2sP4nvxdKz3beuhJrPdTDdbe1Ops3g4k8bHD4CKr1R8bP9kYe/3az43OatZKwgMIO1Y12ntE+/PaQd/fmkFnQOaPWUqGFGroBKH++otBuzivE5G7l29TI78d250eVWw+ib1nbbug6uLAa9K8rQw9W/3aMb75XItuwZwbPd3+P+499g2y8GlNhh3E5LiBm5rv+DSouYkQsLE+Lsg/7xd+2dDjx11oGn2+1IIEtxkwpY5Bw443XgphzGJZEHy8BduNrbBZaBOzAf9YGWjEEtEYVGSkJQqY7jWkxC1wMee7qZxoWfHOtnOmwFAgkZQJHhXViAWZaFVd4P72kEygEW0nYTFP0MbtIwrAg+rPjc8FYMwYeU9BHfiE3CNDeJslnQ3L8HpctdbA+B23mA2znQbqqw9GsEyr08Lll4LHlcmLeacM7HQpWGcT4whlOMFeYDHtiMh2Eh6IESx8CbmID1JK1uKfJIkaNfkbWWZzjTIoHawoF4wIHpw+6dQp93+4XN8kE1D0LR68S1SADK4wz+ZR/BEufCt+IEzvrc+g2LQS820lIVn8pDmI9/QULEjjfIFeggbXCeGHDo87sb5Z5Afj0UmloWuK1/+DEdgZzVhHTwD5zxOHBLjuDyxDjmbcPw2uvEejJWxYxiqiXEZnKP9OIRchj2kT3wNfkSez4xvnreyt1CJTnYUKVVPe6KMA6FMTvq6DQ7iv9O8jjnZ/HJ8ABMuaxYU6JVzCqmnXS8iTwi9/ES6YQT5Bj8sOsM3iHXc+mDHiPGE32QpQt6o42UBFoihhvR4MeoOv7Cacas+RG8dFlwVfBVqzRsqinRJjJNFEwRHkTCAt3lxT9JNLd8MGMEqvRBhi6gKusTAX0mOv5/3PmAR4eg4mfxpctafcXYTCXO1fwfvPx7+MfCvOMAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/64c5beb99a9fc5a0b00dd4882ab1f6a915ee0752-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/figjam/)
    
*   [Dev Mode\
    \
    Translate designs into code\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADNElEQVQokXXOXUxTdxjH8b/EBV9udrO4ZFm8mAEzlJlsTRbjFcsyMzDBDJIpxkklp6MlEiYwSmt9Q6tYakvX9kB7KJHhVDKYAkuLPbQceg6nPVRPC0vEKDUiBZRiUbgwkedZrJpd7eKTX/JcfPOQby+W6g1URdWA/grlO9+nokvUlCFfQVn2HqAGDd0q37k/Vc4fVCpD/leU9fsyavDUVdXQmR7qEnVMXXy6tGLXX0cV2xO6bLLWSRoTPxNiqFA2Xqu3eUesgRjvFOTeOlqmS9TyH5pmmWsNyrxDkHtrnTJdopGvV7XIozZODtn5eJ/eEzCp62pKtQc/JYjEgkoytXqEkFu6zsYRCzsluqIYYWQIXvbjgOF3ZJsH8e3tDgbMXhwwdCLbfAtFdwTCbglHbcPJIeN1/U2j8eM47s4KPa76gEsr15OxdkkX6YhNSZ44Sp44hJm7ILZLEHbfhUhHFET3APC0Azi7CUJOC/DtNuDbbMi7LKlQT1MXP6U+JLw4Uiiklfv4tLKISJ74m+D9SEcMIx0xyPDEQPJMQJgRIEQ3wXDrHvBb88BvzQe/dSf4rTuQde56FfQVzPCzZVFhWSkK6XKRT5eLJOKJ6SRP/P2Ha2+j8rvgKHDOahi6/BH4zAR95izIaFmHQ46NEGC/AD75IwjLShDS5RmEM7ONY21S5sM3UYEO44jFj7xDxDDDIeeoRta2BQNtG4C1Z6PPvA68JoK36U3AcV+CsHDgv+ByORB35Und32dvxHnn2KroGn/pPduzcrXSuNKv71rhHb5V3lXzKnztc5j05+J471YYdm4G9rcNKNz4BKIT30AkdRjE9FEYSyszSEVVyXFac8Lqv9DPBC0s061qYkwFxYy7rN493NLdJffVS9Pj+1cXEqX4eKIIJm9/jXGvAh9Ev8PE7E94L1WJkyk1/pNSZ5bsdh0sOKY5lN/3iz2n/8SV3NbCwzm6vLzcJkXRtqDdqHgy2WBanKl5+nz+OKZma2BhWoMLD9W4OFONz+ZrcX6+DucyajPIZ7H6jdkJTdad6GuCj5DcbGAIIpJpqYE8n6v9cCmp/XUpqZ1bSmpxKalde7f/619Q0kYqSbDbkAAAAABJRU5ErkJggg==)![](https://cdn.sanity.io/images/599r6htc/regionalized/c86a9976203e3264f89a20c5fb534a0d845d5f1b-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/dev-mode/)
    
*   [Figma Slides\
    \
    Co-create presentations\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADT0lEQVQokVXMf0zUdRzH8U+r9e0XjcTSCmrgTpFDQOWOSU1xrY2Q4+t9v3cex0Ff7jSDknAWc25OIJokdTUU+XE0Dq4doQlTOuQ6Lu4LnNz3LJN+fWuNmdWarVw/sJCuu/erOdcfvrbn9vrrwWL1OizV6/Br7QZ8bNNSyLyW5h25uN7IL9GJt+doNtiUiE7r1dFTyYLjDKcriXC5thbucbuBW2kTudXiEU7Hn+U0psNcilXg2DfVOTRXtY4CYiYO6B+hau1ycj2dTj/uNyQSw53XEJn8Kq6EPN/5x17uen3GbpampHTLPumuinzpXluBpDG1SIVlM9IqU6N0d2W+xPzCGvIUZ1Db5jQqSk2iVckc1a1fQZ/vLUF8pBuIhBIJRV74Qw5ejg6e+9r52kdq8Z5DappkVB+0mlWN2Kbq+DFVY2pVl5ebVBYyZ+H4U+loKkxFRWYKDBnJ5NzyGF1qKKXESDdRZJIoOoV4RMaCPA319AQ83W68dPAYSna6sHFHD7LEY9AKPcg1esAu1W6aH7Xqf/ZaNv11qmrzv2P2rfhy7zP42/k8yNcPioRugESKTJjxU3zcS78M9dCFjj7yHhii3XYX5e1opWxjHxXwAWKLTcaa71vszZed+/qvuhqD1wZav4i95/yJzvQukPxBDDeg6BSgyEBgiK53NtDFVwTyPbeNwnsqyb2rjQymk6QR36BUywvE4GlKgt+9EvJwFqZ9WzEzXoXwhwcxG3RBCY2TIs/FZievLIYn/omN9tHVVytoYFsmNegexohxPU5LLbAJMtJNzUiyPQGGo88yeHcxbGFs/tvfbl+8OHdP/BPlocT58Bqcn35y6dyk7bORYLff7f8heLyTJvZXUcf2UjpUJGBAcKDD9hYM4jA04pt41FIDRs38zYoYA8Dwe4Lhyp83f2L0Nl9v4P7amk/LK3eGL1h2d1C5ow4Oczu9yJ9FveCH2exGnqkN64z9KOADYFCmGBT51qIyc7f7mL3ufcY2dN2hLRsszdn+rpItdJFWbEee8A7lC4PYaPQiR+jFWvEosoVe5Bm9YP8P0VvhwrpqxtLuY7n2+juX2YrLVpRXRrVCF+l5PzJMjfSAtQwpViNWi0eg58ehMR3GMiuP/wBsd/hhCuinswAAAABJRU5ErkJggg==)![](https://cdn.sanity.io/images/599r6htc/regionalized/d5088df6b4e9cf91d8a615901b5d60e1534ce5bc-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://www.figma.com/slides/)
    
*   [AI\
    \
    New\
    \
    Explore all Figma AI features](https://www.figma.com/ai/)
    
*   [Downloads\
    \
    Get the desktop, mobile,
and font installer apps](https://www.figma.com/downloads/)
    
*   [Release notes\
    \
    See the latest features and releases](https://www.figma.com/release-notes/)
    

Use cases

*   [Design systems](https://www.figma.com/design-systems/)
    
*   [Prototyping](https://www.figma.com/prototyping/)
    
*   [UX design](https://www.figma.com/ux-design-tool/)
    
*   [Web design](https://www.figma.com/web-design/)
    
*   [Wireframing](https://www.figma.com/wireframe-tool/)
    
*   [Online whiteboard](https://www.figma.com/figjam/online-whiteboard/)
    
*   [Team meetings](https://www.figma.com/figjam/team-meetings/)
    

*   [Strategic planning](https://www.figma.com/figjam/strategic-planning/)
    
*   [Brainstorming](https://www.figma.com/figjam/brainstorming-tool/)
    
*   [Diagramming](https://www.figma.com/figjam/diagramming-tool/)
    
*   [Product development](https://www.figma.com/product-development/)
    
*   [Web development](https://www.figma.com/web-development/)
    
*   [Design handoff](https://www.figma.com/design-handoff/)
    
*   [Agile](https://www.figma.com/figjam/agile-workflows/)
    

Roles

*   [Design](https://www.figma.com/designers/)
    
*   [Engineering](https://www.figma.com/engineers/)
    
*   [Product managers](https://www.figma.com/product-managers/)
    

Organizations

*   [Enterprise](https://www.figma.com/enterprise/)
    
*   [Education](https://www.figma.com/education/)
    
*   [Figma for Government](https://www.figma.com/government/)
    

*   [Config 2025\
    \
    Register to join us in SF or online: May 6-8, 2025\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAABTElEQVR4nO2QP8uBYRTGbyaTlA2JZ7B4VgP5ADblfzJRT5GYDIbHn5XVgoiSokgKJWwGn+r3dp96P8FrfIdf55yr61zd91FKKb6M+g9Uf8PhcPAN1G+gy+UiEAgQjUYJh8N4vV78fj8+nw+Px0MwGMQwDJl1jUQi4tfo2TAMQqEQbrcbp9OJMk2TZrPJeDym1WqRy+Vot9vSF4tFOp0Otm1Tr9cZDoeMRiMajYbsaN22bfHG43F5gCqXyxyPR16vF8vlkvV6zePx4Ha7sdvtuN/vPJ9PLpcLn8+H9/vNfr8XTqeTeA+HA91ul0QigUqn06xWK1mYzWYSqo3z+ZzJZMJms2G73Yp2Pp9FXywWTKdTer2e9NfrVfRsNovSd6tUKvT7fflWqVSiVquRSqWEarWKZVlyBl21VigUyOfzxGIxMpkMg8FATpNMJvkBwtdZfGF8ewcAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/eb42e1b3e5042d96d6d542fffaae917dfba25521-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://config.figma.com/)
    

*   [Creator fund\
    \
    Build and sell what you love](https://www.figma.com/community-creators/)
    
*   [User groups\
    \
    Join a local Friends of Figma group](https://friends.figma.com/)
    

*   [Events\
    \
    Learn best practices at virtual events](https://www.figma.com/events/)
    
*   [Customer stories\
    \
    Read about leading product teams](https://www.figma.com/customers/)
    

*   [Shortcut: The Figma blog\
    \
    Stories about how products take shape—and shape our world\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACmUlEQVQokUWS3U8TaRTG528WAaFVKFuFbaAFg2ChtbS2QpVCsaVfTjv9ZjqdmfdAQFFhDWK8IMYLdzd7+du0k81eneTkyXPO86FNzAj3Hij+m/dnFAuPha1Nk8yLMm9e6jzftHm0IEz6PNzEjDfvzwrTfmHmkTDlH+0FzQP8D5r7TbGbUbSrTQp7aY72DinlBuynHSIRl2m/Gh+enFXMB4XVNWFzQwgte8SaR+SBpnxCeH1IUW9zqmpctHOc6QU+D7q875nsJocEgi5TPoU/IMS2hVpBaJSEVy+Fx0uCNpY5633pmxOiOyZvu1WUk+fOiPOzHudO6dhNi9SLIbEtm41nLttRRV9XfD3v88epgX48YDksaCNvwhFhbU2xElYkU0Na7TaX5jG3hSjXBzH6hQbxbZvVVYdy3mGgn3BSaXHjdvjr6zF3V3vUik2Ci4KWSihapQFmrUs1b5JND3mdGVDI9snvGOysG4R+P2Ha78mtHDlcDww+t/J8dyv8+vKOT26ZZKLPg4eC1iwNOW+U+djIcWU2sAyLTHLAStgem+6bd5lbsJhfGBAI2iRiNmatzcdOlRunxaVlkX9tE1z0QtXqby3O3hW5ah3w46LOz+saF1ae/JsWSyHFkyVF7pVF46jH4a5JKmFzmLVplU/oVnsUcxZPn6rxd6M8tGTcwa73uLvo8vdNh3++Z/jz2wYf7CqxLTX21yg63Lomt2JxbiqGTYVRbFDI5jCODQ6yiuATYWJEOCpxJqWwDOGTM+Raylw6RzRKPSIR4WFA2HymKB24mHXFWf+UD5aiX6tQ3U9z3tPp6cLyitflcbH9895iKyok4i7R5y5LIRnLGIEmfR7xYkhYXxfSSaG4b9KpdLCbQ3J7QiDoSf4Xgayg7OYDxFgAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/1883a9ebc4ce697b718301ad247c0fff45c572c1-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://www.figma.com/blog/)
    

Get started

*   [Plugins](/community/plugins)
    
*   [UI kits](/community/ui-kits)
    
*   [Icons](/community/icons)
    
*   [Widgets](/community/widgets)
    
*   [Templates](https://www.figma.com/templates/)
    
*   [Developer docs](/developers)
    
*   [Partners](https://www.figma.com/partners/)
    
*   [See all](/community)
    

Learn

*   [Best practices](https://www.figma.com/best-practices/)
    
*   [Reports & insights](https://www.figma.com/reports/)
    
*   [Resource library](https://www.figma.com/resource-library/)
    
*   [Demos](https://www.figma.com/demo/)
    
*   [Webinars](https://www.figma.com/webinars/)
    
*   [Help center](https://help.figma.com/hc/en-us)
    

Figma for companies

Build great products at scale
=============================

Connect everyone in the product development process to go from idea to reality, faster. Ship products confidently with the backing of flexible controls and powerful security.

[Contact sales](https://www.figma.com/)

The world's leading companies trust Figma

![Square logo](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAzklEQVQYlTXQzysEUBTF8WF2/gGlbBBKFqLBTimllFJqbPzeKGRYUDYWbCxtFGLj7zwfXb1ZvM597537vZ3bwTt+8YGfpruYxjJmMYZuki5GMNrq7rAe3jv4xBOukgxa3cdG050kq1jDEqYw14ato4cVlKdXwC/cFxCXeEhygE2ctyEXSW6ap5/kGLd4xHX5UP+DAlbEF9wlKfAz9mtqkj2cJTktc4OcNEDBC/afAoc4KuBr211F/8YbtjCB+bbDxda03WIvtLfSSYxjps4fOKhKs3J3dcIAAAAASUVORK5CYII=)![Square logo](https://cdn.sanity.io/images/599r6htc/regionalized/e10c9c734238ff7c253e895cfb269fcb2d097b5d-746x190.png?rect=0,2,746,187&w=128&h=32&q=75&fit=max&auto=format)![Zoom logo](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAzklEQVQYlS3PSysFUBiFYX/GgBIDGZBSBpiIYuASElLi5DhyyK0ISRET4reuR1/t0a7d+71rrQEs4y7JT71YwRFecIBRzOAKj40fT7KHZzw1tm5GBjCM7SSfeMMlOkl2cYIuekkOm6SHc/RxjXfct7/tEg6iwBvsJ7nATpJxlPS7Bc1jqnG1pptkNckZNlrYdQnX8YUHbOIYp9hKUg0roJ+k5u+0BdWoJNNYwyyW6q6EJfjFH25bq5J8JOlgAnMt8LVmYSHJJIZQ0rHGLf4Dg/VTQFFvgoYAAAAASUVORK5CYII=)![Zoom logo](https://cdn.sanity.io/images/599r6htc/regionalized/c2394525acc6584da60b1bb4b32aa4c6a2a00129-407x111.png?rect=0,2,407,108&w=124&h=33&q=75&fit=max&auto=format)![New York Times logo](https://cdn.sanity.io/images/599r6htc/regionalized/3d36fc6bb1d0b461558cf19a370758a162079cfa-77x77.svg?q=75&fit=max&auto=format)![Datadog logo](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAACvElEQVQ4jXXUe8jecxgG8MdmtXdFzGGsmcMwzFia/EXMeWx7Ma0Ry/EPiXKKIiVJSSiRf/gbJSw1h7KUQ842co7au5JEpIS6Prp1P+t5X4+n7r6/5/v73df3+l7Xfd8DDGbEbpjTMbo3F4djBfbtvcEwdv2SjIIVyNIkk0nOwTKsxCpcgLtwPyYxfyyg3mjgxbgjyetJXsDjeBb1/218gNq/tQ4eZbnrNwJWL0/Ec/gF3+LrJD/j9yR/YgeeaIaLMOt/GXYciQeKSZJ3sA2f4i3s7HgUJ2FijP6DUYaDFv4UPIiXsT3J1iRP48tm/goua2MGYwFn6Hggbsdn+C3Jzr7+r/gJW3FPkuNLpkw39T8MK/bEVfg4yd8o7f7AX0m+wzO4D2e20xOYPZZhx+5YjocwleTH1nI73sXzeAp34uoCTrLPNHPGgM7DJXgfX2FzA23Bm/gEH+G1JCXPYWMBh1dPsiDJjc3sC7yRpNzekWQKH5Y5SZ7ENVgyLKGZDKsWD2gXX8Q3fdUCmOo6rCK/rTU8FadXSyaZPQ5wbpJz8RJ+wOdJXk2ypQ8odzckWdaGLGnQpa399F5OUtptTPIeyuHv24B7k1S7ndaGrUhyAk7uPj9k6PRMM2qz6uuR7oq68t0o1mu66GtYrExyXHVWkmrBeUNiQ91mjTT6RF/jYTxWYElK10o8qDtkj+6qOSPF/S9OXXNRz7mF2Av74wic1cyOaaPmJ6lpdCj2wwIcXO+SVM7iJAsLeR0uwmqc0c9rcWFPlbVJ1rVe5/VcnOx1TefXc+WsKsCq9ktxBa7HLUmuw+VV3EmuxU1J6rtNXfA3oL65uNebux6vLMBCX48NvRaLOrkY17XPxvmdvHHIsKZ6fzfMr4M2FWDV0rFdSzVpSsfSp/QqfcuEvUuvJMuTHN2a1rvKqbXyjiq9/wESNj6oBh18WQAAAABJRU5ErkJggg==)![Datadog logo](https://cdn.sanity.io/images/599r6htc/regionalized/a9b91bce0f401c8d0a57f1fff1c2e60b8094f809-496x531.png?rect=0,2,496,528&w=62&h=66&q=75&fit=max&auto=format)![Kimberly-Clark logo](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAXElEQVQImS3KOwqDUBhE4bsUC1EIWoQIeWjhElJYpBE7g4ZACFn/R7jwV3Nm5iQcUOOIBz54YccXv9ieWLFhxhI9e+/gKaFAhRINLrjhjAFjZBd8xzV6H1/2T2j/5o6CqJ76PCsAAAAASUVORK5CYII=)![Kimberly-Clark logo](https://cdn.sanity.io/images/599r6htc/regionalized/64111692af0748fd7f340646bb0a5f6cbfe35052-2400x288.png?rect=0,2,2400,284&w=186&h=22&q=75&fit=max&auto=format)![Microsoft logo](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAu0lEQVQYlTXPO0qDYRSE4X8DXnAFduINjSjBCClEvAVSiKKFYtAIapFSEFxUYuUOvBaiVi5mHvngt5rDOTMvcyo84TvJb5JPPGAV82hgDdOYTDLxr0nGk4xhCgtJ2pirkozwhq8kLzWwizNc4xaH2MQWdrGPPWyjg0sMkhxXGOIVpd0z7rGDU9zUwBI4wgFOcI4+LpL0klyVuXgK8DHJR5IfvCe5wyxmkixjBc369UWU3Tpa2Ki1eMpt6Q/KqwyHOVh+yAAAAABJRU5ErkJggg==)![Microsoft logo](https://cdn.sanity.io/images/599r6htc/regionalized/55b10f73164cef50520a37f76f3e9accc1d1f812-523x118.png?rect=0,2,523,115&w=137&h=30&q=75&fit=max&auto=format)

COLLABORATION

Open up your product development process
----------------------------------------

1/3

![cursors of different job titles hover in a group](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABoElEQVQokYWSW2/bMAxG+/9/1562h6BoksaL49RJHF9kW75btiWdwd6ypVjaEiAkEuTBR4JP1lpmn21+jf7t878bDY4Y+X4euJSayViMMWhjMH/67F3vbE/3SWMsfWkprpYuBzVY3HTgm9fiJj2tGqmajjCRRELSduoR8F8wKysTTbCZEEeN6gx5o9idMjaHkNM1JUokey9cvCibRcSHCrU2ZGmL6+TsHcE5yIhFwTkQ7H6e8fyIRBYEeUaYSzo1fDayRU8DQgi2jsdqfeBl53MKBGVa0xwL2mOJkJK19HHKC+2k/sIeA8eKKt2SBM+kIiKXNVXdMcgevS7QK4mMJFt5WoDN1H8GZAHW4hkZ/qCpEpQaKeuO6yXjsglJHUEaFfixIEizr0YGYyaqUuB5Lo7rE8Y5cZyxc3xetsdll9coZ+cGHN4i6qb/HziPeoPOqV6NXMIM9y0iTiR1HJG/bkgPB5qqpukUmazIi5phnD5WuCTmwzZmKVTDyDhO6Cxhel2h/T1Wvd/Zw8O+D27vvdlBYcoc01RYrW/Z9zV3fb8AQGJR5wcFQ48AAAAASUVORK5CYII=)![cursors of different job titles hover in a group](https://cdn.sanity.io/images/599r6htc/regionalized/79ed547b315bbde1ae851cd51f3cefc76a6e07a8-747x427.png?w=586&h=335&q=75&fit=max&auto=format)

### Break down silos between departments

Source great ideas from across the company and get teams on the same page with a single source of truth.

![Illustration showing code-handoff tools in Figma editor](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACX0lEQVQ4ja2T627jNhBG/f7vVKBosb+arrNJmsaXrO0osu4iRYoXkZROIWc3+wL98WEu4BwOZjCbZYE5elx/Zqx2GNUxjgatNeM4Yoy9ac2t8S+rcc6SUmJZlk9tVmBwBnHeUu++IMoM2Qtk1zD0H5J9g2irm1Z/EIK+EwxSY41HCkkvWkKY2KS4YPqJ+pBRPL/SZz1j3eCqHfb6gMrukZevDG9bTP4NX+3RdU2TKeqL5nqSPN3veX5+YjSKTfAzsgiUR0N1NIj3CVuWTNlf+PMfjKcvyMPvDLvf8Oc/icUDOi8ojorrfiTfKY7/5GRv73jv2ASX6HJH9d3SZxFdJWzTY4sXfPVC6M/Y+sD4/oCvdwR5RZWC8lXTnD0ij+g2MrnEvM5w8ivQUx093TkxXGecsETdkUzL4iSzFUTdMJuWZAd0M94aaL5HRLZgOkiBj6X4KVHUnkvmyYtE084YPTF7BV6y+IHFq5td49kphDBc3h1ZHiirGSEXQvixZTMl9o3nLvdsy8RLN9Moi9ctaWxv4GQlQdck0xH9SCEt26vl7hp4bGbe1IKLP4Ehsus0d6Vi2zhexEQ1DJguYxI50fRMqsa2FyZ5ZbKSqxzYlpK/K8NjN3HRERfnn0DPQeZs+xOPKuMwlrSmZVo7Gpvb/JLpibq6dRydoFAV37oT9/LCs76SuR6XwgfQJs/J5NwPe7Zqz7/jida3pDDCNLKsCh92jdOkaWzNk3rlq9rxoI9cXMHKuQHjnNDR0oWBdhoQQeGSY15//FT89Ne8Sx4R9O39WrfWr5wfp/frDv8P/QeGnOBhdUQ3pAAAAABJRU5ErkJggg==)![Illustration showing code-handoff tools in Figma editor](https://cdn.sanity.io/images/599r6htc/regionalized/c79b5a5af689856a431c8aa069bb7044f5fd5f43-1680x1120.png?rect=0,80,1680,960&w=586&h=335&q=75&fit=max&auto=format)

### One home for your product teams

Jam on ideas, diagram flows, and review prototypes so your teams can build products together—asynchronously or in real-time.

![figjam board of stickies in "what will we" and "how might we" columns with reactions to ideas](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC4klEQVQ4jUWSSW8cVRSF/WP5AUhIbNixMJssIoEEikg2bJAIysLEThzjeAbPdmw33bZ7rLGrq2t4Nbyq9+rVh9w2ZHF0daWjT+cOS8a0yEyTTCsiV5JMa8q0odEtbftZjTYUqSb2JaFTENoFia+ocoNpPvuWHhoxr3HvBdY/Kd5dRuLXqLLBaI1RD9WgqobYk9jdlNFVhNVJmVvyEajb/7W0SCgezNXCEDsV+VQg/SGVe0XtddCxhypqRKDwbnLGxwLnvCAea+oMdPWfWpZa01JlhnhcE3Ql4W1Fej9BXL5GHD5DnPyAGO4ghSAPWvwTxXhDYm8XRN2MKspQRYkqNapcAA1lUOEfpYzWIyabKeHRLcXhT8i9L4kPvsHtrZAmEZnb4u4bJmsVzkaf2emf5KNVVPA3WgRPwMYg3YzZ3gzrjynWWsj8rz7y5FeK3WcEWz9in++QeAmZa5ietng7BbODj8Qn31Jcf4Uefo+ObhZ7XySswork8gGaMj3Iia/niM4V9uY+vTeH9Nf7hN2CYmbIXBDDguJunbrzNU3nC8xgmWZ+iS7N4w5VZihsTXZfk/UVhasRk5LxTszN65DblZTgskbOa+q0oI6maHcTM3yOGS4jrZdEswsCkTwCddaQD3PSTxH5dUpt1ZSuIThrmHxQ2B8boo5Gug5yuIvsvn1Uf5PSPsZyDtm2dlmx9lh6eEYVK9LTkGB1TLruUX3Kka4mHRrmHcO81yDsmsq6pjp/Qbb7nGBrFW+/j3eRcn434NXgLd/d/fKUMNaUZwn5mk/+LiQ/zRETxXzUEFgSJ4yZJTEyuKO+fYM4+x1n+5Lxqsf4Q8rRxYifB6ssD5+AjWjQtxJ9nFEf5+S9knii8HsNzqRgEPu4WUiRBlTTLmLQZXo8xX0f4axn3Fz4vLdP+c3begKWBjXTaEehHEUdamRsyMOWLNaIvKIoK+r88SDZyMc/yLDf1TgbDd51tZjCSkP+BfMywb9gfclPAAAAAElFTkSuQmCC)![figjam board of stickies in "what will we" and "how might we" columns with reactions to ideas](https://cdn.sanity.io/images/599r6htc/regionalized/c1798034d37a0fa824c3ac53c678ff1dd85cd019-1560x1040.png?rect=0,74,1560,892&w=586&h=335&q=75&fit=max&auto=format)

### Better feedback, better products

Get clear feedback early and often so teams can focus on iterating quickly and moving from idea to production smoothly.

[Learn more](https://www.figma.com/figjam/)

### Forrester: The Total Economic Impact of Figma

Companies that use Figma see a 60% increase in designer productivity and a 30% increase in developer efficiency.

[Read the report](https://www.figma.com/reports/2024-forrester-tei/)

> Figma allows us to solve problems on the fly as a team. That helps us get our products to market faster.

Andy Ford, Global Head of Product Design, Kimberly-Clark

SCALABILITY

Stay agile as you scale
-----------------------

1/3

### Consistent product experience

Create a shared design system across the company and build products more efficiently.

![Image of an organization, Acme, and it's various workspaces](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB7klEQVQokZ3I22vTYBjH8TdpWMtgOsxcLiYe2gk7uDZzdDjGYivivd6KghfTTRTxgBdu1cFWp9TZbRUv2tQmdV0PSROrtM1yfN+k4H21/j2SjlEQBPHHlweeDxgcAP4RbPwsNnbGvRN+bPIf8o9ggwMALNDYyh18+zGeeIjvPsXTKzgbc8vG8Oxqt9iRrPbk1SK+QGPgRpTY3ziGMsPqR+o7T/0QqbY41BbIn9JwR6J+SVRHotoi2RbITlcOqySOX79CACZMvo9dbRQWG4VlvbKM5Pv1vdtfuZumeBdK7ovkpfrnW9/4nkBpaWf9GjNLgpnQuTfxF5ZRh1YTmk1kKXJ1vyrsQbNpQwVZimMrNbkoVwvIUhBUbKg4sPHubWyGDgB6yr+x/lLTVE3TDg5UVdVKpXKxWNJ13dB1TdMM0xAEoVwp60czdG3z9dp0cBRMBwOb8TVomQhBy7Icx6nVvoiiCKFlI4QQbLVckaQqhBAhaCPUcuytRPxi6DyYHDv15NE9LpfmOTb3KZ3nsx9Sye1kgstleI7lcpk8n02lkrs7WzzHHpbn2efPHlwYPw2GyP7QVCDChKOXZyNMOMKE5+fo+UuhP2WOjnYl2hU6OHryRD8gCMzbh/u8Hp+PcPN6ev1dvH044cEA5vZ/A78B26f5xN6fgd0AAAAASUVORK5CYII=)![Image of an organization, Acme, and it's various workspaces](https://cdn.sanity.io/images/599r6htc/regionalized/1ff1e537ed716e913be7834d65a8f944a31af84e-1600x900.png?rect=13,0,1574,900&w=586&h=335&q=75&fit=max&auto=format)

### Flexible structure

Organize Figma with dedicated workspaces so every team has easy access to the most relevant assets and shared libraries.

![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAACiElEQVQokX2SW0iTYRyHp0YpRiFFaZjZEbrpRrqIiq688UqRwKCsIEnqrkgSrFVW2EWRUVaYUDcdrGma87S5pTuZJ0ixPMzY5g7u2z4356Y4p0/sS0UpuvjB7+WFh//7/h/ZolFGNJhkhNoSGKg6jPLGJRTXitGWncSuSCOij5Xu/5fFJYZsuSwYZDhrU9GUnUIpL6T1bj7KmwX0VpzA35LIvF5GWBcrZV4nk85z0bM+loUlRpS1AozoYxh7e5C6kss03svD+PQIdSVnaSrNZuxjMoImDUF/HEF3FKFtJ6JqPUJzPKIqkbA+bi0wmoghBrsinebSM3y4XsBneR7VxVdRPb7IaEsOru93EK1NeC0NuPqKcGsO4GqMR2jZIE29Alz9DzOaeAZfH+LLrRwUJYW0PCtnsL0Gj0VNYNJMKBhgdjbEtKcHb98F3K1b8atiiOhXPTmsW8e0ZiN+dRJi6xbMn1LoerWf3ve5mLuqmXBYcbtdOJ0ORkZGsFptBPxufLY6HPpsRPXmtUCXcjsdlZnUPjpPzcNzND7JpOvdMWx995ny/sRms9Dd3U1np4mOjnaMRgNOh51QQGBi6A1CRwbzSxZIQGtdKg3luVTKi6i6fYX68mz6lfl4x3XMzYVxuwV6enrp7PzG4OAPhoaG8Yoi4XAEr+0rHlMm84ZVSwlq43E0pGBW7GOsZg/W+lR+tWVhH64nGPAQDIi4HBbGraOIHidTPoHQtMiUaMPaX4lTmyGp88+lRDPbHoelcS8j2tNMDDzAZ36Bz/ycydEKqfvHXkrd0SdnuDWL8aZkyce/tFn2cU4XJ7nlVScR0O1gxpTOjGn3Uv70kHEXU+3b8Ko24VMnrJnwNyYdhkXvm7f/AAAAAElFTkSuQmCC)![](https://cdn.sanity.io/images/599r6htc/regionalized/f1e6951e361d1789ac254f0b3be95308b3a872de-747x427.png?w=586&h=335&q=75&fit=max&auto=format)

### Optimize workflows

Ship products faster with powerful plugins that enable you to streamline processes and reduce repetitive tasks.

[Learn more](https://www.figma.com/design-systems/)

### Datadog saved 100 hours per week by using Figma.

Datadog built an enterprise platform by inspiring early and meaningful collaboration between their product development teams using Figma and FigJam.

![Logos: Datadog](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABMUlEQVQokY3SP0uQURgF8FdBjCSkiFoUDKUMWoLUUlz8gyWtIjhEi2tDNEXQ1Bz0CRwamoxmwQ9QIIJDS4tf5PzixtWuwqteONz33ue8557z3Nt1zUCX5N+MW5jDEtbxGi9xp9ZP0Tsa0gAe4SO+4jt2k7zBWCuWpF+wcVdwH5+S/MQfHOIDxs8l6XpdtsQkN7CF/STHOEryBYsYLSkabtcXtcUgntbIv3GAH3if5AmGe11q+tEQruMFviX5VZxiB+8wX+td+19f707W5TbfYq+I1v5tYAGTV3Lof9Qh3MUrfMZ2kmd4gIl62LX6GrrLBMtlTOEx1pJsYhWzmEkyU2v3kpzGvkjwdn3QaxUrWK6iZf08SUERvnmpYJKRGqvEK70q3wXTeFjn6SRlr3DPCP4FKqpFXJSTdRkAAAAASUVORK5CYII=)![Logos: Datadog](https://cdn.sanity.io/images/599r6htc/regionalized/fa4817953432859504521522e74a9fa72ce991cd-600x344.png?rect=0,1,600,343&w=313&h=179&q=75&fit=max&auto=format)[Read the story](https://www.figma.com/customers/how-datadog-built-enterprise-platform-scaling-design-system/)

Built on the Web for a seamless experience
------------------------------------------

Collaboration tools should be inclusive, speedy, and stable. As a web-based tool, Figma was designed to support real-time, multiplayer collaboration on even the largest of files.

[See why customers trust Figma](https://www.figma.com/customers/)

SECURITY

Protect your ideas with advanced security
-----------------------------------------

1/3

### Centralized administration

Manage users, teams, billing, and shared resources across your company from a single admin dashboard.

![A padlock with 2fa, SSO, check marks all signifying security](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACvUlEQVQoz22SS08TYRiF+3OMcYHGlUFEE3WDkqgYxYXIbVpAIEYT0YAoQjFKRKHTTksJhdJaEUFRBBJEpwgFalG5lHhBBUm53y/Lx2+mLl2czHzJzPOe93zHYLJvYbKtIFVHkOQFspRFHjV9ZUTtZr7Tw6+eVzxrD3G1dhZJ2cbk2MFo/5+2dRmuOmcweyao8A7z4MkIJQ1hKn2f8Hd2EG5rYLijlfrWIa44BdCuAbUfNzEp67qMyoY4b+mDNBnMnnHa3w/h7+9D7R/A1zGIuSFEpTtAjfc9slulwNJLWkWYdMsKOY5VbtRNUeb5TvmTH9xxT4phc5jEEN1huWeMN+oQHwJ9+AMBHVjg/EqWPEO29Q8p5iAn85tJyH9JclmYK45p6tqCqOLbodBHutQBzI3jGOVFMuRVDNdq/3DPG13z4dMvlLi/ketY0PNKqYyQkPuC+LNmjpy7x4n8NvIsE3jfDBL82Mf4WFBs1s/9xi9IlggZ1YsYNKtZyjImywwmOSIuaAnJtqbnlFw2xqFTt4k/cJq42CQOJpWSUh7irsi5uimI8lxE4/tMUe0oN5VRbshhDEYRpKRsiXyWSX08R+qjWdKq5smwLHGmMMD+YznE7D3Enpg49h3PJakoQGbVNNLjSYxVv4WRaW7agtidTci2FuHQEb1uybZBmrB8SQNWL5FpXdcdxl6oYPfRS+w6fJHY8xUkl47qg9OqFkRma0IrFDpCuBq9KK5m4VB0SOviZccKefYIebYp8ZwVt7mmuzxfOkJiQQ+J13vE+6juPl0MlqyreoVM9g2KXePUP2/H5uuKAjVYqecb9pYgNS0BrCKbYvdPsh1az8QGymZU+ibrOjDTKnLWuieyjgJfCWCHBtwWPVrA9XoY1f8Wv9rFu14VW+sYuc5VUeadqJN/xf0f8JZrgrqWTmRfN38BVCB9qFNaD80AAAAASUVORK5CYII=)![A padlock with 2fa, SSO, check marks all signifying security](https://cdn.sanity.io/images/599r6htc/regionalized/2786b779d098d97cb8340936a023716578cbc996-1500x856.png?rect=2,0,1497,856&w=586&h=335&q=75&fit=max&auto=format)

### Secure access and onboarding

Deploy Figma company-wide with confidence via SAML SSO, SCIM provisioning, 2FA, domain capture, and network access controls.

![Admin settings / teams screen with members below](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB+0lEQVQoz32RSW8TQRCF/XMJcAMhEGI5I35AlCCxxhyAmC0cUIwJCAQCxSgSisc2sWf3OHZ3z77k8Khqe6wIBIenqpqe+qr6dePcZoILdxUuPxCnJFe6cloP/8iX9cV7CufvxFjbyNC4dF9h/bWP7fc2nn+w0drj6ODFx4XefJlid1/h3Y+IFC5jhPYy3+2GaHYErm0prG0S8EZTYOezg97AxK+RRbIxMl2MLU8rOBYI4wxxWiLJKh3jtNB5kpVQUYbvhsKtZ3IBvPlY4O1XB47jQcxnUEohSRLEUaRVFDnyPNfx5KSiPEOeZTovywJxHKPbF7jdkji72vCTDdP0EAmBLE1RlKWGRvRzURTICMA1x5iHxYs8pX/DMMK+IWhDgTMbKRrXm3Nsd0boG0dQwQShFJC05XQ6RRAE1BAiok2llH+JbyOlwsFghvWdY1x9JAm4NceT9hA/D/uYTmxMfBeWZWM8HsN1Xd3EQAb/S26g8K0n0e6qBfApAQ96QzgTF67n0vVN8tSBIAvYv5IsqKpKiy2oa46LukKal4iSnDwkYKtDGxoE8Wfw/Ak8gs5mc+1T7SE3s9g3HsLA2tv6jB+MHmWOl3tH6A8c+L6ka/p0ZVN7WG/HjZyzGFgP4pyB9Rl/18BXBBwSMCCgZTkwjB5FazW9ftH/qR76GwFiGvDJsfnRAAAAAElFTkSuQmCC)![Admin settings / teams screen with members below](https://cdn.sanity.io/images/599r6htc/regionalized/d033bb86d601db20bfe19316e8788b047ee5be1b-1500x856.png?rect=2,0,1497,856&w=586&h=335&q=75&fit=max&auto=format)

### Granular controls, greater visibility

Fine-tune settings to meet global and group-specific needs and get insights into activity happening across your company.

[Learn more](https://www.figma.com/security/)

### Keeping your data in Figma safe and secure: SOC 2 Type 2, SSO, and more

Security is part of everything we do. It’s top of mind in how we work, treat customer data, and develop our product. Learn more about how teams at Figma work in order to build a platform that is powerful, fast, and secure.

[Read more](https://www.figma.com/blog/keeping-your-data-in-figma-safe-and-secure/)

Connect your favorite tools or build your own
---------------------------------------------

Streamline your product development process by connecting Figma to the essential tools in your tech stack. Or build your team’s perfect workflow using Figma’s Web API and open platform.

[See more integrations](https://www.figma.com/product-integrations/)

[![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAACnUlEQVQ4ja2Va08TQRSG+aPKB6PGGA0xFChUI22hmhAqCmqMwbs0JorRDxoVA0Ziwh3EWGktbfcC3Uu72xbtZbeP6baCljZo9MMzZ+Yk8+6bMzNn2/B38z9pqw4VX9c/Q12njfpil4EqPX+Ov7bvp+iuw7LXRf58J5lznWQ8HWT6Th9I1tNBqb+zwWF9op49w6y7m2fuPiZPneDx0UMtOMyTY+1MHm/n7ckjiO7TWN4GQdvnQvC6eTF6lUcTT5m4Oc6d4DDjw0P7uB0c5uHYFULXxng+dIHI+S5KXlejYBfasJ/Im1ckpS0Sgsj6p08sr6ywvLz8G2tra0QiEWKxGOHpKZLBAIX+JoLGSIDt2Rl2cllM03Q2bGxsEI1G6kQdqnlRFNmSZWJLC3y9dR1joNfR2D2U6iJzaRD5/TSmYZBSFMeFJMlouo6maXVUJ+q6TjqdRpElkm9fowYHnUNtIjhD1jBQFIVkIkE+a2CVvlEuf8eyLWzb3qVSqVAsFtFWl9DGhg4QVFWS8Ti6EEXZnCWVWsIwVXK5HDs7Ow75fB7TNEgtzaO3FpzGzGQch5uxOF/CH1mcf0D4c4h4fJ14PIkkiUiShCAIiIKANPehhcORAFuz78iaJqqmsZkQiMrbfEmuomwvYOgSularXVrfi6nFuRYOg37EqZdo1a9uxohFo6Rzeb6XS5TLBaeGZdumbFkOlm1TKBZRm9Wwen+yAQ/CzVGEJyEij0OEX78kFdkgK0sYkuhgyjVqcwk9mUCcnkIdCewXLPm6yPl7MPxulIFehJGLyPfHST2615Lt0F22blzGDHj27uGvD7vidWF7XVheF0VfN4XBXgqBvlpspJ4vDrixfE26TdOGWc3/KY3dZh/V/N/wq8P/+Qv4AXx28Lkx/p6bAAAAAElFTkSuQmCC)![](https://cdn.sanity.io/images/599r6htc/regionalized/fcdcf714f47e83eda70bcc80e160eddcd8263fa0-720x720.png?w=360&h=360&q=75&fit=max&auto=format)\
\
### Microsoft Teams\
\
Connect Figma to Microsoft Teams to add files to any meeting, chat, or channel.\
\
Learn more](https://www.figma.com/figma-for-microsoft-teams/)
[![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAACbUlEQVQ4y62V21PaQBTG+ePbPlk7fehIZyrVdqb6gtqiEsBauYlX7iBjgEASEskFEoqWUOTr7iq2mEEfysMvOdnZ/ebbc3ZPPKkQME889HHIjf+biY4ndf9BOQoDxxMiz0PnT9ZORB8cJnZ/Y//bL0S2rhHesBH2d5/l+2YP8Z3hI4f3Aec3sewr4633DIsLHBZe+Gfy+uUGFl9twvtmH4E1Gcng6JFg8BZBv4JP68dY3Uxg5fMW3i+tYOndR4JvCi8Z9334ghXfOlaXA/i6xiO+O5wWTBLBaNDE6YkAsXUFUZJQLBaRyWRc5PN58DyPer2O85MK9gIiYtuDR4LcLZJhC5Wiin6/D9u22YLLy0tUq9Up6Lgsy1AUFRelOg5CNfwIWETs9m9RqMNEqItyQYFt9aBpGnPRarVgGIYL0zTR7XZxpWrIp0WyO50V1SV4QQXtO8Fms8mcOoMBBoThcIjRaPTAeDyG4zgQqgaSEeNpQV3XIQgCJJLLRqMBgWxTURRo7TajQx12OmweX1GJoDlb0LJs5rBWq6FcKiMeiyEWjSKXzSGfyyGTTqNEClYoFFAskHdWeEKQFKXXu3NItyw2RWRpddMZFouiSNwKaFLXZAfUfaUkuwVpheJcF/lzmSTaIItlUk2BuLXQI3lkuXRoHh32nnBzc406r7lzSM9PdIdco4iE06SEwyiPk9QFpGYbhm5D1ywYms1ixn18pZooZmXEON0tmCCn/SDwk52pvS0N+zsSjqIKzpLtmZzGVSQiKjFjs7QxwX8vNoXlc3dEcJAIDmbDTWKH3WVXt5lHc53qNvNqsp55/wL+ABpBcR/8OtWiAAAAAElFTkSuQmCC)![](https://cdn.sanity.io/images/599r6htc/regionalized/09cf91a5e507fecbf88a0e85866abe7e6f1811d5-720x720.png?w=360&h=360&q=75&fit=max&auto=format)\
\
### GitLab\
\
Seamlessly upload your designs from Figma to GitLab issues.\
\
Learn more](/community/plugin/860845891704482356/GitLab)
[![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAACoklEQVQ4y62U6U8TQRiH+UfVD0aNiRJjuNriBaXFhAAioIkETwQxgMcHCYqCEU0MtNBIsN1S6F6le7C7PZbudtufs9vSQI+IkQ/Pzsy7nafvzDs7Tehpx2nSZD+K3rb/5tDThPKggs+m4+SU5x1KKxnmu1uRud0C5RbhxjUonmYonQ3wlEiR35ldLVUZljvizetYcbfjncuDuauXMXPxDGYu1OHiWcxeOoc5wucr58G6m2F1VwkL3lYw3S58GB7F9OQbTI6N4+lgP8b7+2p4MtCPlyP3MfVgBO/7ekHdaYNJVlclbIM04AX1aQE0l0CcYfFrcxPB9XUEg8FjhEIhUBSFWCyG30uLoAf9yHXVEapDfuytLCObTkHTNGdCJBJBNBo9hh1nWRYJnkcssIrtxw+h+tyOo1IUe6Dc84H/tgRNVZEUBCcLjuMgSRJBhOy0JWRZhqIoEHgO9JcFiIM+p6i1QpJhiggFIozH48hkMigUi8iZBehGAWbegmXZFFAkcdMwIG0EII32/V1I0zR0XYeqFxGgLazu5sEIGQjiPkRZRSqdJe8PIIeCkBsKyZJTqlIRpsmkMG9g4oeOt2tZrG1xCITCWNsIIxylIcmKk2EDoR+J71+RIgURRAkMw5AlZ8Htm/gZPcAWq2OXFUFt04gQWZzZg6JqkBsKybFhF+chsQzYnRh2SEXtPTStorN/uTzBNHGQM6ATcobdz0Gst4f2+Un1doIZGwYzOwVqZgpbH+eRpCLQSCU1joXKs6TPlsblVqbjYJcXIZLV1QhNQrqnA2qPCwI5V8zQXfAT40i+foHk9PO67L16hsSjIWgkmco5PPphF8m/FAgWwfC2I+d3EzzltppS3PC5YHnr3DZ1L0w7flKqb5sa7Pi/cDTD0+QP+Y/yHag8B+oAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/02e0444c1a1554e2f6dc79baa76b03caf6185dbb-720x720.png?w=360&h=360&q=75&fit=max&auto=format)\
\
### Jira\
\
Add live embeds of your Figma files and prototypes to your Jira boards.\
\
Learn more](https://help.figma.com/hc/en-us/articles/360039827834-Jira-and-Figma)

Bring Figma to your company today
---------------------------------

[Contact Sales](https://www.figma.com/)

---

# Careers at Figma

[Skip to main content](#main)

*   [Figma Design\
    \
    Design and prototype in one place\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC/0lEQVQokVXSbUhTYRQH8GNSqAilpXVf0rnNLbd5l29ZWeYMnXebbvfR8kMgFASJhbvqnDrtzXwJoohczm2SmVFQVJaEJWaElUSgkVhkRCFWVpYkEVm7T1zR0g8/Djwf/pzD8wfWMBWzCPtdYWJn1nB6HGBifwE0A+RnYCika6GYjASbTALtNRY4nKz2d2gVy8TpKWahNHItlEkiADaYu88vlGy+27o5p79OZ3qJWMMUzemxv7IAQznTDTY6CoqCV4GVIAOtBJlgJchcK0Em8RQVlAsgvgOoUcuPhTTIM81w5ycSzTf7UrOHCln2O2kyYlCZY6AeAHiKCrTJIlMqYmTOSrX8UUWMzFUWFZFaHE4EFcCy2UD8n+vf1CDvz0RzV0+6cdS4Kx0HQByGYio6yCaNTDm6lXGdKUgb81rZP8496ePH0rSecrkktYSmg0CDvMK8WNQ6O9Wo2SeGarmOMZ1poOZ04hfpaFjD8jJCtqlSJTvr3K0bu3Ol0Pd0qEbo7Tzgc+3LGK+KjXbzFJUOKnQWz5kNY7g2cUOfBrlxLGqb3G6877yofZMyvPqUopyQ761iogfbKnJ8gyNHhHczTcKzV7XChYOcrzpO+ZynKAeokUuYp0GeuQ1dPvF0hmv/oDM9rGuJf696EX483EbIsyrV8qsthZnfHvSUCMNv64X+vjLBa2WnHFrFdZ6kdoIKNeHFnFiNmrEGuX8nWK4/1plG8ou24WC8MtCPp+Sh5XIJV58Rf8NrZb9ebtiJW0uNU41s4i27MiqPJ6lVoEGeP4u5Z2JR63S85erQluwn1XrDpIzegf0wYMhFVeIvh9gVUVx1nPLaoQ2q19Vxyk67UppXQtOhCAAgydx1b4HeJPPt7uSc3nNiZfSGT+sserwUBjDUqS6Bg14P+8PCxL6F8CTF8iRVwpOkyUqQKx2MAkoj1gJkGj5m/jeRqTd8TjOw05rsLCHEnIWXQAeARY+hUSwuScPRrQyc3JECdqU0wCaTrLArpYEnLBuhNpWZLfZfsj9e+lps4aIAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/8b823444edce5f6c81fbd959301a33582525c23f-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/design/)
    
*   [FigJam\
    \
    Collaborate with a digital whiteboard\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADPklEQVQokTXSXWhTdxgG8L83sotdTL3ahWuFzjGvdueVCN44wWqd6Ww3xImBUVawIBOllCp+oBfDDSm1qSUfzcfJaXKanCQ9aZJz8j8nMTmJiZto7dKYNF2/WVuVxuakpu87jrDLF15+8PA8BDLynsUQ91nONrxPS8SON9LxsRxvL1/oN841XTxa+bHvYiXrt1UaanwOM7IIKu2sP4nvxdKz3beuhJrPdTDdbe1Ops3g4k8bHD4CKr1R8bP9kYe/3az43OatZKwgMIO1Y12ntE+/PaQd/fmkFnQOaPWUqGFGroBKH++otBuzivE5G7l29TI78d250eVWw+ib1nbbug6uLAa9K8rQw9W/3aMb75XItuwZwbPd3+P+499g2y8GlNhh3E5LiBm5rv+DSouYkQsLE+Lsg/7xd+2dDjx11oGn2+1IIEtxkwpY5Bw443XgphzGJZEHy8BduNrbBZaBOzAf9YGWjEEtEYVGSkJQqY7jWkxC1wMee7qZxoWfHOtnOmwFAgkZQJHhXViAWZaFVd4P72kEygEW0nYTFP0MbtIwrAg+rPjc8FYMwYeU9BHfiE3CNDeJslnQ3L8HpctdbA+B23mA2znQbqqw9GsEyr08Lll4LHlcmLeacM7HQpWGcT4whlOMFeYDHtiMh2Eh6IESx8CbmID1JK1uKfJIkaNfkbWWZzjTIoHawoF4wIHpw+6dQp93+4XN8kE1D0LR68S1SADK4wz+ZR/BEufCt+IEzvrc+g2LQS820lIVn8pDmI9/QULEjjfIFeggbXCeGHDo87sb5Z5Afj0UmloWuK1/+DEdgZzVhHTwD5zxOHBLjuDyxDjmbcPw2uvEejJWxYxiqiXEZnKP9OIRchj2kT3wNfkSez4xvnreyt1CJTnYUKVVPe6KMA6FMTvq6DQ7iv9O8jjnZ/HJ8ABMuaxYU6JVzCqmnXS8iTwi9/ES6YQT5Bj8sOsM3iHXc+mDHiPGE32QpQt6o42UBFoihhvR4MeoOv7Cacas+RG8dFlwVfBVqzRsqinRJjJNFEwRHkTCAt3lxT9JNLd8MGMEqvRBhi6gKusTAX0mOv5/3PmAR4eg4mfxpctafcXYTCXO1fwfvPx7+MfCvOMAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/64c5beb99a9fc5a0b00dd4882ab1f6a915ee0752-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/figjam/)
    
*   [Dev Mode\
    \
    Translate designs into code\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADNElEQVQokXXOXUxTdxjH8b/EBV9udrO4ZFm8mAEzlJlsTRbjFcsyMzDBDJIpxkklp6MlEiYwSmt9Q6tYakvX9kB7KJHhVDKYAkuLPbQceg6nPVRPC0vEKDUiBZRiUbgwkedZrJpd7eKTX/JcfPOQby+W6g1URdWA/grlO9+nokvUlCFfQVn2HqAGDd0q37k/Vc4fVCpD/leU9fsyavDUVdXQmR7qEnVMXXy6tGLXX0cV2xO6bLLWSRoTPxNiqFA2Xqu3eUesgRjvFOTeOlqmS9TyH5pmmWsNyrxDkHtrnTJdopGvV7XIozZODtn5eJ/eEzCp62pKtQc/JYjEgkoytXqEkFu6zsYRCzsluqIYYWQIXvbjgOF3ZJsH8e3tDgbMXhwwdCLbfAtFdwTCbglHbcPJIeN1/U2j8eM47s4KPa76gEsr15OxdkkX6YhNSZ44Sp44hJm7ILZLEHbfhUhHFET3APC0Azi7CUJOC/DtNuDbbMi7LKlQT1MXP6U+JLw4Uiiklfv4tLKISJ74m+D9SEcMIx0xyPDEQPJMQJgRIEQ3wXDrHvBb88BvzQe/dSf4rTuQde56FfQVzPCzZVFhWSkK6XKRT5eLJOKJ6SRP/P2Ha2+j8rvgKHDOahi6/BH4zAR95izIaFmHQ46NEGC/AD75IwjLShDS5RmEM7ONY21S5sM3UYEO44jFj7xDxDDDIeeoRta2BQNtG4C1Z6PPvA68JoK36U3AcV+CsHDgv+ByORB35Und32dvxHnn2KroGn/pPduzcrXSuNKv71rhHb5V3lXzKnztc5j05+J471YYdm4G9rcNKNz4BKIT30AkdRjE9FEYSyszSEVVyXFac8Lqv9DPBC0s061qYkwFxYy7rN493NLdJffVS9Pj+1cXEqX4eKIIJm9/jXGvAh9Ev8PE7E94L1WJkyk1/pNSZ5bsdh0sOKY5lN/3iz2n/8SV3NbCwzm6vLzcJkXRtqDdqHgy2WBanKl5+nz+OKZma2BhWoMLD9W4OFONz+ZrcX6+DucyajPIZ7H6jdkJTdad6GuCj5DcbGAIIpJpqYE8n6v9cCmp/XUpqZ1bSmpxKalde7f/619Q0kYqSbDbkAAAAABJRU5ErkJggg==)![](https://cdn.sanity.io/images/599r6htc/regionalized/c86a9976203e3264f89a20c5fb534a0d845d5f1b-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/dev-mode/)
    
*   [Figma Slides\
    \
    Co-create presentations\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADT0lEQVQokVXMf0zUdRzH8U+r9e0XjcTSCmrgTpFDQOWOSU1xrY2Q4+t9v3cex0Ff7jSDknAWc25OIJokdTUU+XE0Dq4doQlTOuQ6Lu4LnNz3LJN+fWuNmdWarVw/sJCuu/erOdcfvrbn9vrrwWL1OizV6/Br7QZ8bNNSyLyW5h25uN7IL9GJt+doNtiUiE7r1dFTyYLjDKcriXC5thbucbuBW2kTudXiEU7Hn+U0psNcilXg2DfVOTRXtY4CYiYO6B+hau1ycj2dTj/uNyQSw53XEJn8Kq6EPN/5x17uen3GbpampHTLPumuinzpXluBpDG1SIVlM9IqU6N0d2W+xPzCGvIUZ1Db5jQqSk2iVckc1a1fQZ/vLUF8pBuIhBIJRV74Qw5ejg6e+9r52kdq8Z5DappkVB+0mlWN2Kbq+DFVY2pVl5ebVBYyZ+H4U+loKkxFRWYKDBnJ5NzyGF1qKKXESDdRZJIoOoV4RMaCPA319AQ83W68dPAYSna6sHFHD7LEY9AKPcg1esAu1W6aH7Xqf/ZaNv11qmrzv2P2rfhy7zP42/k8yNcPioRugESKTJjxU3zcS78M9dCFjj7yHhii3XYX5e1opWxjHxXwAWKLTcaa71vszZed+/qvuhqD1wZav4i95/yJzvQukPxBDDeg6BSgyEBgiK53NtDFVwTyPbeNwnsqyb2rjQymk6QR36BUywvE4GlKgt+9EvJwFqZ9WzEzXoXwhwcxG3RBCY2TIs/FZievLIYn/omN9tHVVytoYFsmNegexohxPU5LLbAJMtJNzUiyPQGGo88yeHcxbGFs/tvfbl+8OHdP/BPlocT58Bqcn35y6dyk7bORYLff7f8heLyTJvZXUcf2UjpUJGBAcKDD9hYM4jA04pt41FIDRs38zYoYA8Dwe4Lhyp83f2L0Nl9v4P7amk/LK3eGL1h2d1C5ow4Oczu9yJ9FveCH2exGnqkN64z9KOADYFCmGBT51qIyc7f7mL3ufcY2dN2hLRsszdn+rpItdJFWbEee8A7lC4PYaPQiR+jFWvEosoVe5Bm9YP8P0VvhwrpqxtLuY7n2+juX2YrLVpRXRrVCF+l5PzJMjfSAtQwpViNWi0eg58ehMR3GMiuP/wBsd/hhCuinswAAAABJRU5ErkJggg==)![](https://cdn.sanity.io/images/599r6htc/regionalized/d5088df6b4e9cf91d8a615901b5d60e1534ce5bc-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://www.figma.com/slides/)
    
*   [AI\
    \
    New\
    \
    Explore all Figma AI features](https://www.figma.com/ai/)
    
*   [Downloads\
    \
    Get the desktop, mobile,
and font installer apps](https://www.figma.com/downloads/)
    
*   [Release notes\
    \
    See the latest features and releases](https://www.figma.com/release-notes/)
    

Use cases

*   [Design systems](https://www.figma.com/design-systems/)
    
*   [Prototyping](https://www.figma.com/prototyping/)
    
*   [UX design](https://www.figma.com/ux-design-tool/)
    
*   [Web design](https://www.figma.com/web-design/)
    
*   [Wireframing](https://www.figma.com/wireframe-tool/)
    
*   [Online whiteboard](https://www.figma.com/figjam/online-whiteboard/)
    
*   [Team meetings](https://www.figma.com/figjam/team-meetings/)
    

*   [Strategic planning](https://www.figma.com/figjam/strategic-planning/)
    
*   [Brainstorming](https://www.figma.com/figjam/brainstorming-tool/)
    
*   [Diagramming](https://www.figma.com/figjam/diagramming-tool/)
    
*   [Product development](https://www.figma.com/product-development/)
    
*   [Web development](https://www.figma.com/web-development/)
    
*   [Design handoff](https://www.figma.com/design-handoff/)
    
*   [Agile](https://www.figma.com/figjam/agile-workflows/)
    

Roles

*   [Design](https://www.figma.com/designers/)
    
*   [Engineering](https://www.figma.com/engineers/)
    
*   [Product managers](https://www.figma.com/product-managers/)
    

Organizations

*   [Enterprise](https://www.figma.com/enterprise/)
    
*   [Education](https://www.figma.com/education/)
    
*   [Figma for Government](https://www.figma.com/government/)
    

*   [Config 2025\
    \
    Register to join us in SF or online: May 6-8, 2025\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAABTElEQVR4nO2QP8uBYRTGbyaTlA2JZ7B4VgP5ADblfzJRT5GYDIbHn5XVgoiSokgKJWwGn+r3dp96P8FrfIdf55yr61zd91FKKb6M+g9Uf8PhcPAN1G+gy+UiEAgQjUYJh8N4vV78fj8+nw+Px0MwGMQwDJl1jUQi4tfo2TAMQqEQbrcbp9OJMk2TZrPJeDym1WqRy+Vot9vSF4tFOp0Otm1Tr9cZDoeMRiMajYbsaN22bfHG43F5gCqXyxyPR16vF8vlkvV6zePx4Ha7sdvtuN/vPJ9PLpcLn8+H9/vNfr8XTqeTeA+HA91ul0QigUqn06xWK1mYzWYSqo3z+ZzJZMJms2G73Yp2Pp9FXywWTKdTer2e9NfrVfRsNovSd6tUKvT7fflWqVSiVquRSqWEarWKZVlyBl21VigUyOfzxGIxMpkMg8FATpNMJvkBwtdZfGF8ewcAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/eb42e1b3e5042d96d6d542fffaae917dfba25521-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://config.figma.com/)
    

*   [Creator fund\
    \
    Build and sell what you love](https://www.figma.com/community-creators/)
    
*   [User groups\
    \
    Join a local Friends of Figma group](https://friends.figma.com/)
    

*   [Events\
    \
    Learn best practices at virtual events](https://www.figma.com/events/)
    
*   [Customer stories\
    \
    Read about leading product teams](https://www.figma.com/customers/)
    

*   [Shortcut: The Figma blog\
    \
    Stories about how products take shape—and shape our world\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACmUlEQVQokUWS3U8TaRTG528WAaFVKFuFbaAFg2ChtbS2QpVCsaVfTjv9ZjqdmfdAQFFhDWK8IMYLdzd7+du0k81eneTkyXPO86FNzAj3Hij+m/dnFAuPha1Nk8yLMm9e6jzftHm0IEz6PNzEjDfvzwrTfmHmkTDlH+0FzQP8D5r7TbGbUbSrTQp7aY72DinlBuynHSIRl2m/Gh+enFXMB4XVNWFzQwgte8SaR+SBpnxCeH1IUW9zqmpctHOc6QU+D7q875nsJocEgi5TPoU/IMS2hVpBaJSEVy+Fx0uCNpY5633pmxOiOyZvu1WUk+fOiPOzHudO6dhNi9SLIbEtm41nLttRRV9XfD3v88epgX48YDksaCNvwhFhbU2xElYkU0Na7TaX5jG3hSjXBzH6hQbxbZvVVYdy3mGgn3BSaXHjdvjr6zF3V3vUik2Ci4KWSihapQFmrUs1b5JND3mdGVDI9snvGOysG4R+P2Ha78mtHDlcDww+t/J8dyv8+vKOT26ZZKLPg4eC1iwNOW+U+djIcWU2sAyLTHLAStgem+6bd5lbsJhfGBAI2iRiNmatzcdOlRunxaVlkX9tE1z0QtXqby3O3hW5ah3w46LOz+saF1ae/JsWSyHFkyVF7pVF46jH4a5JKmFzmLVplU/oVnsUcxZPn6rxd6M8tGTcwa73uLvo8vdNh3++Z/jz2wYf7CqxLTX21yg63Lomt2JxbiqGTYVRbFDI5jCODQ6yiuATYWJEOCpxJqWwDOGTM+Raylw6RzRKPSIR4WFA2HymKB24mHXFWf+UD5aiX6tQ3U9z3tPp6cLyitflcbH9895iKyok4i7R5y5LIRnLGIEmfR7xYkhYXxfSSaG4b9KpdLCbQ3J7QiDoSf4Xgayg7OYDxFgAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/1883a9ebc4ce697b718301ad247c0fff45c572c1-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://www.figma.com/blog/)
    

Get started

*   [Plugins](/community/plugins)
    
*   [UI kits](/community/ui-kits)
    
*   [Icons](/community/icons)
    
*   [Widgets](/community/widgets)
    
*   [Templates](https://www.figma.com/templates/)
    
*   [Developer docs](/developers)
    
*   [Partners](https://www.figma.com/partners/)
    
*   [See all](/community)
    

Learn

*   [Best practices](https://www.figma.com/best-practices/)
    
*   [Reports & insights](https://www.figma.com/reports/)
    
*   [Resource library](https://www.figma.com/resource-library/)
    
*   [Demos](https://www.figma.com/demo/)
    
*   [Webinars](https://www.figma.com/webinars/)
    
*   [Help center](https://help.figma.com/hc/en-us)
    

Careers at Figma
================

Figma is a design platform for teams who build products together. Our vision is to make design accessible to all because we know that nothing great is made alone.

We’re a team of makers who celebrate our differences and share a passion for our community. We’re hiring across our global hubs and remotely in the US and Canada.

Come join us!

[See open positions](https://www.figma.com/careers/#job-openings)

![A group of Figma workers at the front desk of one of the offices](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAAFf0lEQVQ4jQXB91vTBwLA4e9/0XuePue15z1Pa++5iqIto8omBEJYCUnAEAixgRC2gAyVPYwgQ8BAUEBEhcpQCDIdxx4GCKPQSr2KVQu92nH64+feV2h9skrL7BYdT3foW95h2LbNxIKdJ3M2FhdXWHu6wvriEvNTsww8nKZnfJKBsccMjDyk8/ZdstNTCBW5og72IcuoR9COP8f30WvcJn9BPPMLypk3JE29oHJ6h5sLz+i17WBd2qZ/yk75mJ3k0U3OjK+TNbpGZtcj4nMuEBPuT0l6HL2tFoSIVivHWv/NRx02DnQu83HbHIctDwlteUBau5WcW8OU3nlA3c17JDf34t00hHf3AoHDz4jqtxFXbMKgCeNSbhL9HdcR3FQKPHSpKAtbiDbdxie5hCOK07jKNYgVakJOadCf1pIZF4NKpcRZEY1PSRNh1k2+HtkgvbKWeHUwBSmxdFnqET78/CAn/AIpv9hOq7mXZK0BmUiEQhpCsJ8fMpEnCTI/MpV+RPi64O1+Ak12Mdkj61TM/kCtpZk8vRxTTgKjPbcQPvjnxziJgygwtVFnaiBJJUOnUhGjS0YZfgqDRkOOMYHsOC2nZRLkUglp+SYaH23StfQd3a01mIxBFKepaa0tRThw+FOOewegN2aTFK0m0t+NwKAgTkgU+AdHkpORS1VhAbnJRqLkoYSHyUgsuEzNqJ1vJiZpLUvkjPwLtNIviJO7I/zjmAMOLicJCQwlItAXZaAnHu6uHHdyQa3RUl9bw+16E5V56Ri1UejVKs7kFXKxrZdrzfXkx4oJdT1IgPNBRMc/QpAppUiD/AkOEBMZEkBGQhTJegXRchHladFYmwp4cr2IgdosOkuT6CzQ016aQkt5Jo1ZURgkRxA5/hXfY3/jy0N/QRi6Vs6NS9mkxaoIl/pRdi6R/htldFxOoeu8gunKSOxmPStN8Syb41hu1DNXp2OsTIXZ4InO5xAhXx1E4vx3jn3yAcKbiets99VQk6nD3/ME6QlRDN2qYLjtPINlEcxdDGXzahRblli+tejYaNZhN8cyUxWJJdmPrwMcCXH/F74uhzj62QGEvXEzLweruVVsQOLuQrDYg/OpaorSVNSnShgvCsJeH8lmUwyblljWm3WsmnXM1mnpzFNhDPfG0/UojkcOcdThU4SXQ1fYHaiit8JIqJczro6HkYtPog52J0/jQU+2mMUqGeuNajaaYlhv0rJq1jJXq6E7X0HqKT9Oujji4PAZTk4OCFs9l9nuqaS7PIkIsRvezo6oAtzQhXmSo/GiPc2Hx8WB2GqUrDREYWvQMF+rZqxcTku6P4lKL0QeTrg6H8HLwwlhe7SdreE2RtqqqMhJITdZT2lWPGUZsZQmKaiK96EjzYuhfCnjZTLGysKxlsi4kxdElVGEUeWNXOKO1O8rgiUeCP99vsb+ziovNhZZn3/M8tQYticPmBm5y70bV2jM19OYGsCdXAn3i8KwloZjrYhgwKSmoyiS/IRQDKf8iYsQER3ui/D+tz3ev/2Z97++5t3+S/78+Ud+f/2ctz99z4tvnzJrbWfEfIZHDXqmzPHMNBuYbTEy05LIYE0clzOU5OmDuGAIJksnRXi3v8u7vRe82/sP/3vzA3+++p4/ftrit91N9p/ZeD7Xz9o9E6vd57B/cw57dx6rXbksdZ5lqCEF8wUt1WcjaTgfTd05HcL+2jRvtxf5dWuBvfVpXq08ZndplN2FIX6c7WNj6Cq27kJWe4rZGLjI5uAlNgZN2O9VMNdVwnBLHvevZmC15DB4LR9hvbeZV5P9vJzsY8PawXy3mamb1azcvcLWYCOLnYVMtZ5lpa+CrTEz3020sD1hYXP0KmsP6lm+X81Cr4n53kvM91fzf6/yCZdbJWXWAAAAAElFTkSuQmCC)![A group of Figma workers at the front desk of one of the offices](https://cdn.sanity.io/images/599r6htc/regionalized/0ca0e0a02dd2d1549894062b977a4665985a2c8a-1080x1080.png?w=540&h=540&q=75&fit=max&auto=format)

Our Values and Culture
----------------------

Our values and culture are the underpinning for all that we do at Figma—we believe that a great product is inextricably linked to a great internal community.

![A group of Figmates cheering with balloons in an office](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAAEdUlEQVQ4jSXI21fTBQDA8d9TdaxIzVkKKAoMGLdxEYaDhQwYE9ShIEwu4y4yuamA6EDktonKkKvpUDi0CegEFYQAETQwBPOSl04dT6mdTk/9C99Op4fPy0doOVVNXflBGksyaK/Ood1wEHPNYSymSq60HOeSqZo+cz3WTiM3LrcyYbvIzPVeZu19LNweYGVyiKezt3j+YIJXi9MIGckZlGVm0HlUx2B9PpbaQlqrDtFdV4qp4jCHdfnos/Q0Hj+BxXyGm3093LtpZXl6lLfzdv5+dJN3yzP8svyQV0vzCPuiEzidn80t4xFmzUe53lCMpeYQVxpKMR4rJT0xj4TYPI4cqqLnvIlrvV18P2Ljyf0x3s8P8890L3/eH+HN0iLPHy8h9JRnc7uxhEftVSxeqGD63FGmugzMW1uZHrTQ12WhudZMW3MLtt4OxkZs3BsfZmHcysu7A3wY7OKv4V4+LC3y/vc/EMZqMxgzaJmp1zHblM+EqZj5vrO8vj/C2ycPWJmbwN7fjbW7hSm7lRfLi7z6cZoXU9/xctLK06EBnlq6WRnq5/HsJEJ98naaUuX0lSZiN+gYritgoqOe+UEbk9dGuGwyYMhVU5efyFC7kWez4/w6P8q7e/28mbnGqN3ORfNZmovTOZGjQYiSOJMV6U+nPplRYzlTnSeZajtFf/0FTha2kBmtZKdEhEbqTLU2jkHTcR5ebuTljVZW5uwM3LrDGdMpStMi2P/NFgSvDWvJigzgSnkmP1hM/HzHwkLfBWzGbhpK29DFxBHtJiLGXYQuKoCWg0mM1OZyt6cS26yNrqkJOs43c7owhux9bgiSr1ZToJJhMxTwbMTCh5/m+G3uDsvDVsYsV2nS55EZ7k2GXELhLjl1WfFcLUviW8MBGnpraBgdwGQ+S5U+jgPpjgi+GxzIVkoZqMllZfQSrxfGWRq9yu22WtqrSyhK2UWS3J/kCCna6BCKNBE0ZcVhLFBTV5lCrfEYRWV5JCYHErVnDULA5i/QRbjTU7ybsY4j3GgroUm/l7zdCtTyAEJ93AkUuxDksRWZjxhVqA95CWHU6WJoyFOTm7SD8DBv/AI3Ig1dhyDzEpEb6UpzWjhdJRpaCpWkx3igCNxCsI8LUs9N+Htsxs/9f/9dQqSEEq2copQwosLdEHuKcBWvw9P7awR54HqylZs4pvGhOk3JCV0UWrUnijAXtoe6Ig9xQ75NTFigmFB/V7ZJnVHIN6OJlxCnckMqE+ERuAavYBG+2zYiyELWkqZchz7BkdKUACpzwkhLkhCtckOp8iRW5Y0q1o9YpR9KhYSIcFdkcie2hzsSLBPh7r8KZ5+PcfH/DPegtQjBQQ6kRjqgV6+hIsWFihxvtFpP4vZ6EJ/siyY1iCRtKMkpMvYmhhC/05/IHWIUcheiw5wI8fsSJ5dPEDl/hOPWVQhS30/RKhwoUa+mImkjZZliUtO9iNdK2JMuZX9OKOn5CrLyd6DLjkSbKmfPriASVX7kqANIjZDgs3U9Ths+RyoW8S+4aNj9A8cJsAAAAABJRU5ErkJggg==)![A group of Figmates cheering with balloons in an office](https://cdn.sanity.io/images/599r6htc/regionalized/974a89e10081a58f3a6e8b0eff89a9fdf7fc4e74-1080x864.png?rect=108,0,864,864&w=360&h=360&q=75&fit=max&auto=format)

### Build community

We’re multiplayer people who love the weird, wonderful magic that happens when people connect. We build bridges—with both our Figmates and our users.

![Two employees in an office room with their laptops talking to each other](data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAANABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAMFBP/EACMQAAEEAgICAgMAAAAAAAAAAAECAwQRAAUhMQYTBxIUImH/xAAVAQEBAAAAAAAAAAAAAAAAAAAFBP/EAB8RAAICAAcBAAAAAAAAAAAAAAECAAMEERMUISJhof/aAAwDAQACEQMRAD8AufHEvWaL8ZWxc9FNhBNWbIx3lGxgPbNxxlpay6v9VgcFNd/zI+pmuq0bj0MIjrWDdoC+QO+cZBfdc8NVuFLuUT61ChSue8hdkeruIxs7ab1QEZmSZZil8/ZIvDMEuYHn1LcaBUezeGEafsXOFuHBX6J//9k=)![Two employees in an office room with their laptops talking to each other](https://cdn.sanity.io/images/599r6htc/regionalized/3d4e7db2ccc4b111ff8c1dbdacf1852f94a480ab-3000x2000.jpg?rect=500,0,2000,2000&w=360&h=360&q=75&fit=max&auto=format)

### Run with it

Building Figma is about taking initiative, being bold and charting a new course, not running a playbook. Figmates are building the future of design by tackling big, scary, exciting challenges like Figma’s future depends on it. Because it does.

![A Figmate smiling at the camera with a laptop on a table](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAAEdElEQVQ4jSXO7VPTBQDA8f0dvfCut9VVWp13dfbgdeEZnqJSJGBIypHC+QQI5II5RIKGIA+DMcbGxtjzzwEbbMDGHhhqGqmXD+BRWQiCPMf8Kfz27apXn7cfmRCJIkQiCOEwQjiEKxREGAngCg5hH+xH53bT5AzQMnAPTWgK+43fGRu7w712DZOKYiY71InJQQOjkSqpNlguylyRCK5wGFcohHMkiDMYwBkYwjk8iNXnodUp0OAcRR+ZxXZ3neBUnKmJJyxazKxVK1hzWRKrt/t4MNEqtfxaJ8qcoRCO0AiOkSCOYABHYBjH8CD2IR/m/l6a7S6uOGOYYov0TWxya1ZibmaFeDTKS5eNF9djCfHxONOzQ5J32ivKbMEgtkCA7kE/+l43bU4bereAecCD0dNDo9VBvWMUU2yB/skN7s1vsLwiEn/6jOd/ThOfe5ZYX1liaXVOerwyK8q6h4YwDw6itts4f+kCxcUnqVZdRGsz09EjUG+xU2sfpWN0Ec/kJg+ebbIa3yT+fJO4+J+J9eeb/B3fkNbiG6LM5Pej93qpaKgnNysVefpOrhRk0tBQjdrWjcps4wdrFE1kEdfDDW7PbbD073Bmnvjj/4fx5QWW12alP1ZnRJnBN0jrVTflVUoUOfvpOp6E5cwBLiuLuGzQUWW0UNEdoSmyRNf9TaIzErPTy8SDI7y0W3lxLZZYezTGxJRbcjxyiTK9L0CjQ6BMKaf5bDregn1Y8pOpk+dR165G2WHifGeA2uFZWsfXER6ucf/Ob8xrNayUl7DQ3Zm43Wego6tUyjOcFWU6f5gGZy+VNZXoy3JwF6ZgPL4Lo+Io3doqVNpWFG122tyj6Id/ptkTw2wW8JTL8eUfo++iIqEql5ORkyntPnZIlLX5Y2h6BjAa1PjVpfQrMxFKUgiqsgk2n8LcKEffXM2wuYloTyf6znYuqmpRlMlRlBRSUlSQOJT1DbtS06RD354QZS3+6+j7fHgtzVwzyAnV59KvTCNUk8FIdQaCMhNXZS5RdRF3bSoCdi06k4kmvZF6TRsFZYrE52kZpGYdkSov14iyJv9P6PqGcBvrCanPEKrLoac8FaE0mZ7vknGc24O56CBXFVlE1SWELVq8bh8eYQCnoZsL3ysTX6ZnUlR4WvK6jKKs3ncTtSeEXteIQZmD/twBdCeT0ObuwJT/MdaC3RhO70WTl4y9NANv4yV6u2y4DVbsag0tFRcSquI8LPVl0phbL8pUA7dQ9UapbGkjPz+bw/s/JG/P2yhT3qDp8Ht0ndqNqWA/tVmfUPv1TmyVRYTsFqKCk7DNRKxbkxg313DHWi2NdtWIsgohzDmtnSNyJUnpX/HOR9vZse1Vjr6/heqDWzGf2YO95At+zNpJ8b7ttBQdY9zj4snNGE9uhJgZ9SSeDun4q/+KNNnXIMoK26yklyr4NOMw25OTeP2Dd3nztS3se+sVFCnbsBWlIJxPoyb7M07s2ooyey8xq4758RhLv0RZuN6fmBtu56mvTpob0Yr/ADJKoqpM5yOSAAAAAElFTkSuQmCC)![A Figmate smiling at the camera with a laptop on a table](https://cdn.sanity.io/images/599r6htc/regionalized/0f6d127ea48146e758ef00382f6c5c8da568379b-1080x864.png?rect=108,0,864,864&w=360&h=360&q=75&fit=max&auto=format)

### Love your craft

We build for builders and try to make complex things feel simple. We ask why until we get to the core and continually focus on solving the right problem, not just shipping work.

![Two Figma employees sitting on chairs in front of a shelf with books smiling at each other](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAAETElEQVQ4jQXB7VPSBwDAcf6TvdhtL3Z703XL65pr3eqyR3Od6bWpReYTM50pmikiqCCEgCKIgCD9RFBBAVERUUEFUTHzocuet/VmD+3N/oDvPh/R3rqd7WUXW8lxXhwm+PD+Je/fHXN4sE0mk2R5ZZWJQBRvIE4knia5ucXu3h57Owdkk7scZg94tp1hOz7F8aoFUSrQQDrYxnZUzfO0l6PnaXazm8SW5ojMBZkJRrA5/ZhsAVxTi4TiCVY3UsTnksSEKNmVDM+2NsnGn/I2LkP0Kl7C8XI5+/EGsslhdtLLpDbWicVihENBpiancLt9jLi8eP0hpufn8YWDuDwC0x4vmUSSrdQa6ZiHo7gK0X8vSvi0L+b15kOy6yOsLC4w648QCUQJ+6N4hSmc9lFsZjMjVhM2q4knViM9wyqEwCDpVJRMYpmN6Bj7SQOiv3fF/PlMzKv0QzZiQzjNZtofSNE+0uI2hxGcYZwOAeugCWOPHHVzHQqFDPmgHvPEEMHYNEtzIVKhQQ6WmhG9SzbxcbOc47UHrC8Y0Hc9ovTKJaRltYzop/EKc3gnBXxTDsYd/biULZjkMrq0JnrcT9GFAgjT0yRnRtlZMCJ6s6bgzWot+wtSsovDeCy9SG7fpKVCwqjFh2t0HJNLhd3XizA6wKhWhVneiUrei9xsQz41iSM8y3J0gY3VCKLt2Q6SY00khG72YhMsB9x0NtTQVFXOkMGIw+XAMqbH7tExPKjDoOhB096FRq5C22egz2nH6fMwOzvDaiKCKGBuw95Rid/QylrASdBtQV5fSXVxAW11NVjMBvxhH+OCjaHuTnSt7ahaFWhkXZg1PYwMqLD0KRHsgyxGphEJvVKUkkJsyiomzUq6G6q4d+0H8s+cpODct8ge1hDwjeA0PaH1vhjp3bt01NbSUl2NqvEXrIp6VNIqrNpu5n0eRNGnOszKenyDnXgGlIgL8sj96nNyvviMc19/SXPJDSYsPRi7Wym+eplrZ8/y05U8ii5doL60EFVDOfL6+4xZ9KTmAojWZyxERrUk/cP4LGrEhdc4f+oEN06fQHz+NJ2l1xl6VEFL5c/knc0l95tTnD9zhvwL56gT30bRJEHd1kjIbWV/KYjIrZbg0zew6FIh9LXRWlNKU+mPdJflo75XgKaqENWdq9RcyeVizkm+z8mh4NJFKkuLULbU0a+WMdD9mLE+BYvDWkS25lt4FGWEDXW4ldVoJLcwVuTjqi/G9ViMW1GFs7EITfF3SPJOc+f6RaQVJfRKq3Com/FblEz2txHQNxO3yhCtW2rI2OvYcjYyr5cw0nATV81lArIylsxSMoKclOVXppsLsdfexNFeyUSflFC/lISzg+d+DQf+Xg79Kt7O6hB9CLTwe7CN30IyjsZbiOvKmWkvYklbwdFEJx8XtLz0tRN7Us28rpadpzJeBpS8nlHwx7yKv1b0/JMw8ilh5N9EP/8DzfduyXZhArIAAAAASUVORK5CYII=)![Two Figma employees sitting on chairs in front of a shelf with books smiling at each other](https://cdn.sanity.io/images/599r6htc/regionalized/28c5aa98c757d2eaa5fa2b62970ddb1260a416be-1080x864.png?rect=108,0,864,864&w=360&h=360&q=75&fit=max&auto=format)

### Grow as you go

With humility and curiosity, we give and get the direct feedback we all need to become great. Everyone’s a work in progress, and we’re here to help each other grow.

![Three Figma employees in a ball pit with floaties smiling up at the camera](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEz0lEQVQ4jQHEBDv7AM5MItZiK+B6NeCGO9p+OsZnM6VKJp8xHbBCM6tgUJBNRH8tLWoXGV4YEXI3K7JqZemnpvC+udGdm6lxbwDYlUDWqVHSuF3Sv2LZv1zerUvXhzjMXS++VTyiVkSBPjJmJCJGERc3DhI/FxV2OjnLh4vuu7vXpqGxeHEAwNCFwNKWtsaXq8acuNynztqK3LZS3Ig2zmw8pU03ejEjXiUeQRghMA4fLQkTWSEmuXV86LW3yZmTnGFVAK7Mr7S9rKmloZakqqnJx77Kr7abYbqCL9J8LbdNJ38lGFggGD0ZIDAQIzQMHGkuNsWDidynqKRtaW4yJgCgkoOEcnd1YHuAco6onKO2mYmVb1OWezzNmjTLYiGJIhJUFRBBGxs2FR5BFiKJTlTXoJzQl5CTSkJzIBEAakxCTTA9Yz1Yk2t6o3x1g19OZlFDfohgxrtY138nmioObx4XcTgvWSooXCkqqG9s3q6lyI+BoUw2mzQUAFw9NUwqLHxUVKB4bXdYTTopIzM2NW6PfMDNeduTMaUzDH4kG4ZGO3E4MHg4MLNyaNGYkMJ+a7FWL6dGGABaQjpHMi13XVKDZFdFMiwbFRUvOj53oZXB1orbmjWnNgttGhJlMChqMSuPOS6zU0S2YVWqVz6mRx+jORUAOjU0LCYkVUQ9c1ZLRi8qIBsaQFRZirusyNmH2JIupjEKbBAIYh4WfzEnqUEqt0QqqEYzlUApjy4XlB4OAD5VWy01OU1BPYFiVmFEOzAuLE5xdZfMrtDRb9N8IaYoCYwbDJ4yG7pCJsJMJLlNKK1PMaVFL5krHYsaEABknqVSeoRcaW51ZmBUQjw3Q0NomIyy1pTbtUjKWhWoJA6oLxq+SyfTUybPUyC8TyazTCiySCioOx6MLhQAk9W1gcS5dKqsZX5+S1lTVHJijrF/u7havnchpjINpicUvTsfxEomyVMlz1Efw0gguEEdtUgZrEkVlTsRANLdfbrekqDVn4u6jYanc5enZJuWTY5wMX0/G3IdDpQnEsdAGtJNHtBTINRQHMNCGq8+GrBLG69EFpsvDADsqEblvE7eyFjXx1zXuVHBjzeQYS+HXUaHU0F3LiGSIxXIQBvaXB/WXyDNVR6xORubNBumQiCnNRuTHwwA0G0t3YYw74ox7X8w4XAsxFIfm0Uqn15OpWVNnEMtpCsdwjwg2FEi01AixEsisTwkoTcio0AdmjgZlB8RALVjJsyCLOR5KdFLH7w1HcI9H7tCKqlBNKJGLK1AH7I/ILtGKddCK904LNI3Jsc+Ibg+IKdGG5hCGaAoGwC9biraljLomCTKWBCyKg7DNxzQQDK9OTSoOSO1QRrCWCLKWyvZTCnZQjDQQSzKRRvBPBWwPxabOxiUKxkA1mkq6pM16p4m0GsSv0ARwj0czjwuzDo3tEEws0snvmIjylke0UwbxFUltFgqvVUayFUUxV4Xn0kSbygLANdQIOJpLNh7Kr93I7JmJLRRJMRAIss8Kbc/Lq5CKLBLIbtGGsVIFb5RHrNJI7lMG8x4H92gJa93FWIwBgC9OBjNQCLAWiuhfSuNeS+dVifBRRvGRiCxPiW4MR65Lh25Phq9Tha1RB69MyK6PxvCfSXity+/kRpvQQicsOufb9cSagAAAABJRU5ErkJggg==)![Three Figma employees in a ball pit with floaties smiling up at the camera](https://cdn.sanity.io/images/599r6htc/regionalized/6700614cfb0f798f9c0ed75030fe12c41e809fa9-1636x1630.png?rect=3,0,1630,1630&w=360&h=360&q=75&fit=max&auto=format)

### Play

Playing is learning. We embrace spontaneous, unstructured exploration—because that’s where we find our best ideas.

Life at Figma
-------------

Connection and kindness are core to our culture (after all, we’re a group of people building a collaboration tool). We focus on lifting each other up instead of competing amongst ourselves, and we build relationships through numerous company traditions.

![An image of the Figma community groups](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADKElEQVR4nCXMbVCTBQDA8WfAHVe8yF1bB7XUriuvlNA07+gi0LhdH7zLK7jQUxF2+iAwOF66DWO6BLkhCGyDq82A5njZ4mVsY7ixscGGUE0zRTvyODHlFOV6ua7v/y778Pv6E6RSKUlJScTHxyORSBAE4RnJfyQS4uISePmNHA5UDVNyIUbDV36ujJ/knkvG8mQKhkgue4Ofs9XdTNpcJ4JcLicjI53U1FQSExNJSPg/jnuWSYiPT0C+LYeDFZeoaHJy1jiMd1TJ0siL3BhPoTOcR/akmteHWpAGOxB2Zu3hnV17eevNTLZseRWZTMamTam8kJJMenISLyWnkLnjQz4ttyOeu0Zjpx+fXeQ3Zzor7jQMoX1kTWtI8+h5fq4dofSoBuURNccP11DwyVEUio/I35dH4fvZiO++TcXuTMrzj6EUwxxTr1Ov/Rl/Vz1/9G1j/fJmekb2s9NbTeqUluemTyMMW67T3xmgr8uPof0yWq0OXYMaa50Kn/gZPuVBRkoaUZcucOjUXapPxfDWNrFxPpdHbXswGxXkWst4zaZBZi9DmBl/gtt6C5ftFrY+P+3tBrr0evznGrlZX8KNqkOExWa0xQsUKe+gKvkej9jCekM+D89m83WrghzzcbZaVEitxQj+gb/w9D7C3b+Co9eJxaSj16Ah2NbAL2dqWNZUE6nrpllcQlm6Qe2JZYZqOoh9cYBF3X46uwpQWMvIHKhiu6MSYVT3O/Yz95ho+YkZcwchWwHhoY+JOuoJ2qx4+5xMfBPFcvEBrV8+Rn/hV3TmQdT9tahtlTSO6WlyWznvGkQ/9R2CuXiZrmIXNpWDRVMdsYEcYiPvEZmpweQPcdp1G5PvAY6RVeyWEGbHLMrAJB8EL5IXaqM66sI7tcC10XnuTC8jmIpWaCkK0CeOETOquD28myXnLqKzlbQGZqj0LNEWXMPpvo93IMS3ExEOz06xY7aDrEgH5Ys+Qr7r3B2L8TC4hmAp+ofuwicMnohxs0fFhnczT4Ov8OO8SHdkHl14lZ65p7iu/Elg9DE2zyqFcwEy5o3Irxo5+UOAaPQ+q6F11q7+zb8qAyWdHhFhQwAAAABJRU5ErkJggg==)![An image of the Figma community groups](https://cdn.sanity.io/images/599r6htc/regionalized/74e055ecd373a00cbb9a13270bb50f7323e2fecb-3840x2160.png?rect=1,0,3838,2160&w=780&h=439&q=75&fit=max&auto=format)

### Figmate Community Groups

Our Figmate Communities are an essential part of our value of “Build Community." These groups form through shared identities, experiences, and passions, and they help all Figmates feel like they belong. We aim to center the voices of our Figmates and connect to each other through storytelling, collective impact projects, fireside chats, intersectional programming, educational trainings, and monthly meetups.

![An employee looking up toward a bunch of gold balloons](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAADo0lEQVQ4jR3G7VPTBQDA8d8fYN6ZeT2YVqfpcfWiN71Qr8hKevLSMjomjAiKwgfAxJP5DAjejESeBZo2njbYxs8B28CHCZs8jIeBwgZjMLb9fowBO7yeXn+76/PqI0w6LHhdD5gZ7sE3YmPOdZe5/irmHWqCrlqkyTYiM/dYWxwjFvawGnCxOtfLqs/M6qyZFa+JiOsyYct7hDreRBh5IDLtNOC1lzNrV+Pvu4a/5ziBHgXhh0nIfd8RGcxh7WkNsTkL0YkKlp0/svwoiWifgtX+o0R6Egi27WSxdTvCkPlXnlqv4BEVzHZ8wkLnARY73iVo2EnY9AayeTdR6zvEBtJYn6phxZmFLMYhG15l2bSVta63WO7aQ1C3g8XGLQhjTfuZatmHV7uL2T9eJtD6EpJuE+HmDQRbtyC1v0JU3Eas7zBRdyUh+ylChjhk3fNEDS+y0r0XyZJEwBhPUL8D4UndC3jqN+Or34Cv4TkWtJuQWzYi6zYT0m8j3LaVaGcc8sPvGRTV2BpO4m78AEl8mxXrHuTeVGY6spnWpxAwf4UwWbsJb/1G/Lc349e+xnzzdqT214lY9iLZvkCyfsyyXYHvXgFGdS7VuYlYqtMJOfJ5NlVKdKwOb2cR483ZzFkvIrhrdzGj3U3QGE+4W4FkTUK+n8TSYD7SSAXyaBVLbg2eXg3W4mxM59JwtJQR8T3m35iPP6UJwi4DXutNFvp+RxitPMKCMZM1exHrQ7dZn9CzNtVCZNpE6Mk9JI8TyePAazfhqLrAcM05Ag4zMcnPemSBteBTlrwOguM2gm4bQt+14wTEcv5y6vhnzMbfMwM8m+8n4rEw5+rCN9yLf/Q+nn6RYV05k8ZK5IlHyLPjzLvtzAx14hkQmXp8l8l+E4LxfCYTTTdY7dWy7jARG+9hecKM36llpPMWg3cbcFm1DFu1/3/c1oRnwMq4XcRuqMXWeJ3OOyWYGq6iry1A0F05zoNbhUzqy/CKtUxbNLi763C238CiKUKsv4KoKaRDcxVTQwmiRo2ouU5LxSWqC05QqkqnJE/JpWwFqqxEhKaiLHTqHIxleYjlZzFVqNCX59NYepqGkpNUF/5M+eUf+O18OuqzaRSfVlKYe5QLxxI5k/ElOamfk6VIIOObD0k9HI9Qo0qmRpVClUpJhUrJzXwlpWdTUOclU/xLEgXZiVw89jWqnw5xJuMgp9I+I1v5KSeSE8hSHCDz249IP7If5aH3URzcx3+dN+9mwYcIAAAAAABJRU5ErkJggg==)![An employee looking up toward a bunch of gold balloons](https://cdn.sanity.io/images/599r6htc/regionalized/31575b4be9498685875612574c8e6b063cd22e35-1560x1040.png?w=780&h=520&q=75&fit=max&auto=format)

### Maker Week

A time set aside once a year to pursue wild, silly, and imaginative ideas. The whole company takes part, and people can work on anything Figma-related that piques their curiosity.

![Three Figma employees on a couple of couches talking to each other in an office](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADMUlEQVQokR3D209bBQDA4ZN4YTM4jIkM5oKbNgPd+iCEbWBVbqVLEVool3LvoKOjlDv2CoWWskHLigwRRktHuY2bDCbOByOgJmJi9qIk7kX/kJOc8zPxSz7BWpYjOqo/kSbMRcz3lspLTj0xRzXLgxZ+jPn56zDKn8dxft2PsBsJEQ+PsDXj448nIf7dC3M6189Obzl+iwFPjwmhsdYsdjTWSQFrLVF3nbw2XEvc3cS2r4vflj28PBrn9HCUo40R1oJOpjydPPLb+Dni4cV2mJNZB2sWDXZjMXarCcHQGhSbLSOSu7uTyKBJ3vA3sOK5zb6/ixcrffxz7OLvo35+eeJkNzxC5N4Qj8b62Bq3sjft5HmgnWiDijuFWTRo1QjlpoB4+45L8naaibqM8qbPyKq7iW+H2vh9sY2XP9k5PfZz8myK4/gcO1P3mXRaGe4wEOqqIt5dyePWQuyGz2jW5iE0VxrF/iaDFLaVseIqk3d8Fax7qlkZqOSHBxWc7HZzuBfmYGuB56vzLPicWGr11OgKuWvUMmo1EvOYWPCaCTpaEOzlmWKgMUf6xlbIqkMj73i1bA2WsNSnJubMZ/GekbmQna/DPiYDbu6a6inKV5GnuoFeW4S1vZHwWB/b8172Fn0I3vJ08X79x9KMJZdYT5684SrmqV/Htt9A0KamoTQbnSaHyrICbqlVZGVe46OMy1zNuMSNbCWGqhKcA23EHw7y3dIYgrtUIY5WK6Wp1ptEe4vkjREDB1+Z+X7WRqBTx01lGheTE0lLTeJiyjlSkxP/f+H8myjeT6a8JJdxdwvrMw52I8MIzrJ0cbQ+W5q2aYgN1cibEy08m7GyP9NBsK8Cbe4VlGnnyLjwBh+knCHtnQTSzidwKeUMSkUS5qpMVh+YOIjaebrgQfA1q8SJdo30cEDPgqdKjvtqWB+rYyXQQKhXT1tpFrrsd1Ffe5tPFYlkv5fA9cuvo0o/gz43CW9rOpuTOvbmbGzP9iOMd34hTthuSSGbmumeYnneoSXi0jH7pY7hlnxaNB+iu55CsfItCq6cpUDxGkWKVyi5+iqWwrMEzak89n7O8ngz8WA7/wE4lPMy/FOSdQAAAABJRU5ErkJggg==)![Three Figma employees on a couple of couches talking to each other in an office](https://cdn.sanity.io/images/599r6htc/regionalized/fe02b68da049248f162796e8719210ef11a3d12b-2880x1620.png?w=1440&h=810&q=75&fit=max&auto=format)

Benefits
--------

*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/168801f3ad329a22577c15f4dfba1008aa5483b4-24x24.svg?q=75&fit=max&auto=format)Competitive salary & equity
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/95fb186e1f1dcf028eb6f6cd2e0de61e090b5673-24x24.svg?q=75&fit=max&auto=format)Health, Dental, & Vision
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/10f1e0eca0a93fd234589ca0795035e92c70c367-24x24.svg?q=75&fit=max&auto=format)Retirement with company contribution
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/06b17792334775663f71f902026fd905f15f63e5-17x17.svg?q=75&fit=max&auto=format)Parental leave & fertility support
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/74694c18e6f28dabbdd2d020fcbc07755dadc577-24x24.svg?q=75&fit=max&auto=format)Mental health and wellness benefits
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/0206c6bd66fae64ef9809969fd90a317d16df1ef-24x24.svg?q=75&fit=max&auto=format)Generous PTO
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/845442d828b3d775f4104489fd1a411656fb8a30-24x24.svg?q=75&fit=max&auto=format)Company recharge days
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/03d02ba47344d447963da2e004f268c72ad15e8b-24x24.svg?q=75&fit=max&auto=format)Learning & development stipend
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/408113948fbf2d5d58d697e3244cc0b9837beb4f-24x24.svg?q=75&fit=max&auto=format)Work from home stipend
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/2c4abd3d2e6c002e9fff01baa0cb19a16ed399bf-24x24.svg?q=75&fit=max&auto=format)Cell phone reimbursement
    

Locations
---------

*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/95fb186e1f1dcf028eb6f6cd2e0de61e090b5673-24x24.svg?q=75&fit=max&auto=format)San Francisco
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/95fb186e1f1dcf028eb6f6cd2e0de61e090b5673-24x24.svg?q=75&fit=max&auto=format)New York City
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/95fb186e1f1dcf028eb6f6cd2e0de61e090b5673-24x24.svg?q=75&fit=max&auto=format)Seattle
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/95fb186e1f1dcf028eb6f6cd2e0de61e090b5673-24x24.svg?q=75&fit=max&auto=format)London
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/95fb186e1f1dcf028eb6f6cd2e0de61e090b5673-24x24.svg?q=75&fit=max&auto=format)Paris
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/95fb186e1f1dcf028eb6f6cd2e0de61e090b5673-24x24.svg?q=75&fit=max&auto=format)Berlin
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/95fb186e1f1dcf028eb6f6cd2e0de61e090b5673-24x24.svg?q=75&fit=max&auto=format)Tokyo
    
*   ![](https://cdn.sanity.io/images/599r6htc/regionalized/95fb186e1f1dcf028eb6f6cd2e0de61e090b5673-24x24.svg?q=75&fit=max&auto=format)Singapore
    

Job Openings
------------

### Business Operations

*   [AV Manager](https://boards.greenhouse.io/figma/jobs/5462481004?gh_jid=5462481004)
    
*   [Corporate Development & Strategy](https://boards.greenhouse.io/figma/jobs/5421003004?gh_jid=5421003004)
    
*   [Internal Audit Manager](https://boards.greenhouse.io/figma/jobs/5472576004?gh_jid=5472576004)
    
*   [IT Audit Manager](https://boards.greenhouse.io/figma/jobs/5404576004?gh_jid=5404576004)
    
*   [M&A Integration](https://boards.greenhouse.io/figma/jobs/5445078004?gh_jid=5445078004)
    
*   [Payroll Lead](https://boards.greenhouse.io/figma/jobs/5384047004?gh_jid=5384047004)
    
*   [Strategic Finance](https://boards.greenhouse.io/figma/jobs/5403325004?gh_jid=5403325004)
    
*   [Technical Program Manager, Quote to Cash](https://boards.greenhouse.io/figma/jobs/5463915004?gh_jid=5463915004)
    

### Design

*   [Director, Product Design](https://boards.greenhouse.io/figma/jobs/5396579004?gh_jid=5396579004)
    
*   [Product Designer, FigJam](https://boards.greenhouse.io/figma/jobs/5349348004?gh_jid=5349348004)
    
*   [Product Designer, Growth](https://boards.greenhouse.io/figma/jobs/5450567004?gh_jid=5450567004)
    
*   [Researcher, Developer Tools](https://boards.greenhouse.io/figma/jobs/5444997004?gh_jid=5444997004)
    
*   [Researcher, Product Strategy](https://boards.greenhouse.io/figma/jobs/5340949004?gh_jid=5340949004)
    
*   [Research Operations & Enablement Manager](https://boards.greenhouse.io/figma/jobs/5478219004?gh_jid=5478219004)
    
*   [UX Writer, Developer Tools](https://boards.greenhouse.io/figma/jobs/5453662004?gh_jid=5453662004)
    
*   [UX Writer, Developer Tools (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5431304004?gh_jid=5431304004)
    

### Early Career

*   [Outbound Sales Development Representative](https://boards.greenhouse.io/figma/jobs/5363198004?gh_jid=5363198004)
    
*   [Product Design Intern (2025)](https://boards.greenhouse.io/figma/jobs/5227975004?gh_jid=5227975004)
    

### Engineering

*   [AI Applied Scientist](https://boards.greenhouse.io/figma/jobs/4756707004?gh_jid=4756707004)
    
*   [Data Engineer](https://boards.greenhouse.io/figma/jobs/5220003004?gh_jid=5220003004)
    
*   [Data Scientist, Finance or Marketing](https://boards.greenhouse.io/figma/jobs/5237961004?gh_jid=5237961004)
    
*   [Data Scientist, Platform](https://boards.greenhouse.io/figma/jobs/5364867004?gh_jid=5364867004)
    
*   [Director, Software Engineering - Data Infrastructure](https://boards.greenhouse.io/figma/jobs/5440046004?gh_jid=5440046004)
    
*   [Manager, Data Science - Sales](https://boards.greenhouse.io/figma/jobs/5382656004?gh_jid=5382656004)
    
*   [Manager, Software Engineering - AI Product](https://boards.greenhouse.io/figma/jobs/5248996004?gh_jid=5248996004)
    
*   [Manager, Software Engineering - Deploys](https://boards.greenhouse.io/figma/jobs/5232670004?gh_jid=5232670004)
    
*   [Manager, Software Engineering - Infrastructure](https://boards.greenhouse.io/figma/jobs/5464940004?gh_jid=5464940004)
    
*   [Manager, Software Engineering - Scenegraph & Sync](https://boards.greenhouse.io/figma/jobs/5429440004?gh_jid=5429440004)
    
*   [Manager, Software Engineering - Search Platform](https://boards.greenhouse.io/figma/jobs/5260366004?gh_jid=5260366004)
    
*   [ML Engineer - AI Platform](https://boards.greenhouse.io/figma/jobs/5366705004?gh_jid=5366705004)
    
*   [Security Engineer](https://boards.greenhouse.io/figma/jobs/4214880004?gh_jid=4214880004)
    
*   [Software Engineer - AI Product](https://boards.greenhouse.io/figma/jobs/5259396004?gh_jid=5259396004)
    
*   [Software Engineer - Application Platform](https://boards.greenhouse.io/figma/jobs/5263516004?gh_jid=5263516004)
    
*   [Software Engineer - Billing](https://boards.greenhouse.io/figma/jobs/5335427004?gh_jid=5335427004)
    
*   [Software Engineer - Client Platform](https://boards.greenhouse.io/figma/jobs/5349167004?gh_jid=5349167004)
    
*   [Software Engineer - Creation Engine](https://boards.greenhouse.io/figma/jobs/4754116004?gh_jid=4754116004)
    
*   [Software Engineer - Data Infrastructure](https://boards.greenhouse.io/figma/jobs/5470979004?gh_jid=5470979004)
    
*   [Software Engineer - Design Tools](https://boards.greenhouse.io/figma/jobs/5314701004?gh_jid=5314701004)
    
*   [Software Engineer - Developer Experience](https://boards.greenhouse.io/figma/jobs/5164947004?gh_jid=5164947004)
    
*   [Software Engineer - Distributed Storage](https://boards.greenhouse.io/figma/jobs/5145602004?gh_jid=5145602004)
    
*   [Software Engineer - Enterprise](https://boards.greenhouse.io/figma/jobs/5399019004?gh_jid=5399019004)
    
*   [Software Engineer - Extensibility](https://boards.greenhouse.io/figma/jobs/5362478004?gh_jid=5362478004)
    
*   [Software Engineer - FigFile Platform](https://boards.greenhouse.io/figma/jobs/5159891004?gh_jid=5159891004)
    
*   [Software Engineer - Frontend Platform](https://boards.greenhouse.io/figma/jobs/5446303004?gh_jid=5446303004)
    
*   [Software Engineer - LiveGraph](https://boards.greenhouse.io/figma/jobs/5467319004?gh_jid=5467319004)
    
*   [Software Engineer (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5039807004?gh_jid=5039807004)
    
*   [Software Engineer - Mobile Platform](https://boards.greenhouse.io/figma/jobs/5358007004?gh_jid=5358007004)
    
*   [Software Engineer - New Initiatives](https://boards.greenhouse.io/figma/jobs/5279579004?gh_jid=5279579004)
    
*   [Software Engineer - Product Foundations](https://boards.greenhouse.io/figma/jobs/5320633004?gh_jid=5320633004)
    
*   [Software Engineer - Production Engineering](https://boards.greenhouse.io/figma/jobs/4903942004?gh_jid=4903942004)
    
*   [Software Engineer - Rendering and Animation](https://boards.greenhouse.io/figma/jobs/5361592004?gh_jid=5361592004)
    
*   [Software Engineer - Revenue Growth](https://boards.greenhouse.io/figma/jobs/5337834004?gh_jid=5337834004)
    
*   [Software Engineer - Search Platform](https://boards.greenhouse.io/figma/jobs/5385082004?gh_jid=5385082004)
    
*   [Software Engineer - Server Platform](https://boards.greenhouse.io/figma/jobs/5145924004?gh_jid=5145924004)
    
*   [Software Engineer - Traffic](https://boards.greenhouse.io/figma/jobs/5418023004?gh_jid=5418023004)
    
*   [Software Engineer - User Growth](https://boards.greenhouse.io/figma/jobs/5321603004?gh_jid=5321603004)
    
*   [Technical Program Manager - AI](https://boards.greenhouse.io/figma/jobs/5117981004?gh_jid=5117981004)
    

### Legal

*   [Corporate Counsel](https://boards.greenhouse.io/figma/jobs/5437430004?gh_jid=5437430004)
    
*   [Legal Counsel, Commercial](https://boards.greenhouse.io/figma/jobs/5472389004?gh_jid=5472389004)
    
*   [Senior Counsel (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5469806004?gh_jid=5469806004)
    

### Marketing

*   [Communications Manager (Singapore or Tokyo, Japan)](https://boards.greenhouse.io/figma/jobs/5402593004?gh_jid=5402593004)
    
*   [Growth Marketing Manager, SEO](https://boards.greenhouse.io/figma/jobs/5468206004?gh_jid=5468206004)
    
*   [Localization Manager](https://boards.greenhouse.io/figma/jobs/5446311004?gh_jid=5446311004)
    
*   [Manager, Advocacy (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5474050004?gh_jid=5474050004)
    
*   [Manager, Figma for Education - International](https://boards.greenhouse.io/figma/jobs/5434593004?gh_jid=5434593004)
    
*   [Manager, Figma for Education - International (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5457719004?gh_jid=5457719004)
    
*   [Paid Marketing Manager](https://boards.greenhouse.io/figma/jobs/5417905004?gh_jid=5417905004)
    
*   [Product Marketing Manager, Design](https://boards.greenhouse.io/figma/jobs/5364253004?gh_jid=5364253004)
    
*   [SEO & Digital Content Manager (Singapore)](https://boards.greenhouse.io/figma/jobs/5341839004?gh_jid=5341839004)
    
*   [Web Developer](https://boards.greenhouse.io/figma/jobs/5411831004?gh_jid=5411831004)
    

### People

*   [HRIS Analyst, Integrations & Security](https://boards.greenhouse.io/figma/jobs/5468581004?gh_jid=5468581004)
    
*   [HRIS Program Manager, Advanced Compensation](https://boards.greenhouse.io/figma/jobs/5465717004?gh_jid=5465717004)
    
*   [Manager, Learning and Development](https://boards.greenhouse.io/figma/jobs/5474121004?gh_jid=5474121004)
    
*   [Workplace Generalist (New York, NY)](https://boards.greenhouse.io/figma/jobs/5428049004?gh_jid=5428049004)
    
*   [Workplace Generalist (San Francisco, CA)](https://boards.greenhouse.io/figma/jobs/5428006004?gh_jid=5428006004)
    

### Product

*   [Director, Product - Developer Tools (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5475012004?gh_jid=5475012004)
    
*   [Product Manager, Billing](https://boards.greenhouse.io/figma/jobs/5367153004?gh_jid=5367153004)
    
*   [Product Manager, Design Systems Foundations](https://boards.greenhouse.io/figma/jobs/5205988004?gh_jid=5205988004)
    
*   [Product Manager, FigJam](https://boards.greenhouse.io/figma/jobs/5424863004?gh_jid=5424863004)
    
*   [Product Manager, Monetization Growth](https://boards.greenhouse.io/figma/jobs/5450370004?gh_jid=5450370004)
    

### Product Support

*   [Community Support Specialist](https://boards.greenhouse.io/figma/jobs/5460981004?gh_jid=5460981004)
    
*   [Director, Direct Support (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5363825004?gh_jid=5363825004)
    
*   [Enterprise Support Specialist, Korean Speaking (Singapore or Tokyo, Japan)](https://boards.greenhouse.io/figma/jobs/5458552004?gh_jid=5458552004)
    
*   [Enterprise Support Specialist, Portuguese Speaking (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5460600004?gh_jid=5460600004)
    
*   [Operations Program Manager, AI](https://boards.greenhouse.io/figma/jobs/5478328004?gh_jid=5478328004)
    

### Sales

*   [Account Executive, Enterprise](https://boards.greenhouse.io/figma/jobs/5426468004?gh_jid=5426468004)
    
*   [Account Executive, Enterprise (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5458801004?gh_jid=5458801004)
    
*   [Account Executive, Enterprise (Paris, France)](https://boards.greenhouse.io/figma/jobs/5428656004?gh_jid=5428656004)
    
*   [Account Executive, Enterprise, Portuguese Speaking (São Paulo, Brazil)](https://boards.greenhouse.io/figma/jobs/5415648004?gh_jid=5415648004)
    
*   [Account Executive, Enterprise, Spanish Speaking (São Paulo, Brazil)](https://boards.greenhouse.io/figma/jobs/5416092004?gh_jid=5416092004)
    
*   [Account Executive, Enterprise (Sydney, Australia)](https://boards.greenhouse.io/figma/jobs/5418874004?gh_jid=5418874004)
    
*   [Account Executive, Enterprise (Tokyo, Japan)](https://boards.greenhouse.io/figma/jobs/5458580004?gh_jid=5458580004)
    
*   [Account Executive, Federal](https://boards.greenhouse.io/figma/jobs/5425993004?gh_jid=5425993004)
    
*   [Account Executive, Mid-Market](https://boards.greenhouse.io/figma/jobs/5422236004?gh_jid=5422236004)
    
*   [Account Executive, Mid-Market (Berlin, Germany)](https://boards.greenhouse.io/figma/jobs/5364702004?gh_jid=5364702004)
    
*   [Account Executive, Mid-Market (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5415515004?gh_jid=5415515004)
    
*   [Account Executive, Mid Market, Portuguese Speaking (São Paulo, Brazil)](https://boards.greenhouse.io/figma/jobs/5428919004?gh_jid=5428919004)
    
*   [Account Executive, Mid-Market (Sydney, Australia)](https://boards.greenhouse.io/figma/jobs/5461640004?gh_jid=5461640004)
    
*   [Account Executive, SMB](https://boards.greenhouse.io/figma/jobs/5422269004?gh_jid=5422269004)
    
*   [Account Executive, SMB (Berlin, Germany)](https://boards.greenhouse.io/figma/jobs/5077339004?gh_jid=5077339004)
    
*   [Account Executive, SMB (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5415419004?gh_jid=5415419004)
    
*   [Account Executive, Strategic](https://boards.greenhouse.io/figma/jobs/5415568004?gh_jid=5415568004)
    
*   [Account Executive, Strategic, Korean Speaking (Singapore)](https://boards.greenhouse.io/figma/jobs/5477400004?gh_jid=5477400004)
    
*   [Account Executive, Strategic (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5400936004?gh_jid=5400936004)
    
*   [Account Executive, Strategic, Spanish Speaking (Paris, France)](https://boards.greenhouse.io/figma/jobs/5428639004?gh_jid=5428639004)
    
*   [Commercial Solutions Consultant (Paris, France)](https://boards.greenhouse.io/figma/jobs/5450058004?gh_jid=5450058004)
    
*   [Director, Sales Development](https://boards.greenhouse.io/figma/jobs/5414206004?gh_jid=5414206004)
    
*   [Director, Solutions Consulting](https://boards.greenhouse.io/figma/jobs/5376782004?gh_jid=5376782004)
    
*   [Enterprise Solutions Consultant](https://boards.greenhouse.io/figma/jobs/5478247004?gh_jid=5478247004)
    
*   [Enterprise Solutions Consultant (São Paulo, Brazil)](https://boards.greenhouse.io/figma/jobs/5440950004?gh_jid=5440950004)
    
*   [Enterprise Solutions Consultant (Sydney, Australia)](https://boards.greenhouse.io/figma/jobs/5426228004?gh_jid=5426228004)
    
*   [Inbound Sales Development Representative (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5415817004?gh_jid=5415817004)
    
*   [Inbound Sales Development Representative (Singapore)](https://boards.greenhouse.io/figma/jobs/5418850004?gh_jid=5418850004)
    
*   [Manager, Enterprise Sales](https://boards.greenhouse.io/figma/jobs/5465794004?gh_jid=5465794004)
    
*   [Manager, Mid-Market Sales](https://boards.greenhouse.io/figma/jobs/5252870004?gh_jid=5252870004)
    
*   [Manager, Mid-Market Sales (Berlin, Germany)](https://boards.greenhouse.io/figma/jobs/5412879004?gh_jid=5412879004)
    
*   [Manager, SMB Sales (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5415875004?gh_jid=5415875004)
    
*   [Onboarding Manager, Customer Experience (São Paulo, Brazil)](https://boards.greenhouse.io/figma/jobs/5422057004?gh_jid=5422057004)
    
*   [Onboarding Manager, Customer Experience (Singapore)](https://boards.greenhouse.io/figma/jobs/5461764004?gh_jid=5461764004)
    
*   [Outbound Sales Development Representative (London, United Kingdom)](https://boards.greenhouse.io/figma/jobs/5435571004?gh_jid=5435571004)
    
*   [Outbound Sales Development Representative (Singapore)](https://boards.greenhouse.io/figma/jobs/5468570004?gh_jid=5468570004)
    
*   [Sales Enablement Manager (Singapore)](https://boards.greenhouse.io/figma/jobs/5461805004?gh_jid=5461805004)
    
*   [Sales Enablement Manager (Tokyo, Japan)](https://boards.greenhouse.io/figma/jobs/5232364004?gh_jid=5232364004)
    

### Talent

*   [Recruiter (Singapore)](https://boards.greenhouse.io/figma/jobs/5432190004?gh_jid=5432190004)
    
*   [Recruiting Coordinator, Executive and M&A](https://boards.greenhouse.io/figma/jobs/5460891004?gh_jid=5460891004)
    
*   [Sales Recruiter (Fixed Term)](https://boards.greenhouse.io/figma/jobs/5400697004?gh_jid=5400697004)
    

At Figma we celebrate and support our differences. We know employing a team rich in diverse thoughts, experiences, and opinions allows our employees, our product and our community to flourish. Figma is an equal opportunity workplace. We are dedicated to equal employment opportunities regardless of race, color, ancestry, religion, sex, national origin, sexual orientation, age, citizenship, marital status, disability, gender identity/expression, or veteran status.

![A Config conference attendee giving the hang ten hand symbol while smiling](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAADnklEQVQ4jR3MaU/bBQDA4f9H8NUSjYmGbC9kTLNNx5gMCMhEWAwDRQPGActCyAbLYHFqOQbCLNcKtF1hFCjlaEtPYPSEHpRCD6C0lUtx6papMNSX6qufic8HeATp7SqUDXVoupqxKDqxquU4p0dwzUxin9MxN6PDZNJgMGkxmKfRm/VMWwzozHq0Zj06swGdxYjGpEc9rUWY7O9geqgfy9Qwj40T2GancdjM2O0zmMw6lEoFMpkE1fgIs9ZZbIsO5hccOLyL+Fb8BMKr+FaWMM6YkClkCHrdBLOzRhwuG27fIt6Al6WgH5d3gUdDCuprq6m6WsY90V30Jj2e1WU8wQCReJSfn/3C74e/sf/TD1hts3SI2xBmrPO4vG6WQ6uEomtEYhusJzZxL3mQSTppvHmNhopP6bhTg1GvYTkSYnk9Qnxvhz/++pN//v2bo6MD3IsOHnSLEVw+H4FImPVEnNjOFvHdbRJ7O6yGVpjTqrAOduGQNDMnFeNxzhOKRQnFN9l9ss/hiwOOXhzw/PlTPG4Xsn4Jgi8UIhyLEd3eYi2+yXo8SmJvm++2E2yFvOzaNKyPSlgeVxD0u/8P499v8fzwGU9+3GHV52IjssLiggPFQynCUniNcCJBMLqB3T6Hy2oitBYiEouxGQ6w6zKwNtaHd3KIJbcTn99NNBHh6a/7hINuzFNKlj12FhbsDAzIEXzhCMFYnEW/n+FBGYN93YyOa1FPmTBrDbg1Kh5Lxah7e1CPqDBop/D5nASCHpRKOQ8623DY5rA75pE/7EdYCKziX99gxuGkufU+FVX1XK9porOtB7VESpfoHjfLr3PtsyrKK2r5StSG1mhBY9RTe/sWldcqUY4OY7IY6ZdKEMx2O1aPF7XBQvUXbWQX3aC0vI6Jvgc4BySIqmrIyrxC2ruFnEm9TGZeGV9+I6FbPkjZ5+W8n5ePqLGREdUwkt5uBJV2jDG9nt6RSSrqxeSU1FFaUYe0pYnRFhF3KqrJzi7h3IUiTp7O4/ipHHILr3K9pp4PC4tJTU2jrKyMTnE73V3fIshHepCPqWjpG6X0lpiLV2p4J7OYrMx88nIKuZTzMWnpRVzIKOHU2/m8eiKN5LPvkXv5I9IzsjmZnELBB3k0fX0X8f1WhI7+JnoeDVDXruByZSOnMj7h2OtneenlFF5JOs/xN7JIfjOXtPRiUk5f4thrZ0g6eZHzWQW8dfocSUknyM8voKm5gfb2Vv4D3/HTfx25HkwAAAAASUVORK5CYII=)![A Config conference attendee giving the hang ten hand symbol while smiling](https://cdn.sanity.io/images/599r6htc/regionalized/9e7dec2fc63cf2b78b27f37cb7edcf9301dda034-1560x1040.png?w=780&h=520&q=75&fit=max&auto=format)

### About Figma

Figma is the design platform for teams who build products together. Born on the Web, Figma helps teams brainstorm, design and build better products — from start to finish. Whether it’s consolidating tools, simplifying workflows, or collaborating across teams and time zones, Figma makes the design process faster, more efficient, and fun while keeping everyone on the same page.

---

# FigJam: The Online Collaborative Whiteboard for Teams

[Skip to main content](#main)

*   [Figma Design\
    \
    Design and prototype in one place\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC/0lEQVQokVXSbUhTYRQH8GNSqAilpXVf0rnNLbd5l29ZWeYMnXebbvfR8kMgFASJhbvqnDrtzXwJoohczm2SmVFQVJaEJWaElUSgkVhkRCFWVpYkEVm7T1zR0g8/Djwf/pzD8wfWMBWzCPtdYWJn1nB6HGBifwE0A+RnYCika6GYjASbTALtNRY4nKz2d2gVy8TpKWahNHItlEkiADaYu88vlGy+27o5p79OZ3qJWMMUzemxv7IAQznTDTY6CoqCV4GVIAOtBJlgJchcK0Em8RQVlAsgvgOoUcuPhTTIM81w5ycSzTf7UrOHCln2O2kyYlCZY6AeAHiKCrTJIlMqYmTOSrX8UUWMzFUWFZFaHE4EFcCy2UD8n+vf1CDvz0RzV0+6cdS4Kx0HQByGYio6yCaNTDm6lXGdKUgb81rZP8496ePH0rSecrkktYSmg0CDvMK8WNQ6O9Wo2SeGarmOMZ1poOZ04hfpaFjD8jJCtqlSJTvr3K0bu3Ol0Pd0qEbo7Tzgc+3LGK+KjXbzFJUOKnQWz5kNY7g2cUOfBrlxLGqb3G6877yofZMyvPqUopyQ761iogfbKnJ8gyNHhHczTcKzV7XChYOcrzpO+ZynKAeokUuYp0GeuQ1dPvF0hmv/oDM9rGuJf696EX483EbIsyrV8qsthZnfHvSUCMNv64X+vjLBa2WnHFrFdZ6kdoIKNeHFnFiNmrEGuX8nWK4/1plG8ou24WC8MtCPp+Sh5XIJV58Rf8NrZb9ebtiJW0uNU41s4i27MiqPJ6lVoEGeP4u5Z2JR63S85erQluwn1XrDpIzegf0wYMhFVeIvh9gVUVx1nPLaoQ2q19Vxyk67UppXQtOhCAAgydx1b4HeJPPt7uSc3nNiZfSGT+sserwUBjDUqS6Bg14P+8PCxL6F8CTF8iRVwpOkyUqQKx2MAkoj1gJkGj5m/jeRqTd8TjOw05rsLCHEnIWXQAeARY+hUSwuScPRrQyc3JECdqU0wCaTrLArpYEnLBuhNpWZLfZfsj9e+lps4aIAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/8b823444edce5f6c81fbd959301a33582525c23f-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/design/)
    
*   [FigJam\
    \
    Collaborate with a digital whiteboard\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADPklEQVQokTXSXWhTdxgG8L83sotdTL3ahWuFzjGvdueVCN44wWqd6Ww3xImBUVawIBOllCp+oBfDDSm1qSUfzcfJaXKanCQ9aZJz8j8nMTmJiZto7dKYNF2/WVuVxuakpu87jrDLF15+8PA8BDLynsUQ91nONrxPS8SON9LxsRxvL1/oN841XTxa+bHvYiXrt1UaanwOM7IIKu2sP4nvxdKz3beuhJrPdTDdbe1Ops3g4k8bHD4CKr1R8bP9kYe/3az43OatZKwgMIO1Y12ntE+/PaQd/fmkFnQOaPWUqGFGroBKH++otBuzivE5G7l29TI78d250eVWw+ib1nbbug6uLAa9K8rQw9W/3aMb75XItuwZwbPd3+P+499g2y8GlNhh3E5LiBm5rv+DSouYkQsLE+Lsg/7xd+2dDjx11oGn2+1IIEtxkwpY5Bw443XgphzGJZEHy8BduNrbBZaBOzAf9YGWjEEtEYVGSkJQqY7jWkxC1wMee7qZxoWfHOtnOmwFAgkZQJHhXViAWZaFVd4P72kEygEW0nYTFP0MbtIwrAg+rPjc8FYMwYeU9BHfiE3CNDeJslnQ3L8HpctdbA+B23mA2znQbqqw9GsEyr08Lll4LHlcmLeacM7HQpWGcT4whlOMFeYDHtiMh2Eh6IESx8CbmID1JK1uKfJIkaNfkbWWZzjTIoHawoF4wIHpw+6dQp93+4XN8kE1D0LR68S1SADK4wz+ZR/BEufCt+IEzvrc+g2LQS820lIVn8pDmI9/QULEjjfIFeggbXCeGHDo87sb5Z5Afj0UmloWuK1/+DEdgZzVhHTwD5zxOHBLjuDyxDjmbcPw2uvEejJWxYxiqiXEZnKP9OIRchj2kT3wNfkSez4xvnreyt1CJTnYUKVVPe6KMA6FMTvq6DQ7iv9O8jjnZ/HJ8ABMuaxYU6JVzCqmnXS8iTwi9/ES6YQT5Bj8sOsM3iHXc+mDHiPGE32QpQt6o42UBFoihhvR4MeoOv7Cacas+RG8dFlwVfBVqzRsqinRJjJNFEwRHkTCAt3lxT9JNLd8MGMEqvRBhi6gKusTAX0mOv5/3PmAR4eg4mfxpctafcXYTCXO1fwfvPx7+MfCvOMAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/64c5beb99a9fc5a0b00dd4882ab1f6a915ee0752-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/figjam/)
    
*   [Dev Mode\
    \
    Translate designs into code\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADNElEQVQokXXOXUxTdxjH8b/EBV9udrO4ZFm8mAEzlJlsTRbjFcsyMzDBDJIpxkklp6MlEiYwSmt9Q6tYakvX9kB7KJHhVDKYAkuLPbQceg6nPVRPC0vEKDUiBZRiUbgwkedZrJpd7eKTX/JcfPOQby+W6g1URdWA/grlO9+nokvUlCFfQVn2HqAGDd0q37k/Vc4fVCpD/leU9fsyavDUVdXQmR7qEnVMXXy6tGLXX0cV2xO6bLLWSRoTPxNiqFA2Xqu3eUesgRjvFOTeOlqmS9TyH5pmmWsNyrxDkHtrnTJdopGvV7XIozZODtn5eJ/eEzCp62pKtQc/JYjEgkoytXqEkFu6zsYRCzsluqIYYWQIXvbjgOF3ZJsH8e3tDgbMXhwwdCLbfAtFdwTCbglHbcPJIeN1/U2j8eM47s4KPa76gEsr15OxdkkX6YhNSZ44Sp44hJm7ILZLEHbfhUhHFET3APC0Azi7CUJOC/DtNuDbbMi7LKlQT1MXP6U+JLw4Uiiklfv4tLKISJ74m+D9SEcMIx0xyPDEQPJMQJgRIEQ3wXDrHvBb88BvzQe/dSf4rTuQde56FfQVzPCzZVFhWSkK6XKRT5eLJOKJ6SRP/P2Ha2+j8rvgKHDOahi6/BH4zAR95izIaFmHQ46NEGC/AD75IwjLShDS5RmEM7ONY21S5sM3UYEO44jFj7xDxDDDIeeoRta2BQNtG4C1Z6PPvA68JoK36U3AcV+CsHDgv+ByORB35Und32dvxHnn2KroGn/pPduzcrXSuNKv71rhHb5V3lXzKnztc5j05+J471YYdm4G9rcNKNz4BKIT30AkdRjE9FEYSyszSEVVyXFac8Lqv9DPBC0s061qYkwFxYy7rN493NLdJffVS9Pj+1cXEqX4eKIIJm9/jXGvAh9Ev8PE7E94L1WJkyk1/pNSZ5bsdh0sOKY5lN/3iz2n/8SV3NbCwzm6vLzcJkXRtqDdqHgy2WBanKl5+nz+OKZma2BhWoMLD9W4OFONz+ZrcX6+DucyajPIZ7H6jdkJTdad6GuCj5DcbGAIIpJpqYE8n6v9cCmp/XUpqZ1bSmpxKalde7f/619Q0kYqSbDbkAAAAABJRU5ErkJggg==)![](https://cdn.sanity.io/images/599r6htc/regionalized/c86a9976203e3264f89a20c5fb534a0d845d5f1b-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/dev-mode/)
    
*   [Figma Slides\
    \
    Co-create presentations\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADT0lEQVQokVXMf0zUdRzH8U+r9e0XjcTSCmrgTpFDQOWOSU1xrY2Q4+t9v3cex0Ff7jSDknAWc25OIJokdTUU+XE0Dq4doQlTOuQ6Lu4LnNz3LJN+fWuNmdWarVw/sJCuu/erOdcfvrbn9vrrwWL1OizV6/Br7QZ8bNNSyLyW5h25uN7IL9GJt+doNtiUiE7r1dFTyYLjDKcriXC5thbucbuBW2kTudXiEU7Hn+U0psNcilXg2DfVOTRXtY4CYiYO6B+hau1ycj2dTj/uNyQSw53XEJn8Kq6EPN/5x17uen3GbpampHTLPumuinzpXluBpDG1SIVlM9IqU6N0d2W+xPzCGvIUZ1Db5jQqSk2iVckc1a1fQZ/vLUF8pBuIhBIJRV74Qw5ejg6e+9r52kdq8Z5DappkVB+0mlWN2Kbq+DFVY2pVl5ebVBYyZ+H4U+loKkxFRWYKDBnJ5NzyGF1qKKXESDdRZJIoOoV4RMaCPA319AQ83W68dPAYSna6sHFHD7LEY9AKPcg1esAu1W6aH7Xqf/ZaNv11qmrzv2P2rfhy7zP42/k8yNcPioRugESKTJjxU3zcS78M9dCFjj7yHhii3XYX5e1opWxjHxXwAWKLTcaa71vszZed+/qvuhqD1wZav4i95/yJzvQukPxBDDeg6BSgyEBgiK53NtDFVwTyPbeNwnsqyb2rjQymk6QR36BUywvE4GlKgt+9EvJwFqZ9WzEzXoXwhwcxG3RBCY2TIs/FZievLIYn/omN9tHVVytoYFsmNegexohxPU5LLbAJMtJNzUiyPQGGo88yeHcxbGFs/tvfbl+8OHdP/BPlocT58Bqcn35y6dyk7bORYLff7f8heLyTJvZXUcf2UjpUJGBAcKDD9hYM4jA04pt41FIDRs38zYoYA8Dwe4Lhyp83f2L0Nl9v4P7amk/LK3eGL1h2d1C5ow4Oczu9yJ9FveCH2exGnqkN64z9KOADYFCmGBT51qIyc7f7mL3ufcY2dN2hLRsszdn+rpItdJFWbEee8A7lC4PYaPQiR+jFWvEosoVe5Bm9YP8P0VvhwrpqxtLuY7n2+juX2YrLVpRXRrVCF+l5PzJMjfSAtQwpViNWi0eg58ehMR3GMiuP/wBsd/hhCuinswAAAABJRU5ErkJggg==)![](https://cdn.sanity.io/images/599r6htc/regionalized/d5088df6b4e9cf91d8a615901b5d60e1534ce5bc-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://www.figma.com/slides/)
    
*   [AI\
    \
    New\
    \
    Explore all Figma AI features](https://www.figma.com/ai/)
    
*   [Downloads\
    \
    Get the desktop, mobile,
and font installer apps](https://www.figma.com/downloads/)
    
*   [Release notes\
    \
    See the latest features and releases](https://www.figma.com/release-notes/)
    

Use cases

*   [Design systems](https://www.figma.com/design-systems/)
    
*   [Prototyping](https://www.figma.com/prototyping/)
    
*   [UX design](https://www.figma.com/ux-design-tool/)
    
*   [Web design](https://www.figma.com/web-design/)
    
*   [Wireframing](https://www.figma.com/wireframe-tool/)
    
*   [Online whiteboard](https://www.figma.com/figjam/online-whiteboard/)
    
*   [Team meetings](https://www.figma.com/figjam/team-meetings/)
    

*   [Strategic planning](https://www.figma.com/figjam/strategic-planning/)
    
*   [Brainstorming](https://www.figma.com/figjam/brainstorming-tool/)
    
*   [Diagramming](https://www.figma.com/figjam/diagramming-tool/)
    
*   [Product development](https://www.figma.com/product-development/)
    
*   [Web development](https://www.figma.com/web-development/)
    
*   [Design handoff](https://www.figma.com/design-handoff/)
    
*   [Agile](https://www.figma.com/figjam/agile-workflows/)
    

Roles

*   [Design](https://www.figma.com/designers/)
    
*   [Engineering](https://www.figma.com/engineers/)
    
*   [Product managers](https://www.figma.com/product-managers/)
    

Organizations

*   [Enterprise](https://www.figma.com/enterprise/)
    
*   [Education](https://www.figma.com/education/)
    
*   [Figma for Government](https://www.figma.com/government/)
    

*   [Config 2025\
    \
    Register to join us in SF or online: May 6-8, 2025\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAABTElEQVR4nO2QP8uBYRTGbyaTlA2JZ7B4VgP5ADblfzJRT5GYDIbHn5XVgoiSokgKJWwGn+r3dp96P8FrfIdf55yr61zd91FKKb6M+g9Uf8PhcPAN1G+gy+UiEAgQjUYJh8N4vV78fj8+nw+Px0MwGMQwDJl1jUQi4tfo2TAMQqEQbrcbp9OJMk2TZrPJeDym1WqRy+Vot9vSF4tFOp0Otm1Tr9cZDoeMRiMajYbsaN22bfHG43F5gCqXyxyPR16vF8vlkvV6zePx4Ha7sdvtuN/vPJ9PLpcLn8+H9/vNfr8XTqeTeA+HA91ul0QigUqn06xWK1mYzWYSqo3z+ZzJZMJms2G73Yp2Pp9FXywWTKdTer2e9NfrVfRsNovSd6tUKvT7fflWqVSiVquRSqWEarWKZVlyBl21VigUyOfzxGIxMpkMg8FATpNMJvkBwtdZfGF8ewcAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/eb42e1b3e5042d96d6d542fffaae917dfba25521-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://config.figma.com/)
    

*   [Creator fund\
    \
    Build and sell what you love](https://www.figma.com/community-creators/)
    
*   [User groups\
    \
    Join a local Friends of Figma group](https://friends.figma.com/)
    

*   [Events\
    \
    Learn best practices at virtual events](https://www.figma.com/events/)
    
*   [Customer stories\
    \
    Read about leading product teams](https://www.figma.com/customers/)
    

*   [Shortcut: The Figma blog\
    \
    Stories about how products take shape—and shape our world\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACmUlEQVQokUWS3U8TaRTG528WAaFVKFuFbaAFg2ChtbS2QpVCsaVfTjv9ZjqdmfdAQFFhDWK8IMYLdzd7+du0k81eneTkyXPO86FNzAj3Hij+m/dnFAuPha1Nk8yLMm9e6jzftHm0IEz6PNzEjDfvzwrTfmHmkTDlH+0FzQP8D5r7TbGbUbSrTQp7aY72DinlBuynHSIRl2m/Gh+enFXMB4XVNWFzQwgte8SaR+SBpnxCeH1IUW9zqmpctHOc6QU+D7q875nsJocEgi5TPoU/IMS2hVpBaJSEVy+Fx0uCNpY5633pmxOiOyZvu1WUk+fOiPOzHudO6dhNi9SLIbEtm41nLttRRV9XfD3v88epgX48YDksaCNvwhFhbU2xElYkU0Na7TaX5jG3hSjXBzH6hQbxbZvVVYdy3mGgn3BSaXHjdvjr6zF3V3vUik2Ci4KWSihapQFmrUs1b5JND3mdGVDI9snvGOysG4R+P2Ha78mtHDlcDww+t/J8dyv8+vKOT26ZZKLPg4eC1iwNOW+U+djIcWU2sAyLTHLAStgem+6bd5lbsJhfGBAI2iRiNmatzcdOlRunxaVlkX9tE1z0QtXqby3O3hW5ah3w46LOz+saF1ae/JsWSyHFkyVF7pVF46jH4a5JKmFzmLVplU/oVnsUcxZPn6rxd6M8tGTcwa73uLvo8vdNh3++Z/jz2wYf7CqxLTX21yg63Lomt2JxbiqGTYVRbFDI5jCODQ6yiuATYWJEOCpxJqWwDOGTM+Raylw6RzRKPSIR4WFA2HymKB24mHXFWf+UD5aiX6tQ3U9z3tPp6cLyitflcbH9895iKyok4i7R5y5LIRnLGIEmfR7xYkhYXxfSSaG4b9KpdLCbQ3J7QiDoSf4Xgayg7OYDxFgAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/1883a9ebc4ce697b718301ad247c0fff45c572c1-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://www.figma.com/blog/)
    

Get started

*   [Plugins](/community/plugins)
    
*   [UI kits](/community/ui-kits)
    
*   [Icons](/community/icons)
    
*   [Widgets](/community/widgets)
    
*   [Templates](https://www.figma.com/templates/)
    
*   [Developer docs](/developers)
    
*   [Partners](https://www.figma.com/partners/)
    
*   [See all](/community)
    

Learn

*   [Best practices](https://www.figma.com/best-practices/)
    
*   [Reports & insights](https://www.figma.com/reports/)
    
*   [Resource library](https://www.figma.com/resource-library/)
    
*   [Demos](https://www.figma.com/demo/)
    
*   [Webinars](https://www.figma.com/webinars/)
    
*   [Help center](https://help.figma.com/hc/en-us)
    

![](https://cdn.sanity.io/images/599r6htc/regionalized/08060b215a52daf063231d88251ec2d9b0bd9061-513x512.svg?q=75&fit=max&auto=format)

FigJam
======

FigJam empowers teams to build better products, together. Define ideas, align on decisions, and move work forward—all in one place. FigJam is included with all seats on every plan.

[Try FigJam for free](https://www.figma.com/signup?locale=en-us)

trusted by the world’s leading teams
------------------------------------

![atlassian logo](https://cdn.sanity.io/images/599r6htc/regionalized/01d4ea19e824b3596f8f6c701d3b8319e49631b0-146x18.svg?q=75&fit=max&auto=format)![braintree logo](https://cdn.sanity.io/images/599r6htc/regionalized/2ff6045d0ab55331e071ce8d8eb1b7599e990075-133x18.svg?q=75&fit=max&auto=format)![dribbble logo](https://cdn.sanity.io/images/599r6htc/regionalized/c58b8c7de2db91357b690f215db6992f3538e67b-75x18.svg?q=75&fit=max&auto=format)![github logo](https://cdn.sanity.io/images/599r6htc/regionalized/a9bfb23cca986ee16b0547274bcd7461ffd373aa-67x18.svg?q=75&fit=max&auto=format)![microsoft logo](https://cdn.sanity.io/images/599r6htc/regionalized/cc8b81fd47ded1e82d83258e2f674e0951e20fcc-86x18.svg?q=75&fit=max&auto=format)![one medical logo](https://cdn.sanity.io/images/599r6htc/regionalized/a2544152178b2e3388b0eff5cdb37ceb8bb5f148-146x18.svg?q=75&fit=max&auto=format)![slack logo](https://cdn.sanity.io/images/599r6htc/regionalized/fb78b2f382a2d2d93b155601fbc9032379d2515d-79x20.svg?q=75&fit=max&auto=format)![the new york times logo](https://cdn.sanity.io/images/599r6htc/regionalized/83b8de3e223ba39d2a638470929518c10188199c-252x34.svg?q=75&fit=max&auto=format)![zoom logo](https://cdn.sanity.io/images/599r6htc/regionalized/3081387dc4c82dc9a24d653c3c86fa96b8c450a8-81x18.svg?q=75&fit=max&auto=format)![walgreens logo](https://cdn.sanity.io/images/599r6htc/regionalized/13a0eef20388c9c9d42d48c82ea5211360d31ce6-107x22.svg?q=75&fit=max&auto=format)![airbnb logo](https://cdn.sanity.io/images/599r6htc/regionalized/1622439415c22e4475400432eae4619d1592a8bc-71x22.svg?q=75&fit=max&auto=format)![asana logo](https://cdn.sanity.io/images/599r6htc/regionalized/60b2475fef8f3b7937bf0f87d2963942bade992d-91x18.svg?q=75&fit=max&auto=format)![basic logo](https://cdn.sanity.io/images/599r6htc/regionalized/f57de7a60072186315b1f73e8bcdde7dbec4751d-137x18.svg?q=75&fit=max&auto=format)![coinbase logo](https://cdn.sanity.io/images/599r6htc/regionalized/5346e3225c390cfbc1fb528a0b0d8443c50af995-102x18.svg?q=75&fit=max&auto=format)![dropbox logo](https://cdn.sanity.io/images/599r6htc/regionalized/c641bb5bbe69c6b42344fd2333924a206ef43736-92x18.svg?q=75&fit=max&auto=format)![herman miller logo](https://cdn.sanity.io/images/599r6htc/regionalized/1bd42f01581af00431a984e96081d8af05c40051-90x22.svg?q=75&fit=max&auto=format)![rakuten logo](https://cdn.sanity.io/images/599r6htc/regionalized/365a922fac7ab7bd921329b8652a60d35a605e85-68x20.svg?q=75&fit=max&auto=format)![vodafone logo](https://cdn.sanity.io/images/599r6htc/regionalized/1f96ed55745ae6e4bb23f98967e75b9bdff083d5-90x22.svg?q=75&fit=max&auto=format)

![atlassian logo](https://cdn.sanity.io/images/599r6htc/regionalized/01d4ea19e824b3596f8f6c701d3b8319e49631b0-146x18.svg?q=75&fit=max&auto=format)![braintree logo](https://cdn.sanity.io/images/599r6htc/regionalized/2ff6045d0ab55331e071ce8d8eb1b7599e990075-133x18.svg?q=75&fit=max&auto=format)![dribbble logo](https://cdn.sanity.io/images/599r6htc/regionalized/c58b8c7de2db91357b690f215db6992f3538e67b-75x18.svg?q=75&fit=max&auto=format)![github logo](https://cdn.sanity.io/images/599r6htc/regionalized/a9bfb23cca986ee16b0547274bcd7461ffd373aa-67x18.svg?q=75&fit=max&auto=format)![microsoft logo](https://cdn.sanity.io/images/599r6htc/regionalized/cc8b81fd47ded1e82d83258e2f674e0951e20fcc-86x18.svg?q=75&fit=max&auto=format)![one medical logo](https://cdn.sanity.io/images/599r6htc/regionalized/a2544152178b2e3388b0eff5cdb37ceb8bb5f148-146x18.svg?q=75&fit=max&auto=format)![slack logo](https://cdn.sanity.io/images/599r6htc/regionalized/fb78b2f382a2d2d93b155601fbc9032379d2515d-79x20.svg?q=75&fit=max&auto=format)![the new york times logo](https://cdn.sanity.io/images/599r6htc/regionalized/83b8de3e223ba39d2a638470929518c10188199c-252x34.svg?q=75&fit=max&auto=format)![zoom logo](https://cdn.sanity.io/images/599r6htc/regionalized/3081387dc4c82dc9a24d653c3c86fa96b8c450a8-81x18.svg?q=75&fit=max&auto=format)![walgreens logo](https://cdn.sanity.io/images/599r6htc/regionalized/13a0eef20388c9c9d42d48c82ea5211360d31ce6-107x22.svg?q=75&fit=max&auto=format)![airbnb logo](https://cdn.sanity.io/images/599r6htc/regionalized/1622439415c22e4475400432eae4619d1592a8bc-71x22.svg?q=75&fit=max&auto=format)![asana logo](https://cdn.sanity.io/images/599r6htc/regionalized/60b2475fef8f3b7937bf0f87d2963942bade992d-91x18.svg?q=75&fit=max&auto=format)![basic logo](https://cdn.sanity.io/images/599r6htc/regionalized/f57de7a60072186315b1f73e8bcdde7dbec4751d-137x18.svg?q=75&fit=max&auto=format)![coinbase logo](https://cdn.sanity.io/images/599r6htc/regionalized/5346e3225c390cfbc1fb528a0b0d8443c50af995-102x18.svg?q=75&fit=max&auto=format)![dropbox logo](https://cdn.sanity.io/images/599r6htc/regionalized/c641bb5bbe69c6b42344fd2333924a206ef43736-92x18.svg?q=75&fit=max&auto=format)![herman miller logo](https://cdn.sanity.io/images/599r6htc/regionalized/1bd42f01581af00431a984e96081d8af05c40051-90x22.svg?q=75&fit=max&auto=format)![rakuten logo](https://cdn.sanity.io/images/599r6htc/regionalized/365a922fac7ab7bd921329b8652a60d35a605e85-68x20.svg?q=75&fit=max&auto=format)![vodafone logo](https://cdn.sanity.io/images/599r6htc/regionalized/1f96ed55745ae6e4bb23f98967e75b9bdff083d5-90x22.svg?q=75&fit=max&auto=format)

The right tool for any job
--------------------------

From brainstorm to build and everything in between, FigJam makes it easy for teams to collaborate in real time.

1/5

![Cursors in a file adding stickers and brainstorming phrases on sticky notes](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAD2klEQVQ4jVWTb0wbdRjHHzYcMhYX3B+JjiwmvtXEGJPFlyYm+soXZnHOJfxpr3UbTIvZcGxCr3dFw1ilTqDQ9sodwgIDp3OajKgDVrZJ/1DaXnt37fXGGGAZrPyp0D/X+2mbLNEXnzyvnk+ePPl+IcdhkCdslYG3KcDZckVsT7osYNl+0d+9dThP0JI6HO7NVvJWpXypG+38ZIQB1IbA0eWB/T+cgP3Dx4EQaTAIDgA5hEGGVcPj3+1FrwECgX5S4rqy8taUaRGfbJ/vnbj0sMd5eaHX9e1qh8+S/GjCvnQQJl8pujA2UGQM0mCI9gEpMQUhzlMA2ZAaUgEVIAQQHxuGWRMqdZnXP54yxV132hc2J9vnN+60P0re71hemOqOd176/taRyhtV+yopbXGjYIHWGAPG/wrlMJaXlmQCp/bmIsf2rk4MvCT0z50OWpeFWUsC+bo20EznJvJ1Jded1nj/xevDR9+dvPCm1m06ZBQd5USsr5yMMXsJkS7BBQpA4bDizZma19fc1aqkr/azFffn59ib1CB77fZSZDCmCFRK5m0K4m25VTe9xly+/dOZBu+VL857uxubWZuOiNINpMTUECL9Ki5QO0HhNKWbMzW1a57qqeRs7dyje6fnxobOr/w2+E2GHx1HUXpT4W0ICTYlMT2wMtpx9yrV5OnwN7nM818Guh8QUcdDUmLGCZE+jvNUCSg8VpYJqnVpn2Yu4z2Jlpz16I+RBjQ+os9GbvwYjzKrIc6KWN6Wu+sckuwmt+XnFv/XGy3+NoSHzYgU7YiUmAgh0lpcoJ4FRVDvVkLaT5XpM1Ju/CzacjbI8T/rUXxat/7Y2TEauxrRsD3oGG/NfvDLTffRtnCXg4yaE8aoGRnF72SjZFdIieEIkcaeCsuUkEaneOvmlHs6pHjrFYXTIoXXrGbZk61PnK2Hfv0K7UqYk7tM7NDLxlifySj1rRklBzJKfcgo0f+/MMdhpXII08gs5s6x2rgS1iwqHLascFhIDqvPptgPn0e3BuHitQzoHzgqCJFuJkSaI2NMnJT6F0mJ+YuMMVOESJ8o/FAOqZ9JBVRH0kGVLhtS4XJYrZfDmEEOYY0ZFnt7w3OqLJ9RVLcNJE8/h/P2d3CeOmeIOvREjG4mYnQLIdJ1hojjDT1nL4Z0UFX092zt7i2f6kBqVl2RDqgr0sE8qoPbftWeNU/1DiS+B3A/C3rOvqMlZNvTErYdwHnqBUPEUQAXHPv0nL20mbXmq6eGhKsKEu4qSAdU+VwC4jWFmQ/9ll8FaPl9gE4f5BeaPJ3Q5O0qtCJfuacUmvJvsP8B2/OHGE4ik6EAAAAASUVORK5CYII=)![Cursors in a file adding stickers and brainstorming phrases on sticky notes](https://cdn.sanity.io/images/599r6htc/regionalized/8b99a61f768555fab9a11deccc60639cbe74695b-1680x1120.png?w=606&h=404&q=75&fit=max&auto=format)

### Brainstorming

Riff and build on ideas in real time to discover new ways to tackle tough problems.

[Learn more](https://www.figma.com/figjam/brainstorming-tool/)

![Three cursors creating a diagram using shapes and the snap-to-grid connectors](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAADzUlEQVQ4jUWRe0zTdxTFT6GAQwpbCDNQg3MZMxvOIAkL4ozLMjKnMZioGfJs1xKEBRrGqwVKmZu6EMVtkdIWhP5+5bnBLEymuA1R5A2llNJuCOU1wh5gslVofy3ju9BOd5Pzx01uPjnnHugrrVhpJDBXb/qaVc49JpWTa1TavYmGQEQ3g4CAOkVQe4bBtTUNLvd9A+lgPS4Pq0EW67Axo4FthgIzS8ExSwH/fE8wRxEPo8IeYahaL9HLraK+ipW9AJBaXIYW8Rq7SWR9riV50yu9/kuP2C5xwOHbeUGRnaIdh77lbZ8ho7vIBWdmaMB6k8CiJp5TSiZmUmG7rpdbL969NB0OFjzeactAU5bNTyO0h2oSSWBm1X3vmC7J7qjO3P2R7aLA5AsFgBE41psFAguc2w7JHYKZOgKzyrnLXO08oq+0Rn+SSwX7Xnlvt3/92dej5WVhVz9+9JL2sxXu6MCtsB90dIx8UBWhnLwetL5c+7xzjuLYHlGezu5mV2wsNxDMUwR6+ROWrm2T/ePJB+yAtJggjiIukUOf/iqIihcmqK+8PNJzb9+srjFr2dCgWhjXnv+t/1Y0M9Fw1DFNH2QstJ+DyN3A1a/dQFs7AREREELATo98kaM6lRFAn2kNVsdL4ptl+wwjXa9ZdJrSX/WazqVe7cXHNXfPMdrWcw6D5jCzRPmvEbiB2lIdljQEU0rGd6rawR2tWA0+cT470E9+8kBIQ1Lc0aac2E87akMnxvoCDUP1h8xD9Om59o63/87vjmLKOw4yDxu5zGqdtwN2N3D7h9stTymZN4wKe76+0pp5s2zsFbzP9cqjy/w1N67tvaOpDhn4rs2nRpbtR0k/Cvqp+NLOjWP3fdbP3va20a0eDqLAE0yAmaGAjXZ3yyaV4y2j0l41IV//vKd8PhwAa7xAsKu/kH/8oZgf25OXwn2QkxDRn5t0crgw+dX+pgMeNkELyMBfYIgCBAtuIOkhmK0jLHP1ZohJ5XzXqLQfGfzijxeyBWGsITEvfLAgRdaflyy+l5MQNVCQkjhcmHp1TMI/8bM0c4e2PARzFRJsPK4Cwe/uyPO0y+G2WBY18bKoCXtRvcnihNViTMIPHhHz4oYKU4/35iWFDhemvjkq4X2gK+LvN8nS2IYSASalAvxSlo6hPXJXoa6WF+j/tVRPQLYIFi4kYaL4Q09DicDPUCLYOSkVeE6VCn2MUiHHKBV6m2VpMEqFMJWmuYDPZvoGwXTNU239t2/hT/UiBvKT0Jef7NKYhIfxIj5GxDyMSngwydIwKRU+c/h0/gWj7xgR826LsgAAAABJRU5ErkJggg==)![Three cursors creating a diagram using shapes and the snap-to-grid connectors](https://cdn.sanity.io/images/599r6htc/regionalized/162dc7c722821d84fe55cf61de9cfc70e089980f-1680x1120.png?w=606&h=404&q=75&fit=max&auto=format)

### Diagramming

Work through complex user flows, processes, and systems with shapes and connectors that snap to the grid.

[Learn more](https://www.figma.com/figjam/diagramming-tool/)

![A section labeled "meet the team" featuring the photobooth widget and photos of team members](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAADcklEQVQ4jU2SO2wjVRSGr50IREEDNLEoaJAo6ZAoiKDKRqKEhgotiIKOloYiFhItFCuKTQHaIBGybGKidULsTeLxOGtvEttjz9szHr/mmRlnHTt+3Psjh6yg+KSjU3znPzqHrH/KyPonIA8+Z69s3MXSb1/gzc2v8WrhPl3oCJO4nh/H9cIorvOjuPF0HLdKNK4dDuLibi/eLQ7iz1XEQhHk28/KhJDvCMn8ALK3xuLcPfYO9zP9hl+ffi/sTr606/RjX8eqr2LV1/4PW/V1tuo3sNqTZnea5cl7zbPJa3BBABCi7YCcrA8XTB4fqvmrVPnAtCpHcqUtRXnfmOVcbcI56jg3x9OnuXnPaQxzluRweqVzrJ46Pxpnl+8CiN0I+ycgpV+jRU9lK6bQ4fh0mma3t6j8TKGOdkU70iU1heCGjjygrjGiekWdFTNpWs7npmpZz1hC+AH6t0K0QapbdLFbG6xoRZHjdx+xo9Qm5EKF9WohrLKPal7BeV6BWQ/g6H3U8jl29Od9VPkD2pLbWVsZLvdPEMPpXDgF0bJYbJ/3V4ySwUmFMtXLEuuKLutVhkzjbZZL8+zwgGd6zWa+MWCWIDOllIMl1qnduMg62mS5dzSIeRvzlU0QNYNFR5ysOPIV5yjPmW9e46JJmS1OUeOayKT2kd0/gCK00NUiNMU2a6sdeM2I+sY462l0uVWYxKQHIMTkQaTHWPQUrFyYjAubMxpaMxZajPnGjNWLKtv7fYMd7jxkakVnQlFk+492WPH4hHX1y1lg0KynsuXmySxWnSc08iDi7vVceOfCnPKhEeKiYSNsDhG2KBrVJnLbWyjt7cISWygdP8Mv937CH5sbeHouQpGDJ21ptAwZMQhzIQdSTw0WXBkfBY3JX4HWdTxZcYNG5IQWc3tq5CqlumucK67T6Lvymen+nUo7jx6n3J0CZx+fyQ8VIXwfwe2VG8cgtZ1R3KnjbV+dfeUp0Zor2UlfvUoGDZb09GnSUYdJRxslvcY02VOvknrVTpbO1OSTUm2tcGrclSvRW+jdPraaYUTYBumW2ct2HW84EpYcCYkXeDISgYqEryDhSkgEGhKRiYSrIdGqT5bMyvXr5vn4pVERBPzNyjMipkE8hZKwCRL1QCIHJOyARBYIi/6dPGfs/VfPCR0QWfRJveaRFwn/AQbeH2Sy9NWJAAAAAElFTkSuQmCC)![A section labeled "meet the team" featuring the photobooth widget and photos of team members](https://cdn.sanity.io/images/599r6htc/regionalized/39462187946b6633cfea14175922608f6c055117-1680x1120.png?w=606&h=404&q=75&fit=max&auto=format)

### Meetings & workshops

Add some fun and excitement to team rituals or facilitate cross-functional conversations in large group settings.

[Learn more](https://www.figma.com/figjam/team-meetings/)

![Two sections labeled "in progress" and "blocked" featuring Jira. A cursor chats "needs feedback!"](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAADc0lEQVQ4jUWQS2hcdRTGD01GrBQsiNsglMFFRZpFNq66cOlGqEy2Shdag126cRE3bupOJG6mBIkUOxWNeagYMRY1zWPmzjvJ3OZmnJs7M/c19/l/zL3/+z8yacQDP863+M7Hx4HLD29Bfv39569vLLx8fWPhpVdWbz8HAICI8N9uLVyafnr3hRe1u5ev9j6E6c8R4Sb8P4gIEvHZzdt/fnbp9v4Xr90pL935uL780Yr++5uN+HS2Rbo3mqQ726S910+Ur+esB+/N+6UP3uXl5Zs4LN+Qw4NZHFZmcVielf3dV2Xv8VVsfgvw1elP09/1/35rw9zf/MNtNI6o/rOROKULHumJtWK4zS+jw9VS0tn8Sw4rm3J0WMrsckmYuyXpNErotu+hWXlDHq9OwZZTzR1RvdBlZqXPXOGMg7GXRnyCL+LESQPPJGcHsXtYSd1OKHwtFZ7KE2uX88E2F26dS0/dk3b9HdlZy8H2qJ7T2KDQp65ihR6OwhAjSpBwjjxNMBKUOnRQ80cntcDVSegZSP0zpKMOEqeJ3Ncw9bu1zG7Oo7qWg61RNXfC+oUBcRU78KUfRDImVPJxkqVCIBEsduigOhppVcsZxJbrYhAEWRQGMo4CyUggedBXUrtVQPXHHPx2HjgoWMxTwkkzyuWEJBEyy7JJIJk09LzTmu2YxPICDAmVhDNJx1wyTpBHQyW12xeBXu080Oa+Ek9MbCxDMjEmWZoKjBIaO2RQDT2tGrr9OLRspJaTcduV3HElH1ky8XqKsJsFnPzwouG8ybxaQGOMGTuHMI6EM/R5RG3SrxNfraemRpOyisn3bUwftDAttTF9fISie1yTdmMe2+s5+NVVciozbhnc2bGYR1weEC+JiDeOYpcH1OQjexjrT6h//EQOju1sq0HFvf1YfLJLxKe7RHyjkKzV3JFW7RY21nLwi12eapPenMYHiz1uFXVuF8/Gz9C5df8fbi7p0ekicVuL0mwtZUr9vnh0UBTLe0WxslcUW5WifFpblMODOWz8MAXr5h5Uo5MrR0yfUbmR73Ajf8zOzrnQ17RAnYktZUZa1WvSrOazXiUvtHJedCv5zFDycliZQWPnimyUALadOqjcAAMdMNEHHW1QMwNUaZzrM3Sgz3WgXgck0yDBU4j4IfjDOgROE1jSgWysAroNEJVV+BfSzC0M26oOygAAAABJRU5ErkJggg==)![Two sections labeled "in progress" and "blocked" featuring Jira. A cursor chats "needs feedback!"](https://cdn.sanity.io/images/599r6htc/regionalized/4f4c8709fc6c0d2f802464d49854f29c196acdb0-1680x1120.png?w=606&h=404&q=75&fit=max&auto=format)

### Agile workflows

Facilitate conversations that keep sprints moving forward in stand-ups, retros, and more.

[Learn more](https://www.figma.com/figjam/agile-workflows/)

![A table with objectives and an alignment scale asking if the objectives are the top priorities for Q3](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAADJklEQVQ4jU2Rv28cRRTHxyEEJMxBAU3QwlW0EfwHCBEQiuipqaBCgoYUhBQWhW1hgYTteB1yBCQkqJGQknAubEKDiM8X+84W/nV7l/Xt3u3u/H7vzQ7aA4y/0lfz3mj00Zv3Ze0VO9W+YZ9tLengwdey3lrU9fYy1LeWbX1zUdW3lsykby/bemtJV/1L7Rv2+faKvTC/MMvUgmdbK5qdqnsbn9xp2Hdaq2Lhj+Xxzc2Qhzu3IHz4jQkfrBTh1qoMOw0Mt2/ZsBWK1fZNtbTTgPc7t+HFD69+wHzo2fa35n9gtIZP95r26v4debj3S67370jea6I4/tWKg7tSHN3TImqi6DVBHN5V8uieSaM1/C5aw0ufz80w/9Cz4+YZoEywxk/sZ9lAJaOI+2ygvEzQq5S8GMJprRL0Ymi9HIJRCf4kE3yl0Wgw7z3jJ4Yh4sQMCWsA9prW6kRK4bXRDglL56gkopIcVbWvTkDwSKiJ6EckfDWOY+acY1prZq1lRMQqas1a+6lSKhZceKU0IaIjIoeIREhIVF0hWmsJAAQi/gAAl6rpPP1r9KfAp4wx7wkhfs7z/L4QYgMANojodwDcBsQeIg0AoK+1eWSMPQTA74ncm2Xp66Ur645c4JCeQcQpBgDntdYvc84v53l+RQhxxVr7NgC8a7RaVLxoySI/kDz7S/BsX8l8z1q5bkE1tBFfcsW/4lrMaGsuE9ETTCnFpJTnhBDnhRCPKyUv5FI+ZrW+aLLkuj7p9VR8YFVypGR6rEUaaT5+JPMi5mk+yAdZXwyK4d5YFx8756YZ55wJISroBF7thbRioNVzOB5+AvHRLg4PMhwfpzKORvFONOp3+qMk7o+SPBr1syjvFXEnUdlH5Gh6kpAxZpLSJCmwU56QgTHTJPK3KE+vOz6aJ13MFoNibm99PLe7Pp5LB8Ws1Hw20/l8qvNruRGvT758Vp1Oh/mynEwJAOcQoEYALxC5AJ0PsmEZdDdssPubDUTiA1/6wJVlAIQXAaE2CeWsut3uBFbZlZ6VpWfOe1ZWa/Cebd73bOY1z754w7P0z3/e/efSlcyRY38DPYwZBy4Cq7EAAAAASUVORK5CYII=)![A table with objectives and an alignment scale asking if the objectives are the top priorities for Q3](https://cdn.sanity.io/images/599r6htc/regionalized/f2809314f36e0494c4e71ba06e66c08bd54ea75a-1680x1120.png?w=606&h=404&q=75&fit=max&auto=format)

### Strategy & planning

Get alignment and turn ideas into actions, from project planning to roadmapping—and everything in between.

[Learn more](https://www.figma.com/figjam/strategic-planning/)

Brainstorming

Diagramming

Meetings & workshops

Agile workflows

Strategy & planning

![Cursors in a file adding stickers and brainstorming phrases on sticky notes](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAD2klEQVQ4jVWTb0wbdRjHHzYcMhYX3B+JjiwmvtXEGJPFlyYm+soXZnHOJfxpr3UbTIvZcGxCr3dFw1ilTqDQ9sodwgIDp3OajKgDVrZJ/1DaXnt37fXGGGAZrPyp0D/X+2mbLNEXnzyvnk+ePPl+IcdhkCdslYG3KcDZckVsT7osYNl+0d+9dThP0JI6HO7NVvJWpXypG+38ZIQB1IbA0eWB/T+cgP3Dx4EQaTAIDgA5hEGGVcPj3+1FrwECgX5S4rqy8taUaRGfbJ/vnbj0sMd5eaHX9e1qh8+S/GjCvnQQJl8pujA2UGQM0mCI9gEpMQUhzlMA2ZAaUgEVIAQQHxuGWRMqdZnXP54yxV132hc2J9vnN+60P0re71hemOqOd176/taRyhtV+yopbXGjYIHWGAPG/wrlMJaXlmQCp/bmIsf2rk4MvCT0z50OWpeFWUsC+bo20EznJvJ1Jded1nj/xevDR9+dvPCm1m06ZBQd5USsr5yMMXsJkS7BBQpA4bDizZma19fc1aqkr/azFffn59ib1CB77fZSZDCmCFRK5m0K4m25VTe9xly+/dOZBu+VL857uxubWZuOiNINpMTUECL9Ki5QO0HhNKWbMzW1a57qqeRs7dyje6fnxobOr/w2+E2GHx1HUXpT4W0ICTYlMT2wMtpx9yrV5OnwN7nM818Guh8QUcdDUmLGCZE+jvNUCSg8VpYJqnVpn2Yu4z2Jlpz16I+RBjQ+os9GbvwYjzKrIc6KWN6Wu+sckuwmt+XnFv/XGy3+NoSHzYgU7YiUmAgh0lpcoJ4FRVDvVkLaT5XpM1Ju/CzacjbI8T/rUXxat/7Y2TEauxrRsD3oGG/NfvDLTffRtnCXg4yaE8aoGRnF72SjZFdIieEIkcaeCsuUkEaneOvmlHs6pHjrFYXTIoXXrGbZk61PnK2Hfv0K7UqYk7tM7NDLxlifySj1rRklBzJKfcgo0f+/MMdhpXII08gs5s6x2rgS1iwqHLascFhIDqvPptgPn0e3BuHitQzoHzgqCJFuJkSaI2NMnJT6F0mJ+YuMMVOESJ8o/FAOqZ9JBVRH0kGVLhtS4XJYrZfDmEEOYY0ZFnt7w3OqLJ9RVLcNJE8/h/P2d3CeOmeIOvREjG4mYnQLIdJ1hojjDT1nL4Z0UFX092zt7i2f6kBqVl2RDqgr0sE8qoPbftWeNU/1DiS+B3A/C3rOvqMlZNvTErYdwHnqBUPEUQAXHPv0nL20mbXmq6eGhKsKEu4qSAdU+VwC4jWFmQ/9ll8FaPl9gE4f5BeaPJ3Q5O0qtCJfuacUmvJvsP8B2/OHGE4ik6EAAAAASUVORK5CYII=)![Cursors in a file adding stickers and brainstorming phrases on sticky notes](https://cdn.sanity.io/images/599r6htc/regionalized/8b99a61f768555fab9a11deccc60639cbe74695b-1680x1120.png?w=840&h=560&q=75&fit=max&auto=format)

Riff and build on ideas in real time to discover new ways to tackle tough problems.

[Learn more](https://www.figma.com/figjam/brainstorming-tool/)

![Three cursors creating a diagram using shapes and the snap-to-grid connectors](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAADzUlEQVQ4jUWRe0zTdxTFT6GAQwpbCDNQg3MZMxvOIAkL4ozLMjKnMZioGfJs1xKEBRrGqwVKmZu6EMVtkdIWhP5+5bnBLEymuA1R5A2llNJuCOU1wh5gslVofy3ju9BOd5Pzx01uPjnnHugrrVhpJDBXb/qaVc49JpWTa1TavYmGQEQ3g4CAOkVQe4bBtTUNLvd9A+lgPS4Pq0EW67Axo4FthgIzS8ExSwH/fE8wRxEPo8IeYahaL9HLraK+ipW9AJBaXIYW8Rq7SWR9riV50yu9/kuP2C5xwOHbeUGRnaIdh77lbZ8ho7vIBWdmaMB6k8CiJp5TSiZmUmG7rpdbL969NB0OFjzeactAU5bNTyO0h2oSSWBm1X3vmC7J7qjO3P2R7aLA5AsFgBE41psFAguc2w7JHYKZOgKzyrnLXO08oq+0Rn+SSwX7Xnlvt3/92dej5WVhVz9+9JL2sxXu6MCtsB90dIx8UBWhnLwetL5c+7xzjuLYHlGezu5mV2wsNxDMUwR6+ROWrm2T/ePJB+yAtJggjiIukUOf/iqIihcmqK+8PNJzb9+srjFr2dCgWhjXnv+t/1Y0M9Fw1DFNH2QstJ+DyN3A1a/dQFs7AREREELATo98kaM6lRFAn2kNVsdL4ptl+wwjXa9ZdJrSX/WazqVe7cXHNXfPMdrWcw6D5jCzRPmvEbiB2lIdljQEU0rGd6rawR2tWA0+cT470E9+8kBIQ1Lc0aac2E87akMnxvoCDUP1h8xD9Om59o63/87vjmLKOw4yDxu5zGqdtwN2N3D7h9stTymZN4wKe76+0pp5s2zsFbzP9cqjy/w1N67tvaOpDhn4rs2nRpbtR0k/Cvqp+NLOjWP3fdbP3va20a0eDqLAE0yAmaGAjXZ3yyaV4y2j0l41IV//vKd8PhwAa7xAsKu/kH/8oZgf25OXwn2QkxDRn5t0crgw+dX+pgMeNkELyMBfYIgCBAtuIOkhmK0jLHP1ZohJ5XzXqLQfGfzijxeyBWGsITEvfLAgRdaflyy+l5MQNVCQkjhcmHp1TMI/8bM0c4e2PARzFRJsPK4Cwe/uyPO0y+G2WBY18bKoCXtRvcnihNViTMIPHhHz4oYKU4/35iWFDhemvjkq4X2gK+LvN8nS2IYSASalAvxSlo6hPXJXoa6WF+j/tVRPQLYIFi4kYaL4Q09DicDPUCLYOSkVeE6VCn2MUiHHKBV6m2VpMEqFMJWmuYDPZvoGwXTNU239t2/hT/UiBvKT0Jef7NKYhIfxIj5GxDyMSngwydIwKRU+c/h0/gWj7xgR826LsgAAAABJRU5ErkJggg==)![Three cursors creating a diagram using shapes and the snap-to-grid connectors](https://cdn.sanity.io/images/599r6htc/regionalized/162dc7c722821d84fe55cf61de9cfc70e089980f-1680x1120.png?w=840&h=560&q=75&fit=max&auto=format)

Work through complex user flows, processes, and systems with shapes and connectors that snap to the grid.

[Learn more](https://www.figma.com/figjam/diagramming-tool/)

![A section labeled "meet the team" featuring the photobooth widget and photos of team members](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAADcklEQVQ4jU2SO2wjVRSGr50IREEDNLEoaJAo6ZAoiKDKRqKEhgotiIKOloYiFhItFCuKTQHaIBGybGKidULsTeLxOGtvEttjz9szHr/mmRlnHTt+3Psjh6yg+KSjU3znPzqHrH/KyPonIA8+Z69s3MXSb1/gzc2v8WrhPl3oCJO4nh/H9cIorvOjuPF0HLdKNK4dDuLibi/eLQ7iz1XEQhHk28/KhJDvCMn8ALK3xuLcPfYO9zP9hl+ffi/sTr606/RjX8eqr2LV1/4PW/V1tuo3sNqTZnea5cl7zbPJa3BBABCi7YCcrA8XTB4fqvmrVPnAtCpHcqUtRXnfmOVcbcI56jg3x9OnuXnPaQxzluRweqVzrJ46Pxpnl+8CiN0I+ycgpV+jRU9lK6bQ4fh0mma3t6j8TKGOdkU70iU1heCGjjygrjGiekWdFTNpWs7npmpZz1hC+AH6t0K0QapbdLFbG6xoRZHjdx+xo9Qm5EKF9WohrLKPal7BeV6BWQ/g6H3U8jl29Od9VPkD2pLbWVsZLvdPEMPpXDgF0bJYbJ/3V4ySwUmFMtXLEuuKLutVhkzjbZZL8+zwgGd6zWa+MWCWIDOllIMl1qnduMg62mS5dzSIeRvzlU0QNYNFR5ysOPIV5yjPmW9e46JJmS1OUeOayKT2kd0/gCK00NUiNMU2a6sdeM2I+sY462l0uVWYxKQHIMTkQaTHWPQUrFyYjAubMxpaMxZajPnGjNWLKtv7fYMd7jxkakVnQlFk+492WPH4hHX1y1lg0KynsuXmySxWnSc08iDi7vVceOfCnPKhEeKiYSNsDhG2KBrVJnLbWyjt7cISWygdP8Mv937CH5sbeHouQpGDJ21ptAwZMQhzIQdSTw0WXBkfBY3JX4HWdTxZcYNG5IQWc3tq5CqlumucK67T6Lvymen+nUo7jx6n3J0CZx+fyQ8VIXwfwe2VG8cgtZ1R3KnjbV+dfeUp0Zor2UlfvUoGDZb09GnSUYdJRxslvcY02VOvknrVTpbO1OSTUm2tcGrclSvRW+jdPraaYUTYBumW2ct2HW84EpYcCYkXeDISgYqEryDhSkgEGhKRiYSrIdGqT5bMyvXr5vn4pVERBPzNyjMipkE8hZKwCRL1QCIHJOyARBYIi/6dPGfs/VfPCR0QWfRJveaRFwn/AQbeH2Sy9NWJAAAAAElFTkSuQmCC)![A section labeled "meet the team" featuring the photobooth widget and photos of team members](https://cdn.sanity.io/images/599r6htc/regionalized/39462187946b6633cfea14175922608f6c055117-1680x1120.png?w=840&h=560&q=75&fit=max&auto=format)

Add some fun and excitement to team rituals or facilitate cross-functional conversations in large group settings.

[Learn more](https://www.figma.com/figjam/team-meetings/)

![Two sections labeled "in progress" and "blocked" featuring Jira. A cursor chats "needs feedback!"](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAADc0lEQVQ4jUWQS2hcdRTGD01GrBQsiNsglMFFRZpFNq66cOlGqEy2Shdag126cRE3bupOJG6mBIkUOxWNeagYMRY1zWPmzjvJ3OZmnJs7M/c19/l/zL3/+z8yacQDP863+M7Hx4HLD29Bfv39569vLLx8fWPhpVdWbz8HAICI8N9uLVyafnr3hRe1u5ev9j6E6c8R4Sb8P4gIEvHZzdt/fnbp9v4Xr90pL935uL780Yr++5uN+HS2Rbo3mqQ726S910+Ur+esB+/N+6UP3uXl5Zs4LN+Qw4NZHFZmcVielf3dV2Xv8VVsfgvw1elP09/1/35rw9zf/MNtNI6o/rOROKULHumJtWK4zS+jw9VS0tn8Sw4rm3J0WMrsckmYuyXpNErotu+hWXlDHq9OwZZTzR1RvdBlZqXPXOGMg7GXRnyCL+LESQPPJGcHsXtYSd1OKHwtFZ7KE2uX88E2F26dS0/dk3b9HdlZy8H2qJ7T2KDQp65ihR6OwhAjSpBwjjxNMBKUOnRQ80cntcDVSegZSP0zpKMOEqeJ3Ncw9bu1zG7Oo7qWg61RNXfC+oUBcRU78KUfRDImVPJxkqVCIBEsduigOhppVcsZxJbrYhAEWRQGMo4CyUggedBXUrtVQPXHHPx2HjgoWMxTwkkzyuWEJBEyy7JJIJk09LzTmu2YxPICDAmVhDNJx1wyTpBHQyW12xeBXu080Oa+Ek9MbCxDMjEmWZoKjBIaO2RQDT2tGrr9OLRspJaTcduV3HElH1ky8XqKsJsFnPzwouG8ybxaQGOMGTuHMI6EM/R5RG3SrxNfraemRpOyisn3bUwftDAttTF9fISie1yTdmMe2+s5+NVVciozbhnc2bGYR1weEC+JiDeOYpcH1OQjexjrT6h//EQOju1sq0HFvf1YfLJLxKe7RHyjkKzV3JFW7RY21nLwi12eapPenMYHiz1uFXVuF8/Gz9C5df8fbi7p0ekicVuL0mwtZUr9vnh0UBTLe0WxslcUW5WifFpblMODOWz8MAXr5h5Uo5MrR0yfUbmR73Ajf8zOzrnQ17RAnYktZUZa1WvSrOazXiUvtHJedCv5zFDycliZQWPnimyUALadOqjcAAMdMNEHHW1QMwNUaZzrM3Sgz3WgXgck0yDBU4j4IfjDOgROE1jSgWysAroNEJVV+BfSzC0M26oOygAAAABJRU5ErkJggg==)![Two sections labeled "in progress" and "blocked" featuring Jira. A cursor chats "needs feedback!"](https://cdn.sanity.io/images/599r6htc/regionalized/4f4c8709fc6c0d2f802464d49854f29c196acdb0-1680x1120.png?w=840&h=560&q=75&fit=max&auto=format)

Facilitate conversations that keep sprints moving forward in stand-ups, retros, and more.

[Learn more](https://www.figma.com/figjam/agile-workflows/)

![A table with objectives and an alignment scale asking if the objectives are the top priorities for Q3](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAADJklEQVQ4jU2Rv28cRRTHxyEEJMxBAU3QwlW0EfwHCBEQiuipqaBCgoYUhBQWhW1hgYTteB1yBCQkqJGQknAubEKDiM8X+84W/nV7l/Xt3u3u/H7vzQ7aA4y/0lfz3mj00Zv3Ze0VO9W+YZ9tLengwdey3lrU9fYy1LeWbX1zUdW3lsykby/bemtJV/1L7Rv2+faKvTC/MMvUgmdbK5qdqnsbn9xp2Hdaq2Lhj+Xxzc2Qhzu3IHz4jQkfrBTh1qoMOw0Mt2/ZsBWK1fZNtbTTgPc7t+HFD69+wHzo2fa35n9gtIZP95r26v4debj3S67370jea6I4/tWKg7tSHN3TImqi6DVBHN5V8uieSaM1/C5aw0ufz80w/9Cz4+YZoEywxk/sZ9lAJaOI+2ygvEzQq5S8GMJprRL0Ymi9HIJRCf4kE3yl0Wgw7z3jJ4Yh4sQMCWsA9prW6kRK4bXRDglL56gkopIcVbWvTkDwSKiJ6EckfDWOY+acY1prZq1lRMQqas1a+6lSKhZceKU0IaIjIoeIREhIVF0hWmsJAAQi/gAAl6rpPP1r9KfAp4wx7wkhfs7z/L4QYgMANojodwDcBsQeIg0AoK+1eWSMPQTA74ncm2Xp66Ur645c4JCeQcQpBgDntdYvc84v53l+RQhxxVr7NgC8a7RaVLxoySI/kDz7S/BsX8l8z1q5bkE1tBFfcsW/4lrMaGsuE9ETTCnFpJTnhBDnhRCPKyUv5FI+ZrW+aLLkuj7p9VR8YFVypGR6rEUaaT5+JPMi5mk+yAdZXwyK4d5YFx8756YZ55wJISroBF7thbRioNVzOB5+AvHRLg4PMhwfpzKORvFONOp3+qMk7o+SPBr1syjvFXEnUdlH5Gh6kpAxZpLSJCmwU56QgTHTJPK3KE+vOz6aJ13MFoNibm99PLe7Pp5LB8Ws1Hw20/l8qvNruRGvT758Vp1Oh/mynEwJAOcQoEYALxC5AJ0PsmEZdDdssPubDUTiA1/6wJVlAIQXAaE2CeWsut3uBFbZlZ6VpWfOe1ZWa/Cebd73bOY1z754w7P0z3/e/efSlcyRY38DPYwZBy4Cq7EAAAAASUVORK5CYII=)![A table with objectives and an alignment scale asking if the objectives are the top priorities for Q3](https://cdn.sanity.io/images/599r6htc/regionalized/f2809314f36e0494c4e71ba06e66c08bd54ea75a-1680x1120.png?w=840&h=560&q=75&fit=max&auto=format)

Get alignment and turn ideas into actions, from project planning to roadmapping—and everything in between.

[Learn more](https://www.figma.com/figjam/strategic-planning/)

Get a running start with templates
----------------------------------

Kickstart conversations and projects with over [300 ready-made templates](https://www.figma.com/templates/)
—or make your own.

1/8

![A template designed to define project goals, assign responsibilities, and align on deadlines](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACNElEQVQ4jZ3TS2/cNhSGYf3/n9FFd0GRtggKJCgGqd0gCIJcaiNx7PFYHs1II1EUKZK68fIWMzHaZNMgXTzA2fA7XJwvSykR42fH+SRGYoykdJS+S+aXgOsnbD9grcMYg7UW5xzDMOCOTvNnzlnGccR7T/CBEMLD8ofAafCIsqepFLKVCCEQTYNsBVorlOqQUtKeHOfutHScJoZxYJzGU+i/gaNHVD3NXqGkwWiDbhtUXWDkAddLeq1opKJqFVIbjBvRzlJrgTASOzmmMBNiPAYuNGXHPm8QB4XpLL2oEcU1YremF3v6TlA2LXkpKEWHUIaD7shFwb0oOOgGPRqW6Mnm0dNWhirvaHYGVTtMfUAVH1DbC2x1Rd8WFI3kptKsa0PeWgqt2Kgda3nPRu84DO3pl9k8RLptoP7kqa8D7e2M225Y8hV+8xshf0q/e8PlvuNsF/ijCLwoPa9bwUv1kfPuPefdX1yYW7S3ZJNNiHVi/y6yfweHiwl7fUn89Ij08QfS1Y90tyte3LU8vk38tE78eud5VpU8aV7xuDnj5+acP9UF7aLJZpfoton6KlJfJdqbmSFfE/NnpM0vpLsn9MUr3u8VqyLx+zbxfBd4KRrOuktW8g2r7i1vzQ3KG7KwJCaTGFRi6BKjCvhek/qC1Oek/p7Z1kg3UbpEaROVi9TTSDlL9rM4EYtmigtZOrYkfC0d7yos/4jBn07Cx/SFiE8Bn/yDQEyR7L+r9D+q970PvhX4N4wQ4l4aLgkRAAAAAElFTkSuQmCC)![A template designed to define project goals, assign responsibilities, and align on deadlines](https://cdn.sanity.io/images/599r6htc/regionalized/63bca92d18d1964779d0904f48bd44e6e1d1eaf5-1680x1120.png?w=606&h=404&q=75&fit=max&auto=format)

### Project kickoff

[Start with this template](https://www.figma.com/file/jGlMTd423n17aVWQaw29qf/Project-Kick-Off-Meeting-Template/duplicate?source=website)

![A template designed to improve workflow and processes by outlining a sychronized process ](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACKUlEQVQ4jW2TfU/bQAyH+f4fahOakMY0adKGgKZAG1rapG3SJr33890zJbSCMXT63R9n+5Htsy9yzqSUiVFGJUmslhVXl9fc/plQrSvqumK327Hdblmv12w2G6y1DLH5gy6GK/hI12oOjcLbgFaGTbXl0B4wWmONxTmPdRZjDM5ZROQE4aSPwL3i0Cq8i6QE3mV0L9iuR0yNhA5nBa1A64xSGWciyR7JtiOLfwPGkDC9YHqPuI7oW7aNZvrkWJdLfPMde7hj8XKkeAyUpVDOM9u1IW5m5O3kFXoGepPpVtCvLfFwjz/8oFgVfC1mTFcl4Vhw7Ob8fCr5cjunKDvqSuhaj3Q1uV+RvX6XocuoBnTjEfWMP94x3U34tr6l7GuSBLQz/FrNuXyY8Fzt8VYQSeQk5BTJOb0Bc8okGTQ4RJI4lFe0rseOvYEoiWZvWDwcaWaBaDLjyZ98yqjR+ObASWf7OFoa9DKjlvkdMP8/NueAz8bgDB4ehyqG9kQHSRhjUvoEKDFhVcSpiDiHOIO3EWMDR+vQNuJMxqshS0GsJ1qPVR6nIxKGVr0DepNoF0Iz09h6it/d0W32PFQbrl8euSlbymmivs/0RYd/fiJslui9RneBYIcNewccyhjGpp0bbH1PaG44NnsmdcXVsuD3vGFWZKq7TD85EMopslsQlBuTiS79Cxz6IGEAJ8RbUrDEENHe0w/r5iLeZrw+lew8KQRSfAWNsFPJfwGCBO3StuYtOQAAAABJRU5ErkJggg==)![A template designed to improve workflow and processes by outlining a sychronized process ](https://cdn.sanity.io/images/599r6htc/regionalized/a56ea762432f6770424649e7eab5694cd90099e2-1680x1120.png?w=606&h=404&q=75&fit=max&auto=format)

### Flow chart

[Start with this template](https://www.figma.com/file/GGpts9zMtNJJUN8zy57DjY/Flow-Chart-Template/duplicate?source=website)

![A template for teams to use weekly to connect, share gratitude, and align on project updates](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACuklEQVQ4jV2Ty28bVRhH/V93i1iURRdIsK2EuoBVW1EJoUqBSFShqQJxCLbj2OPJ2ON53nnced95H2QPXcDibI+Ofp++WVsrMhkSCh/hT3ieSxgE1EoxDgPjOKHKBt9KsAyBbXq4tsB3IjwrxLF8PNdn1qqCUnoU0qfKYqpcThSSWmW0bcHQ1YxDR5W12JsCfZ5grhPcpxxrXWKuSuxdhnOQzPqmpM0FfREwqoSujKnTgDL18YSO7WmoIoK+PQuP64ztTcxhkeFqFftFyvbW5fHO4P5mxWzsagaV0FcRg4rJIxv7aYNz2LB+uGb+5yWhu2fsGqqiwXlKOawSfL3Gf6p4uNX4ePkLny7f8fHiNbO+VWSxi2dvCHwd76ihrf7C3C0xHm9Z/vEBd7+lrUtU0eLoOYdlgdj1OFrBbxdXvHr5DT+8fM6Pr75i1jUVR/2Bm9/fs7y/wtqvsY1HhKWTCZPIeUKKI60qKfIGbZNx96nAmPfY64Jf33/g6xfPefHFM7798tlU6Ow3zK8u2C5uSIMjKvVpMkFfRme6SjK0NXlZs9rHXN+l7O5agm3Ncq7x07ufefv9W95895rZ6YJ55CKOO/LQZqhiqJP/0mSMfYNSHa5fYRg1nt4jzQFxUBy1hMM6Rr8XU6FKBZV06cqI4VTzf+rsfJRWjWT+SHwYkceRxD4B0gJ5hNgcmbVVjvQMAktDCos09EiFT3Yi9MljgcolfVujyh7baNAXLZ42kFjjmZPoM7OmygldE3u/wzH3eKaNMDyCvU9g++cPSmXE+aOKmsUu5vo2Rf+7ITH6Sfhv3VTYKPJUEouAyDkhie0MaWfEbkocSLJEnoVl1bB3ch62Jda2Qx6mys/C0wyzrlFUZUGR5GSiIPWrM4lXEloJwg6QUUhTV7RqIBMj0fEkmTaU1iSKzdOOI/8ASb3HBFlOGz8AAAAASUVORK5CYII=)![A template for teams to use weekly to connect, share gratitude, and align on project updates](https://cdn.sanity.io/images/599r6htc/regionalized/493e4a8560fde38005a7dab94c46c82dc112ffc8-1680x1120.png?w=606&h=404&q=75&fit=max&auto=format)

### Weekly team meeting

[Start with this template](https://www.figma.com/file/4UoBZZyVBizLzzWLjtv7ez/Weekly-Team-Kickoff-Template/duplicate?source=website)

![A customer journey map template that helps visualize the key interactions of a product experience](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACLUlEQVQ4jXWS6W7bOBRG/f5P1QcoimmSJsgkjuXYWrlJpChRC3lmLBvpwJj+OCBIAgffXXbBL7TNSCt7lFQ0TYO1lnVdSSn9kRgjo3d0WqCVpK7rjd3oVsRxpD54RG6RdYvrHNPgmEdHXAIpLnespHUmeItrBbZVGC03doOJlM8r2feZ4nnGFAu96unFib75YLINMdg73HYuQ8vUK2ZvvtiNNiH2kezHQPazR2YzXox4kdOVb7gmYzQloS0ZTcFgCkJXMtua0FZ4XWz/U1dtb7upT+h8JnsyvP/VUL57ehEYdIOpDhuDzgn6k7F+YSgeCNUTs3gn1Dn+nDPkBWNdMsqS3eQT6hTIfmkOj4rizeGagdApvM4ZTMniBLH7JFbfWU/fiOdvxOqBWFSsmSZmirVQzEJdE4rPkcOjZP8gOb9abO2ZrSZ0FWNbMdma1RYk80aSv67oD5IWJGGuaM3aKXahT8hLwifD/qckf3XYemC6JXTyvJ2X/qRB3qFIg76hSF5e1ibSHAdOL47idUQcZvomEFqFVzn9H4WKNF7QNy7yy9rYhdPfmo9HSb2fMOdELyYGJenKM215wonTNuVoC6J6J7ZHkhf/kekrg7oIV4p9x/HZ0HzMtOeElxPBaHxT4mVJ6GqWXhBtThQvRL2/E5rfwksPTbEiswV1jL+Ft5IHXWyya48EyZWk/lb+/5V8mbKtwJxAf/IlHFuJk6dtKLNrNiFfaW6J7u//JvwHQD3f0+g+AysAAAAASUVORK5CYII=)![A customer journey map template that helps visualize the key interactions of a product experience](https://cdn.sanity.io/images/599r6htc/regionalized/25fe4b5bff82596b7238f0b2d6c484b0eceacaa3-1680x1120.png?w=606&h=404&q=75&fit=max&auto=format)

### Customer journey map

[Start with this template](https://www.figma.com/file/8FYotKDlDQaKd3ShriJbVq/Customer-Journey-Map/duplicate?source=website)

![A stand-up template to keep your team up to date with progress and execution on projects](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACT0lEQVQ4ja2SWY/bNhRG9f9/SJpkmvcG8djTx2BsB0HRepnGmxabMkVroSRKNnkKaibBzHsfDu4lyO/wgmCgy5Z4nyJiSVVq6rr+hdbP67ZtB/y6qqo3Z+q6xhiDtRbnHEGWFvw1e2Lx/QfhISaKIuI4JkmSgePxiJQSpRRCiGE/DMNf506nE2VZcrvdnoW5qvh3eWCzPnA6iiGUpinn83lAZdkwlZ/OB73YX5Bl2dAXRfF2wqZpyeSFTCrKohxCHi/x1e/7233A4/vX2BfRT4LO9JS5prxomtpgmo626Wgaw6WsyXWL6W9crRvoraXpW8pO01xbenuld1eu7oZ1lsA0PZkokacSnbe0usfUV7TuOamKSBaoqqVqe7S5UpkOUWUcVIyoJIWpqPqa+kUe+LBMKsShRMYaday5iAaVGfZnzepY8COt2MmafdYQFTX7XLCUG57Ujk0esS1iEp0O0qAtLemmI/7bDCT/GI4LQ7jrmUUdo60ZuN8axruOr0fNo9wyTqfci8ehjtMZj2qB7HKCJneIhSWcWcKpJZpb4m+Wzdoy2Vo+rC3vV5aPT5a7J8vnsGGULvkkHrg7TfhdPPBJ/Ml9NiMx8qfQEU6fiWaOeO7YrBzjreO3tePdyvF+7eWOPw4tX9IFd2LCh9OYj2LCnXhglE2fhaZyqJ0jXVrE0pKuLOe1JTk45oljFFpGB8s49Di+CsPjZc9EzRmr+VAf1DemxRLZ5wS3q6OrHV78mrZx5K3j3LxFmRuXvh7e6/yC7y99RWd7gtef8v/gP/WH1J0hm0H0AAAAAElFTkSuQmCC)![A stand-up template to keep your team up to date with progress and execution on projects](https://cdn.sanity.io/images/599r6htc/regionalized/d7f5f429834deaaf89b72e14e84a63feb87ef991-1680x1120.png?w=606&h=404&q=75&fit=max&auto=format)

### Standup

[Start with this template](https://www.figma.com/file/iQAV4LPnU95m11vhfloaRF/Standup-Template/duplicate?source=website)

![A retrospective template that helps teams consider highs and lows of a past project](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACY0lEQVQ4jWWTyY7cNhRF6/+/Ivts8gfZOMnCcNIG0oYnVJVr1MBBEsVJHE4gVaERwCAOQHBxeB/f484vAT0N9KJHCPGGMYacM7XWN0opuDmgxIAUEqXUhpQrcmMXYmCYRpRWaK3Rw4CZDcuybII3YankpeBsYNAjUmhEp+kaRd9qRm1wzrPz0SMnRT9I1KjRZmAOllgWlpLINZNTwXYJ9T2ijp7uMtKc9cb1oLkdNbKdmWRg51OgtYKjvrBXZ476yt30jMvMnD2xLkSfuf9j+fLbwOmdpf3m6X441NXTrxccPOoWkOdVmCPH+cZ78cq77oU/2hf+ld/pg8Zkh6+R6DLnPw0vv/Qcf5+ZbgWnK36sOFWxsuKGilWFnVs8+/HCB/mZ9/rTxie9p7WSIRp8CY+EHxyvvyrOf81YmVlc/YloC7uQI9IPNF7SLoomCH4MN/bixG3qsMmTloK5JNqPHvHVM7YRbzLJ1zeizcyjZ7c+/JwcQ5w2dJg4mTsfxVcO0w2bPbkU8rKmKPgxY1UizIUUeAohuvIU1oRZLMIqeiMRTnP1PV/mE5fQ40qg1EJdV63kVEnhQY7rKD1IcaX8L2GYNsbFMCSDShNjnvElPoTPWUwpEVzAG4ebHd49iCFuH2EX88IYDTpOW1dtCdjit/02NmV5E66DHq1jugv0uWG4dwzNSsssFWGYHk1RfkAEvaVb5dJpzsOVZupw6VnylrCwTA577Jj3d+ylYz62zIcGfxWEs3iUbJJlTDN67bZqObYnXr79zefDK8Ybthd8CouNlMaQm5EiDaWZKPeJ0q9nE/8B68LkNaJt0CsAAAAASUVORK5CYII=)![A retrospective template that helps teams consider highs and lows of a past project](https://cdn.sanity.io/images/599r6htc/regionalized/4b17053d6467d39c0474749e68f950722beceb04-1680x1120.png?w=606&h=404&q=75&fit=max&auto=format)

### Retrospective

[Start with this template](https://www.figma.com/file/VbwHPdafQj4pV2gpUUr51R/Project-Retrospective/duplicate?source=website)

![A template to compile plans and align with leadership on product roadmaps](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACLUlEQVQ4jZ2SzU8TQRiH+3/rzYvGgzdvHggXE8WExBijgQSNYgSJgHyLpYW225ntdndndz52ZvYxLSByMYbDc/vled/fvNMxpScbaMT5FJFIhJghkEIyneZU2iKUpScL+iPJaCwYC8kkm2KMJcSADY6kTulmF3TKoaO/ruivl8izkonIyWROnilMbcm1Z2OgeX1UsHY25HtyzEnSZXw+oR5rvPZktmBd7LDUW6WjBp7+B01/zTA+Moh+RTauqApDYwNpFVg+VDz5Ilk8OubN6CObgy3kocAda8LUM6pTXvZWebDzjE5TRdTQkPdyJj1F2jeUskEXnsZEZBVY2lc8+iRYPDjlffKV7WSP7NeUpmsJRWBYpzzvvuP+t6d02tgSvMTUe+TygmykKUSDShusCggVeHVQ8fjzhBf7ko3BkGOZMpSG6aTB2shQXwrvbc6EbUuIGc6dYmpBXTjqwqPL2YaBTEdWuoaFbcXbk4qtC8WPpGZfGM4yh3KRxGQsn6/xcHfhUti2nhgtMXpiaP8w2976losycJA27AvLzqhie1Szk2hOJpbSBsqmZjc/ZSXZuBbyF+0t4rxBiwst49Kxl9wIf14JfQzoYOfiK+G/mU0KMZIqx0Eyq1xxJA39vKFy8SrDnP8SXr5zS147emnF2aRmVFoy7bE+zltc5/5bGGNL7Wb/0iGVIVV6PsD6cEdhOztQRNlAYRqmtaHQDucvK99J2ISIbm4wPuLj7dxvGT/eoA8mtVkAAAAASUVORK5CYII=)![A template to compile plans and align with leadership on product roadmaps](https://cdn.sanity.io/images/599r6htc/regionalized/f0fcd55b2b601c4286e45030739ba37a01e05c04-1680x1120.png?w=606&h=404&q=75&fit=max&auto=format)

### Roadmap review

[Start with this template](https://www.figma.com/file/PQkFgQA77plJMrxMs8PXWt/Roadmap-review-template/duplicate?source=website)

![A Gantt chart template that divides up projects into categories to visally show the timeline](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACj0lEQVQ4jZWS3U/bVhiH+1f3Yje96NZ2U6Wt0hgV3aKhokkVQ5RVjRhDaxLjpA2UjrJAyIchX8ROnMT28bGd+OOZnBSFdVe7eN7z0++8eq7eO0kckYQ+SeAQCgffFHiDWxgC+Yk033Q3vTcQzGxBMvVJXXfSQegRezZOz6bzXqAVXS6LLprq0jxwaSpLNFWifeoaBRetKDAbNqGUS2Eyk8TSwmpPuCyNqOcnNBWHet6inrNpFiT1vKCWs9EOJJriUcs51N7YNAoW+vmIwBFLYTx1mTkjnKsBerFDd1/j+s+rOUa+z6hkYShD+rkepjpm/FYwUC2GqoX5zsKuj5mJz4T+ZMikatDJ6lTXW1QydWobF3S3u+ivLbo7Bu2tFv1XQ/SsoP9aYGQl5r6Hey6IXO/fQs8a0qqaHOy6/PqzS2Z1xEZmwG+bFns7kv2XDnvbi7y347G7nb4B6t6UyzOPqbwtDFzExODjVYeND20eFdp88bvG3d0qd/+ocO/NGV8rVR4oNb5UGjxSGtzP1fiq0ODZUYtyy0B6LtwIQ9/BHnU5bx+TvcjyS2WL9ZNNVg6f87C4xjfFNZ6UnvKtusL35R95dvycH95lWD3MsFnZ4rR/jO9bS2EUCOSkh9kt07l4Qevspzn1v9c4+7hK5WSF08PHnL69z8XxY+onK5y//47aX09oV9ex9BKRP751NlNJJE2CURPZLeN3ioT9MpF+RGwcERlHzHpFwk6esKfit1XklUJ4XSIefCCxNJKpc/sOPZLAXkhtnZmjE0sT/PF/iL0RvtXHG1/P9/EnJIG1cMyFSUwSTUlCb17G6ZGnnylpN8dfMvMIA5fQF4u9mz51JHEqTOYhiT8n+h/EC0eS8A/jWbhUZCPmZQAAAABJRU5ErkJggg==)![A Gantt chart template that divides up projects into categories to visally show the timeline](https://cdn.sanity.io/images/599r6htc/regionalized/0cecaee8d0eccd7e679dde8c29d5a8b8af82cedc-1680x1120.png?w=606&h=404&q=75&fit=max&auto=format)

### Project timeline

[Start with this template](https://www.figma.com/file/JcAvyz89sYuWPz32zuIYJm/Gantt-Chart/duplicate?source=website)

Project kickoff

Flow chart

Weekly team meeting

Customer journey map

Standup

Retrospective

Roadmap review

Project timeline

![A template designed to define project goals, assign responsibilities, and align on deadlines](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACNElEQVQ4jZ3TS2/cNhSGYf3/n9FFd0GRtggKJCgGqd0gCIJcaiNx7PFYHs1II1EUKZK68fIWMzHaZNMgXTzA2fA7XJwvSykR42fH+SRGYoykdJS+S+aXgOsnbD9grcMYg7UW5xzDMOCOTvNnzlnGccR7T/CBEMLD8ofAafCIsqepFLKVCCEQTYNsBVorlOqQUtKeHOfutHScJoZxYJzGU+i/gaNHVD3NXqGkwWiDbhtUXWDkAddLeq1opKJqFVIbjBvRzlJrgTASOzmmMBNiPAYuNGXHPm8QB4XpLL2oEcU1YremF3v6TlA2LXkpKEWHUIaD7shFwb0oOOgGPRqW6Mnm0dNWhirvaHYGVTtMfUAVH1DbC2x1Rd8WFI3kptKsa0PeWgqt2Kgda3nPRu84DO3pl9k8RLptoP7kqa8D7e2M225Y8hV+8xshf0q/e8PlvuNsF/ijCLwoPa9bwUv1kfPuPefdX1yYW7S3ZJNNiHVi/y6yfweHiwl7fUn89Ij08QfS1Y90tyte3LU8vk38tE78eud5VpU8aV7xuDnj5+acP9UF7aLJZpfoton6KlJfJdqbmSFfE/NnpM0vpLsn9MUr3u8VqyLx+zbxfBd4KRrOuktW8g2r7i1vzQ3KG7KwJCaTGFRi6BKjCvhek/qC1Oek/p7Z1kg3UbpEaROVi9TTSDlL9rM4EYtmigtZOrYkfC0d7yos/4jBn07Cx/SFiE8Bn/yDQEyR7L+r9D+q970PvhX4N4wQ4l4aLgkRAAAAAElFTkSuQmCC)![A template designed to define project goals, assign responsibilities, and align on deadlines](https://cdn.sanity.io/images/599r6htc/regionalized/63bca92d18d1964779d0904f48bd44e6e1d1eaf5-1680x1120.png?w=840&h=560&q=75&fit=max&auto=format)

[Start with this template](https://www.figma.com/file/jGlMTd423n17aVWQaw29qf/Project-Kick-Off-Meeting-Template/duplicate?source=website)

![A template designed to improve workflow and processes by outlining a sychronized process ](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACKUlEQVQ4jW2TfU/bQAyH+f4fahOakMY0adKGgKZAG1rapG3SJr33890zJbSCMXT63R9n+5Htsy9yzqSUiVFGJUmslhVXl9fc/plQrSvqumK327Hdblmv12w2G6y1DLH5gy6GK/hI12oOjcLbgFaGTbXl0B4wWmONxTmPdRZjDM5ZROQE4aSPwL3i0Cq8i6QE3mV0L9iuR0yNhA5nBa1A64xSGWciyR7JtiOLfwPGkDC9YHqPuI7oW7aNZvrkWJdLfPMde7hj8XKkeAyUpVDOM9u1IW5m5O3kFXoGepPpVtCvLfFwjz/8oFgVfC1mTFcl4Vhw7Ob8fCr5cjunKDvqSuhaj3Q1uV+RvX6XocuoBnTjEfWMP94x3U34tr6l7GuSBLQz/FrNuXyY8Fzt8VYQSeQk5BTJOb0Bc8okGTQ4RJI4lFe0rseOvYEoiWZvWDwcaWaBaDLjyZ98yqjR+ObASWf7OFoa9DKjlvkdMP8/NueAz8bgDB4ehyqG9kQHSRhjUvoEKDFhVcSpiDiHOIO3EWMDR+vQNuJMxqshS0GsJ1qPVR6nIxKGVr0DepNoF0Iz09h6it/d0W32PFQbrl8euSlbymmivs/0RYd/fiJslui9RneBYIcNewccyhjGpp0bbH1PaG44NnsmdcXVsuD3vGFWZKq7TD85EMopslsQlBuTiS79Cxz6IGEAJ8RbUrDEENHe0w/r5iLeZrw+lew8KQRSfAWNsFPJfwGCBO3StuYtOQAAAABJRU5ErkJggg==)![A template designed to improve workflow and processes by outlining a sychronized process ](https://cdn.sanity.io/images/599r6htc/regionalized/a56ea762432f6770424649e7eab5694cd90099e2-1680x1120.png?w=840&h=560&q=75&fit=max&auto=format)

[Start with this template](https://www.figma.com/file/GGpts9zMtNJJUN8zy57DjY/Flow-Chart-Template/duplicate?source=website)

![A template for teams to use weekly to connect, share gratitude, and align on project updates](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACuklEQVQ4jV2Ty28bVRhH/V93i1iURRdIsK2EuoBVW1EJoUqBSFShqQJxCLbj2OPJ2ON53nnced95H2QPXcDibI+Ofp++WVsrMhkSCh/hT3ieSxgE1EoxDgPjOKHKBt9KsAyBbXq4tsB3IjwrxLF8PNdn1qqCUnoU0qfKYqpcThSSWmW0bcHQ1YxDR5W12JsCfZ5grhPcpxxrXWKuSuxdhnOQzPqmpM0FfREwqoSujKnTgDL18YSO7WmoIoK+PQuP64ztTcxhkeFqFftFyvbW5fHO4P5mxWzsagaV0FcRg4rJIxv7aYNz2LB+uGb+5yWhu2fsGqqiwXlKOawSfL3Gf6p4uNX4ePkLny7f8fHiNbO+VWSxi2dvCHwd76ihrf7C3C0xHm9Z/vEBd7+lrUtU0eLoOYdlgdj1OFrBbxdXvHr5DT+8fM6Pr75i1jUVR/2Bm9/fs7y/wtqvsY1HhKWTCZPIeUKKI60qKfIGbZNx96nAmPfY64Jf33/g6xfPefHFM7798tlU6Ow3zK8u2C5uSIMjKvVpMkFfRme6SjK0NXlZs9rHXN+l7O5agm3Ncq7x07ufefv9W95895rZ6YJ55CKOO/LQZqhiqJP/0mSMfYNSHa5fYRg1nt4jzQFxUBy1hMM6Rr8XU6FKBZV06cqI4VTzf+rsfJRWjWT+SHwYkceRxD4B0gJ5hNgcmbVVjvQMAktDCos09EiFT3Yi9MljgcolfVujyh7baNAXLZ42kFjjmZPoM7OmygldE3u/wzH3eKaNMDyCvU9g++cPSmXE+aOKmsUu5vo2Rf+7ITH6Sfhv3VTYKPJUEouAyDkhie0MaWfEbkocSLJEnoVl1bB3ch62Jda2Qx6mys/C0wyzrlFUZUGR5GSiIPWrM4lXEloJwg6QUUhTV7RqIBMj0fEkmTaU1iSKzdOOI/8ASb3HBFlOGz8AAAAASUVORK5CYII=)![A template for teams to use weekly to connect, share gratitude, and align on project updates](https://cdn.sanity.io/images/599r6htc/regionalized/493e4a8560fde38005a7dab94c46c82dc112ffc8-1680x1120.png?w=840&h=560&q=75&fit=max&auto=format)

[Start with this template](https://www.figma.com/file/4UoBZZyVBizLzzWLjtv7ez/Weekly-Team-Kickoff-Template/duplicate?source=website)

![A customer journey map template that helps visualize the key interactions of a product experience](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACLUlEQVQ4jXWS6W7bOBRG/f5P1QcoimmSJsgkjuXYWrlJpChRC3lmLBvpwJj+OCBIAgffXXbBL7TNSCt7lFQ0TYO1lnVdSSn9kRgjo3d0WqCVpK7rjd3oVsRxpD54RG6RdYvrHNPgmEdHXAIpLnespHUmeItrBbZVGC03doOJlM8r2feZ4nnGFAu96unFib75YLINMdg73HYuQ8vUK2ZvvtiNNiH2kezHQPazR2YzXox4kdOVb7gmYzQloS0ZTcFgCkJXMtua0FZ4XWz/U1dtb7upT+h8JnsyvP/VUL57ehEYdIOpDhuDzgn6k7F+YSgeCNUTs3gn1Dn+nDPkBWNdMsqS3eQT6hTIfmkOj4rizeGagdApvM4ZTMniBLH7JFbfWU/fiOdvxOqBWFSsmSZmirVQzEJdE4rPkcOjZP8gOb9abO2ZrSZ0FWNbMdma1RYk80aSv67oD5IWJGGuaM3aKXahT8hLwifD/qckf3XYemC6JXTyvJ2X/qRB3qFIg76hSF5e1ibSHAdOL47idUQcZvomEFqFVzn9H4WKNF7QNy7yy9rYhdPfmo9HSb2fMOdELyYGJenKM215wonTNuVoC6J6J7ZHkhf/kekrg7oIV4p9x/HZ0HzMtOeElxPBaHxT4mVJ6GqWXhBtThQvRL2/E5rfwksPTbEiswV1jL+Ft5IHXWyya48EyZWk/lb+/5V8mbKtwJxAf/IlHFuJk6dtKLNrNiFfaW6J7u//JvwHQD3f0+g+AysAAAAASUVORK5CYII=)![A customer journey map template that helps visualize the key interactions of a product experience](https://cdn.sanity.io/images/599r6htc/regionalized/25fe4b5bff82596b7238f0b2d6c484b0eceacaa3-1680x1120.png?w=840&h=560&q=75&fit=max&auto=format)

[Start with this template](https://www.figma.com/file/8FYotKDlDQaKd3ShriJbVq/Customer-Journey-Map/duplicate?source=website)

![A stand-up template to keep your team up to date with progress and execution on projects](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACT0lEQVQ4ja2SWY/bNhRG9f9/SJpkmvcG8djTx2BsB0HRepnGmxabMkVroSRKNnkKaibBzHsfDu4lyO/wgmCgy5Z4nyJiSVVq6rr+hdbP67ZtB/y6qqo3Z+q6xhiDtRbnHEGWFvw1e2Lx/QfhISaKIuI4JkmSgePxiJQSpRRCiGE/DMNf506nE2VZcrvdnoW5qvh3eWCzPnA6iiGUpinn83lAZdkwlZ/OB73YX5Bl2dAXRfF2wqZpyeSFTCrKohxCHi/x1e/7233A4/vX2BfRT4LO9JS5prxomtpgmo626Wgaw6WsyXWL6W9crRvoraXpW8pO01xbenuld1eu7oZ1lsA0PZkokacSnbe0usfUV7TuOamKSBaoqqVqe7S5UpkOUWUcVIyoJIWpqPqa+kUe+LBMKsShRMYaday5iAaVGfZnzepY8COt2MmafdYQFTX7XLCUG57Ujk0esS1iEp0O0qAtLemmI/7bDCT/GI4LQ7jrmUUdo60ZuN8axruOr0fNo9wyTqfci8ehjtMZj2qB7HKCJneIhSWcWcKpJZpb4m+Wzdoy2Vo+rC3vV5aPT5a7J8vnsGGULvkkHrg7TfhdPPBJ/Ml9NiMx8qfQEU6fiWaOeO7YrBzjreO3tePdyvF+7eWOPw4tX9IFd2LCh9OYj2LCnXhglE2fhaZyqJ0jXVrE0pKuLOe1JTk45oljFFpGB8s49Di+CsPjZc9EzRmr+VAf1DemxRLZ5wS3q6OrHV78mrZx5K3j3LxFmRuXvh7e6/yC7y99RWd7gtef8v/gP/WH1J0hm0H0AAAAAElFTkSuQmCC)![A stand-up template to keep your team up to date with progress and execution on projects](https://cdn.sanity.io/images/599r6htc/regionalized/d7f5f429834deaaf89b72e14e84a63feb87ef991-1680x1120.png?w=840&h=560&q=75&fit=max&auto=format)

[Start with this template](https://www.figma.com/file/iQAV4LPnU95m11vhfloaRF/Standup-Template/duplicate?source=website)

![A retrospective template that helps teams consider highs and lows of a past project](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACY0lEQVQ4jWWTyY7cNhRF6/+/Ivts8gfZOMnCcNIG0oYnVJVr1MBBEsVJHE4gVaERwCAOQHBxeB/f484vAT0N9KJHCPGGMYacM7XWN0opuDmgxIAUEqXUhpQrcmMXYmCYRpRWaK3Rw4CZDcuybII3YankpeBsYNAjUmhEp+kaRd9qRm1wzrPz0SMnRT9I1KjRZmAOllgWlpLINZNTwXYJ9T2ijp7uMtKc9cb1oLkdNbKdmWRg51OgtYKjvrBXZ476yt30jMvMnD2xLkSfuf9j+fLbwOmdpf3m6X441NXTrxccPOoWkOdVmCPH+cZ78cq77oU/2hf+ld/pg8Zkh6+R6DLnPw0vv/Qcf5+ZbgWnK36sOFWxsuKGilWFnVs8+/HCB/mZ9/rTxie9p7WSIRp8CY+EHxyvvyrOf81YmVlc/YloC7uQI9IPNF7SLoomCH4MN/bixG3qsMmTloK5JNqPHvHVM7YRbzLJ1zeizcyjZ7c+/JwcQ5w2dJg4mTsfxVcO0w2bPbkU8rKmKPgxY1UizIUUeAohuvIU1oRZLMIqeiMRTnP1PV/mE5fQ40qg1EJdV63kVEnhQY7rKD1IcaX8L2GYNsbFMCSDShNjnvElPoTPWUwpEVzAG4ebHd49iCFuH2EX88IYDTpOW1dtCdjit/02NmV5E66DHq1jugv0uWG4dwzNSsssFWGYHk1RfkAEvaVb5dJpzsOVZupw6VnylrCwTA577Jj3d+ylYz62zIcGfxWEs3iUbJJlTDN67bZqObYnXr79zefDK8Ybthd8CouNlMaQm5EiDaWZKPeJ0q9nE/8B68LkNaJt0CsAAAAASUVORK5CYII=)![A retrospective template that helps teams consider highs and lows of a past project](https://cdn.sanity.io/images/599r6htc/regionalized/4b17053d6467d39c0474749e68f950722beceb04-1680x1120.png?w=840&h=560&q=75&fit=max&auto=format)

[Start with this template](https://www.figma.com/file/VbwHPdafQj4pV2gpUUr51R/Project-Retrospective/duplicate?source=website)

![A template to compile plans and align with leadership on product roadmaps](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACLUlEQVQ4jZ2SzU8TQRiH+3/rzYvGgzdvHggXE8WExBijgQSNYgSJgHyLpYW225ntdndndz52ZvYxLSByMYbDc/vled/fvNMxpScbaMT5FJFIhJghkEIyneZU2iKUpScL+iPJaCwYC8kkm2KMJcSADY6kTulmF3TKoaO/ruivl8izkonIyWROnilMbcm1Z2OgeX1UsHY25HtyzEnSZXw+oR5rvPZktmBd7LDUW6WjBp7+B01/zTA+Moh+RTauqApDYwNpFVg+VDz5Ilk8OubN6CObgy3kocAda8LUM6pTXvZWebDzjE5TRdTQkPdyJj1F2jeUskEXnsZEZBVY2lc8+iRYPDjlffKV7WSP7NeUpmsJRWBYpzzvvuP+t6d02tgSvMTUe+TygmykKUSDShusCggVeHVQ8fjzhBf7ko3BkGOZMpSG6aTB2shQXwrvbc6EbUuIGc6dYmpBXTjqwqPL2YaBTEdWuoaFbcXbk4qtC8WPpGZfGM4yh3KRxGQsn6/xcHfhUti2nhgtMXpiaP8w2976losycJA27AvLzqhie1Szk2hOJpbSBsqmZjc/ZSXZuBbyF+0t4rxBiwst49Kxl9wIf14JfQzoYOfiK+G/mU0KMZIqx0Eyq1xxJA39vKFy8SrDnP8SXr5zS147emnF2aRmVFoy7bE+zltc5/5bGGNL7Wb/0iGVIVV6PsD6cEdhOztQRNlAYRqmtaHQDucvK99J2ISIbm4wPuLj7dxvGT/eoA8mtVkAAAAASUVORK5CYII=)![A template to compile plans and align with leadership on product roadmaps](https://cdn.sanity.io/images/599r6htc/regionalized/f0fcd55b2b601c4286e45030739ba37a01e05c04-1680x1120.png?w=840&h=560&q=75&fit=max&auto=format)

[Start with this template](https://www.figma.com/file/PQkFgQA77plJMrxMs8PXWt/Roadmap-review-template/duplicate?source=website)

![A Gantt chart template that divides up projects into categories to visally show the timeline](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAACj0lEQVQ4jZWS3U/bVhiH+1f3Yje96NZ2U6Wt0hgV3aKhokkVQ5RVjRhDaxLjpA2UjrJAyIchX8ROnMT28bGd+OOZnBSFdVe7eN7z0++8eq7eO0kckYQ+SeAQCgffFHiDWxgC+Yk033Q3vTcQzGxBMvVJXXfSQegRezZOz6bzXqAVXS6LLprq0jxwaSpLNFWifeoaBRetKDAbNqGUS2Eyk8TSwmpPuCyNqOcnNBWHet6inrNpFiT1vKCWs9EOJJriUcs51N7YNAoW+vmIwBFLYTx1mTkjnKsBerFDd1/j+s+rOUa+z6hkYShD+rkepjpm/FYwUC2GqoX5zsKuj5mJz4T+ZMikatDJ6lTXW1QydWobF3S3u+ivLbo7Bu2tFv1XQ/SsoP9aYGQl5r6Hey6IXO/fQs8a0qqaHOy6/PqzS2Z1xEZmwG+bFns7kv2XDnvbi7y347G7nb4B6t6UyzOPqbwtDFzExODjVYeND20eFdp88bvG3d0qd/+ocO/NGV8rVR4oNb5UGjxSGtzP1fiq0ODZUYtyy0B6LtwIQ9/BHnU5bx+TvcjyS2WL9ZNNVg6f87C4xjfFNZ6UnvKtusL35R95dvycH95lWD3MsFnZ4rR/jO9bS2EUCOSkh9kt07l4Qevspzn1v9c4+7hK5WSF08PHnL69z8XxY+onK5y//47aX09oV9ex9BKRP751NlNJJE2CURPZLeN3ioT9MpF+RGwcERlHzHpFwk6esKfit1XklUJ4XSIefCCxNJKpc/sOPZLAXkhtnZmjE0sT/PF/iL0RvtXHG1/P9/EnJIG1cMyFSUwSTUlCb17G6ZGnnylpN8dfMvMIA5fQF4u9mz51JHEqTOYhiT8n+h/EC0eS8A/jWbhUZCPmZQAAAABJRU5ErkJggg==)![A Gantt chart template that divides up projects into categories to visally show the timeline](https://cdn.sanity.io/images/599r6htc/regionalized/0cecaee8d0eccd7e679dde8c29d5a8b8af82cedc-1680x1120.png?w=840&h=560&q=75&fit=max&auto=format)

[Start with this template](https://www.figma.com/file/JcAvyz89sYuWPz32zuIYJm/Gantt-Chart/duplicate?source=website)

Give your team jams a boost—with AI
-----------------------------------

FigJam’s AI features help you and your team get going and keep going.

### Generate custom templates and visuals

With a simple prompt you can create meeting templates, visualize timelines, and more—add specificity as you go to get just what you need, in seconds.

### Automate the way forward

Instantly sort stickies into themes to hone in on what matters or summarize your team’s output into clear action items—all with a single click.

Features that keep everyone on the same page
--------------------------------------------

Empower everyone throughout the product development process to contribute, give feedback, and make better decisions, faster.

### Keep conversations going

Talk things out with audio and live chat, or use comments to give feedback on the go.

[Try for free](https://www.figma.com/signup?locale=en-us)

### Express yourself

React to ideas with stamps, emotes, and high fives for quick responses in real time.

### Give everyone a say

Invite people from other teams or companies to contribute to your files free for 24 hours—no login required.

### Facilitate dynamic conversations

Guide meeting participants to focus on the content that matters most with Spotlight mode.

![Interacting with FigJam for iPad](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAAEuUlEQVQ4ja2Uf0wTZxjHz226JXOZ2R/jD2Y00YQ5Y6KhQimyZP+ZQciCWPjXmUnGTCS4DIi4MhD+MGZRoRRhc9kSK1yp6GgRNDoH0vUXrT9mglgKtFdYr3ft9b32eneF91nuCpv7c8ue5JPnyfdJvnnf93nzEG63m/i/AgD+ql8lCOJ1giDeWM//li3rHgSxa9eurWVlZYUVFRVVR44cqdXr9fqamprq2tra6tqa2mql1uv1Kkq90duoq6urj5aXl3+ieOzevXsrsW/fvj319fXnjUajiyTJx1ar1f8yFovFPzQ05B8cHPSTJOkfHh5WdSWTQ6TPbDb7u7u7nSdPnjy/f//+PYRGo9FduHDBNuPzyZHYH7AUC+MVZgXYOAssywLDMEDTNESjUYjFYqoWj8dVWIbFiubz+eSLFy/atFqtjigqLio1mUz24OKCHJVpeIIeY0oI4VWcxQCgosTa2hrGgHMaBixJEk4kEpjjOJifn5cHBgbGdDpdmWKoM/WabIHgvBxJU+Cip/Es8wyjFMKiKOGMmMFJhHCC47AgCFjMiDjFp/Hz2QC+bh7FN6wT4HC45P7+K4rhIaK4uFg5oW1hYUHOZAWg0TKmmQhwcQ7SKQEQ4oGilmFpKQwJLqcl2CQ8uO+EurpO3Nj4LYyOTqwbluYMe3t7bcFgUF7NZkFGSZyOrEA8wgAX54HjkhAKRWBxIQyJBAcpPg1cPAl3JyZBf/RzfOzYabhx4+eXTqjVlvb0dNt8Xrc89/sTmH/yCDPBRaDDNMSYOCQRAppmIRplgOdTKlwiCY5pF5w+3YTPnm2D8fFxub+/f6ykRHeI0Gq1pZcvXbLdG7fLlh+/g58GTNjrdgEViQDLsZDOCJBCaeBRGsRMBlI8AoZm4PnsCxgfv4MnJyfVKa8PJXflnp4em/s3hzxhH4XLPZfw9aFr4Pc6gWVpkGQJREGETDoDsiSphstUBKgQBTQdw6lUCpTnetlQpwwlEAhIYWoF7v4yuWa7dQv7pqZwPBrDspzFGUnEgpjB2dWsOmU2xuI4w2JRFNeUbxQKhf42LCoqKjUajfZAIJDlkyKEggwEZ0Ow+HQZIs8RrNAJCCbCEE6uAErzIKQF4HkeeMSDIGRAkiSYm5tbNRqNt0tKSsqIAwcOaAwGw+DY2Fjc4/Klph940dR9N5qweNDNH5yIHLmNvr9tRuY7VnTv1/vI4XAgp9Op4na7kcfjSY+MjCSam5vJwsLCIqKgoOC9qqqqzxoaGvrbDG1D5zo6b51r77J/3dRlbzrVYW/8stn+RdMp+6mWRvuZs2fsHR0d9q6uLntnZ6etvb3d2traeq2+vv5KZWVlXUFBwXZi586dm/Pz89/VarUftH3TVm6+fq3Rah02KAwPWwwWyzokabBYSFVTeiRJnunrM316/PjxD/fu3fv+jh078vLz8zerK+zq1asEy7KvLC9Htkco6qNwOFS5AUWF/8GGHgotfRwIvNDMzHjeaW39alNLS0tusx4+fJioqKggHj6c2vTs2dMtjx753vL5PNtmZnJ4ve5tXq9rPbtVTel7PK63p6YevGmz3Xytr89InDhRRxw8qMmZajS5Qlnh/wUl8vLyVLM/AQIK3C8GooGbAAAAAElFTkSuQmCC)![Interacting with FigJam for iPad](https://cdn.sanity.io/images/599r6htc/regionalized/b80d3a64d6988323c011088c92f65d7161e733cd-1108x1108.png?w=780&h=780&q=75&fit=max&auto=format)

### Sketch out and explore ideas on iPad

Use the FigJam app to gather inspiration and riff on early ideas solo—then collaborate with your teammates to make them real.

[Learn more](https://www.figma.com/figjam/ipad/)

[Download the app](https://apps.apple.com/us/app/figjam/id6443663594)

Create a workflow that works for you
------------------------------------

Whether you’re breaking the ice or planning a project, FigJam has all of the integrations, widgets, and plugins your team needs to move work forward.

[Explore widgets](/community/widgets)

![The Asana widget with three tasks that need to be completed](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABYlAAAWJQFJUiTwAAADcklEQVQ4jXWRy4tbVRzHT1pUtFOcSSmCYin4H+hyFqMyzh/gxoV7wVRFu1Az4Fh8YBlodhY3bQXFwepSBdvYmWqxBQcyeYxpXmNzk9wk93HuPY973vceSYojRTzw4TwWn9/ve37gXukisOfOgvD85tHKF1v5re92T3388/Cpj765cfLzS1snbtxpPN4L+EIPsjkdKBfaUbrQjrLjf8L02J2xefirpsxZmwFrUwDq+yPQq/ZAtdp/rNmZvNgaxOutKf2kPYk3etP4Aydi6yMkiyOkii5SxSk1xYBnxZBn69MkfacDzQs/Hcjj1lowA9z1JGj7EtRcttgP+VtezGoeRJ47GrtupzeedLquN+i53qjl+uOeixF0uTIjYbIJlWnTJWZjxxFPHgoP4jTnMAv2PZGfVcdMTuI4tn63a/2bNy3cvmZJ4xdL2z9YdnDNKti1mVE2s9Zqk6KAmdLvQ/H0obATqlwrkOAuNEsey94lXDkIoRQOhyqu1jStVbQc1LSe7GrtVbShY22MVmmWpdKkvp+YzVsD/q9wkt0/fL+9m29P8Bse5n+EiA7CCPejiDgIUYckzKEscShjDhXSodL0qUwHSJjqCOv3b43UE9bG94UXL3+dAwA89PIrr57+sbzz9sFwsuPHpBEgWgtwUg8IqweY1SERdSxMnci0ToSuYa73EVO/ThF783azf/Kww7W1tSMAgMXl5eXnvr16dbPT7d7zfD8JgpBAGJE4RiSKY4IJIVIpIqSc3XEIoySKY8dxBp9eufLlaQBAbi5cWVk5CgDIr66uPlsuX/9sNBr+5U+nSRj4ZLY450QIQZRSJE0NYYwR13Wx4ziJ67qDZrN5vlQqPQMAODIXvl4ozCI/UigUTrXb7QLG+DpGqIoxrjDGKlLKPaXUnlJ6vs/eIISVMAyrURRtj8fjM+VyeR5Zaw2A67rz7I1GY4kQ8hpj7DdKaQch1IrjuI0x/g+U0paUsquUuq2UOiOEWEqSBGRZBkCapjnP84AxJi+lfI9zPiCEpBBCBSHUCKEHwBhrSqlSSqXGmLHW+sMkSf4ZSg5IKecdJkmyOKumlNrlnA8ppf0kSRwhhCOlfAClVN8YMzTG7GmtzzLGThxOmXMOhBCAUvqoEOJ5KeWGEKLEOb8ghLiglPo/SlLKc0KIlwghx4wx8z/8G962fXfIdrf3AAAAAElFTkSuQmCC)![The Asana widget with three tasks that need to be completed](https://cdn.sanity.io/images/599r6htc/regionalized/4baf0143722b830307500d7d1b1c32c79a8f87d5-1560x1094.png?w=780&h=547&q=75&fit=max&auto=format)

### Turn ideas into action

FigJam integrates with [Asana](https://www.figma.com/asana-for-figma/)
, [Jira](https://www.figma.com/jira-for-figma/)
, and [Github](https://www.figma.com/github-for-figjam/)
, so you can keep projects moving after the brainstorm ends.

![The "Ideate" screen of the Jambot widget generates ideas on stickies](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABYlAAAWJQFJUiTwAAACKklEQVQokXXR60/aYBTH8f7dm8teLApzW5zZ1LhEBAdyWWQzytjkopO5TLkV2tKiQFsRRO69cLPJ+S2wZOEFe/HJeZKTfHOSh9EmkjWvPxb/qzXiLamftK7aCSvdubBkI2u1RwWrNxat7licTUYxslTW0yQbGbofctQfF8mYlGfMSYUGjzKZjxUyJiW6H/J00UqQVz0mnxqis+Y5sb0k5XpJ4rQ0lcw8MUe1MHzqIQ5qx0h2f+HOLELRblDqXkPRK6iaKmqDW7RGMuqDAmKNH1gveLHK7eFDOQhn+Qu2pQBc8iFOWgkwW0qAbDcuel1xU+ghSql2hj4r5+QofiN3OUb7yikFqz8p28mTaggUqcfJnnPQUnqLbIKTVvK79ORqg1a4XQrUvhPjuAtiTfXi/a0fkWYc2U4KR9VT7JVD8FTCcFfCOFCjYDtpqDqPaOMMbyQPXggOvCp6sCrs4XlmG6uCC59qJ2AS7TNEmlHEWjHw2iXqAx5Vk4Os5/5RjTweBgXUTB7xxjneXfvxUvqI9VIAbyUflnMOrIkeBGtRMI0hh/ogP9MaCeiPReiT4gIS7ocCIvU47KwDz1JbsAsu2Dknli43scLuwH8bBqNNJMybBheZ7hpzwaXUJmy8E7a8E0+vNrDM7sA3DS4OTMPz/gabowKSnd/wq6HZr3qrX7GvHGP3Joh9+QixZmJxcNHF03d3LOJuwKOosxC1LCSdhaSxKPQysymbHP4Adiu1Nze7UywAAAAASUVORK5CYII=)![The "Ideate" screen of the Jambot widget generates ideas on stickies](https://cdn.sanity.io/images/599r6htc/regionalized/f2764eab608e3a3dcc87b061bbaad74c4e5716ef-1560x759.png?rect=1,0,1558,759&w=780&h=380&q=75&fit=max&auto=format)

### Leverage the power of AI

Use [Jambot](/community/widget/1274481464484630971)
 to brainstorm ideas, come up with icebreakers, or even code up your designs.

![A sticky note with a meeting agenda and two bitmojis of team members](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADKUlEQVQokS2RaUiTcRzHv1TUC22m0RvLNMMgCl9UFhZR0joIKjO6iETXQbnoYtBKQ9lateZVbm4+2zq0kA4i80ilA7W0YjrXNh9nLWoru8szt5z/XzxP/eD79sPn+/sCAHhzCN4rhB4rSZymEbndMOht1/dRu76Pdej7hZDdMEAuU4B5LGOsx0rUxQV7W4t96ktHDLMAjKN6woFdKQIOcJcF4a8gvLaSxFbyS96k83kbNB6qU7tZrdrFalUuatR46EXxN8abRwUovSz5MHzt1PWHR3ft3LFuRWwEooBDmeuBaTPjRENfBcFjYZJXxt/yFxe/eR9r31KNysmq8uysKtdOD87w/4EhxpsDrFH7ckyblefcm7Z+X6p0fkTiEiBjqxSYO2eWUBW9N0gwlfDc6CFH6ZD3WWGvYMVES5WLHp33klDfY2HMzQXonurpnxO7lY0bUlauWpYUP0Founr5YiAhJhJdXBBuLoD35TS528LknaVD3pb8D1R/hmeCZZ3aTc06PzlNI8L/mLssSNVq+8Dp9MIra5I3ziMiCImPmw3MiIsBfSLxl7kZxdGPL7zJtpX89IlATbdo2KDppraiL9TF/RGBvHmUWos+f6k81XJesV0TQ04C2QmxM2OBhIR4ETY+YtyktckrpBqZ9m69pmOgrfgztRR8ZE06H2vO9wt1SVj4tZXElXlzyN9ZOnjikfbNVF854d01wvTo6UDy4gWYlxiNpKSFk1cvX7r/wBZZV7nyLuvQ/2CusgATanaWDpJN/4vaDX3sX/qp0zjkc5pGFO6y4JQeC4PLFEBmRiawbcs6SFMTsT1NKtmcukmWtVvhKM9uCDmMg2I9YYS2i1+pIreZTDnVzJhTxYwn71NlXqv/SYFPwXOjkUO3CQ7jMKKiooD9e9KABGBP+qKJ+zLkKeeOXb1Tq+X7XVyA/gHH2EPdWzp3tIKUhwvZySM6pjyYT0XHb/lrzroV3ssUSTWEDsMAwsLCgHSZTFxIuAvKy3OqdY4Cm/HnJ94SIo+ViYbPS75TZV4bcTn1zJxTx6zZDXRHZfM3F35UdJtDkX03Ca+MwwgPD8dffisUybtR36cAAAAASUVORK5CYII=)![A sticky note with a meeting agenda and two bitmojis of team members](https://cdn.sanity.io/images/599r6htc/regionalized/ba9c22d1fd3d08b1401177aed1d8e85de4d49fb3-1560x838.png?w=780&h=419&q=75&fit=max&auto=format)

### Show some personality

Add a personal touch to your FigJam files with customized [Bitmoji](/community/widget/1151936790942917527/Bitmoji)
 avatars.

---

# The Typings File | Plugin API

[Skip to main content](#)

On this page

While the written documentation can help you explore the API and explain how it works, the typings file provide TypeScript annotation that can be used to assist you directly when coding. Used with an editor like VSCode, it provides API suggestions while you're typing and lets you know when you missed an edge case.

To get the latest typings, run `npm install --save-dev @figma/plugin-typings`.

You will also need to add the typings directory to your `tsconfig.json` using the `typeRoots` option. Plugins created from the default template will already have this included:

tsconfig.json

    {  "compilerOptions": {    ...    "typeRoots": [      "./node_modules/@types",      "./node_modules/@figma"    ]  }}

We strongly recommend enabling strict mode so that TypeScript can help you catch more errors eg. when a variable might be null. You can do this by adding the following option to your `tsconfig.json`.

tsconfig.json

    {  "compilerOptions": {    ...    "strict": true  }}

### [](#linting-for-typings "Direct link to heading")
Linting for typings

Linting, the automated validation of source code for issues, can be very helpful for catching errors early in the development of your plugin. We provide a set of [typescript-eslint rules](https://github.com/figma/eslint-plugin-figma-plugins?tab=readme-ov-file#eslint-plugin-figma-plugins)
 on GitHub to help support plugin development. These rules can identify, and in many cases automatically fix, issues in your plugin code. The GitHub repository includes detailed instructions for installing and using the rules to test your plugin code.

On this page

*   [Linting for typings](#linting-for-typings)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Accessing the Document | Plugin API

[Skip to main content](#)

On this page

This section provides a brief overview of how your plugin accesses the document of a Figma, FigJam, or Figma Slides file and some of the APIs you are most likely to use. Check out the [reference](/plugin-docs/api/api-reference/)
 to see the full extent of the Figma Plugin API.

[](#figma-files-and-nodes "Direct link to heading")
Figma files and nodes
-------------------------------------------------------------------------

Figma, FigJam, and Figma Slides files are structured as node trees. Your plugin can traverse nodes in the tree in order to access different parts of the document.

**DocumentNode** The [DocumentNode](/plugin-docs/api/DocumentNode/)
 is the root of the node tree in Figma, FigJam, and Figma Slides files. Each Figma file contains a single instance of a DocumentNode. A DocumentNode contains one or more PageNodes.

**PageNode** [PageNodes](/plugin-docs/api/PageNode/)
 are the immediate descendants of the DocumentNode. A Figma design or FigJam file contains one or more PageNodes (one for each page in the document). Slide decks in Figma Slides only have a single PageNode, accessed using `figma.currentPage`.

PageNodes are, from the user’s perspective, the fundamental way to interact with Figma. For example, when a user opens a Figma file, the page the user lands on is represented by a PageNode, as well as the rest of the pages in the file. Each PageNode contains an array of children that represent the layers on a page. The order of the children in the array corresponds to the order of the layers in the editor.

Figma files contain at least one PageNode. The node tree always contains a PageNode for every page, but only some PageNodes will have their content fully loaded. This is a feature of Figma files called [dynamic page loading](https://help.figma.com/hc/en-us/articles/1500005554982-Guide-to-files-and-projects#h_01HHDQ77YC3D3NK7K9DEE3SQKQ)
.

Complete PageNodes are only loaded by the editor when necessary. For example:

*   When the user navigates to a page in the editor.
*   When a plugin calls a Plugin API method to load another page or contents from another page.

[](#getting-the-current-selection "Direct link to heading")
Getting the current selection
-----------------------------------------------------------------------------------------

Most often, a plugin does something on the user’s current page with whatever the user has currently selected. Each page stores its selection independently. To obtain the selection of the current page, use `figma.currentPage.selection`, which returns a `ReadonlyArray<BaseNode>`.

This short plugin makes the current selection half as transparent, then closes:

Get current selection

    for (const node of figma.currentPage.selection) {  if ("opacity" in node) {    node.opacity *= 0.5  }}figma.closePlugin()

If you just want to work with one of the selected layers (common when testing), you can use `figma.currentPage.selection[0]`. Just keep in mind, there are always three situations your plugin needs to handle:

*   No layer is selected
*   A single layer is selected
*   Multiple layers are selected

##### info

**Note:** In Dev Mode, users can only select one node at a time, and thus `figma.currentPage.selection` returns only one object in Dev Mode.

Learn more in the [Working in Dev Mode guide →](/plugin-docs/working-in-dev-mode/)

[](#loading-pages-and-nodes "Direct link to heading")
Loading pages and nodes
-----------------------------------------------------------------------------

While most plugins will only need to access the current page, there may be use cases where your plugin needs to load additional pages. Because Figma [loads pages in a file as needed](https://help.figma.com/hc/en-us/articles/1500005554982-Guide-to-files-and-projects#h_01HHDQ77YC3D3NK7K9DEE3SQKQ)
, only the user’s current page is guaranteed to be completely loaded. Functionally, this means that you cannot expect a node on another page to be available to your plugin unless you've _explicitly loaded_ the page that contains the node or you've asynchronously accessed the node.

To find the content on a page that you want to work with, your plugin will usually iterate over `PageNode.children`. However, before accessing the content of a page outside the user's current page, your plugin must explicitly load that PageNode using the `loadAsync()` method. `PageNode.children` will throw an exception if called on a page that is not the current page and has not been explicitly loaded by the plugin using `loadAsync()`.

Example: Logging the number of children on all pages

    for (const page of figma.root.children) {  await page.loadAsync()  console.log(`Page ${page.name} has ${page.children.length} children`)}

The previous example iterates over the PageNodes (`page`) on the DocumentNode (`figma.root.children`). For each `page`, the code calls the `loadAsync()` method. Then, the properties of the PageNode (for example, `page.children`) can be safely accessed by the plugin.

##### note

**Note:** Loading a page doesn’t navigate a user to that page; it simply guarantees the data for that page is available to your plugin. To simultaneously load and navigate a user to a page, use `await setCurrentPageAsync()`.

[](#node-types "Direct link to heading")
Node types
---------------------------------------------------

Each node has a `type` field which indicates its type, which is helpful if your plugin only needs to operate on certain types of nodes. For example, a spellchecking plugin is likely to only care about nodes where `node.type === "TEXT"`.

Nodes of a given type have a particular set of fields that your plugin can read and write. For example, rectangle nodes (nodes with `"RECTANGLE"`) have a `.cornerRadius` field, but not a `.constraints` field. On the other hand, frames (nodes with type `"FRAME"`) `.constraints` field, but not a `.cornerRadius` field.

##### warning

**Caution:** In order to build a plugin that doesn't crash, you should always think about how to handle unexpected node types. Even if your plugin only cares about certain node nodes, users may try to run your plugin with any node type. Ensure your plugin provides feedback to the user if they try to use it on a node type you don't support. You can do this using the [`figma.notify()`](/plugin-docs/api/properties/figma-notify/)
 function.

[](#full-document-traversal "Direct link to heading")
Full document traversal
-----------------------------------------------------------------------------

##### warning

**Important:** While the Plugin API makes it possible to traverse all pages of a document, Figma strongly recommends that plugins don't do so unless they're performing document-wide actions (like find-and-replace or calculating statistics across a file). Because Figma loads pages as needed, plugins that traverse all pages must first load every page. In very large and complex files, this will result in a significant delay the first time a user opens a file and runs that plugin. To avoid this delay, plugins should only [load the specific pages](#loading-pages-and-nodes)
 they need.

Because the Figma editor only loads pages as needed, if you want to traverse the whole document, your plugin must first call `figma.loadAllPagesAsync()`. This ensures that all pages in the file are correctly loaded before your plugin tries to traverse the pages.

In order to search through an entire document, without any node-based filtering, you can use the `node.findOne()` and `node.findAll()` functions. Again, carefully consider if your plugin needs to do this as it requires that you load all pages using `figma.loadAllPagesAsync()` and could lead to performance issues for your plugin in large files.

Built-in traversal helpers

    figma.loadAllPagesAsync() // ensures all PageNodes are loaded, can be slow in very large files// Finds the first text node with more than 100 charactersconst node = node.findOne(node => {  return node.type === "TEXT" && node.characters.length > 100})// Finds all empty frame nodesconst nodes = node.findAll(node => {  return node.type === "FRAME" && node.children.length === 0})

In general, if you want to have full control over how you traverse the document, you will have to write a recursive function.

Custom traversal

    // This plugin counts the number of layers, ignoring instance sublayers,// in the documentfigma.loadAllPagesAsync() // ensures all PageNodes are loaded, can be slow in very large fileslet count = 0function traverse(node) {  if ("children" in node) {    count++    if (node.type !== "INSTANCE") {      for (const child of node.children) {        traverse(child)      }    }  }}traverse(figma.root) // start the traversal at the rootalert(count)figma.closePlugin()

On this page

*   [Figma files and nodes](#figma-files-and-nodes)
    
*   [Getting the current selection](#getting-the-current-selection)
    
*   [Loading pages and nodes](#loading-pages-and-nodes)
    
*   [Node types](#node-types)
    
*   [Full document traversal](#full-document-traversal)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Updates for 2024-12-19 | Widget API

[Skip to main content](#)

The type definitions for the [`BlendMode`](/widget-docs/api/type-BlendMode/)
 enum now include a `pass-through` variant. Support for this variant is not new, but it was undocumented.

* * *

Was this page helpful?

[Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021)
[No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/widget-samples)

---

# Global Objects | Plugin API

[Skip to main content](#)

You can access most of the Plugin API through the [`figma`](/plugin-docs/api/figma/)
 global object. You’ll find properties and functions that allow you to view, create, and update the contents of files.

*   View and update file-level properties, like thumbnails, undo history, and version history
*   Create, copy, or combine layers
*   Adjust properties of existing layers
*   Create, use, and manage local styles
*   Access users in the file
*   Import styles and component from external libraries

Example:

    figma.createRectangle()figma.closePlugin()

##### tip

Tip: The [`figma`](/plugin-docs/api/figma/)
 global object is available in every Figma window. This means you can open the developer console in any file and access the API. This is a great way to explore the functionality of the API without having to create a plugin. You can also use this approach to test and debug your plugin code.

There are several other global objects available. You can access these from methods on the `figma` global object:

*   [`figma.ui`](/plugin-docs/api/figma-ui/)
     to create a custom interface for your plugin
*   [`figma.codegen`](/plugin-docs/api/figma-codegen/)
     to implement code generation in Dev Mode
*   [`figma.timer`](/plugin-docs/api/figma-timer/)
     to control the timer object in FigJam files
*   [`figma.viewport`](/plugin-docs/api/figma-viewport/)
     to control the viewport: the area of the canvas that’s visible on screen
*   [`figma.clientStorage`](/plugin-docs/api/figma-clientStorage/)
     to store data on a user’s local machine
*   [`figma.parameters`](/plugin-docs/api/figma-parameters/)
     to accept parameters as input
*   [`figma.variables`](/plugin-docs/api/figma-variables/)
     to interact with variables
*   [`figma.teamLibrary`](/plugin-docs/api/figma-teamlibrary/)
     to interact with assets in a team library
*   [`figma.textreview`](/plugin-docs/api/figma-textreview/)
     to interact with features only available to text review plugins

There are also global variables available across the Plugin API:

### [](#html "Direct link to heading")
\_\_html\_\_

If you assigned a file name to the [`"ui"`](/plugin-docs/manifest/#ui)
 field in your `manifest.json` file, you can use this variable to access the file’s contents.

Instead of including HTML within a JavaScript string, you can call `figma.showUI(__html__)` . As the HTML is in a separate file, your text editor will render the HTML with syntax highlighting.

### [](#uifiles "Direct link to heading")
\_\_uiFiles\_\_

If you assigned a map to the [`"ui"`](/plugin-docs/manifest/#ui)
 field in your `manifest.json` file:

manifest.json

    "ui": {  "main": "main.html",  "secondary": "secondary.html"}

you can use this variable to access each file's contents. You can then call `figma.showUI(__uiFiles__.main)`.

### [](#fetch "Direct link to heading")
[fetch](/plugin-docs/api/properties/global-fetch/)
(url: string, init?: [FetchOptions](/plugin-docs/api/properties/global-fetch/#FetchOptions)
): Promise<[FetchResponse](/plugin-docs/api/properties/global-fetch/#FetchResponse)
\>

Fetch a resource from the network, and return a promise with the response.

[View more →](/plugin-docs/api/properties/global-fetch/)

* * *

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# API Errors | Plugin API

[Skip to main content](#)

On this page

Like any software, Figma enforces that any file you create is _valid_. For example, we make sure there's no way for a user to make "Frame A" the parent of "Frame B" _and_ make "Frame B" the parent of "Frame A" at the same time. We enforce these restrictions by limiting the actions that you can take. Similarly, we make sure that plugins can't create invalid content in files by throwing **errors** or **exceptions** if an operation is invalid.

A key part of building a high quality plugin is getting familiar with these restrictions. That way, your plugin won't crash if a someone uses it in a way you didn't intend.

These restrictions are documented here, as well as in the pages of various properties and functions in the **[reference](/plugin-docs/api/api-reference/)
**.

[](#invalid-operations "Direct link to heading")
Invalid Operations
-------------------------------------------------------------------

Functions that take arguments and property setters always have restrictions on what kind of values you can give them. For example, `opacity` can only be set to a number, and it must also be a number between 0 and 1. So, if your plugin includes the below sample code, the following error will be returned: `Error: in set_opacity: Expected "opacity" to have type number but got string instead`.

    figma.currentPage.selection[0].opacity = "test"

### [](#general-patterns-of-errors "Direct link to heading")
General Patterns of Errors

In general, errors returned by the plugin API will follow this pattern: **Error: in <property/method\>: Expected <property\> to have type <expected type\> but got <actual type\> instead**. Please refer to the signature of each method or property you're using to know what kind of values are accepted.

Here are some additional patterns of errors and invalid operations to be aware of:

*   **Writing to Node Properties:** Plugins in Dev Mode cannot edit the layers in a file (otherwise referred to as "nodes"), with the exception of certain metadata. And across other [editor types](/plugin-docs/setting-editor-type/)
    , some nodes are read-only. Therefore, attempting to edit properties that are not editable will result in this error: `Cannot write to internal and read-only nodes`. Learn more in the [reference](/plugin-docs/api/api-reference/)
    , as well as the [Working in Dev Mode →](/plugin-docs/working-in-dev-mode/)
     and [Working in FigJam →](/plugin-docs/working-in-figjam/)
     guides.
*   **Overriding Properties on Instance Nodes:** Some properties on the [InstanceNode](/plugin-docs/api/InstanceNode/)
     type can be overridden, while others cannot be. For example, you can't change the order of children in an instance, or their position. Therefore, attempting to override a property that can't be overridden will result in this error: `This property cannot be overriden on an instance`. Learn more about [applying overrides to instances →](https://help.figma.com/hc/en-us/articles/360039150733-Apply-overrides-to-instances#Supported_properties)
    .
*   **Writing to Text Properties:** Many text properties require the font of that TextNode to be loaded before they can be set. Therefore, attempting to write to text properties before the required font is loaded will result in the following error: `Cannot write to node with unloaded font "[font]"`. Learn more in the [Working with Text →](/plugin-docs/working-with-text/)
     guide.
*   **Using properties and methods that aren't compatible with dynamic page loading:** some synchronous operations in the Plugin API aren't compatible with dynamic page loading. If a plugin has the `"documentAccess": "dynamic-page"` manifest field, using these operations will trigger an error of type `Cannot call with documentAccess: dynamic-page. Use figma.getNodeByIdAsync() instead`. Learn more in the [Migrating Plugins to Dynamically Load Pages →](/plugin-docs/migrating-to-dynamic-loading/)
     guide.
*   **Calling a method on an unloaded page:** If the plugin manifest contains the `"documentAccess": "dynamic-page"` field, the plugin must explicitly load pages as needed. Using a method on a page has not been loaded will result in the following type of error: `Cannot access children on a page that has not been explicitly loaded. Remember to call` await page.loadAsync()`or`await figma.loadAllPagesAsync() `first`. Learn more in the [Migrating Plugins to Dynamically Load Pages →](/plugin-docs/migrating-to-dynamic-loading/)
     guide.

On this page

*   [Invalid Operations](#invalid-operations)
    *   [General Patterns of Errors](#general-patterns-of-errors)
        

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# figma.clientStorage | Plugin API

[Skip to main content](#)

The `figma.clientStorage` API allows you to store data on the user's local machine. Unlike data stored with the document (such as [`setPluginData`](/plugin-docs/api/properties/nodes-setplugindata/)
), this data is not synchronized across users. It's similar to the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
, but is asynchronous, and allows storing objects, arrays, strings, numbers, booleans, null, undefined and `Uint8Array`. Like `localStorage`, you should expect that user actions such as clearing the browser cache might clear all stored data.

The data is specific to your plugin ID. Plugins with other IDs won't be able to read this data.

Each plugin gets a total of 5MB of storage. You can approximate the quota used by a key/value pair by adding the size of the key to the size of the value converted to JSON. The main exception is that Uint8Array values counts as the size of the Uint8Array, rather than the array converted to JSON.

> ⚠ The data is stored privately for **stability**, not **security**. It prevents other plugins from accessing with your data. It does not, however, prevent users from seeing data stored on their own client given sufficient effort.

> ⚠ Data will become inaccessible if your plugin ID changes.

### [](#getasync "Direct link to heading")
getAsync(key: string): Promise<any | undefined>

Retrieves a value from client storage with the given `key`. If no value has been stored for that key, this function will asynchronously return `undefined`.

* * *

### [](#setasync "Direct link to heading")
setAsync(key: string, value: any): Promise<void>

Sets a value to client storage with the given `key`. The returned promise will resolve if storage is successful, or reject with an error message if storage failed.

* * *

### [](#deleteasync "Direct link to heading")
deleteAsync(key: string): Promise<void>

Removes the stored key/value pair from client storage with the given `key`. If no such key is stored, this function will return normally but will otherwise do nothing.

* * *

### [](#keysasync "Direct link to heading")
keysAsync(): Promise<string\[\]>

Retrieves a list of all keys stored to client storage. Use this to enumerate the full contents of the clientStorage API.

* * *

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Figma for Education | Free Tools for the Classroom

[Skip to main content](#main)

*   [Figma Design\
    \
    Design and prototype in one place\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC/0lEQVQokVXSbUhTYRQH8GNSqAilpXVf0rnNLbd5l29ZWeYMnXebbvfR8kMgFASJhbvqnDrtzXwJoohczm2SmVFQVJaEJWaElUSgkVhkRCFWVpYkEVm7T1zR0g8/Djwf/pzD8wfWMBWzCPtdYWJn1nB6HGBifwE0A+RnYCika6GYjASbTALtNRY4nKz2d2gVy8TpKWahNHItlEkiADaYu88vlGy+27o5p79OZ3qJWMMUzemxv7IAQznTDTY6CoqCV4GVIAOtBJlgJchcK0Em8RQVlAsgvgOoUcuPhTTIM81w5ycSzTf7UrOHCln2O2kyYlCZY6AeAHiKCrTJIlMqYmTOSrX8UUWMzFUWFZFaHE4EFcCy2UD8n+vf1CDvz0RzV0+6cdS4Kx0HQByGYio6yCaNTDm6lXGdKUgb81rZP8496ePH0rSecrkktYSmg0CDvMK8WNQ6O9Wo2SeGarmOMZ1poOZ04hfpaFjD8jJCtqlSJTvr3K0bu3Ol0Pd0qEbo7Tzgc+3LGK+KjXbzFJUOKnQWz5kNY7g2cUOfBrlxLGqb3G6877yofZMyvPqUopyQ761iogfbKnJ8gyNHhHczTcKzV7XChYOcrzpO+ZynKAeokUuYp0GeuQ1dPvF0hmv/oDM9rGuJf696EX483EbIsyrV8qsthZnfHvSUCMNv64X+vjLBa2WnHFrFdZ6kdoIKNeHFnFiNmrEGuX8nWK4/1plG8ou24WC8MtCPp+Sh5XIJV58Rf8NrZb9ebtiJW0uNU41s4i27MiqPJ6lVoEGeP4u5Z2JR63S85erQluwn1XrDpIzegf0wYMhFVeIvh9gVUVx1nPLaoQ2q19Vxyk67UppXQtOhCAAgydx1b4HeJPPt7uSc3nNiZfSGT+sserwUBjDUqS6Bg14P+8PCxL6F8CTF8iRVwpOkyUqQKx2MAkoj1gJkGj5m/jeRqTd8TjOw05rsLCHEnIWXQAeARY+hUSwuScPRrQyc3JECdqU0wCaTrLArpYEnLBuhNpWZLfZfsj9e+lps4aIAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/8b823444edce5f6c81fbd959301a33582525c23f-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/design/)
    
*   [FigJam\
    \
    Collaborate with a digital whiteboard\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADPklEQVQokTXSXWhTdxgG8L83sotdTL3ahWuFzjGvdueVCN44wWqd6Ww3xImBUVawIBOllCp+oBfDDSm1qSUfzcfJaXKanCQ9aZJz8j8nMTmJiZto7dKYNF2/WVuVxuakpu87jrDLF15+8PA8BDLynsUQ91nONrxPS8SON9LxsRxvL1/oN841XTxa+bHvYiXrt1UaanwOM7IIKu2sP4nvxdKz3beuhJrPdTDdbe1Ops3g4k8bHD4CKr1R8bP9kYe/3az43OatZKwgMIO1Y12ntE+/PaQd/fmkFnQOaPWUqGFGroBKH++otBuzivE5G7l29TI78d250eVWw+ib1nbbug6uLAa9K8rQw9W/3aMb75XItuwZwbPd3+P+499g2y8GlNhh3E5LiBm5rv+DSouYkQsLE+Lsg/7xd+2dDjx11oGn2+1IIEtxkwpY5Bw443XgphzGJZEHy8BduNrbBZaBOzAf9YGWjEEtEYVGSkJQqY7jWkxC1wMee7qZxoWfHOtnOmwFAgkZQJHhXViAWZaFVd4P72kEygEW0nYTFP0MbtIwrAg+rPjc8FYMwYeU9BHfiE3CNDeJslnQ3L8HpctdbA+B23mA2znQbqqw9GsEyr08Lll4LHlcmLeacM7HQpWGcT4whlOMFeYDHtiMh2Eh6IESx8CbmID1JK1uKfJIkaNfkbWWZzjTIoHawoF4wIHpw+6dQp93+4XN8kE1D0LR68S1SADK4wz+ZR/BEufCt+IEzvrc+g2LQS820lIVn8pDmI9/QULEjjfIFeggbXCeGHDo87sb5Z5Afj0UmloWuK1/+DEdgZzVhHTwD5zxOHBLjuDyxDjmbcPw2uvEejJWxYxiqiXEZnKP9OIRchj2kT3wNfkSez4xvnreyt1CJTnYUKVVPe6KMA6FMTvq6DQ7iv9O8jjnZ/HJ8ABMuaxYU6JVzCqmnXS8iTwi9/ES6YQT5Bj8sOsM3iHXc+mDHiPGE32QpQt6o42UBFoihhvR4MeoOv7Cacas+RG8dFlwVfBVqzRsqinRJjJNFEwRHkTCAt3lxT9JNLd8MGMEqvRBhi6gKusTAX0mOv5/3PmAR4eg4mfxpctafcXYTCXO1fwfvPx7+MfCvOMAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/64c5beb99a9fc5a0b00dd4882ab1f6a915ee0752-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/figjam/)
    
*   [Dev Mode\
    \
    Translate designs into code\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADNElEQVQokXXOXUxTdxjH8b/EBV9udrO4ZFm8mAEzlJlsTRbjFcsyMzDBDJIpxkklp6MlEiYwSmt9Q6tYakvX9kB7KJHhVDKYAkuLPbQceg6nPVRPC0vEKDUiBZRiUbgwkedZrJpd7eKTX/JcfPOQby+W6g1URdWA/grlO9+nokvUlCFfQVn2HqAGDd0q37k/Vc4fVCpD/leU9fsyavDUVdXQmR7qEnVMXXy6tGLXX0cV2xO6bLLWSRoTPxNiqFA2Xqu3eUesgRjvFOTeOlqmS9TyH5pmmWsNyrxDkHtrnTJdopGvV7XIozZODtn5eJ/eEzCp62pKtQc/JYjEgkoytXqEkFu6zsYRCzsluqIYYWQIXvbjgOF3ZJsH8e3tDgbMXhwwdCLbfAtFdwTCbglHbcPJIeN1/U2j8eM47s4KPa76gEsr15OxdkkX6YhNSZ44Sp44hJm7ILZLEHbfhUhHFET3APC0Azi7CUJOC/DtNuDbbMi7LKlQT1MXP6U+JLw4Uiiklfv4tLKISJ74m+D9SEcMIx0xyPDEQPJMQJgRIEQ3wXDrHvBb88BvzQe/dSf4rTuQde56FfQVzPCzZVFhWSkK6XKRT5eLJOKJ6SRP/P2Ha2+j8rvgKHDOahi6/BH4zAR95izIaFmHQ46NEGC/AD75IwjLShDS5RmEM7ONY21S5sM3UYEO44jFj7xDxDDDIeeoRta2BQNtG4C1Z6PPvA68JoK36U3AcV+CsHDgv+ByORB35Und32dvxHnn2KroGn/pPduzcrXSuNKv71rhHb5V3lXzKnztc5j05+J471YYdm4G9rcNKNz4BKIT30AkdRjE9FEYSyszSEVVyXFac8Lqv9DPBC0s061qYkwFxYy7rN493NLdJffVS9Pj+1cXEqX4eKIIJm9/jXGvAh9Ev8PE7E94L1WJkyk1/pNSZ5bsdh0sOKY5lN/3iz2n/8SV3NbCwzm6vLzcJkXRtqDdqHgy2WBanKl5+nz+OKZma2BhWoMLD9W4OFONz+ZrcX6+DucyajPIZ7H6jdkJTdad6GuCj5DcbGAIIpJpqYE8n6v9cCmp/XUpqZ1bSmpxKalde7f/619Q0kYqSbDbkAAAAABJRU5ErkJggg==)![](https://cdn.sanity.io/images/599r6htc/regionalized/c86a9976203e3264f89a20c5fb534a0d845d5f1b-540x305.png?w=540&h=305&q=75&fit=max&auto=format)](https://www.figma.com/dev-mode/)
    
*   [Figma Slides\
    \
    Co-create presentations\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAADT0lEQVQokVXMf0zUdRzH8U+r9e0XjcTSCmrgTpFDQOWOSU1xrY2Q4+t9v3cex0Ff7jSDknAWc25OIJokdTUU+XE0Dq4doQlTOuQ6Lu4LnNz3LJN+fWuNmdWarVw/sJCuu/erOdcfvrbn9vrrwWL1OizV6/Br7QZ8bNNSyLyW5h25uN7IL9GJt+doNtiUiE7r1dFTyYLjDKcriXC5thbucbuBW2kTudXiEU7Hn+U0psNcilXg2DfVOTRXtY4CYiYO6B+hau1ycj2dTj/uNyQSw53XEJn8Kq6EPN/5x17uen3GbpampHTLPumuinzpXluBpDG1SIVlM9IqU6N0d2W+xPzCGvIUZ1Db5jQqSk2iVckc1a1fQZ/vLUF8pBuIhBIJRV74Qw5ejg6e+9r52kdq8Z5DappkVB+0mlWN2Kbq+DFVY2pVl5ebVBYyZ+H4U+loKkxFRWYKDBnJ5NzyGF1qKKXESDdRZJIoOoV4RMaCPA319AQ83W68dPAYSna6sHFHD7LEY9AKPcg1esAu1W6aH7Xqf/ZaNv11qmrzv2P2rfhy7zP42/k8yNcPioRugESKTJjxU3zcS78M9dCFjj7yHhii3XYX5e1opWxjHxXwAWKLTcaa71vszZed+/qvuhqD1wZav4i95/yJzvQukPxBDDeg6BSgyEBgiK53NtDFVwTyPbeNwnsqyb2rjQymk6QR36BUywvE4GlKgt+9EvJwFqZ9WzEzXoXwhwcxG3RBCY2TIs/FZievLIYn/omN9tHVVytoYFsmNegexohxPU5LLbAJMtJNzUiyPQGGo88yeHcxbGFs/tvfbl+8OHdP/BPlocT58Bqcn35y6dyk7bORYLff7f8heLyTJvZXUcf2UjpUJGBAcKDD9hYM4jA04pt41FIDRs38zYoYA8Dwe4Lhyp83f2L0Nl9v4P7amk/LK3eGL1h2d1C5ow4Oczu9yJ9FveCH2exGnqkN64z9KOADYFCmGBT51qIyc7f7mL3ufcY2dN2hLRsszdn+rpItdJFWbEee8A7lC4PYaPQiR+jFWvEosoVe5Bm9YP8P0VvhwrpqxtLuY7n2+juX2YrLVpRXRrVCF+l5PzJMjfSAtQwpViNWi0eg58ehMR3GMiuP/wBsd/hhCuinswAAAABJRU5ErkJggg==)![](https://cdn.sanity.io/images/599r6htc/regionalized/d5088df6b4e9cf91d8a615901b5d60e1534ce5bc-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://www.figma.com/slides/)
    
*   [AI\
    \
    New\
    \
    Explore all Figma AI features](https://www.figma.com/ai/)
    
*   [Downloads\
    \
    Get the desktop, mobile,
and font installer apps](https://www.figma.com/downloads/)
    
*   [Release notes\
    \
    See the latest features and releases](https://www.figma.com/release-notes/)
    

Use cases

*   [Design systems](https://www.figma.com/design-systems/)
    
*   [Prototyping](https://www.figma.com/prototyping/)
    
*   [UX design](https://www.figma.com/ux-design-tool/)
    
*   [Web design](https://www.figma.com/web-design/)
    
*   [Wireframing](https://www.figma.com/wireframe-tool/)
    
*   [Online whiteboard](https://www.figma.com/figjam/online-whiteboard/)
    
*   [Team meetings](https://www.figma.com/figjam/team-meetings/)
    

*   [Strategic planning](https://www.figma.com/figjam/strategic-planning/)
    
*   [Brainstorming](https://www.figma.com/figjam/brainstorming-tool/)
    
*   [Diagramming](https://www.figma.com/figjam/diagramming-tool/)
    
*   [Product development](https://www.figma.com/product-development/)
    
*   [Web development](https://www.figma.com/web-development/)
    
*   [Design handoff](https://www.figma.com/design-handoff/)
    
*   [Agile](https://www.figma.com/figjam/agile-workflows/)
    

Roles

*   [Design](https://www.figma.com/designers/)
    
*   [Engineering](https://www.figma.com/engineers/)
    
*   [Product managers](https://www.figma.com/product-managers/)
    

Organizations

*   [Enterprise](https://www.figma.com/enterprise/)
    
*   [Education](https://www.figma.com/education/)
    
*   [Figma for Government](https://www.figma.com/government/)
    

*   [Config 2025\
    \
    Register to join us in SF or online: May 6-8, 2025\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAABTElEQVR4nO2QP8uBYRTGbyaTlA2JZ7B4VgP5ADblfzJRT5GYDIbHn5XVgoiSokgKJWwGn+r3dp96P8FrfIdf55yr61zd91FKKb6M+g9Uf8PhcPAN1G+gy+UiEAgQjUYJh8N4vV78fj8+nw+Px0MwGMQwDJl1jUQi4tfo2TAMQqEQbrcbp9OJMk2TZrPJeDym1WqRy+Vot9vSF4tFOp0Otm1Tr9cZDoeMRiMajYbsaN22bfHG43F5gCqXyxyPR16vF8vlkvV6zePx4Ha7sdvtuN/vPJ9PLpcLn8+H9/vNfr8XTqeTeA+HA91ul0QigUqn06xWK1mYzWYSqo3z+ZzJZMJms2G73Yp2Pp9FXywWTKdTer2e9NfrVfRsNovSd6tUKvT7fflWqVSiVquRSqWEarWKZVlyBl21VigUyOfzxGIxMpkMg8FATpNMJvkBwtdZfGF8ewcAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/eb42e1b3e5042d96d6d542fffaae917dfba25521-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://config.figma.com/)
    

*   [Creator fund\
    \
    Build and sell what you love](https://www.figma.com/community-creators/)
    
*   [User groups\
    \
    Join a local Friends of Figma group](https://friends.figma.com/)
    

*   [Events\
    \
    Learn best practices at virtual events](https://www.figma.com/events/)
    
*   [Customer stories\
    \
    Read about leading product teams](https://www.figma.com/customers/)
    

*   [Shortcut: The Figma blog\
    \
    Stories about how products take shape—and shape our world\
    \
    ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABYlAAAWJQFJUiTwAAACmUlEQVQokUWS3U8TaRTG528WAaFVKFuFbaAFg2ChtbS2QpVCsaVfTjv9ZjqdmfdAQFFhDWK8IMYLdzd7+du0k81eneTkyXPO86FNzAj3Hij+m/dnFAuPha1Nk8yLMm9e6jzftHm0IEz6PNzEjDfvzwrTfmHmkTDlH+0FzQP8D5r7TbGbUbSrTQp7aY72DinlBuynHSIRl2m/Gh+enFXMB4XVNWFzQwgte8SaR+SBpnxCeH1IUW9zqmpctHOc6QU+D7q875nsJocEgi5TPoU/IMS2hVpBaJSEVy+Fx0uCNpY5633pmxOiOyZvu1WUk+fOiPOzHudO6dhNi9SLIbEtm41nLttRRV9XfD3v88epgX48YDksaCNvwhFhbU2xElYkU0Na7TaX5jG3hSjXBzH6hQbxbZvVVYdy3mGgn3BSaXHjdvjr6zF3V3vUik2Ci4KWSihapQFmrUs1b5JND3mdGVDI9snvGOysG4R+P2Ha78mtHDlcDww+t/J8dyv8+vKOT26ZZKLPg4eC1iwNOW+U+djIcWU2sAyLTHLAStgem+6bd5lbsJhfGBAI2iRiNmatzcdOlRunxaVlkX9tE1z0QtXqby3O3hW5ah3w46LOz+saF1ae/JsWSyHFkyVF7pVF46jH4a5JKmFzmLVplU/oVnsUcxZPn6rxd6M8tGTcwa73uLvo8vdNh3++Z/jz2wYf7CqxLTX21yg63Lomt2JxbiqGTYVRbFDI5jCODQ6yiuATYWJEOCpxJqWwDOGTM+Raylw6RzRKPSIR4WFA2HymKB24mHXFWf+UD5aiX6tQ3U9z3tPp6cLyitflcbH9895iKyok4i7R5y5LIRnLGIEmfR7xYkhYXxfSSaG4b9KpdLCbQ3J7QiDoSf4Xgayg7OYDxFgAAAAASUVORK5CYII=)![](https://cdn.sanity.io/images/599r6htc/regionalized/1883a9ebc4ce697b718301ad247c0fff45c572c1-540x304.png?w=540&h=304&q=75&fit=max&auto=format)](https://www.figma.com/blog/)
    

Get started

*   [Plugins](/community/plugins)
    
*   [UI kits](/community/ui-kits)
    
*   [Icons](/community/icons)
    
*   [Widgets](/community/widgets)
    
*   [Templates](https://www.figma.com/templates/)
    
*   [Developer docs](/developers)
    
*   [Partners](https://www.figma.com/partners/)
    
*   [See all](/community)
    

Learn

*   [Best practices](https://www.figma.com/best-practices/)
    
*   [Reports & insights](https://www.figma.com/reports/)
    
*   [Resource library](https://www.figma.com/resource-library/)
    
*   [Demos](https://www.figma.com/demo/)
    
*   [Webinars](https://www.figma.com/webinars/)
    
*   [Help center](https://help.figma.com/hc/en-us)
    

FIGMA FOR EDUCATION

Free best-in-class tools for the classroom
==========================================

Figma and FigJam are design and collaboration software used by professional designers, engineers, and makers of all kinds. Use them to ideate, create, and share work—all free, as a student or teacher.

[Get verified](/education/apply)
[Join a workshop](https://www.figma.com/education-livestreams/)

![Cursors interacting with an illustration](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAAEYUlEQVQ4jXWU+28UVRTH+x/wDwBiMDH6g5rwi0ajiSaaCBaMihKRH6xReWiQRIlG8SfK4wdDRB4tlhoIIG9bbUtpoa+l79f2sbTbfXZ3dh47O7Mznem+92NmNjRK4CQnd2buvZ975txzvlXlchke46VSiUKh4I7OOvczj7dyGarch0e4A1laspElFdO03HdnplwuUSzkyOds8lmLQj5DqVR0D3Tmq5yxkM1iySJ6ZIF0NMhySiGXzbgw30yQhCCTzWbRzSwRQSPgnyAyc5W47zzJ6F0ylvJ/oK2IRNuvM3u6ltm6Q0Q6mzDkBJpuEI9J6LpBKm3TPaFS3+Sn4cI5Oq7uYrrjcxa9J7D00H+BZSxFJNR+g6m6o4yfrMV7/RzxeR+mYWItWSzbNgvRFKeaBfb8FuDbY21cuvIHvrGrSNF+LFNZSYmbQ8s0CfsmmR/uIjQ5SHjGSywcIC4liMsiQkLA64twtiXC940xai8E6BgIkpAUkqrqeiaTcaOsAG2LuZk+JnqPEZ29iCTdZygyTeNkK78PN3NnegB/OILXr9A+LNMzqRBLaBiyiBScR4iEsW3bvWkX6CQ8PNfNeGsNvtvbGByv58eeOl669g0vXvqK/W0nmAhMY+pplEgY0TuKOuZBvnmWxTO1xDubsDXVrY4q57/z+QJJKUjE20Bg4Adu9hxm4+V9rGp4j1X1W3j71Ge0XP4VueMG8qXjiIf3IPy0g8SXbyBu34BwcCfpqSFKxWIlwnw+j6qqJBZDRP1e2vpvs/3iQZ6s28FTpz6k5sBGuna+jrDrTcRPXyb5/tOktqxH37wOfdNqlJpXUP9qJG9blVs2jWUCczLekSQTAyY9dyWOX+nmi8Yz7G08wp8/7yC89Vn0TWvQq9divLMG0/HqtZibVqNuew6l4RAZXaXKtrKE/WmGujX62iw8bVk8rTk6mw2amxK0XBthpPYA4kcvrECMd1a7UG3zOlLVTyB/sgHl/C9k0xpV0ZDGaJ9OX2uGe7eyDN6xGO5aYrBzmf72Ir1NKTxHG1n4+DU0B/LuepIfPENy2/OIu98i9t1WYod2o3luuR1X5b8vM9Kb4t7tNGMeneCcTjSkMzupMnjHpLclQ9fZUcb37yNW8yrC3moWj3xN4sQB5OZzSP2dSOP92EmpUoe6ZuFEOTUWY2EuQUpNYxgGsajM6D2JvrZl+v7WGL7cycL5kyz+cxFhYgjZ70MXBVKqiqom3dJz69ChLi1ZLEZjCEKCdLoCjAsy3rE4/R1pPO0GEwOLxAMhdEXCNE2WLMtdpygKoii67bnSKblcjqSqEYhIeOclxn0CU/ejBIMS/lmN6TGVcCCFZWUoloqUiiWKxaJbbpZluUE4EbrAinCW0Q2b7tEop69NUn99Es94GN2wyCznMPRlnGpwQA9LrLPXgT8QYRfomJ3JM7Og0OZxGj9EMKaRLxRXNj3OH7YK0JH7ctkFZLIFMrkCheID2a9IvxPYw5BHHfAvja52eUcPvZcAAAAASUVORK5CYII=)![Cursors interacting with an illustration](https://cdn.sanity.io/images/599r6htc/regionalized/617664b8cfdd1dc6610cf596fb5a19eedc39c3c6-1108x1108.png?w=540&h=540&q=75&fit=max&auto=format)

Tools for the classroom
-----------------------

![Semester planning calendar using FigJam](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAAC+ElEQVQ4jWWTSXPbVhCE+f/PucVRKgcri12ukhM5kiOJklWxosVctFAESZAgCYAEseNhewD4vhSl3HLo6j7MYWaqv1a9rcmrklTmKpM5O+VVQVlL6qahruv/qaoqZCnJhSRPK+q6UUptUUrRSqqMebxC8w019hdM/AW6v2SduIgsJYkFURATR4I4TF5yEglSkRKFMWEYUeSlauot20bRiqRQHUdTX8weQ99QZuKwk5uFiCwnjjJCXxAHKVGQvuYwJRU5aZoiRKpiVxIulUocpVqRTPlqD/g8/8Y0WZHWBWmVk1UF2e4VZYkoihdPd/5fzmT5OlOWeMuaZXfLatDQypuShVgx9maskw1BkbDOfFaph1sEbFIHR6wIyoCgiPHyiEgK4iojKgVRkRH4EndRsZkXtIpSEnk24bxDsOiirzXa5h2n1g0PwSNPziV965Shf0/fG3LrDdCEhRELxn7GPMrw4xJvXTAbxbRCR2J1Bzjtt/g3e3QnR+yNDngzOeDCOefK/I1Pw5841I/Z14/Y0z/yye7x5yxk/zHhzEhYegXGOOPriUsr2pSs7oe4Fz/jXv/A4/QzH8wz3tltbv07evMLjjqn/D645r12zq+dI45Hj7zXXL67WXCgmcxcgTFJ+efcfT05sS3i/h1+/xrDfObLpsuhc8Wd98xoYtK5MukPLZ6MGd3OE/djg1vT4WIwpKeNMG2HmanzMO7Rkk2lhBkq73KOfTlRE2PK4epvvl/8wZHTRZvbPPV0poaJ7pq0J7ecLG4ZBUtCY03ctdRa0xksj9U380fVknVFagnsS0tp7SHP+pi/7Dvezs84s56YrSyM2Qhrs+Q5nPJuccovyxMG4YzSzZCTBHc2V1OnzbO7/7LhNheFCpcJtuEqy3HRN2seFiaDkYdjCBI7RPgRa+HRD8Z0fe2lVjsEd5REcUyUmioqxtuW3FZ10UhVb5sduyqXkiyTRK7EnkiChURuSsq4oCxLCrkre0ZRlTSqodi9LJdI+cJz/S+feL4WaEZ33gAAAABJRU5ErkJggg==)![Semester planning calendar using FigJam](https://cdn.sanity.io/images/599r6htc/regionalized/a04083c30c2f008e8a269c26b2c723509b3e7f94-1560x1040.png?w=780&h=520&q=75&fit=max&auto=format)

### Explore ideas together with FigJam

FigJam is an online whiteboard where possibilities turn into plans. Teachers can facilitate collaborative group learning while encouraging active participation from students. It’s best suited for classroom discussions, brainstorms, and group work.

![Designing a mobile app for Chess Club with Figma](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABYlAAAWJQFJUiTwAAADX0lEQVQ4jVWT7U9TBxTG+X/a29vethdo0JFtwjankMW1BZLiZIhoNjULyRI/yQDdYALCYMqLtEALDIFuVCq3tL1tGVDe3IaUbYLiZLh9MVkkm3Pe31LIdH54vjzJ+eU5Oc/JkDJtiJZMTJJZs9vtdHZ2Eg6HUVX1uWKxGJFIBEVRCIVCRKPRXd/jduNyuZCzbJpokhAEgQyzxYrRJGE0GjWHw4nXN8DKym3W1zfY2LjL5r1NNjfvs5pKMTuXJDm/QCq1xvr6OjeDQSrKy7FarZogGNDr9WSYJUkzmUyaURSxO5yab3CEVOoX7t99xNbmHzx8sMP21mN+/OkBs/PLROIJpsJhwlMheq51U1JUlJ5Pw7S0MsxmM2nDaDSSTtjfN8rizO/8MPcXqaW0/mYl+YSluW3i0wsMf9VLY/Vpas6WcOa9Qg7kZmMQBHQ6/V5Cq9WKJO2ujMPhoNc9Qiz0G3Pqn9xe3mE5uUMi9Jh4ZIt4PEno+heM1x1itEqksUygMFeHQdC9AGZlv4I1Mwez1UZxiYt2dz8dEwnc6hKJtTv4F7/ncjBBz+Q0SjzOdzevsN13hEcdmcSrLZQdFBEFPTqdbg+Ym1fMvted5Lxm5+jxj7jg6eR9fysnb7gZWlqgYSbA21/XcSLQikf1E1daeThs5x9vDrfqszhRYEQ0/A+4P6+UfQdcuzpa8TG1njaOjZznpPcSnm+C1AW7yBs7hStwnssRLyOTDdwZfpcn3v0s1ts4XiC9DMzKeRPZlo81O48SVwUtPZ/TNHqWlr5jDPpO0zVWxieBUppC9QzH/CTCHfw6XsnOqJ3ZlkLK37G9DDRbZE2SLJrRZMbpLNLcXc0o12tQ+iqJD1Qy5z/Dt8EaotFB1GmV+cQNVtUvWVMbGO89R6nzoCYaDGngXm3+q4xRFLXdK1+5inqtj2hjC7Mt7ax097Iy5CepRIgkZhiOTdGk+KhVuqhyX+ANZwGCwaA9TyhJ0rN0sdNgp9OpdbZ1M9Q2Rk+1j/6aIcYuBZjojhAKzKDEZmkPhnC5veRf7eLV2loshw9p+hcJn2XIsvxUlmVNlmWKi4u15nYvFzsW+fCzZT64eIuq5p/51HOPgYlVJmML9IwnOdU+z5H6ed6q8pGZX6Tpd99OpwmC8PRfl6+I0/huFokAAAAASUVORK5CYII=)![Designing a mobile app for Chess Club with Figma](https://cdn.sanity.io/images/599r6htc/regionalized/fd1999d842b98ba8c8c0ae952b6ccf53afaee9ca-1560x1040.png?w=780&h=520&q=75&fit=max&auto=format)

### Bring ideas to life with Figma

Figma is a multiplayer, intuitive design tool used by professionals. Create graphics, presentations, prototypes, and more—all with real-time collaboration and feedback. Figma and FigJam live side by side so that students can turn their ideas into reality, faster.

### Go from design to code with Dev Mode

Dev Mode is a workspace in Figma to bring designs to production, faster. Students can inspect designs and get the details needed to build them. Dev Mode is great for learning how design concepts map to code concepts.

Bring learning to life
----------------------

Use industry-leading design tools to create a collaborative environment that helps students of all ages thrive in the classroom.

[![Illustration of tree and rainbow](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAAE8ElEQVQ4jVWVe1DUVRiGf4GXmlIr1NS0RjPTcsZrOWEYOjWiI6YpiJhgiMqogwqICgKx7LJycVn2t9xRVtfEXS4CzopyWVhummV5qbSSmUxrmvG2qLvrrfM0i+Dlj3fO+es93/nO+z1HovkVRPkk2DsPjL6IqgmI+sGI1r6IDuk5caJn3/wyomYs4tAMMM4G83TE0VHQ2g9JmKZDXiAiYz0icy1CXtFtTP0Q6DHpVofEvZa+2Ju8cNSN5D/Th5AbiMgKQxR+AVXjuw+SyApHqLdwX7kdu2oHdmUsTk0IrrIJuJr64WrxwGXz4G7zS/zdOJnzR5fxR9l8bhbNpSsjgi51LPezVyFM06DBCwlVLEIZiz01jrOZaprVWTSrVNhyw7CVfo7N7Eur2YczlgWca1VTazFStieB47oN2LIUnNftpKtwKeLweNztk4RqGyhjuamKoy5dJl1TT3L2aVT5HSiKraTsqUdnrKbKUoWl6Xu05p/ZkXeCeH0ru+VqrMWR3CqfgqgbimjriyR2bYbUrdxWbKM2WY9Cf56MagfFDfeQj7rlwth4nRJLJ+rSy2wuuk5EwR0i8u8Sr2+nfl8gd+oHgfsR2z2QRJE/6EK5mxpJnUJGZ7hI+cmH2H59RMdvjzj5+0NqTjlRma6xOreTQPkcy3MuEpZ3jfg8G42l83E0932SAKk7MiVzubt7NY0KDdr8H9HV2Mk/7qLmhwfUn3tItuUeawqvMCe7kol6FVNlLQt1bWzPPYbV5IfD1ucZw4LFIK/EuSuCUzt3sC+pBE16E4nyBZKMN1CUudhicLJU/on39QpeMyxn2J5wvLNLiNJX9Bh6PmOoCQc5BJe8hEup/pxOCOVEQhyV3xSgTmshMudf1uXfZqHcxpj8WAZ+G4DX/pVMlbOJzD6E1fgljto3wP0otW/2BLtqPK7qkVzeN5xLOe9yJcuHzpRQ6hLTUae1sk6+ip/uGG8VbmJgaSCvH1jBB/pU1measGqjcRQsgMJFiLwAJNHSH9o9cTV70Fk5mF8OjeNP0xj+KZjCpZRQKpMLick8w7zsOsYUxDDowDK8DCuZJGewIe0I1mQNDuUWUEfhTowkekbLZevDhcqZtJXGcbYigL9Mo7ma5cN3ifGkqRoI1p7ho4wchiUHM1q5gc92VxGT3oE1SYcjeRvs2oyQv0LqHXpnU39OmfwwlBgw7Fdz5MA0jsuTKUsKI15RRGBWKz5JBt4OCWZCxCb80o6yMc1CbYIKhyIGtGGIgx8/NbxdP4DDJb6syt3K3MJN+Bf5sTjHF//dS/DWbGCiPpF3MqIZun0pIxJDeE+7E//0BMoSo7mj3AxFCxHHRvRcuUPiRt0wyvctIlS/Fl/9CmbpA/hUH8AsORAfOYhPcoKYWeCP9545eO+djc9eP74uCKFKs4VbbsCYpiNaXkTqzY+9YTinjUFUZ0ZhUq7DlBKOKWUNJmU45pQ1mNOCMRfPwFw+EvPhIZgrRnGkfCZnShfTVToLcWwYdLyA5K7OXeX9pgF0HfTBnr4eR3IMzuToHsXgVETh1AbhrBiLs6kPTpuEo9kTu3UAXY2DeWAd1A1kt9eTHoo2T4RlFKJ4AWRs7AaGG22oo0G7Gg56g/XVp8DtpXcvzXvWxxX2krm1P6JmHO5xFGmRiNQYhGYtYv/sx3hq93j+W3iG5r2m/wP550qVH9i0GQAAAABJRU5ErkJggg==)![Illustration of tree and rainbow](https://cdn.sanity.io/images/599r6htc/regionalized/656b0d5974726483a45fd7013fcd82e949a493b2-720x720.png?w=360&h=360&q=75&fit=max&auto=format)\
\
### K-12 educators\
\
Get students excited about learning by empowering them to imagine and design together—all in a fun, interactive space.\
\
Learn more](https://www.figma.com/education/k-12/)
[![Cursors creating three lines](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAAEhklEQVQ4jWWV61MTZxjF8y/1Yr10xmqnre3UL07HtlZtR50KZRAsYFGqjqXqgJcOBcGiEFBQbgmBLJvdjVwSNgkhFKtcJBCkKo0QIOESkoBBfp0EI9R+eOZ5LzvnPWfmOWc1DnkVm2kJqziLRQygmpaInXUpxHtindh3KbEzUMUQbXoP7Y2j2EyR1/cau7SCqgTo7fJy3/kPNsWPTYpuAHizrwFamsZorbpKW3UeVsMgdull/E7TKUZwdfrwjs8w/nQap8WHTVr+H8P19Vq3NPbQrt1LR9kOOuoasIkRHApo2oUZ+u9PElwI4Z9Z4E/7BFYxGH/RobzJbL1bm9yYy48hXf+E1pq6uOwYc43T6mX8SYBoNEo4tMTIoykcbT5UUxC7vBL/KAaSqDhTBeyiH3NVOYaSFO7VNOOQwvHHNWOjEwT880TCS4RCEaanZnnU78V27zlqTMYGVglwl3mev2QbLn027bcPourv0iXPrQE+6nuOe2CS4cFY+RgemOBBzziqeQL1lYwEULcSplfxMCBXMyIeZLhpK31N39MjtuGUQ2uS7eYgNmXhP6XKQVQpNj4vcSpRXMosvcoQ/bIOtymDUWEHQ4a3cTV+jd1YS5fke61C45Cm6Zb9dCuzOJU5nPIs3fI0Pcoz7isPeajIDMpFDIvJeIQPGTW+x2Dzbhprk8gtP0dhlZlWIYgzMYdNeh12UxkD5usMm0twKwUMSRcYMmUyIh7AI+zCY9yCx/g+Iy1fMiTlca+pjtTSfLZcSSXtxh0kY2AdMO3XUi6WHULXsBVX8zu4hc08FrbxWNjOY2EXo+I+hk0nGZQreWDuxqVMUl0/yJ7fLrIlP42zFQKtLcF1p3y6T+XjrMvsLdzNqeptlOn3IAjH6TBdRZXqUOVOLLIbs+TFYHpOhXGEs5VG9l3OI6Okmnr9U2zSyjrgtwe8fLTfzltZBbxdmMrOimN8UX2OIzXFpNXfIaPBwI8NBn6oreGbO6V8fiuPz66f4egfxVTWD6K+smmiNEX5EVKSvez6zsn2nDp2Fv/OB9pctmpPsan8JzZps3hXm8kmbSabtSfYUXGG/VXXuKSzYhIDa26SV7HLL7GZomjuNa5yoyBCWoqP/Yc9JJ/uJ+eGi9N1bZzQGUmv15Fe30BGnYGs2y38fLOdoqp+BKMfW8xJMdfEAkYKoiozaGK6Ww2raIuWyE4PkHTIx8ksPyWFC+hqFzEJiyimIPU1Pi7kDpOZ3k/BxTHMusU4M1V8gVWco8c2yah7ag0wNuEdxlXu3nxBbs48KUemOHZ0mvM5C1QULdN4K8S1vDGOHHBx8Kterp7/G7N+EZsUjrPqdUzgfRZgeflFDDARTbHQBKFmheIrYbKP+0k67CM1aYKcLA8n0h2kJzs5f3oEXeUsVmGJTmkmnqHPnkwxP7dIJLyMJhGYG8OzvXkV/a0o1y6FOZs9HQfM/8VNdekEUkMQVYzGQ9hqCuBSvQw8mGSob4qhPt+a5I2gG/dWIcY4Sk1ZCENVGKsQS+X134HNtIylZR5Lix+LuFb/AtviAGKiP1gzAAAAAElFTkSuQmCC)![Cursors creating three lines](https://cdn.sanity.io/images/599r6htc/regionalized/5c7c7362260983663a0bba6401b9f1651502b241-720x720.png?w=360&h=360&q=75&fit=max&auto=format)\
\
### Higher education faculty\
\
Facilitate engaging group activities with flexible, easy-to-learn tools that will prepare students to thrive in the technology and design industry.\
\
Learn more](https://www.figma.com/education/higher-education/)
[![Person icons](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAADVElEQVQ4ja2UzU8cZRzHh556UqOe/AM0MelFk8aT8ebFq4lJvVqa1pRiCkKM2uwuJZSFCg3sG3QXln2dmZ3ZnWWXHZZ3ltDGpDRGKrayJVlIKyiUCoaX8jHPwGJJbeKBwyeT5/PM8/t9f5nMI6mqSplYLIaiKCQSiUMXj8ePOPEUTpblF1wkEkESGwJN00ilUiSTSWstiv+XE4fLTjSKPecEVsFyCvFSudu/Tn/B6bpuNSs7WZYtd1hQEI1GrciC+IGLPe9EsYOUR5yiHHFWQUXZTymE2Nxvohw60ezlTj504XD4YGRZJRhL0x3J0RvLEJM1VCVKOuHB1K6R1drQ1D5UOY4RCWMGAwyEgujiI8oKqpJCU3Po6iCSiOwPp2n03+KbrjnsN2foCpsYaic/Gp8znzvNbPZjhvUrZCJ+brvamW91cK+tiRG/Dz2uk1KnyWkPMJMLSMlUmvbeIb5y/0al+wlV3kf80DdFXr9CafBdtsZPsDb6BjP9ZygE21hwOtiy17B+tZ67HdfJxbOYyYeM9//NZGYHyUj3094zRLVrnrPup1z0PKaldwoz8T0l8212JiSejL7GnfRnjPe0stBsY8d+macNdczcaCET7SenF5no32JqYA8pqhi0+oep7vyVs65Vvux4SLPPIBurZj7zDptjJ/jdfJ3p+KeMeBq43/gdm7bLrNi/Zvq6E70nhRGfY9TY2E94zT9JvXeWC+7HVLrXqer4CbfPwR3tA1aHX2VrooKVzCvM+j5irqmKPxx1bNtrWLHVc8vpItt7m7y+zERmi0J2F+miq8R5zyrnvJucdy9z1RNmUv6Q9ZGT7E1JbI9XsBx7i0fNn7Bhr2LPUcu2vZaFhiam3MOMaX9SGHhmjWuNLFKd8/5FpWeDS52zBAOXWMy9yW5BYrdQwXruJEvu91hzfMGOvZZnjhrWbPXcdQYYixStMUWyMlJ9dxFBXVcRu28YPXSBBwPvszR0ilL+FPf10/zsOkPR+S2LLQ5KLTZ+aW5kzKVgKnPkjSWGUiWGUosWkjdkUuZmKIEavYGZsJPXbBY5uYFssI3BgI98oNsiG/Cj98lo8Ryakj+C1BcKUSZk0fc/CL0UqfxTHxdS+R47LiTDMDhOJHENHSf/AHQprBd+LxiBAAAAAElFTkSuQmCC)![Person icons](https://cdn.sanity.io/images/599r6htc/regionalized/4606fd70a66590e4714489237490f10b1fab041c-720x720.png?w=360&h=360&q=75&fit=max&auto=format)\
\
### Students\
\
Collaborate in real time with classmates and learn valuable design skills with a tool you’ll actually use in a professional setting.\
\
Learn more](https://www.figma.com/education/higher-education/)

New-school features for every grade level
-----------------------------------------

![Using sticky notes and reactions in FigJam ](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAADiElEQVQ4jX2T6U8bVxRH/a9XUdW0SqsojVq1tKGUhKIUQgiYBNsYG2xwzBi8jXfPGO/LeGEGjz3rqcagqv3Qfji6V0/3d96Vnp5P13UMw2C5XOL1HqZp4rru/2Lb9iqzWCxWGU3TUFUVnxe2LGuF13vYtvMY5D+FjuNgW/ZD1rQelzLwOY7LYu5wN7GYKiazf+CdLXUHb+bf27noms1sbK4yHurUWnl8tuUy6pqU0xqioFJMaRQEFfHqjkrmHqVnYRouju3izXrVu6TXWFK6Vv/O1PM6StfCZ5suk57NbWGBlNOR8wukvE4xMyOV6ZGTekjKkMZ0xO1UYazOmas2PcmkkLwne6GSu9QoCTqt8qPwfuIwbFp0JeMRk0JF4SAnsFEI8FoOsdUKs9uKcdOXmU0NerLJ9fmMi4DCZXCCcKqRjZsPwunQoXCtkQiPSUZmpM40zqIDNhMXPBff8KL+imfyJs+lXcKdLOPJglZ5ScTf53C7zaedAaGDCdHj+wfhuG1wHZkQ3B1w+l7h/EDl5OiOPy4y/FJ+zab8Pc+lNb6ubhNo3ayEnYpJ/OOU4M6EwOGYdyd1tqJZfLbhcNeYUY32ufKPuDpor+pZYM6fiSJrpV3Wa7/xovKG74p7BOUcw9GCfs0hHTFJHFmEQmN+TcZ4mt5+FN7OkGNDxGOFrL+N4B9zHtDZi9dZT8Z4FTtn/fyC1/EUkVSbRsWkWXLJxm2EkEP4bMTP2TBPahv4HNNl1rOpCwal8Bzx5J5UyCRxahK9HOE/lXi3K7G/0+b4YEwssEBMOjRLDlLeppJ2uMop/F4946m8hW9hmPRHOuWyhphVV+SzOhXRpF4ySCfmRA81Ih904kcmiYCF+Nlh0HAYtW1aVZNMUWEnL/Ay+wmfrPWItjN8qCc4lJP4mwInrSzFQY9h36SWdbkKL0idKKRPu2QiXcrCnGHTpVVd8jmiEDxq895f462/hC85KbBW3+er4gbf1N7wrLHNy8YegW6K1kCllnO4iSiIZ3mKsTTieZFKasbg1qWamxPc63G41ST4tk1od4Tvcprnx+YeX9TWeSJt8ETe4FvpLZ86Ap2RSqvqUBLuqKU6VFN9SlcTGuISpe0iF0zix/dc7I9IH3iPOcGXmBX4qfOBLxubD8ib/NB8T1Ipo6oGquKidO0HOt6Pcpj2HdSRS7PsIkRcUh81xKMuNx9n/AUOb3pFIQFo8gAAAABJRU5ErkJggg==)![Using sticky notes and reactions in FigJam ](https://cdn.sanity.io/images/599r6htc/regionalized/d0cb5c7af0891fc7134e829e6d761ed191a711f2-1080x864.png?w=540&h=432&q=75&fit=max&auto=format)

FigJam

### Level up lessons

Brainstorm group ideas with your class using sticky notes, stamps, images, videos, and more.

![Voting on a sticky note using stickers and icons in FigJam](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAADF0lEQVQ4jW2U61MaVxiH8xc32uhMbNKZJEIFFJTLiEaRazrKdCxTsWVi1EarxQZrYioXYdmVi02YNl4WSGAvT4eVdCD44Zn3zNk9z/ntnD3vHV3X+Yyma6iaitJB79ZedBVVU1DVFqryCbX9EU1poKktdF0zHHd6ZZdtmXyjwvG1cCtvrwWyV0XKH0T+rhWpvc9T/5BFaZyjqe1+YWd3oVElWtnEnYviznbJRXFlV3Cll3FlVnia+YHV3M9sCJscSLucv3tNS75NqKmkr0U82Sije9Pc27EbjOw6jDq0ZWNo08bI9hSPkrPYM2GWywnyFwLtdhNd0wYTdoTukxWGtya5u2Hh7gsLQ5tWhrcnjXozZ+Xerp2Hx/P4yuvk6mUjzGfP/8K2pnByVcR9sszwlo2vnlsYemE1kn3966RBJ/nYKw8PjryY/lpk+TSGUMujKK1B4VXjmt2zP5lKBRh9OcnIjp3RvRmDkb1pRn938vDNHE/yfkzFEK50kOfJCJXMPu3mJTo9QlVVyZ9VCSTWmIhPMpGc4El6jke5JR5nfZjTi1jTC0zkA5ilsIEzFyJx+D3l047woj9hq9Xi8HUaT2CR6eh93IfjWAQfJimCRQzhS3uJpez4MwtYxAgmKYylGOGZuEbh31MU5VO/sPmxTurkNxZWrUzFvsGacmAWAt2FIZ69cbGzb2L1ZI4ZKYJT8uOS/ASr62Tl0uCh1JsyycIezm0P9+M2Hhx4GReCxqd9J4Zw5pcIZJ4yXwjilfysiw4S4gyx6ho5Q6hAn7BR56j4loVklLEtN2OpWcYLNwnNYgiLFMYqRZiQInikJTZEBzuii/XzOKdyeVCoKAq1i3/YFg6YOgrx7fG8cZpmMYxdChAUvYRELw4piE0KMy/68UlBlqu/dBPe8h8qqoJwXeHHykt84hr+UpxANcFqNcZRaZbjkpefqjGC5wmC1RvitX3OGu+MhjIg1HQdWWlSbr6nIFcoyGUK9SolucjV5Svkyz+oyAJCvUKhS+fdertpNJYBYW/X6UNTjYvfaVHGuOfZl2s7wv8AhsRSB0m/tNAAAAAASUVORK5CYII=)![Voting on a sticky note using stickers and icons in FigJam](https://cdn.sanity.io/images/599r6htc/regionalized/d5cd28b3e762445e1ff4b84d0398de28c6cdea88-1080x864.png?w=540&h=432&q=75&fit=max&auto=format)

FigJam

### Share with the class

Encourage a new way for students to collaborate in real time with audio chat, cursor chat, voting, and comments.

![Using Figma to mockup multiple button styles with spacing](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAACY0lEQVQ4ja2U227aQBCG+/4P0Ou+QKXcVIqiRinBJyAY22DjMw4GAjbYgZZgMPBVuAcJheSi6sWv1eyOvp2ZndkPx+ORf9Fhf6AotpUOh8Pf/Q9nTocD2+2WzWZTrWW5Y7e7pC3P+YpBOGE0nLHZFK+BHI+UZcliPmc4jJlMZiTJnCRJSNOUeTqvlC2yynYdn4emie/GrNebyxGegGmaYJohjcaQTifC6Jr0zB4908TqWwSBTzgIsW2HwB9UkZbl/u2UV8slVi/m9iamfhfQkB6QBBHhXkAWZdSWitW1iMIBeZ6z3++B49vAZfaM1xlg1AZYYoQt21hiD1PoYty36NZkbEknMHzyeX72IBeBeZrhqw6+bBHINnbdwhVtXLGPfnND6+oT2vUNTqvPYraoInwXuFquiHwXz5CwVImmKKMIDZS6RO36M1+vPqJ8+4Jnu+RZ/j7weAKuvvPou7h6nb4q0laayPcyYk1AuLtDurtFa7YI3KCq4eEScLcrybIf5PmaxSwj6Lj4skmo2HiSjSP0f0k82S6e7BJ0PLLkQsoAz88vtNsjOuqY0eOUgeETtRyilosjW3gNp5Kr2IRtn4EaEBoBWZpVZeIceGS5fMEwpujaE1E0wTdNwoaMI0sodZGm3KQpN1BEBV3VsE0b13ZJk/R323Ce8qkx1+sdq+ULcTym22njNAQ8tYneUdF0HV3X0DQN0zTp232MrkEcx9UovgJWowfVbadRC3yPURSRPD0xm83OdDofj8cEQcB0Oq2m6yLwT9sURcF6vabYbtmV5auP4QQ4fRyVT1G839j/Qz8BHaOwTiK14ZAAAAAASUVORK5CYII=)![Using Figma to mockup multiple button styles with spacing](https://cdn.sanity.io/images/599r6htc/regionalized/f5b0194dba1746e7d33eeb2b43647bb2ae621163-1080x864.png?w=540&h=432&q=75&fit=max&auto=format)

Figma

### Make it real

Mock up website assets, build interactive prototypes to present ideas, and curate a portfolio of work.

![Example of Figma Community file](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAADfElEQVQ4jZ2U2U9cVRzH+cMaG7VNjMb4UJYhwQeMRXmoRk2oROuLqWklBdFQ6YSyFMpSoEJhhtlnYPZ9uXPnzoZUq+BMoTAdhtmAj7l3SMXXPnzzO+eXk8/5nfNbmk5PTzk+PqZWq1GtVl9LtVpNYcisppOTE/K5XUQhQzSUIhZOEwkmCQeSRIIpIoGUsg4HpYYvkCIaTiFEUghRWUkSYpp8fheZ1STTJTGDUevDqhOwromsPArxeDLI4kSY2RE/02oPj8a8zI8HWHoYwbAcx6aPYzcnsOpjGDReRCGtRNokhyzfEPBIZBN7JMMHONby6GZ2mL+3hfpWhOEfgkwOSiyotxS/x7BP1HWA6H9J2LWLTS8Si6SU5yvApJQlGtzkWbbEH1KdyEYVl6aMdirHxECC0b44s3e30Ezm2VguEjBVEVxV0uE6UvAQz3pW+bJXQFHI4rZlSIWLyqGgpYpXX8GtK2JazKF5+Bdr0zvYftvHqTnE/uQQl7aE4K4ghQr4HGkS4jlgPCYDs2SEQzZjxwTMVTy6MiFbhYClhEPzgvUnezi1BRyrBQxze1gWCsScZTJCgaA3jZQ4D4xmcZqyiL5DJF8dn7GMY6WER1fCZyzh1BxgW9rDsrin/OHS6DP0M88R3GW2kkVCPjnC9Lknx7LYDZsErEXCtgp+UwmXtohj9SWOlSLm+X00D3Isqv9kajDF5E9pVid2EFxHCjDgSSIK55IiiZv4Hb8jeksIzjqCq4LoO0JwlxS4aa7A8v0cM79sMfqjxMSdDJoHeeKuKk+TR4S8WRLx/yUlhd0s4F/fwWd5QXDjOYI/R8yfw23KoZn6WymZ6SGJ8f4YE/0JHo88xa7dxWf9R6nfWCT5H9DnDTGmXmCof46f+2YZGphBPTTNvaFpBvum+L53jBtfqvnmi1/p/fwuvZ8N891XI9z8dpybN+4zcHsMh93bAFYqFZwOF7dv3eHTrmuoWj+ktbmd1hYVzVfa+OD9K1x++z0uXrjMGxcuKfbNi+9w6a13X+mjzk/QrekbQLldQqEQw8PDfH39Ot3d3XR1dXH16sd0dnbS0dGBSqWipaWF5uZmxba1tdHerlL8su3p6cFutzdaT27oXC6nQDfWN7BarVgsFkVmsxmj0YjRYMRgMJypsVf8Z3K73WxvbzeGgzxyTs7G1+uqXq8rMHl8/QtT3CmU9F7+OwAAAABJRU5ErkJggg==)![Example of Figma Community file](https://cdn.sanity.io/images/599r6htc/regionalized/8241e04157417a142d14e5c52e84a62d65b436cd-1080x864.png?w=540&h=432&q=75&fit=max&auto=format)

Figma

### Learn from the pros

Learn from other designers and download readymade templates, widgets, and more —all from [Figma's Community](/community/)
.

![Annotations on a mobile app screen](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABYlAAAWJQFJUiTwAAAEDUlEQVQ4jW3U+VPUdRzHcf4CQLSDFJickLEDw8Kw1AWBL7DsAS7H7iYwjHY4MIrWjFxNeLWxU1lkU5QlpLTAJCEwnC4gLpAVYMp9CLqISKAuu7iLNvNsvgvljNMPr3n/9pj35/N5vz8ubmVq1pxNZVPte4Q25bK9MYfg+ixnQhtzCGnMJqBmH97fa/HOkfJcmoBvmoDPwShWfRWLmyER1zI1bqVL1cW9TIOkIYvj/ZVU3/iNymsdlA22UD7YyrnxTionOjnSY+CNojTW7RHwjwsmIC6E53eF4Zkvx/1Mwn+gGBePci0JbfmYpnqx2Oa5ZxVjwWKzsuCwY1u8T6O5G+VPmfi9Hc4GxTaCFFvZrpEQkBnBk9+pcBWxZdQJatr0mMxXmZub4+6dOyzYFlh0OLDNW5m7M8f5692oSrLxTxEIEiQIkWGkxMUQ/Y4Cr89jcDU8BiZeyOfC9cvcvj3N1NRNZxUhs9nM0PAQ1YMmVD9mslEbzhbJNqLCdpAac4Do1N14ffo/HYpgy3gXN6fM3DCPOzM5OcHE2BBjw/3UDLQRW5LJC7vCCYjcQoggJ1mWjjRlF156FW6n43EziKB6+Q5bdTQOdzI22sdgl4k+UwN9LdUM1Fcw0tFM1ZUmlIZM1qVF8KJqG6/GhBIcK2PzmzJ890fhqZOx4gcVrmXLHca3fERNbzOX2+u5dFJPe94+LmbvwXRoP92lJzn7ezWK0iz89kayQRvKy+pQNqi3E6AVeCVJwfq9Kp46IXaoWQLjjMcwdJRTW6yjLiOBZnUYTSlyGg8foLPKwM9dtURX5bD6k1h8DsnxyZPjnSdjbZ4K/+x32Zidy9ov3mdFSTIuK8u1qIxHKW4+RXnBQSrSVTS8pcT4YRodvxTzZ08nFVeNRDZ8wIozibgVxeFeFI97cRweRWq8CtNZX3CEZwsz8RBBZ4fNx5zHulhXhrHoOMZvdbRXnuJqj4mRsX7ODbQSXZ2LZ8EOVucrWaOPcdanj8nwPKrE8zMNq4qSHh05ofVjzo/8ysT4CKPDvYwOXmbi2gCTk+NMTl2nZrSdmNIsXtor4/WdUrYmywnSROKv3IqfPAiv9BA8vol99CiJreLYdDM9fYvZ2b+w2uaxO+6zYLVyd3oWY+8ltCdz2LxTihAViVQqJTxCQCKRELhlM75Jwaw6IYLLY/MveGv6FjMzM1itVh4+fMjf9x/gGLlLT+0fZOiPELRbSaBa4DW1wCa1QGBCOAGJoazNiGBl4Y5HoPqCnovmK8zOzjozPz/P4uIiD+yL2Mfv0VPXRfrXOnz1iXjq5DyjUzizWqz5Cp74Mhb300ufxBLYpqd9ste5yyJosViw2+047A5sFisto90o6w/jYdAs7e3jWf5pRPAfXb83jkQBGsQAAAAASUVORK5CYII=)![Annotations on a mobile app screen](https://cdn.sanity.io/images/599r6htc/regionalized/278798afdede34b809a57dd7286f93625b8b0cda-1560x1248.png?w=540&h=432&q=75&fit=max&auto=format)

Dev mode

### Understand how to build designs

Navigate designs in Dev Mode to get important details like measurements, styles, component properties, and compare designs to see what’s changed.

Dev Mode

### Start coding faster

Jumpstart production with CSS, iOS, or Android code snippets generated from your design. Or, use a plugins to customize code for whatever framework you’re learning.

Start using Figma with your class
---------------------------------

![Step 1](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAACsElEQVQ4jaWUy08aURSH599Uk5Km2F1Z1CULd01NF0UpTRPjY9NqXFDAplFiGyCCphGBjZoiygwg83AezIOZ4TG/5l6E4gOb1Ek+7p07M98958xhGNNoo85JuCgLuDyXngxzVZeR/XmCvVgK6fg20vEY0vH4f8Owl9f4EU9jdz2I7JcZHGw9R25rFrkt/0QOKLMPwnBVGanEd+x/fobT5Ayq+XfgSp/AlSLgSh8fhS1GwBY+4PI4jOpxmJ4zXFVBKvEN2U0/qkdvYaoVuHYLbluG21YG2OqtudNWYOoiWmoTqtxAs1GByFdhGdJf4f7mS3CFJbi2AnJ49BfwPECSZJxXLqBp+mjNMCwoigZVbYFla+B5Eb2eNx4hES7CbUtU1u/34DgOKpUK1tbWsLCwgGKxAM/ro9/vQ1VViIIAVVXAsiwEgafPPCC8plF0Oh2cnZ1heXkZPp+Pkslk4HkeRdM0iKJIxRzH0TnZaKLQcWzk83msrq4iGAwiEAhQIXloKBQEAbIs0wh5nke3250sJBcVZZBONBql0nQ6fU+o6zqdk7HXeyRlUquhOJlMjoTjKROhbdv0fLjRP4Wkljs7OxOFjuNg/Hj0pZC6FAoFRCIR+P1+rKysoFwuwzCMe0LvZqM7whAcS6I3WJaJXDaLUOg9AoFXmJ6ewtzca2xsbNC6krdLWsVxbNq1JKNbwkFjh0eN7bpd/C5XsJvcw9dYAtFoDPHENg4Pf+FaVkaN3en0JqX8AtWjNzDV8uDvZYmwdB4tpQ5Nqd2MdRjaFdqmCLPVhK42YJsiLdOQsY+DD6fJKSolkZJ61opLqJUI4Ztxia5xxUWwBUKI3jcOw9HPVwa76/NUSiIl6ZOaknF/c/YOg3Vy/SGYZkNGLnVCpSRSkv5TYCzTBpGSSEn6pKZP4Q+HD2F2AUB6bgAAAABJRU5ErkJggg==)![Step 1](https://cdn.sanity.io/images/599r6htc/regionalized/4f0a1b50f138cb24e5a0681d7efa990ceea519e9-720x720.png?w=360&h=360&q=75&fit=max&auto=format)

### 1\. Create an account

Use your student or teacher email address to sign up for Figma [here](https://www.figma.com/signup?locale=en-us)
.

![Step 2](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAADGklEQVQ4jZXTTW8aVxTGce+jSs0XqNVFpG66idQuusyucbpsm9TLuP0A2aTuolJadZFFo0TJKk2Ror4toipubMDYYA8Bgt0ahgzGvA5vYchgGTAM4OAY/tW9DjHYbtKMdHVH4tyfnnvOMMYrnn6/L5d49vb2aLfbtFotdnd3R37rD72P/V+w0+lQKpXQdR3DMCTc6/Ve1g32NwJzuRzhcFgugYukw3VvBIrDlUoFTdMIBAJEIhFqtZpMeVD3GnCADvadnR2JRqNRvF4fsVhc9nW49rUJD1+p2+1SLJgo7giKW6OQq9Dt7o6Cxx08boJi0tUti2jYxOussDRb4W+/QTG/Sbvd2QePO3hcD/expsR8ri38ji5+x3M8syYBJU6pVJY1Ehxdo0mPYlWJPZrv43M8w/2giN+7jmE8HQUHB8X31W4ffGP/hYldJA36MsTW09Tr24euTJ9GwyIe00nGc7Ss9iuT+V1V1JUsG49X0ZMhmo26dCQo0rSsDqm4ieLK8HBRJ50o86RYQQs9PZTsmUymrubIaHZSj74lE75Ns24goo0JTMTdiBbwuw2UuSbKXJ3leR1lIY7iMEeSDTA96qTgu0hq5kMyD6/QrD7ZB8W1xIR8S1EWZkpycgHnHp6/tli4X8Y71xrpmcQ0B8XAl+R+eYeNq6dI3vuB5qZxcOVqtUZ4LSFTee0NCYrldz4nMN8bTaY5KPinyP82Turrt1GnPiB25zoNszwAwbIsMukM6lqC4LKBz2ERcPYIujiSTGK/jpOePkno09MsXLhE0LZIrSKG8uKf0rLqZONLJNU/2VBVVrxlvPZtlFnrBZY9goU/O83s2Wlsky5ctiRbZvMAtBom2dANUp7z5EPXiEdUfB4dj11nLZje79khbG5impsTy3w3meCeTWdzGGxtb6IvXyNx933y9o/IhX5kPRxEXXtMSn3wsmfD2K1zCpcmdL76IoHt5xSmBEUPgYZpkLh7lej0e2Rvv0XBc4b8+h8U0ivkVy9TmBlH//4Esc/fxf3xRX76ZJFvzuW5cFZncuoffr+vUd+2JPgvXYyYHpsFn0gAAAAASUVORK5CYII=)![Step 2](https://cdn.sanity.io/images/599r6htc/regionalized/6d1d209caf03ce7748183c7ee18037172694feeb-720x720.png?w=360&h=360&q=75&fit=max&auto=format)

### 2\. Get verified

Once you’ve created your Figma account, verify that you are a student or educator by clicking [here](/education/apply)
.

![Step 3](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAADpklEQVQ4jX2VXUxbdRjGezevjJlXLtOY6IU3ixdeOGMyo8YbJmHERIuZWcxINM5Alg2jGXEQzUyWMEWTqRkWXGBo0bHBhEFTPspHsWUrtGWntFIG/S60tKOlH+f0/EwPFmlX9iRv8uZ//nnyvO/7/N+jogSyLJfNS+/sFaqyl3eR5XI5MpksmXQGSco9kkwuJSyQFD7mIUkSocA6Lucq62sb5HISj4KqXCmFXJRENpMJXK5VDKMWbFYX0UicxGaqKJKJtFLFjsK9+rYej2J0zGGYM2MyWTEbF7GYfMzPhrAqEWbeHMJuCeD3RhBFqZiwoFDK9y2dZcnnodPQT+d4H1OWuxhGXej7woz2xxjLx60YI30bjP7lR7D5FZWqcuWm01mcziCTxkVuz0zTNdnPxdudXND2cvk3M21aO1e0NjQ9C/T8ucTI4CpOIUg2myfcIZKViUqixEZ0E8O4ix6thfEJOz+N9fJG1xlebDvFa5pG3mxv4vX28xxt/5qmP7oxzgqsh2PKAFXFFpFZD8awmZeZHhcYHhLovGanrvUGhy428lTLpxy8VMfBljqe/eETXrl6mgsjV3H7PYqQ7aH8pzAnSaRTKZYFP7oeC1PDNsb1SzSfd1J93MqRE6Mcrh3gcO0gL5/s5+gXWr65eQOj28rmVmKnbQphHskHMTw2C8KUEZPeiuGmg+5WB2c/dPH+2wHUlUHUlX5qqnx8UHOf5mYn5lk/W6mU0qodY8tyDiknEw+HsA9c5871ThamzOg0Ti7Xuvmq2ktjVZDGqjDnKkM0vrvC900uRnQ+1sLJIocoxpZEkY2IB5/7Lg6jHtstLdaOnxls+JWOd0bQVJloP/Y3mmozV96z0VHvZKJ3hejapmIvOVfy9EQxw6rLgHX6F4Q5PYsDWoQzNdypeouJiuMYKmqZrDjJWOXHDJ9qZarLgse1gZgVH7JbHqr8MAIeK3bTNewzHSxoP2ex/iWW1Qdwq59mSf0M/6ifQzjxKve+/ZKgIJDJiEXKikrOJ1tbCfz3TbinT7PS+wKeHx/H2/IY/kv78LbsY6nleRxt9fimdaRiUWUb5X1bbr2ptg0NsfA9vDMfsaY/QFT3BJGhJ4kM72dtaD8e3RFWbb+TiMeKJlpaLgXC/Fki7iew2E1w7hzh+bOE5z8jPN9AaK6BwMJ3RENWJGlX3x7SVkQoI4lZUskIibiPRMxbFMkHIbLpJPIudf8/2RLC7bNd66tM7MZev4UC4b/6t46RhUcTtgAAAABJRU5ErkJggg==)![Step 3](https://cdn.sanity.io/images/599r6htc/regionalized/7c08a1235ce0c0e1d6b36fc6cd84b49cd62837e4-720x720.png?w=360&h=360&q=75&fit=max&auto=format)

### 3\. Set up your education team

[Create, upgrade, or join](https://www.figma.com/pricing/#features)
 an existing team to start collaborating and get access to all professional paid tools.

Bring Figma and FigJam to your entire school district
-----------------------------------------------------

Figma and Google are teaming up to help students transform ideas into reality by bringing Figma to Google Workspace districts in the US, UK and Japan—for free.

[Learn more](https://www.figma.com/education/chromebooks/)

![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAABYlAAAWJQFJUiTwAAAFhklEQVQ4jYWVe1TMaRzGn9+vZqam28xkOkUik3JbJUVtayhFckt3pZJ2nVEnpzZiD5txGRlEhUIY15VdkmoarDgl2VXSWrSrdGEPLce6tDa6/L57fsk/+8/+8Zz3fc/3fT/vOe/5vs+DvDbC027Ck25CdisBegIq/k/cwD6hgbC/g9D5nvD4H8LiOwRceUEg4sVh+yMCbhLQSUAjARf5CzjgRwJqCLg6CLxOQAvBuI5Q+OTjWZ6R+oCARbc5Rv2QrDQtnK2qsdd8eOlbo0n1xMqriWX1/SxK37PMuecsU/aSxUV+/YFlvv+LRdFL1qT4jVHyr/0WWS2cbeZDspxUwzGIbSRhbhvns7ed4lT3yQMlfdY4+VyGc10y6PulqOiXwUBSlJMUZX1SlPfJBlTaIxXo++Qp9zjv/A4uLqeNpnjXcsaIauCEm5s5v60tnCr2xqvpPmsK3EJV63yV6blu4uMddignOZNlGMGs2uOC7EoHlPXaIGW/EwISprKJ2s/i67r9tK2k0jRzPl61ZAzfSy9Y/zpymH/luXvGKrXyaEx4xomY8H3bQ4NDvUJVEqyMk5ssU84WRXtFCEJ8nTDaSw5z6TyITL+FuSRu+NJ1HoHVXW4L6jnbcSXPGMzZdJLBZbJ031jkfDg6POVyfFjD5aURjcdD5iSMG2s7TBjvOk+86otj4nSfXFHoGDcAHgC0APQACjFkeAS+PumIKjKFuQ2wZMtRBtVkOXvNHvf8iEW5xdHBHSWxoRf3LZgVJJ0wbKwoxjVZvHpaqXj1tAJR5ET3ASDD8MAKgDkMW8dIdm2RQlBLYtZlCjBTc4bBVbJyTdrmnubvtzYnyG/vgeDAmPUzvIcZjZRJBfPGjDdZ4hYpCp+wTOivcAJgCcAPQDqACGbqfGfm9HM76DkzhGUANvm3GVwiiVX6EWePiZN95igcvGcoRtqbCUVCexmM3EbA1GKUhY2xs/UoI4XUysdjjmCcyxQHB3tnD6nMzh5ZlRaoIBuU9pgxNwjAsQ6+eSVYd84RtorxADwBTBQawy5jCUZrkxG0JhZeM1xhBciNIoNTRi2P35SwcvnOtKREbWBg8j53x121zqKzb815HKBrB99TWLHHBTI7JQuEAMxcMxNM2pCI0OMbcPqkGgfzV2P6XOVwSeISddA3aYWGbZnFTVp1iT5j/dkd87cYZlkde2wxwDPStYItfS9lvtwxFlLbAADRYJgQgYBxS41iZhRthq66APeqC3Awb5U4YEVCZpxWfeGWbm99z9H8hq7sXTXX4rSV4cYHHnwEouB3oPiDBPHbXGBhzT/2IgDTGWBooCskh9Zi9o0DON1wFPUXtNiaviwiLC/rSuGZw01/ni68/2Z3zs3iRVmVAdhzT8z/Z3hf/ZsNutU/UnmkZpqNckEALIdMg73LKDYk1Qy6XsHcJD/rQxpJ8IUck/26zaaarxLcfdZlli0syPtJtzfnZsn63OuZscXNgWH1PUPDbxKLsLpe4eYW8lff7UoN1FUtRPzW8dBW2cNAcsbAyXG+Rz4255AiamOYb+T6hQEu6iyX0bt+dgrfVjkzavu1hSp9e2zWbz1pmhZSel/vFWDxHU6wu42889q4mMTb3Z441SnH+XfSAWMo75eyFfxIUpx4LcPhJ9b44TVvDDKc6pSx3z2zUf3SOzWvnaJ2ttLkqTc4Y4Q0ELOlmbPY3kpDUppJjAfE4iqxKO9jUUEsU9rN2hqesp7txDpxxAjqiZVdItaxhVhFK7FpTSTOfsTJNM2c2JPvQ80jQlMXh7vvCBteE9BOQNWgsfJmyo+8sT4jgCOgYbD+BwGvCCnthPOdhLPPOMy8RUDKfUJJJ+FCJyG9aTACPsXAp/l/NVgTGAhJ9z7GAB8ln9dy+BcS6Y30F9cw2gAAAABJRU5ErkJggg==)![](https://cdn.sanity.io/images/599r6htc/regionalized/ba08097829df5a3e41826bb74db463403ab10d55-1144x1144.png?w=540&h=540&q=75&fit=max&auto=format)

Education plan FAQ
------------------

### Who qualifies for the Education plan?

### Where can I learn about how to use Figma and FigJam?

### How much does Figma cost?

### Who should I reach out to from Figma for help or questions?

### Is Figma integrated with Google Workspace for Education?

### Is Figma integrated with Microsoft Education?

### Are there free Figma and FigJam templates?

### Is the app COPPA, FERPA, or GDPR compliant?

### What student data does your app collect? How can school administrators access it?

### Where is user data stored?

### Who is user data or usage data shared with?

### What are the required steps for data take-out?

Improve your Figma skills and connect with other educators and students
-----------------------------------------------------------------------

[Sign up for a Figma workshop](https://www.figma.com/education-livestreams/)

---

# Editing Properties | Plugin API

[Skip to main content](#)

On this page

In many cases, editing a node property is as straightforward as changing a property on a regular node object. For example, this is how you could move a node 10 pixels to the right:

Simple change

    node.x += 10 // easy!

However, for more complex properties that are stored as arrays and objects, you will notice that we marked all the properties in those objects as `readonly`. That means that the following, which you may naturally be inclined to try, won't work:

Readonly properties

    // error: object is not extensiblefigma.currentPage.selection.push(otherNode)// error: Cannot assign to read only property 'r' of objectnode.fills[0].color.r = 10

##### info

In Figma design's Dev Mode, plugins can only edit certain node metadata, such as [pluginData](/plugin-docs/api/properties/nodes-setplugindata/)
, [relaunchData](/plugin-docs/api/properties/nodes-setrelaunchdata/)
, and [`exportAsync()`](/plugin-docs/api/properties/nodes-exportasync/)
.

Learn more in the [Working in Dev Mode →](/plugin-docs/working-in-dev-mode/)
 guide.

[](#the-how "Direct link to heading")
The 'How'
-----------------------------------------------

For all node properties, making a change to a property requires setting the entire property. Often, this will mean making a copy of the original property, which can then be modified.

For arrays of nodes like `selection` where you want to make a copy of the array, but not the nodes themselves, an easy way to make a copy of the array is to use [`array.slice()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)
. Other array methods that return a new array include [`array.concat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)
 and [`array.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
. Keep in mind that most array methods such as `array.push()` do not create a new array, though they may be used on a copy of the array.

Example:

Changing selection

    // Example 1: Adding a new element to the selection via `concat`figma.currentPage.selection = figma.currentPage.selection.concat(someNode)// Example 2: Adding a new element to the selection via `slice`const selection = figma.currentPage.selection.slice()selection.push(someNode)figma.currentPage.selection = selection// Creating a new selection. This is more efficient// than editing `page.selection` repeatedly.const newSelection = []newSelection.push(...)newSelection.push(...)newSelection.push(...)newSelection.push(...)figma.currentPage.selection = newSelection// Remove element in selection at index iconst selection = figma.currentPage.selection.slice()selection.splice(i, 1)figma.currentPage.selection = selection

For objects such as fills/paints, you'll want to do something similar, which is to clone the object.

Change fills

    // Example: Changing the red channel of the first fillconst fills = clone(rect.fills)fills[0].color.r = 0.5rect.fills = fills

##### info

For more detail on changing color properties, see the [Changing Colors](#changing-colors)
 section below.

There's many ways to implement such a clone function. A simple though inefficient one-liner would be:

Simple clone function

    function clone(val) {  return JSON.parse(JSON.stringify(val))}

A perhaps more principled way of cloning would look like:

Better clone function

    function clone(val) {  const type = typeof val  if (val === null) {    return null  } else if (type === 'undefined' || type === 'number' ||             type === 'string' || type === 'boolean') {    return val  } else if (type === 'object') {    if (val instanceof Array) {      return val.map(x => clone(x))    } else if (val instanceof Uint8Array) {      return new Uint8Array(val)    } else {      let o = {}      for (const key in val) {        o[key] = clone(val[key])      }      return o    }  }  throw 'unknown'}

### [](#changing-colors "Direct link to heading")
Changing colors

A common use case is to modify a node fill with a solid color. Color objects in the Plugin API use separate numeric properties for each color channel, but you can use [`figma.util.solidPaint`](/plugin-docs/api/properties/figma-util-solidpaint/)
 to set both color and opacity using familiar CSS string encodings:

Setting colors using figma.util.solidPaint

    if (fills[0].type === 'SOLID') {  const fills = clone(rect.fills)  fills[0] = figma.util.solidPaint("#FF00FF88", fills[0])  rect.fills = fills}

For setting colors on other types of API objects, see [`figma.util.rgb`](/plugin-docs/api/properties/figma-util-rgb/)
 and [`figma.util.rgba`](/plugin-docs/api/properties/figma-util-rgba/)
.

[](#the-why "Direct link to heading")
The 'Why'
-----------------------------------------------

_Bonus material, entirely optional_

For your curiosity, properties work this way to defend you against easy mistakes while working around some limitations of JavaScript.

This way of editing properties is not our #1 choice of API design, but...

1) When writing `color = node.fills[0].color`, the `color` object has to be either a copy or a merely view into the source-of-truth that we store internally. We can't expose the internal one because:

*   Of stability reasons
*   In some cases, the internal one has a more complex structure that we simplified for the API
*   Many things have to happen inside Figma when a property is changed (e.g. re-render, update instances)
*   The real `color` isn't even a JavaScript object, but somewhere in [WebAssembly memory](https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/)
    

Example:

Erroneous edit

    // This wouldn't do anything, which is even more// confusing, so we throw an exceptionnode.fills.[0].color.r = 0.5

In the above example, setting a property on a plain JS object can't notify Figma of changes.

2) We could have properties like `node.fills` return magic objects that can notify Figma of changes using getter, setters, or even [proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
. However, that would require us to re-implement JavaScript arrays, which is not advisable. It also leads to other confusing situations:

Confusing edit

    // just a plain arraylet selection = [A, B, C]// converts plain array into magic array?figma.currentPage.selection = selection// doesn't do anything, still a plain arrayselection.push(D)

In addition, due to the need to pass plain objects when message-passing between the main thread and the UI, the magic objects would have to be converted back and forth to plain objects anyway.

Debugging via `console.log` would also be quite painful. Since getters & setters have to be evaluated, everything would always appear as `(...)` in the console that you would need to click to expand. Whereas currently, `console.log(node.fills)` prints out the entire fills object correctly.

In the end, while magic objects would be convenient in some cases, they are only convenient if they look as much like normal objects as possible. But if they did, it would be hard to tell the two apart. Since it wouldn't be possible to fully hide the abstraction, the abstraction would fail in random, hard to predict ways.

##### info

Note: node objects _are_ magic objects with getters & setters, because they have to be. But there's a big difference between having a magic object and a magic object whose properties recursively return magic objects.

On this page

*   [The 'How'](#the-how)
    *   [Changing colors](#changing-colors)
        
*   [The 'Why'](#the-why)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Prerequisites | Widget API

[Skip to main content](#)

On this page

Our Widget API is designed to be written in [JSX](https://reactjs.org/docs/introducing-jsx.html)
 and [TypeScript](https://www.typescriptlang.org/)
 and leverage our existing [plugin API](https://www.figma.com/plugin-docs/)
 extensively. Both JSX and TypeScript need to be compiled down into JavaScript prior to being run in the Widget Sandbox (in the browser).

[](#jsx "Direct link to heading")
JSX
-------------------------------------

If you are used to writing HTML, you might find writing JSX familiar. JSX allows us to express the desired widget object using a declarative syntax that looks like the following snippet

code.tsx

    const { widget } = figmaconst { AutoLayout, Text } = widgetfunction JSXSample() {  return (    <AutoLayout>      <Text>Hello Widget</Text>    </AutoLayout>  )}widget.register(JSXSample)

Under-the-hood, the `<Text>Hello Widget</Text>` line above gets converted into the following JavaScript code:

code.js

    figma.widget.h(Text, null, "Hello Widget")

`figma.widget.h` comes from how we've configured `tsconfig.json` (if this was React, it would be `React.createElement`).

Additionally, with JSX we can specify attributes on each element (known as `props`). When passed props, the conversion looks something like this:

Passing in props

    // code.tsx<Text fontSize={20}>Hello Widget</Text>// code.jsfigma.widget.h(Text, { fontSize: 20 }, "Hello Widget")

[](#typescript "Direct link to heading")
TypeScript
---------------------------------------------------

TypeScript is an extension of the JavaScript that allows you to add type annotations to your code. These don't change how your code runs, they are just notes for yourself and for the compiler.

When pair with an editor like Visual Studio code, these annotations are able to provide helpful hints during development:

![](https://static.figma.com/uploads/31b8d7cdf04d6ff8d81d05da847920d4139fcaf2)

[](#further-reading "Direct link to heading")
Further Reading
-------------------------------------------------------------

Here are some more resources you may find helpful to get started:

*   [Pre-requisites for working with our our plugin API](https://www.figma.com/plugin-docs/prerequisites/)
    
*   [TypeScript with the plugin API](https://www.figma.com/plugin-docs/typescript/)
    
*   [TypeScript: Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
    
*   [Primer on JSX](https://reactjs.org/docs/introducing-jsx.html)
    
*   [The Odin Project](https://www.theodinproject.com/courses/web-development-101)
    
*   [Codecademy: Web Development](https://www.codecademy.com/learn/paths/web-development)
    
*   [Khan Academy: Intro to JS](https://www.khanacademy.org/computing/computer-programming/programming)
    

For more complex widgets, additional tools used in modern web development will be useful. You don't need to learn these tools before starting to write widgets, but they will come in handy eventually. We opted to build on top of the most popular open-source tools in the web development community rather than to roll out our own proprietary solutions. Here are some examples of things you might end up using:

*   An integrated development environment (IDE) such as [VS Code](https://code.visualstudio.com/)
    , [Eclipse IDE](https://eclipseide.org/)
    , or [IntelliJ IDEA](https://www.jetbrains.com/idea/)
    : As a developer, IDEs can be a useful way to work across multiple files or sources and often provide extensions that make life easier. JavaScript and HTML are well-supported languages in most IDEs.
*   [Asynchronous JavaScript](https://www.figma.com/plugin-docs/async-tasks/)
    : Async operations are an important part of Figma widgets, such as for loading pages or requesting and using data that may take a brief time to return.
*   Webpack, to [bundle](https://www.figma.com/plugin-docs/libraries-and-bundling/)
     large multi-file projects and import libraries: Bundling helps pack dependencies into the format required for Figma widgets.
*   React, Vue, etc. to create complex user interfaces.

On this page

*   [JSX](#jsx)
    
*   [TypeScript](#typescript)
    
*   [Further Reading](#further-reading)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021)
[No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/widget-samples)

---

# Updates for 2024-09-27 | Widget API

[Skip to main content](#)

In February 2024, Figma [implemented dynamic page loading](https://www.figma.com/plugin-docs/updates/page/2/#apis-for-dynamic-page-loading)
 for Figma design files. Now, dynamic page loading has been extended to FigJam files. If your widget handles FigJam files, you should follow the steps in [Migrating Plugins to Dynamically Load Pages](https://www.figma.com/plugin-docs/migrating-to-dynamic-loading/)
. The same steps and considerations apply to widgets.

* * *

Was this page helpful?

[Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021)
[No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/widget-samples)

---

# Node Types | Plugin API

[Skip to main content](#)

In Figma, the Node is the basis for representing layers. There are many different types of nodes, each with their own set of properties.

*   [`BooleanOperationNode`](/plugin-docs/api/BooleanOperationNode/)
    
*   [`CodeBlockNode`](/plugin-docs/api/CodeBlockNode/)
    
*   [`ComponentNode`](/plugin-docs/api/ComponentNode/)
    
*   [`ComponentSetNode`](/plugin-docs/api/ComponentSetNode/)
    
*   [`ConnectorNode`](/plugin-docs/api/ConnectorNode/)
    
*   [`DocumentNode`](/plugin-docs/api/DocumentNode/)
    
*   [`EllipseNode`](/plugin-docs/api/EllipseNode/)
    
*   [`EmbedNode`](/plugin-docs/api/EmbedNode/)
    
*   [`FrameNode`](/plugin-docs/api/FrameNode/)
    
*   [`GroupNode`](/plugin-docs/api/GroupNode/)
    
*   [`InstanceNode`](/plugin-docs/api/InstanceNode/)
    
*   [`LineNode`](/plugin-docs/api/LineNode/)
    
*   [`LinkUnfurlNode`](/plugin-docs/api/LinkUnfurlNode/)
    
*   [`MediaNode`](/plugin-docs/api/MediaNode/)
    
*   [`PageNode`](/plugin-docs/api/PageNode/)
    
*   [`PolygonNode`](/plugin-docs/api/PolygonNode/)
    
*   [`RectangleNode`](/plugin-docs/api/RectangleNode/)
    
*   [`SectionNode`](/plugin-docs/api/SectionNode/)
    
*   [`ShapeWithTextNode`](/plugin-docs/api/ShapeWithTextNode/)
    
*   [`SliceNode`](/plugin-docs/api/SliceNode/)
    
*   [`StampNode`](/plugin-docs/api/StampNode/)
    
*   [`StarNode`](/plugin-docs/api/StarNode/)
    
*   [`StickyNode`](/plugin-docs/api/StickyNode/)
    
*   [`TableNode`](/plugin-docs/api/TableNode/)
    
*   [`TableCellNode`](/plugin-docs/api/TableCellNode/)
    
*   [`TextNode`](/plugin-docs/api/TextNode/)
    
*   [`VectorNode`](/plugin-docs/api/VectorNode/)
    
*   [`WidgetNode`](/plugin-docs/api/WidgetNode/)
    

In the [Typings File](/plugin-docs/api/typings/)
, each node type is represented with an interface. The most general `BaseNode` is always one of those interfaces:

    type BaseNode =  DocumentNode |  PageNode |  SceneNode

Most often, you will work with nodes contained within a page, also referred to as "scene nodes".

    type SceneNode =  BooleanOperationNode |  CodeBlockNode |  ComponentNode |  ComponentSetNode |  ConnectorNode |  EllipseNode |  EmbedNode |  FrameNode |  GroupNode |  InstanceNode |  LineNode |  LinkUnfurlNode |  MediaNode |  PolygonNode |  RectangleNode |  SectionNode |  ShapeWithTextNode |  SliceNode |  StampNode |  StarNode |  StickyNode |  TableNode |  TableCellNode |  TextNode |  VectorNode |  WidgetNode |  MediaNode

Each node has a type property that tells you the type of the node. The list of node types is declared in NodeType. **You will typically use `node.type` when examining a node.**

    type NodeType =  "BOOLEAN_OPERATION" |  "CODE_BLOCK" |  "COMPONENT" |  "COMPONENT_SET" |  "CONNECTOR" |  "DOCUMENT" |  "ELLIPSE" |  "EMBED" |  "FRAME" |  "GROUP" |  "INSTANCE" |  "LINE" |  "LINK_UNFURL" |  "MEDIA" |  "PAGE" |  "POLYGON" |  "RECTANGLE" |  "SHAPE_WITH_TEXT" |  "SLICE" |  "STAMP" |  "STAR" |  "STICKY" |  "TABLE" |  "TABLE_CELL" |  "TEXT" |  "VECTOR" |  "WIDGET"

In the [Typings File](/plugin-docs/api/typings/)
, you will also find references to "mixin" interfaces. This is just a way to group related properties together. For example: pages, frames and groups can all have children, so they all have children-related properties such as `.children`, `.appendChild`.

Our node properties can't be modeled using traditional object-oriented class hierarchy which is why we use the concept of mixins. The `ChildrenMixin` define the properties that all nodes with children have (e.g. append, insert) and `FrameNode`s, `PageNode`s, etc all compose `ChildrenMixin`. However, a `RectangleNode` cannot have children and therefore does not inherit from `ChildrenMixin`.

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# figma.ui | Plugin API

[Skip to main content](#)

These are methods and properties available on the `figma.ui` global object. A UI is created via [`figma.showUI`](/plugin-docs/api/properties/figma-showui/)
. See the [Creating a User Interface](/plugin-docs/creating-ui/)
 tutorial on how to use this API.

### [](#show "Direct link to heading")
show(): void

Makes the plugin's UI visible. Use this to show the UI if it was created using `figma.showUI(..., { visible: false })`, or after a call to `figma.ui.hide()`.

* * *

### [](#hide "Direct link to heading")
hide(): void

Hides the current UI. The UI will still continue to run code and be able to send and receive messages. However, it is not rendered to the user.

* * *

### [](#resize "Direct link to heading")
resize(width: number, height: number): void

Changes the size of the UI, after it has been created. Note that the size can also be set in the initial options. The minimum size is 70x0.

* * *

### [](#reposition "Direct link to heading")
reposition(x: number, y: number): void

Changes the position of the UI, after it has been created. Note that the position can also be set in the initial options.

* * *

### [](#close "Direct link to heading")
close(): void

Destroys the UI and its containing `<iframe>`. Once this has been called, the code inside the iframe will be stopped and you can no longer send messages to and from it.

* * *

### [](#postmessage "Direct link to heading")
[postMessage](/plugin-docs/api/properties/figma-ui-postmessage/)
(pluginMessage: any, options?: [UIPostMessageOptions](/plugin-docs/api/properties/figma-ui-postmessage/#UIPostMessageOptions)
): void

Sends a message to the UI's `<iframe>` window.

[View more →](/plugin-docs/api/properties/figma-ui-postmessage/)

* * *

### [](#onmessage "Direct link to heading")
[onmessage](/plugin-docs/api/properties/figma-ui-onmessage/)
: [MessageEventHandler](/plugin-docs/api/properties/figma-ui-onmessage/#MessageEventHandler)
 | undefined

Register a handler for incoming messages from the UI's `<iframe>` window.

[View more →](/plugin-docs/api/properties/figma-ui-onmessage/)

* * *

### [](#on "Direct link to heading")
[on](/plugin-docs/api/properties/figma-ui-on/)
(type: 'message', callback: [MessageEventHandler](/plugin-docs/api/properties/figma-ui-onmessage/#MessageEventHandler)
): void

Register a handler for incoming messages from the UI's `<iframe>` window.

[View more →](/plugin-docs/api/properties/figma-ui-on/)

* * *

### [](#once "Direct link to heading")
once(type: 'message', callback: [MessageEventHandler](/plugin-docs/api/properties/figma-ui-onmessage/#MessageEventHandler)
): void

Register a handler for incoming messages from the UI's `<iframe>` window. Same as `figma.ui.on("message")`, but only gets called the first time.

* * *

### [](#off "Direct link to heading")
off(type: 'message', callback: [MessageEventHandler](/plugin-docs/api/properties/figma-ui-onmessage/#MessageEventHandler)
): void

Removes a handler added via `figma.ui.on`.

* * *

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Version 1.9.2 | Widget API

[Skip to main content](#)

This change introduces `widget-api-standalone.d.ts`, an experimental feature which allows for importing types explicitly.

* * *

Was this page helpful?

[Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021)
[No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/widget-samples)

---

# figma.util | Plugin API

[Skip to main content](#)

The `figma.util` global object provides a set of convenience functions for common operations.

### [](#rgb "Direct link to heading")
rgb(color: string | [RGB](/plugin-docs/api/RGB/)
 | [RGBA](/plugin-docs/api/RGB/#RGBA)
): [RGB](/plugin-docs/api/RGB/)

Creates an `RGB` color object from a variety of common color encodings.

**Note**: since `RGB` colors are primarily used for creating `SolidPaint` objects, you might want to use [`solidPaint`](/plugin-docs/api/properties/figma-util-solidpaint/)
 instead.

Accepted color formats include CSS color strings with hex, `rgb()`, `hsl()`, or `lab()` encodings, as well as `RGB` and `RGBA` objects. Alpha values in the input will be ignored. If a string encoding cannot be parsed, an error will be thrown.

Examples:

    const color1 = figma.util.rgb('#FF00FF')const color2 = figma.util.rgb('hsl(25% 50% 75%)')

You can alias this function for more concise code:

    const rgb = figma.util.rgbconst color = rgb('#FF00FF')

[View more →](/plugin-docs/api/properties/figma-util-rgb/)

* * *

### [](#rgba "Direct link to heading")
rgba(color: string | [RGB](/plugin-docs/api/RGB/)
 | [RGBA](/plugin-docs/api/RGB/#RGBA)
): [RGBA](/plugin-docs/api/RGB/#RGBA)

Creates an `RGBA` color object from a variety of common color encodings.

Accepted color formats include CSS color strings with hex, `rgb()`, `hsl()`, or `lab()` encodings, as well as `RGB` and `RGBA` objects. Alpha defaults to 1 (opaque) if not provided in the input. If a string encoding cannot be parsed, an error will be thrown.

Examples:

    const layoutGrid = {  pattern: 'GRID',  sectionSize: 1,  color: figma.util.rgba('rgb(25% 25% 25% / 0.5)')}

You can alias this function for more concise code:

    const rgba = figma.util.rgbaconst color = rgba('rgb(25% 25% 25% / 0.5)')

[View more →](/plugin-docs/api/properties/figma-util-rgba/)

* * *

### [](#solidpaint "Direct link to heading")
solidPaint(color: string | [RGB](/plugin-docs/api/RGB/)
 | [RGBA](/plugin-docs/api/RGB/#RGBA)
, overrides?: Partial<[SolidPaint](/plugin-docs/api/Paint/#SolidPaint)
\>): [SolidPaint](/plugin-docs/api/Paint/#SolidPaint)

Creates a `SolidPaint` object, assigning color and opacity from a variety of common color encodings.

Accepted color formats include CSS color strings with hex, `rgb()`, `hsl()`, or `lab()` encodings, as well as `RGB` and `RGBA` objects. The resulting alpha value will be applied to the `SolidPaint`'s `opacity` property, which defaults to 1 (opaque) if not specified. If a string encoding cannot be parsed, an error will be thrown.

Optionally, you can provide a set of overrides for any of the non-color properties of the `SolidPaint` object. This is useful for modifying the color of an existing `SolidPaint` while preserving its other properties.

Examples:

    // Set the current page background to redfigma.currentPage.backgrounds = [figma.util.solidPaint("#FF0000")]// Modify an existing SolidPaint with new color and opacityif (node.fills[0].type === 'SOLID') {  const updated = figma.util.solidPaint('#FF00FF88', node.fills[0])}

You can alias this function for more concise code:

    const solidPaint = figma.util.solidPaint// Set the current page background to redfigma.currentPage.backgrounds = [solidPaint("#FF0000")]// Modify an existing SolidPaint with new color and opacityif (node.fills[0].type === 'SOLID') {  const updated = solidPaint('#FF00FF88', node.fills[0])}

[View more →](/plugin-docs/api/properties/figma-util-solidpaint/)

* * *

### [](#normalizemarkdown "Direct link to heading")
normalizeMarkdown(markdown: string): string

Normalizes the markdown string to verify what markdown will render with Figma's rich-text editors.

Examples:

    const md = "# Hello, world!\n\nThis is a **bold** text."const normalizedMd = figma.util.normalizeMarkdown(md);// Set an component description with descriptionMarkdowncomponent.descriptionMarkdown = normalizedMd;

[View more →](/plugin-docs/api/properties/figma-util-normalizemarkdown/)

* * *

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# Setup Guide | Widget API

[Skip to main content](#)

On this page

This short guide will walk you through the steps needed to setup your development environment for writing and creating a simple widget for FigJam. By the end of this guide, you will have a simple counter widget that records and displays the number of times people have clicked on it.

The setup for widget development is very similar to the set up for plugin development. **If you’re already familiar with Figma plugin development, feel free to skip to [Create a new widget](/widget-docs/setup-guide/#create-a-new-widget)
, [Sample widgets](/widget-docs/setup-guide/#sample-widgets)
, or [Building widgets from scratch](/widget-docs/setup-guide/#building-widgets-from-scratch)
.**

[](#installation "Direct link to heading")
Installation
-------------------------------------------------------

*   **Visual Studio Code**: Visual Studio Code can be downloaded here: [](https://code.visualstudio.com/)
    [https://code.visualstudio.com/](https://code.visualstudio.com/)
    .
    
*   **Node.js and NPM**: You can download Node.js here, which will include NPM: [](https://nodejs.org/en/download/)
    [https://nodejs.org/en/download/](https://nodejs.org/en/download/)
    .
    
*   **Get the Figma desktop app**: At this time, widget development and testing needs to be done using the Figma desktop app. This is because Figma needs to read your code saved as a local file. The Figma desktop app can be downloaded here: [](https://www.figma.com/downloads/)
    [https://www.figma.com/downloads/](https://www.figma.com/downloads/)
    .
    
    If you already have the desktop app, please make sure to update to the latest version, as several features have been added specifically in order to provide a better widget development experience.
    

[](#create-a-new-widget "Direct link to heading")
Create a new widget
---------------------------------------------------------------------

1.  Log in to your account and open the Figma desktop app
    
2.  You can open any existing Figma / FigJam document or create a new one.
    
3.  Go to Menu > Widgets > Development > New widget...
    
    This will bring up the "Create widget" modal to create a starter widget. Give it a name, then choose "Simple widget" in the next screen. Save the widget anywhere on disk.
    

[](#modify-your-widget "Direct link to heading")
Modify your widget
-------------------------------------------------------------------

1.  **Open the folder you just created using Visual Studio Code.** Widgets are defined using multiple files and you'll want to be able to edit them all of them, so one trick is to open the folder itself rather than any of the files inside it.
    
2.  **Install the dependencies**: run `npm install`.
    
    We are installing typescript and both widget and plugin typings since a lot of the code you'll write inside of widgets will use the Figma plugin API as well as the widget API.
    
3.  **Install the linter**
    
    Linting, the automated validation of source code for issues, can be very helpful for catching errors early in the development of your widget. Figma provides a set of [typescript-eslint rules](https://github.com/figma/eslint-plugin-figma-plugins?tab=readme-ov-file#eslint-plugin-figma-plugins)
     to help support widget development. These rules can identify, and in many cases automatically fix, issues in your widget code.
    
    To install and use the linter, follow the instructions in the [**Usage** section](https://github.com/figma/eslint-plugin-figma-plugins?tab=readme-ov-file#usage)
     of the README included with the linter rules. [Find the `eslint-plugin-figma-plugins` repository on GitHub →](https://github.com/figma/eslint-plugin-figma-plugins?tab=readme-ov-file)
    
4.  **Set up TypeScript compilation**
    
    Compile TypeScript to JavaScript: Run the "Terminal > Run Build Task..." menu item, then select "npm: watch". This tells Visual Studio Code to compile your `widget-src/code.tsx` code into a `dist/code.js` file. It will watch for changes to `*.tsx` files and automatically re-generate `dist/code.js` each time. You will have to do this again every time you reopen Visual Studio Code.
    
5.  **Insert your widget into the file**
    
    Inside your FigJam file, you should be able to Go to `Menu > Widgets > Development > {your_widget_name}` to insert your newly created widget. The sample widget should look like a simple counter.
    
6.  **Make some test changes**
    
    Make some simple changes to `widget-src/code.tsx` to get familiar with Visual Studio Code (**not** code.**js** — that's generated and gets overwritten!).
    

That’s it! You are now ready to create your very own widget!

[](#sample-widgets "Direct link to heading")
Sample widgets
-----------------------------------------------------------

If you understand the fundamentals of building widgets, or you learn best by example, you can explore these [widget samples on GitHub](https://github.com/figma/widget-samples)
.

[](#figmacreate-widget "Direct link to heading")
`@figma/create-widget`
-----------------------------------------------------------------------

If you're already familiar with widgets, we also provide a single command to help you to get started:

    npm init @figma/widget

[](#building-widgets-from-scratch "Direct link to heading")
Building widgets from scratch
-----------------------------------------------------------------------------------------

If you’re building your widgets from scratch, here’s a sample tsconfig.json to get you started:

tsconfig.json

    {   "compilerOptions": {      "jsx": "react",      "jsxFactory": "figma.widget.h",      "jsxFragmentFactory": "figma.widget.Fragment",      "target": "es6",      "strict": true,      "typeRoots": [         "./node_modules/@types",         "./node_modules/@figma"      ]   }}

You’ll also want to install widget and plugins typings from npm

    npm install --save-dev @figma/widget-typings @figma/plugin-typings

On this page

*   [Installation](#installation)
    
*   [Create a new widget](#create-a-new-widget)
    
*   [Modify your widget](#modify-your-widget)
    
*   [Sample widgets](#sample-widgets)
    
*   [`@figma/create-widget`](#figmacreate-widget)
    
*   [Building widgets from scratch](#building-widgets-from-scratch)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=Pv3MvbQgMnobDHw8sQwmqg&d=10497086658021)
[No](https://form.asana.com/?k=9iFTV52Hl7aeuJugKLYIzA&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/widget-samples)

---

# Resource Links | Plugin API

[Skip to main content](#)

The main suggested solution for using external resources is using the embedding method described in the webpack section. Alternatively to this, you can link to external resources. However this comes with several constraints:

You have to use absolute URLs starting with `http://` or `https://` and host the resources on your own server. It is currently not possible to ship other resources with the plugin and link to them. To ship additional resources they have to be embedded.

It is only possible to link to external resources from within the `<iframe>` created using `figma.showUI()`. It is not possible to directly load javascript libraries or other resources directly from the main thread JavaScript code.

Using external resources likely means that the plugin will not work if the user is offline when they run the plugin. The Figma editor currently is able maintain limited functionality and run plugins even if the user loses connectivity after having opened the editor. However if the plugin tries to load external resources, accessing those will likely require connectivity.

In order to link to external resources from within the `<iframe>`, put normal HTML markup in your UI, such as `<img src="...">`, `<link href="..." rel="stylesheet">` or `<script src="..."></script>`. However you have to use absolute URLs starting with `http://` or `https://` and host the resources on a server reachable by the plugin user.

Additionally, since `eval()` works in the main thread JavaScript, it is possible to use `fetch()` or `XMLHttpRequest` to load a script from the network inside the `figma.showUI()` `<iframe>`, send the script to the main thread using `postMessage`, and then `eval()` the string.

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---

# CSS Variables and Theming | Plugin API

[Skip to main content](#)

On this page

In order to support light and dark themes in your plugin, you will need to update your call to `figma.showUI()` and replace applicable, hard-coded color values in your plugin CSS with the CSS variables shown here.

[](#api-details "Direct link to heading")
API Details
-----------------------------------------------------

For your plugin UI to get access to the CSS variables, you will need to call `figma.showUI()` with the new themeColors option:

code.ts

    figma.showUI(__html__, { themeColors: true, /* other options */ })

This will lead to the following changes to the plugin `<iframe>`:

*   A `figma-light` or `figma-dark` class will be added to the `<html>` element in the iframe content
*   A `<style id="figma-style">` element will be added to the iframe content containing a set of CSS variables (`--figma-color-bg`, `--figma-color-text`, etc…)

You can then use these variables in your CSS using the `var()` function. For example:

Using CSS variables

    body {  background-color: var(--figma-color-bg);  color: var(--figma-color-text);}

You can also use the `figma-light` or `figma-dark` classes on the `<html>` element to supply your own theme-specific colors:

Customize light and dark classes

    .figma-light body {  background-color: white;  color: blue;}.figma-dark body {  background-color: black;  color: red;}

If the user changes their theme preference in Figma Design, the CSS variables in the plugin iframe will dynamically update with new color values.

Please note a couple of caveats with using this new theme API:

*   FigJam currently does not support dark mode. **If your plugin supports FigJam, you will have access to CSS variables corresponding to a FigJam-specific light mode**. These variables will be named exactly the same as the ones in Figma, but have different colors. For example, FigJam has a purple accent color whereas Figma has a blue accent color.
    
*   If your plugin UI navigates to another URL, do not use the new `themeColors` option in `figma.showUI()`.
    

##### caution

Theme support for externally-hosted plugin UIs is not available at this time.

[](#semantic-color-tokens "Direct link to heading")
Semantic Color Tokens
-------------------------------------------------------------------------

The tokens we are exposing via the Plugin API use the same underlying schema that powers Dark Mode at Figma. At first glance, this may seem like a ton of tokens (and it is), but we’re really excited to be sharing our system in its purest form with our Plugin developers!

If you learn best by doing and want to explore our semantic tokens in an interactive way, install the [Theme Colors Inspector](https://www.figma.com/community/plugin/1104533141442501061)
 plugin.

### [](#tokens-overview "Direct link to heading")
Tokens Overview

We’ve defined a naming schema that creates predictable behavior across our tokens. For example, additional hierarchy can be created by adding `-secondary` or `-tertiary` to any text, icon, or background color, and interactive behavior can be specified by adding `-hover`, `-selected`, `-disabled`.

Our tokens follow a format of

Semantic color token format

    --figma-color-{type}-{color role}-{prominence}-{interaction}

#### [](#type-required "Direct link to heading")
Type `(required)`

This is the only required parameter, and specifies _what is the type of thing we want to color_? Our four types are **`bg`**, **`text`**, **`icon`**, and **`border`**.

_Example variables_  
`--figma-color-`**`bg`**  
`--figma-color-`**`text`**

#### [](#color-role-optional "Direct link to heading")
Color Role `(optional)`

Colors in our UI have specific meaning, so we’ve organized hues around how they are used, rather than the hue itself. For example, our default accent color is `-brand`, which may shift between blue and purple dependent on context.

_Example variables_  
`--figma-color-bg-`**`brand`**  
`--figma-color-icon-`**`danger`**

#### [](#prominence-optional "Direct link to heading")
Prominence `(optional)`

To create hierarchy and adjust visual emphasis, bg, text, and icon support `-secondary` and `-tertiary`. Similarly, borders come in two flavors — “default” for a border that acts as a divider, and `-strong` for a border used as the outline around a more prominent element (like a text input).

_Example variables_  
`--figma-color-text-`**`secondary`**  
`--figma-color-border-`**`strong`**

#### [](#interaction-optional "Direct link to heading")
Interaction `(optional)`

Some tokens support `-hover` and `-pressed` modifiers for interaction states.

_Example variables_  
`--figma-color-bg-brand-`**`pressed`**  
`--figma-color-icon-danger-`**`hover`**

### [](#color-roles "Direct link to heading")
Color Roles

To create consistent meaning around our colors, we’ve organized hues by color role. These modifiers can be added to any type of color token — so for example, “red text” would be `--figma-color-text-danger`, and a “red background” would be `--figma-color-bg-danger`.

**`-brand`** Our default accent color, which may shift between blue in Figma design and purple in FigJam.

**`-selected`** Light blue or purple fills for the backgrounds of a selected element, or a border around a focused element.

**`-disabled`** Light grey fills for inactive text, buttons, and inputs that a user cannot interact with.

**`-component`** Purple text, icons, and backgrounds for component layer names, as well as features connected to components (like variants)

**`-danger`** Red indicators when there is an error, or something a user should urgently attend to.

**`-warning`** Yellow indicators used to warn a user about a potential problem, such as a missing font.

**`-success`** Green indicators used for confirmation, approval, or when a task has completed.

**`-inverse`** Dark grey / white fills used for elements that need to be “the opposite of the background color”.

[](#frequently-used-tokens "Direct link to heading")
Frequently Used Tokens
---------------------------------------------------------------------------

While we have many tokens, there are a handful that are very frequently used, and worth knowing about.

#### [](#text-colors "Direct link to heading")
Text Colors

**`--figma-color-text`** Our default text color for most titles, tabs, and body text.

**`--figma-color-text-secondary`** Our secondary text color for inactive tabs, labels, timestamps, and other text that needs to be “lighter” in order to create hierarchy.

**`--figma-color-text-tertiary`** Our tertiary text color primarily used for placeholder text (for example in a search input), or for hierarchy below secondary text.

**`--figma-color-text-disabled`** Truly disabled text that a user cannot interact with.

**`--figma-color-text-onbrand`** White text used against a Blue / Purple background (for example, the text in our “Share” button).

**`--figma-color-text-brand`** Blue or purple text used for things like links.

**`--figma-color-text-danger`** Red text used to alert users about an error.

**`--figma-color-text-warning`** Yellow text used to warn users about a potential problem.

**`--figma-color-text-success`** Green text used for confirmation, and approval.

#### [](#background-colors "Direct link to heading")
Background Colors

**`--figma-color-bg`** Our default white / light grey background fill for most views (like our file browser, editor sidebars, panels, windows, and modals).

**`--figma-color-bg-secondary`** A light grey fill used to create sections on top of a background, as well as for some inputs.

#### [](#common-hues "Direct link to heading")
Common Hues

**`--figma-color-bg-brand`** Blue or purple fill colors for backgrounds like a blue primary button.

**`--figma-color-bg-danger`** Red fill color behind destructive buttons, and error banners.

**`--figma-color-bg-warning`** Yellow fill color for warning banners

**`--figma-color-bg-success`** Green fill color for confirmation banners.

#### [](#borders "Direct link to heading")
Borders

**`--figma-color-border`** Our default border color for dividers between sections.

**`--figma-color-border-strong`** The darker border color we use for secondary outline buttons.

**`--figma-color-border-selected`** The blue or purple border color we use for focused / selected inputs.

**`--figma-color-border-danger-strong`** The red border color we use around inputs that have an error.

[](#default-token-values "Direct link to heading")
Default Token Values
-----------------------------------------------------------------------

if you are interested in accessing the default values for these tokens, you can get at them by accessing the `<style id="figma-style"/>` tag via JavaScript inside your UI code.

Access default values

    const styleTagDefinitions = document.getElementById("figma-style").innerHTML;

Using this, you can run this directly in your console to log the defaults for the current theme.

Logging defaults of current theme

    figma.showUI(  "<script>console.log(document.getElementById('figma-style').innerHTML)</script>",  { themeColors: true });

[](#list-of-all-available-color-tokens "Direct link to heading")
List of All Available Color Tokens
---------------------------------------------------------------------------------------------------

Figma Design: Light

Figma Design: Dark

FigJam: Light (Beta)

*   \--figma-color-bg#ffffff
*   \--figma-color-bg-brand#0d99ff
*   \--figma-color-bg-brand-hover#007be5
*   \--figma-color-bg-brand-pressed#007be5
*   \--figma-color-bg-brand-secondary#0768cf
*   \--figma-color-bg-brand-tertiary#e5f4ff
*   \--figma-color-bg-component#9747ff
*   \--figma-color-bg-component-hover#8638e5
*   \--figma-color-bg-component-pressed#8638e5
*   \--figma-color-bg-component-secondary#7c2bda
*   \--figma-color-bg-component-tertiary#f1e5ff
*   \--figma-color-bg-danger#f24822
*   \--figma-color-bg-danger-hover#dc3412
*   \--figma-color-bg-danger-pressed#dc3412
*   \--figma-color-bg-danger-secondary#bd2915
*   \--figma-color-bg-danger-tertiary#ffe2e0
*   \--figma-color-bg-disabled#d9d9d9
*   \--figma-color-bg-disabled-secondary#b3b3b3
*   \--figma-color-bg-hover#f5f5f5
*   \--figma-color-bg-inverse#2c2c2c
*   \--figma-color-bg-onselected#bde3ff
*   \--figma-color-bg-onselected-hover#bde3ff
*   \--figma-color-bg-onselected-pressed#bde3ff
*   \--figma-color-bg-pressed#f5f5f5
*   \--figma-color-bg-secondary#f5f5f5
*   \--figma-color-bg-selected#e5f4ff
*   \--figma-color-bg-selected-hover#bde3ff
*   \--figma-color-bg-selected-pressed#bde3ff
*   \--figma-color-bg-selected-secondary#f2f9ff
*   \--figma-color-bg-selected-strong#0d99ff
*   \--figma-color-bg-selected-tertiary#f2f9ff
*   \--figma-color-bg-success#14ae5c
*   \--figma-color-bg-success-hover#009951
*   \--figma-color-bg-success-pressed#009951
*   \--figma-color-bg-success-secondary#008043
*   \--figma-color-bg-success-tertiary#cff7d3
*   \--figma-color-bg-tertiary#e6e6e6
*   \--figma-color-bg-warning#ffcd29
*   \--figma-color-bg-warning-hover#ffc21a
*   \--figma-color-bg-warning-pressed#ffc21a
*   \--figma-color-bg-warning-secondary#fab815
*   \--figma-color-bg-warning-tertiary#fff1c2
*   \--figma-color-border#e6e6e6
*   \--figma-color-border-brand#bde3ff
*   \--figma-color-border-brand-strong#007be5
*   \--figma-color-border-component#e4ccff
*   \--figma-color-border-component-hover#9747ff
*   \--figma-color-border-component-strong#8638e5
*   \--figma-color-border-danger#ffc7c2
*   \--figma-color-border-danger-strong#dc3412
*   \--figma-color-border-disabled#e6e6e6
*   \--figma-color-border-disabled-strong#0000004d
*   \--figma-color-border-onbrand#007be5
*   \--figma-color-border-onbrand-strong#ffffff
*   \--figma-color-border-oncomponent#8638e5
*   \--figma-color-border-oncomponent-strong#ffffff
*   \--figma-color-border-ondanger#dc3412
*   \--figma-color-border-ondanger-strong#ffffff
*   \--figma-color-border-onselected#bde3ff
*   \--figma-color-border-onselected-strong#000000e5
*   \--figma-color-border-onsuccess#009951
*   \--figma-color-border-onsuccess-strong#ffffff
*   \--figma-color-border-onwarning#fab815
*   \--figma-color-border-onwarning-strong#000000e5
*   \--figma-color-border-selected#0d99ff
*   \--figma-color-border-selected-strong#007be5
*   \--figma-color-border-strong#2c2c2c
*   \--figma-color-border-success#aff4c6
*   \--figma-color-border-success-strong#009951
*   \--figma-color-border-warning#ffe8a3
*   \--figma-color-border-warning-strong#b86200
*   \--figma-color-icon#000000e5
*   \--figma-color-icon-brand#007be5
*   \--figma-color-icon-brand-pressed#0768cf
*   \--figma-color-icon-brand-secondary#80caff
*   \--figma-color-icon-brand-tertiary#bde3ff
*   \--figma-color-icon-component#8638e5
*   \--figma-color-icon-component-pressed#7c2bda
*   \--figma-color-icon-component-secondary#c5b2dc
*   \--figma-color-icon-component-tertiary#c5b2dc
*   \--figma-color-icon-danger#f24822
*   \--figma-color-icon-danger-hover#bd2915
*   \--figma-color-icon-danger-pressed#bd2915
*   \--figma-color-icon-danger-secondary#f24822
*   \--figma-color-icon-danger-secondary-hover#f24822
*   \--figma-color-icon-danger-tertiary#f24822
*   \--figma-color-icon-disabled#0000004d
*   \--figma-color-icon-hover#000000e5
*   \--figma-color-icon-onbrand#ffffff
*   \--figma-color-icon-onbrand-secondary#ffffffcc
*   \--figma-color-icon-onbrand-tertiary#ffffff66
*   \--figma-color-icon-oncomponent#ffffff
*   \--figma-color-icon-oncomponent-secondary#ffffffcc
*   \--figma-color-icon-oncomponent-tertiary#ffffff66
*   \--figma-color-icon-ondanger#ffffff
*   \--figma-color-icon-ondanger-secondary#ffffffcc
*   \--figma-color-icon-ondanger-tertiary#ffffff66
*   \--figma-color-icon-ondisabled#ffffff
*   \--figma-color-icon-oninverse#ffffffe5
*   \--figma-color-icon-onselected#000000e5
*   \--figma-color-icon-onselected-secondary#00000080
*   \--figma-color-icon-onselected-strong#ffffff
*   \--figma-color-icon-onselected-tertiary#0000004d
*   \--figma-color-icon-onsuccess#ffffff
*   \--figma-color-icon-onsuccess-secondary#ffffffcc
*   \--figma-color-icon-onsuccess-tertiary#ffffff66
*   \--figma-color-icon-onwarning#000000e5
*   \--figma-color-icon-onwarning-secondary#ffffffcc
*   \--figma-color-icon-onwarning-tertiary#ffffff66
*   \--figma-color-icon-pressed#007be5
*   \--figma-color-icon-secondary#00000080
*   \--figma-color-icon-secondary-hover#000000e5
*   \--figma-color-icon-selected#007be5
*   \--figma-color-icon-selected-secondary#007be5
*   \--figma-color-icon-selected-tertiary#007be5
*   \--figma-color-icon-success#14ae5c
*   \--figma-color-icon-success-pressed#008043
*   \--figma-color-icon-success-secondary#14ae5c
*   \--figma-color-icon-success-tertiary#14ae5c
*   \--figma-color-icon-tertiary#0000004d
*   \--figma-color-icon-tertiary-hover#000000e5
*   \--figma-color-icon-warning#ffcd29
*   \--figma-color-icon-warning-pressed#b86200
*   \--figma-color-icon-warning-secondary#ffcd29
*   \--figma-color-icon-warning-tertiary#ffcd29
*   \--figma-color-text#000000e5
*   \--figma-color-text-brand#007be5
*   \--figma-color-text-brand-secondary#007be5
*   \--figma-color-text-brand-tertiary#007be5
*   \--figma-color-text-component#8638e5
*   \--figma-color-text-component-pressed#7c2bda
*   \--figma-color-text-component-secondary#c5b2dc
*   \--figma-color-text-component-tertiary#c5b2dc
*   \--figma-color-text-danger#dc3412
*   \--figma-color-text-danger-secondary#dc3412
*   \--figma-color-text-danger-tertiary#dc3412
*   \--figma-color-text-disabled#0000004d
*   \--figma-color-text-hover#000000e5
*   \--figma-color-text-onbrand#ffffff
*   \--figma-color-text-onbrand-secondary#ffffffcc
*   \--figma-color-text-onbrand-tertiary#ffffff66
*   \--figma-color-text-oncomponent#ffffff
*   \--figma-color-text-oncomponent-secondary#ffffffcc
*   \--figma-color-text-oncomponent-tertiary#ffffff66
*   \--figma-color-text-ondanger#ffffff
*   \--figma-color-text-ondanger-secondary#ffffffcc
*   \--figma-color-text-ondanger-tertiary#ffffff66
*   \--figma-color-text-ondisabled#ffffff
*   \--figma-color-text-oninverse#ffffffe5
*   \--figma-color-text-onselected#000000e5
*   \--figma-color-text-onselected-secondary#00000080
*   \--figma-color-text-onselected-strong#ffffff
*   \--figma-color-text-onselected-tertiary#0000004d
*   \--figma-color-text-onsuccess#ffffff
*   \--figma-color-text-onsuccess-secondary#ffffffcc
*   \--figma-color-text-onsuccess-tertiary#ffffff66
*   \--figma-color-text-onwarning#000000e5
*   \--figma-color-text-onwarning-secondary#00000080
*   \--figma-color-text-onwarning-tertiary#0000004d
*   \--figma-color-text-secondary#00000080
*   \--figma-color-text-secondary-hover#000000e5
*   \--figma-color-text-selected#007be5
*   \--figma-color-text-selected-secondary#007be5
*   \--figma-color-text-selected-tertiary#007be5
*   \--figma-color-text-success#009951
*   \--figma-color-text-success-secondary#009951
*   \--figma-color-text-success-tertiary#009951
*   \--figma-color-text-tertiary#0000004d
*   \--figma-color-text-tertiary-hover#000000e5
*   \--figma-color-text-warning#b86200
*   \--figma-color-text-warning-secondary#b86200
*   \--figma-color-text-warning-tertiary#b86200

On this page

*   [API Details](#api-details)
    
*   [Semantic Color Tokens](#semantic-color-tokens)
    *   [Tokens Overview](#tokens-overview)
        
    *   [Color Roles](#color-roles)
        
*   [Frequently Used Tokens](#frequently-used-tokens)
    
*   [Default Token Values](#default-token-values)
    
*   [List of All Available Color Tokens](#list-of-all-available-color-tokens)
    

Was this page helpful?

[Yes](https://form.asana.com/?k=OLzqjEZZaQ2s3CXgpRTW-w&d=10497086658021)
[No](https://form.asana.com/?k=rD460ceYZljYYGCqzASjuw&d=10497086658021)

* * *

*   [Community Forum](https://forum.figma.com/)
    
*   [Discord Server](https://discord.gg/xzQhe2Vcvx)
    
*   [GitHub Samples](https://github.com/figma/plugin-samples)

---