Importing to Figma

How to import various inputs into Figma file

Written By Lukas Pavelka

Last updated 18 days ago

Import YAML file(s)

Power Apps for Figma plugin can import particular YAML file located in your local storage.

The plugin is able to import one or multiple YAML files from your local storage into Figma file.

If you use dynamic values in your screens that want to upload into Figma, then plugin is able to replace these dynamic values located in imported YAML file.

This is only possible if you upload your YAML file where the control with property value is located. For example: Dashboard screen contains dynamic value ‘FontColor = Rectangle.Fill’, then you need to upload your YAML file where Rectangle control is located.

But that’s not all! The plugin is more sophisticated. If your value includes “Color" or “App.Theme.Colors”, the plugin will replace it by real colour value.

The plugin supports theme colours as Power Apps offers:

  • Primary

  • Lighter10, Lighter20, Lighter30, Lighter40, Lighter50, Lighter60, Lighter70, Lighter80

  • Darker10, Darker20, Darker30, Darker40, Darker50, Darker60, Darker70

How to get YAML file from Power Apps?

Go to Power Apps builder, open your Canvas application, and click on “Download a copy.“

Platform Tools plugin. Official link is here.

Then in a terminal go to your folder with downloaded MSAPP file and put this command:

pac canvas unpack --msapp <file_name>.msapp --sources <target_path>/<folder_name>

Finally, you will get unzipped MSAPP file with source YAML files.

Import Snippet Code

This feature is only available in PRO version!!!

Under the last icon of the Editor tab you can find two icons on the right side. The second one is “Import Snippet Code”. Click on it and paste your snippet code from Power Apps. Then you will see your control imported into Figma.

The ‘clear’ button will clean the snippet code editor control in the plugin. Because even if you click on different tab in the plugin, the snippet code editor still contains your snippet code.

If your snippet code contains Power Apps functions, like OnSelect, or Items, then the plugin will store these functions in your Figma file. That means if you re-design your imported control, you will be able to paste your YAML code from Figma to Power Apps with these functions.

Import from Control List

The last feature of importing to Figma file is importing controls from Control List. This feature is located under the first icon of the clicked Import icon in the Editor tab.

After you click on the “Import controls” a pop-up dialog will appear, where you can choose one or multiple controls from the list of available controls.

The plugin supports 3 types of controls:

  • classic

  • modern

  • compose

When you select one or multiple controls, and press “Submit“ button, the plugin will import these controls into your Figma file.