Components supported by the UI kit

[This article is pre-release documentation and is subject to change.]

The Create Apps from Figma UI Kit supports certain components. In this article, you'll learn about these components.

For the latest information about the supported components and to view detailed examples, you can visit the Supported components page inside the Create Apps from Figma UI Kit.

Important

Don't rename components or change layers. Otherwise, the components won't convert property in Power Apps.

Scrollable sections

A scrollable section is a section on a screen. If content extends beyond the section, it will still be accessible when the user scrolls.

The scrollable sections inside the UI kit are available in two different formats: Phone, and Tablet.

Form

Use a Form section when you want to have users fill out fields and submit data.

In Power Apps, this section will be scrollable.

• Place only vertical or horizontal data card components in form section.
• Don't mix and match vertical and horizontal data cards.
• Don't use base components in form frames.

Container (vertical)

Use the Container (vertical) sections when you want the content to scroll. For example, if you need a section of lengthy explanatory content.

Tip

You can also add a small form inside a Container (vertical) section.

• Use base components and forms in container frames.
• Don't place vertical or horizontal card components in Container (vertical) section.

Vertical and horizontal data cards

Vertical and horizontal data cards are components that arrange themselves automatically on a form.

Note

Ensure all data cards are placed directly inside a form component. Data cards can't be used outside of a form.

Headers and dividers

Text input, drop down, and combo box

Toggle, check box, and radio

Slider, rating

Date picker

List box

Rich text

Timer

Component sizes, states and types

Button sizes

Button states

• If you want an outlined button with a stroke, set the stroke to Center in Figma since Power Apps only converts centered strokes.

Labels sizes

Note

Use only one font and font size within a text label. If you want to use more than one font or font size within a text label, then make separate labels with those variations. Also, ensure that the text for the label doesn't extend beyond the bounding box, or it won't convert properly.

Text input sizes

Text input states

Text input types

Combo box sizes

Combo box states

Drop down sizes

Drop down states

Check box sizes

Check box states

Radio button sizes

Radio button states

Radio button types

• Keep all radio buttons and text the same color. When converting into an app, Power Apps will use the color of the first radio button for all the remaining buttons. It won't recognize any other colors you may have used.

Toggle sizes

Toggle states

Toggle types

Date picker sizes

Date picker states

Date picker types

Slider sizes

Slider states

Slider types

Rating sizes

Rating states

Rating types

• Keep all stars the same color while designing in Figma. When converting into an app, Power Apps will use the color of the first star for all the remaining stars. It won't recognize any other colors you may have used.

List box sizes

List box states

List box types

Rich text sizes

Rich text states

Timer sizes

Timer states

Content to ignore

Use these components to make notes, comments, or miscellaneous content that doesn't need to render in the final app. The content will then be ignored when you convert the design in Power Apps.

Images and rectangles

Images and rectangles will render as-is when the design is converted into an app.

Images

Rectangles

• Only use rectangles with squared corners since Power Apps can only convert rectangles with squared corners. In Figma, this means the corner radius must be set to zero.

See also

• Create a canvas app from Figma