DesignKit for Figma

Getting Started

Release Notes

Using DesignKit 2.0

Explore

Canvas

Import Canvas App

MyCondy

Last edited 60 days ago by MyCondy

Recommendation

HTML viewer

If your YAML file contains htmlViewer object, do not forget put ";" at the end of your HtmlText property, like this:

CORRECT - <div style='margin:0px;width:300px;height:728px;border-radius:10px;'></div>

WRONG - <div style='margin:0px;width:300px;height:728px;border-radius:10px'></div>

In DesignKit 2.0 plugin you can import YAML files of a Canvas application. The plugin supports both layouts - Mobile and Tablet.

How to get MSAPP file

Go to your Power Apps environment and create/open your Canvas app.

⁠

In your builder you can click on 'Download a copy' button located on the right side.

⁠

After clicking, the MSAPP file will be exported to your local storage. Only what you need is to import MSAPP file from your local storage to Figma via DesignKit 2.0 plugin.

YAML Import

The first step of how to get MSAPP file is the same as it is described in the previous chapter. The difference is that you need to use Microsoft CLI library in VS Code. It means that you need to have installed Visual Studio Code with Power Platform Tools extension.

⁠

Here is the link

https://github.com/microsoft/powerplatform-vscode⁠

, where you can find all info.

If you have installed the extension, you need to put this command:

pac canvas unpack --sources <path/folder_name> --msapp <path/app_name.msapp>

Something like this:

pac canvas unpack --sources /Users/lukas/Downloads/ExportApp --msapp /Users/lukas/Downloads/ExportApp.msapp

Nested Containers in YAML

This functionality is only available in PRO version

more info about PRO version find

here⁠

⁠

If you use nested groupContainer object in your YAML file, the plugin will recognise all nested containers and import them in Figma in correct order.

⁠

⁠

The output will look like this in Figma:

⁠

⁠

Today function in YAML

This functionality is only available in PRO version

more info about PRO version find

here⁠

⁠

If your Canvas application uses Today() function in some label field, the plugin will recognise the function and replace it to real date format in Figma.

Here is example in my YAML file where you can see the TEXT value that contains Today function.

custom_title_7 As label:

Align: =Align.Right

Color: =RGBA(51,51,51,1)

Font: =Font.'Lato Light'

FontWeight: =FontWeight.Bold

Height: =37

Size: =21

Text: =Text(Today(),"dd.mm.yyyy","en")

Width: =185

X: =437

Y: =110

ZIndex: =21

This is the output after importing of a YAML file:

⁠

Import from GIT

This functionality is only available in PRO version

more info about PRO version find

here⁠

⁠

If you want to use this feature, you have to add Personal Access Token in your GitHub account under Developer Settings.

⁠

When your token is created, you could use your project with Power Apps JSON or YAML screens, like this:

⁠

DesignKit 2.0 requests 2 fields — token and URL link. Token is clear. Let me clarify what a url link consists of.

https://api.github.com/repos/<workspace>/<repository>/contents

Let me show it on example. You have a workspace called "Company123" with "powerapps" workspace. Your files are under "screens" folder. The link will look like this:

https://api.github.com/repos/company123/powerapps/contents/screens

This is the output of this feature:

⁠

⁠

Important Note

Is it possible that Microsoft will get rid of MSAPP file in 6 months. It means, that after download of your Canvas app via Solution export, you will get ZIP file where YAML files will be already included. This fact will change a logic of importing Canvas apps a little bit. For users mean that they will only export Solution and import a ZIP file.

⁠

← Canvas⁠

⁠

Import Canvas Component →⁠

⁠

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.