Setup Uno Platform Figma Plugin

This section will guide you through the process of setting you up to use Figma and the Uno Platform Figma Plugin to generate code that can be used to create an app.

Those steps will use the web version of Figma. The plugin is also available in the desktop version of Figma and the steps are pretty similar.

Figma Plugin

Let's start by making sure you have a working Figma environment.

  1. Navigate to Figma web site

  2. Sign-in or create a new account if you don't have one already

  3. Navigate to the Uno Figma Plugin page

  4. Click on the Open in... button and pick + Playground file option to create a new copy of the Uno Material Toolkit document

    Creating a new document from the Plugin

  5. Figma should launch be default in developer mode (see below if it doesn't)

  6. Click on the Run button to launch the plugin

    Launching the plugin

  7. Your Figma is now ready to start generating code

Note

There is many ways to launch the plugin. If the provided method doesn't work for you, you can also:

  • Press shift+d to toggle between developer mode and design mode

  • In Design mode: use the plugin menu in the toolbar and search for Uno Platform

    Launch Plugin from toolbar in Design mode

  • In Developer mode: use the Plugins tab in the right panel and search for Uno Platform

    Launch Plugin from toolbar in Developer mode

Next step

Start generating code from a Figma document by following the Design to Code guide.