DesignKit for Figma

Getting Started

Release Notes

Using DesignKit 2.0

Explore

Canvas

Export Canvas App

MyCondy

Last edited 9 days ago by MyCondy

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:

audio = Audio player

rect = Rectangle

txt = Text Input

lbl = Text Label

btn = Button

img, svg = Image

html = HTML Text

ci = Circle

tr = Triangle

st = 5-point, 6-point 8-point, 12-point Star

oc = Octagon

pe = Pentagon

combo = Combo Box

check = Check Box

list = List Box

radio = Radio

toggle = Toggle

picker = Date Picker

richtxt = Rich Text Editor

sl = Slider

ti = Timer

gall = Vertical Gallery

cont = Manual Layout Container

form = Edit Form

cal = Calendar component created in Power Apps

video = Video player

In PRO version you can use more prefixes:

horgall = Horizontal Gallery

horcont = Horizontal Auto Layout Container

vercont = Vertical Auto Layout Container

combopcf = Modern PCF ComboBox component

datepcf = Modern PCF DatePicker component

radiopcf = Modern PCF Radio component

calshort = Short version of Calendar component

table = Table PCF component

fluid = Scrollable Fluid Grid component

popup = Composed Group component

gr = Group

barchart = Barchart Custom component

addmedia = Power Apps Component for adding picture

numpcf = Number Input PCF component

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.0 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

more info about PRO version find

here⁠

⁠

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:

⁠

⁠

If you want to add add prefixes automatically, you can use "Add prefixes" button described

here⁠

Export Circle as HTMLViewer object in Power Apps

This functionality is only available in PRO version

more info about PRO version find

here⁠

⁠

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

more info about PRO version find

here⁠

⁠

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

Keep in mind that the plugin decreases font size by 5 pixels in Power Apps.

If you use font size - 20px in Figma then the label will have 15px in Power Apps.

The reason is that layout size in Power Apps is smaller than your size in Figma. This will ensure the better UI visualisation in Power Apps

Rectangle with round corners

If you want to use rectangle with round corner in Power Apps, please use HTML as prefix.

Example - replace "rect_a" by "html_a"

HTML object is able to read round corners or shadows in Power Apps

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. Let me show you the manual way.

Go to your editor and click on 'Open' menu item.

⁠

Select 'Browse' button and find your packed MSAPP file on your local storage.

⁠

Finally, your screen designed in Figma will appear in your Power Apps editor.

⁠

Example of Export:

⁠

Loading…⁠

⁠

← Validate Canvas Screens⁠

⁠

Model Driven →⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.