Design System

Written By mycondy

Last updated 2 months ago

Full potential of DesignSystem is only available in PRO version

A design system is a set of controls and standards that help keep the look and feel of apps consistent.

In Power Apps for Figma plugin you can create own component sets in Figma reusable in your customer applications. In other words, you can create controls with different variants. Like in an upper picture.

How to create a variant control?

Open a plugin, create for example a button from the control list, and specify your colour and typography.

When your button is ready, do a right click on your button and select “Create component“.

At this moment, you can make variants of your button.

Do not forget that you can only visualise in plugin controls with supported PREFIXES! Every variant must have correct prefix in a name of variant, like this:

From version 4.7, the plugin recognises Appearance, Icons, and Layout in a modern button.

As you can see in a first picture of this page, we also improved Text Inputs, Toggles, and CheckBoxes.

How to use Instances?

When you create a component set with variants, you are able to reuse it on different pages in your Figma file.

In Assets tab, you will see every created component by you, which you can reuse in various apps. Find your component and drag&drop to your page.

At this moment, you will get a instance of your component. The rule is same, name of your instance must contain a supported prefix.