Skip to content
Share
Explore
Documentation is outdated
Before exporting, let me explain of how the exporting works. During importing from JSON or YAML source files you can see in Figma, that every object has special prefix, like: 'txt, lbl, btn etc.'
Thanks to these prefixes I can pair Power Apps like, fields, labels, forms, etc…
List of Supported Prefixes
Here is the list of the supported prefixes in Figma:
In PRO version you can use more prefixes:
Thanks to these prefixes, DesignKit will generate YAML files compatible with Power Apps. If you use PRO version, you can generate Calendar component that will create combinations of Galleries in your Power Apps application, like this:
Short version of Calendar component looks like this:
You only need to add "calshort" prefix for group component in Figma. Under the group prefixes are not needed. A Calendar component type is not included in Design Systems yet!!!
The next composed component is Popup. Layout of this component is not static. It is up to you how the content of your popup will look like. Only what is mandatory is to use prefix "popup" in your parent frame, like this:
A Popup component type is not included in Design Systems yet!!!
More about components and Design Systems for PRO version you can read .
here
If you use 'img' prefix with URL, then you should fill hidden Text Node called 'img_link 'in Figma. Please see the example below:
This example says that I use image with picture from web. Then, in "img_link" I put URL where the image is located. If I do this, DesignKit will recognise the link automatically and include it in exported YAML file.
How to use Table prefix
Using table prefix is very simple. Create a table in Figma, wrap the whole tabel in Frame, and add "table" prefix in the frame name. DesignKit 2.5 will generate empty table code in YAML. After import to Power Apps you will select your input data table.
How to use Container prefixes
This functionality is only available in PRO version
In Figma design screen you can use frames with auto layout or without. If you use a frame without auto layout, you should add cont or container prefix.
The same step you will use for horizontal or vertical layouts, like this:
Export Circle as HTMLViewer object in Power Apps
This functionality is only available in PRO version
The functionality ensures that your every Ellipse object in your Figma design will be exported as HTMLViewer object in Power Apps.
The output will look like this:
Export Shadow for HTML object
This functionality is only available in PRO version
If you use Effects (Inner, Drop shadows) in Figma with HTML prefix, the property will be exported in YAML file.
On the left side you can see output in Power Apps, while on the right side is input from Figma file.
Export to YAML
Recommendation
Font Size
Rectangle with round corners
When your design is ready to be exported, you can select ready frame(s) and click on 'Export' button.
The cool thing is, that if you follow prefixes what I mentioned upper, than you do not need any import. You can start design your app in Figma prom scratch. BUT, do not forget that every name of your object in Figma should not be the same!!!
Every name of your objects must be UNIQUE! The same for the situation, when you have 2 designed screens, like 'Dashboard,Search' screens. If you have 'lbl_title' in 2 different screens, PAC command will finish with error message 'Name of the field is used in another YAML file'. The reason is that Canvas Apps does not accept same names in Power Apps editor.
Packaging of the exported screens in VS code
If you exported all screens, you can open your VS code and put this command:
pac canvas pack --sources <path/folder_name> --msapp <path/app_name.msapp>
Like this example:
pac canvas pack --sources /Users/lukas/Downloads/ExportApp --msapp /Users/lukas/Downloads/ExportApp.msapp
The output MSAPP file could imported manually in editor, or you can use Pipelines in Azure DevOps. The process how to import MSAPP manually you can find here: .
Example of Export:
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.