DesignKit FREE version — move your Power Apps to the next Level

‼️ The article is outdated ‼️

Official Documentation link — https://coda.io/@mycondy/designkit-for-figma

Let me introduce a free version of Figma plugin that helps you to import and export design from/to Microsoft Power Apps.

The plugin has been completely re-designed and re-developed. In the new version you can import or export Canvas apps much more easily.

In this article, I will show you how to use this plugin, what everything is possible, and how you can apply it for customer's projects.

Description of PRO features you can read here: https://medium.com/@lukas.lp.pavelka/designkit-pro-move-your-power-apps-development-to-the-new-level-d1dab6d7b0ee

Let me start with the UI of the plugin.

Canvas

The tab helps you to import JSON/YAML files from the local storage and export YAML files locally.

If you click on 'Add Files', you will be able to import particular file type — JSON or YAML. At first, let me show you how to get these files from your Canvas application.

How to export Power Apps — Canvas

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. Then it is time to unzip the file. Here, you have 2 options of how to unzip the file.

Option 1 — change extension

The first option is the faster solution of how to gain Power Apps screens. Only what you need is to change .MSAPP to .ZIP. Then you can unzip the file. All screens are located under 'Controls' folder.

The file '1.json' contains only the info about your application. It is not needed import to the Figma via Power Apps IMEX plugin.

Option 2 — use PAC command

For this option 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

Doesn't matter which option you will choose. The plugin supports both. When you have source files ready on your local storage, I will show you how to import them.

Importing of the Canvas source files

Open the plugin, select JSON or YAML action, and click on 'Add files' button.

Import Power Automate Flow

The first version of importing Power Automate flow has been implemented. The plugin is able to import steps from the definition.json file. How to get this file? Please see the video.

Import Model Driven App

With the DesignKit plugin you can import an exported Model Driven application from your Solutions. After exporting of your ZIP file to your local storage, you can import it via DesignKit Figma plugin.

Import JSON data into Model Driven table

The feature can pre-create Model Driven table with your added custom data in JSON format. For generating your data you can use mockaroo.com.

How to import the data please see the video manual on this link.

Generate JSON data from Mockaroo REST API

Other possibility of how to generate JSON data is to select Mockaroo API checkbox, put a API KEY, and enter your endpoint created under your Mockaroo account.

Before using this functionality, you have to create a new data schema.

Do not forget to save changes on this screen! Then you can create a new endpoint, where will be pointed on this schema. In my case, I created a schema called "Data" with "data.json" endpoint.

Inside the endpoint page you will find a generated "X-API-KEY" token by Mockaroo that you can put in the DesignKit plugin.

The next field is "Language" that includes 3 options (en-US,en-GB,cs-CZ). These options represent an output format of your date columns. For example, if you choose en-US value, you will get "mm/dd/yyyy" format. If you select en-GB, you will see "dd/mm/yyyy" and "dd.mm.yyyy" for the last option.

Last field helps you to save your input as View or Form output. This is the Form output.

Here you can see the result of generated data from Mockaroo API that could be replaced as Model Driven View.

Exporting of the Figma Screens

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…

Here is the list of the supported prefixes in Figma:

• rect,rectangle = Rectangle
• txt,text = Text Input
• lbl,label = Text Label
• btn,button = Button
• img, svg = Image
• html = HTML Text
• circle = Circle
• tr, triangle = Triangle
• star = 5-point, 6-point 8-point, 12-point Star
• oc,octagon = Octagon
• pe, pentagon = Pentagon
• combo,combobox = Combo Box
• check, checkbox = Check Box
• list = List Box
• radio = Radio
• toggle = Toggle
• datepickr, datepicker = Date Picker
• richtxt, richtext = Rich Text Editor
• slider = Slider
• timer = Timer
• gallery = Vertical Gallery
• form, formViewer = Edit Form

These mentioned prefixes are compatible with the standard Power Apps objects. But the plugin can one more component that is not standard.

If you use this this prefix:

• cal, calendar = Calendar component created in Power Apps

the plugin will generate a new Calendar in your app. It is a combination of vertical galleries, where a Week and Month gallery will be generated.

If you use 'img' prefix, then you should fill hidden Text Node called 'img_link 'in Figma. Please see the example below:

The reason is, that Power Apps calls name of uploaded Media files in the Image object. The files are stored in the MSAPP file in the another folder. Therefore, IMEX version 2.0 supports only SVG or image with the internet link. Here is the solution for the link:

The trick is that you put your link, where the file is located on the internet, and hide the 'img_link' TextNode in Figma. Power Apps IMEX will check your 'img' prefix with the hidden 'img_link' node. If it is found, it will be exported in YAML like this:

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!!!

Let me show it on example.

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.

Upload Figma screens on SharePoint via GraphAPI

This last new feature is able to upload your selected screens on SharePoint.

Prerequisites

• Registered Azure App — https://learn.microsoft.com/en-us/graph/auth-register-app-v2
• Added Graph API permissions — https://learn.microsoft.com/en-us/graph/permissions-overview?tabs=http

At least you need this permission — User.Read. If you want to get your SiteId, you need to add Sites.ReadWrite.All permission.

How to get a CODE for TOKEN

Once your app is registered, you need to call this link in your browser.

https://login.microsoftonline.com/<tenant_id>/oauth2/v2.0/authorize?client_id=<application_id>&response_type=code&redirect_uri=<redirect_url>&response_mode=query&scope=<application_id>%2F.default&state=12345

TenantID, ApplicationID and redirectURL you can get from overview tab of app registrations page.

After run the link, you will get a CODE included in your browser address bar, like here:

The full manual of how to get the CODE needed for generating of TOKEN you can find here:

Example of the code is here (selected part):

How to get TOKEN

Now it is time to generate TOKEN via PostMan. Only what you need is to put this POST request with the body:

POST https://login.microsoftonline.com/<tenant_id>/oauth2/v2.0/token

Body:

grant_type=”authorization_code”

code= <code>

redirect_uri=<redirect_uri>

state=”12345"

client_id=<application_id>

scope=”2ff814a6–3304–4ab8–85cb-cd0e6f879c1d%2F.default”

client_secret=<application_secret_id>

In response you will get the TOKEN:

Keep in mind, default expiration period for the TOKEN is 30mins. If you want to change to 86398 (23:59:59), you need all permissions on the previous picture and setup policy token expiration as it is described here:

https://martin-machacek.com/blogPost/954be05e-6b06-44dc-9fac-408a629189ee

Once you have the token, you can put it in DesignKit plugin. Second field supports 2 values. You can put name of your sharepoint site — <company>.sharepoint.com or put a SiteID.

The siteID you can find via this GET request in PostMan.

GET https://graph.microsoft.com/v1.0/groups

Authentication: Bearer TOKEN

You will receive this response:

The last field is a path, where all selected frames will be saved. For example "ExportedFrames/Figma" ….

And This is it! Please do not hesitate to contact me at info@mycondy.com.

Link for the video tutorial: https://youtu.be/V8Wwd6-wJ48

Or you can join our LinkedIn page, where all news about this plugin is stored: https://www.linkedin.com/company/mycondy/