Design to code

This section will guide you through the process of generating code from a Figma document using the Uno Platform Figma Plugin.

Important

Is it required to have completed the Setup section before starting this one.

Start with a clean copy of the Uno Material Toolkit document

Let's start by making a clean copy of the Uno Material Toolkit document. If you just did the Setup section, you should already have a copy of the Uno Material Toolkit document in your Figma account. If not, follow these steps to create a new copy:

  1. Navigate to the plugin page Uno Platform Figma Plugin

  2. Click on the Open in... button

    Creating a new document from the Plugin

  3. Pick + Playground file option to create a new copy of the Uno Material Toolkit document

  4. Figma should launch be default in developer mode. If it doesn't, press shift+d to toggle between developer mode and design mode

  5. Navigate to Example App Figma page

    Navigate to Example App page

  6. Locate the 01. Login frame, right-click on it and launch the Uno Platform (Figma to C# or XAML) plugin

    Launching the plugin by right-clicking on a frame

    ... the plugin should launch in the side panel.

  7. Click the Refresh button to see the selected page in the plugin previewer

    Previewing the Login page in the plugin

  8. Now switch to the Export tab, where the generated XAML is displayed

    Switching to the Export tab

  9. Click the Copy button to copy the generated XAML to the clipboard.

    Alternatively, you can also select the XAML and copy it manually.

Next step

This tutorial has shown you how to generate code from a Figma document using the Uno Platform Figma Plugin. The next step is to use that generated code in an app by following the Create an App guide.

The code generated in this section will be used in this next section.

See also

  • How it works - This section explains how the plugin extracts the information from the Figma file and how this information is used to generate the code.
  • Setup - This section explains how to setup your environment to use the plugin.