Create an app

This section will guide you through the process of creating a new app using the Uno Platform Figma Plugin and the Example App present by default in the Uno Platform Material Toolkit file, using the Uno Platform Figma Plugin.


This page is assuming that the Design to Code section has been completed.

Development environment (Visual Studio or your favorite IDE)

Creating a new project using the Uno Platform requires a developer environment to be setup. For more information about setting up your development environment, see Get Started with Uno Platform.

Create a project

This simple tutorial will create a new project using the unoapp template. It uses the blank template augmented with Uno Material, Uno Toolkit, MVUX, and Navigation using the XAML UI language.

Run the following command in a terminal to create a new project:

dotnet new unoapp -preset blank -theme "material" -presentation "mvux" -di -nav "regions" -toolkit true -o MyFirstAppFromFigma

Following steps will use Visual Studio, but any other IDE should work as well with minimal changes.

Step 1 - Open the solution, compile and run it

  1. Open the generated MyFirstAppFromFigma.sln solution in your favorite IDE.

  2. In the Debug toolbar, select your preferred platform as the startup project. For more detailed instructions specific to each platform, refer to the Debug the App documentation.

    selecting a startup platform

  3. Press F5 to run the app and ensure it builds correctly.

  4. Locate the page MainPage.xaml inside the Presentation folder in the MyFirstAppFromFigma library project.

  5. Compile the project to ensure it builds correctly.

  6. Switch to Figma (next section).

Step 2 - Make Figma generates the right XAML

  1. Go back to Figma, in the document you created in the Design to Code section.
  2. Open the plugin (more details in the Setup section)
  3. In Figma, select the 01. Login frame
  4. In the plugin, navigate to the Properties tab
  5. In the Page Name field, write MainPage
  6. Navigate to the Application subtab
  7. In the Application Namespace field, write MyFirstAppFromFigma
  8. In the Views Sub Namespace field, write Presentation
  9. Go back to the Export tab
  10. Click on the Refresh button
  11. Now click on the Copy button to copy the generated XAML to the clipboard

Step 3 - Paste the generated XAML into app project

  1. Go back to your IDE (Visual Studio in this example)
  2. Replace the content of the MainPage.xaml file with the generated XAML, from the clipboard
  3. Press F5 to run the app

Additional notes

Here is another example in this video, demonstrating the use of Figma Plugin Generated C# Markup in an Uno Platform project:

For additional content, explore our [Uno Platform for Figma Plugin - Get Started Series] (

Next steps

This tutorial has shown you how to create a new app using the Uno Platform Figma Plugin and the Example App present in the Uno Material Toolkit Figma document.

Use this documentation to understand how to use the plugin to generate code from your own Figma document.