Edit

Share via


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.

Form screen in the tablet and phone layout formats.

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

Vertical container in the tablet and phone layout formats.

  • 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

Horizontal headers and dividers.

Text input, drop down, and combo box

Horizontal text input, drop down, and combo box.

Toggle, check box, and radio

Horizontal toggle, check box, and radio.

Slider, rating

Horizontal slider, rating.

Date picker

Horizontal date picker.

List box

Horizontal list box.

Rich text

Horizontal rich text.

Timer

Horizontal timer.

Component sizes, states and types

Button sizes

Button size.

Button states

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

Label size.

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

Text input states

Text input states.

Text input types

Text input types.

Combo box sizes

Combo box sizes.

Combo box states

Combo box states.

Drop downs sizes.

Drop downs states.

Check box sizes

Check box sizes.

Check box states

Check box states.

Radio button sizes

Radio button sizes.

Radio button states

Radio button states.

Radio button types

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

Toggle states

Toggle states.

Toggle types

Toggle types.

Date picker sizes

Date picker sizes.

Date picker states

Date picker states.

Date picker types

Date picker types.

Slider sizes

Slider sizes.

Slider states

Slider states.

Slider types

Slider types.

Rating sizes

Ratings sizes.

Rating states

Ratings states.

Rating types

Ratings 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 sizes.

List box states

List box states.

List box types

List box types.

Rich text sizes

Rich text box sizes.

Rich text states

Rich text states.

Timer sizes

Timer sizes.

Timer states

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.

Content to ignore.

Images and rectangles

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

Images

Images.

Rectangles

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