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.

Important

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. The following guides will help setting up a development environment: Get Started with Uno Platform

Create a project

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

dotnet new
Visual Studio

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

dotnet new unoapp -preset blank -toolkit true -theme material -o MyFirstAppFromFigma

Open Visual Studio
Select Create a new project
Search for Uno Platform App in the search box and select it
Click Next
Fill the project name (name it MyFirstAppFromFigma to fit the rest of this tutorial)
Click Create
The Uno Platform Template Wizard will open
Select the Blank template and click Customize
Go in the Theme section and select Material
Go in the Features section and select Toolkit
Click Create

Creating a new project in Visual Studio

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

Open the generated MyFirstAppFromFigma.sln solution in your favorite IDE
In the top toolbar, select the platform you like as your startup project (following screenshots will use MyFirstAppFromFigma.Windows)
Press F5 to run the app and ensure it builds correctly
Locate the page MainPage.xaml in the MyFirstAppFromFigma library project
Compile the project to ensure it builds correctly
Switch to Figma (next section)

Step 2 - Make Figma generates the right XAML

Go back to Figma, in the document you created in the Design to Code section.
Open the plugin (more details in the Setup section)
In Figma, select the 01. Login frame
In the plugin, navigate to the Properties tab
In the Page Name field, write MainPage
Navigate to the Application subtab
In the Application Name field, write MyFirstAppFromFigma
Go back to the Export tab
Click on the Refresh button
Now click on the Copy button to copy the generated XAML to the clipboard

Step 3 - Paste the generated XAML into app project

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

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.