AI Chat (alpha)

How to use AI chat in Power Apps for Figma

Written By Lukas Pavelka

Last updated 11 days ago

This function is visible only in PRO version!!!

In Generate tab you can specify your prompt to visible modern controls. In the first version of this feature we supports these modern controls:

  • Avatar, Badge, Button

  • Combobox, Datepicker, Dropdown, Checkbox

  • Input field, Label, Link, Number input field

  • Progress, Radio, Slider, Tablist, Toggle

In your prompt of specified control, the plugin support these properties:

  • x, y, width, height, color, background, border color, radius, text, font size, font

  • checked, value, shape, position, max, thickness, border style, border

History in chat is saved only if you do not close and reopen plugin again. You can reach your previous prompt if you press up arrow in your keyboard.

The chat is supporting colour name(without space) value or hex code

List of colour name you can find here 👇

https://htmlcolorcodes.com/color-names/

Example:

Supported Actions

AI chat supports these features:

  • Copy to clipboard in YAML tab

  • Add to Figma menu item

  • Copy as Image menu item

  • Clear chat menu item

How to reach Avatar

Prompt

Example
I need an avatar with color [color] and bg [backgound] and text [2 chars]

Design Preview

YAML Preview

How to reach Badge

Prompt

Example
I need a badge with color [color] and bg [backgound] and text [2 chars] and size [font size] and font [font name]

Design Preview

YAML Preview

How to reach Button

Prompt

Example
I need a button is named '[text value]' with [color] color and [background] background. Dimension is: height [height number], width [width number]. Font is [font name] with size [font size number]. Position is: x [x position], y [y position]. Icon is [icon name]. Radius is [radius number]

Design Preview

YAML Preview

How to reach Combobox

Prompt

Example
give me a combobox with [background] bg and [color] color and radius [radius value] and text [text value]

Design Preview

Yaml Preview

How to reach Datepicker

Prompt

Example
give me a datepicker with [background] bg and [color] color and radius [radius value] and text [text value]

Design Preview

Yaml Preview

How to reach Dropdown

Prompt

Example
I need a dropdown with [background] bg and [color] color and radius [radius value] and text [text value]

Design Preview

Yaml Preview

How to reach Checkbox

Prompt

Example
return a checkbox with [color value] color and checked is [true/false value] and text [text value]

Design Preview

Yaml Preview

How to reach Input field

Prompt

Example
return a text field with [color name] bg and radius [radius number] and font '[font name]' and size [font size number]

Design Preview

Yaml Preview

How to reach Label

Prompt

Example
return a label control with [color name] bg and font '[font name]' and size [font size number] and color [color name] and text [text value]

Design Preview

Yaml Preview

How to reach Link

Prompt

Example
I need a link with [color name] bg and font '[font name]' and size [font size number] and color [color name] and text [text value]. Url is [url link]

Design Preview

Yaml Preview

How to reach Progress

Prompt

Example
i need a progress with shape is [shape value - round] and value [number value] and progress color is [color name] and bg is [color name] and max is [number value]. Thickness is [thickness value - medium/large]

Design Preview

Yaml Preview

How to reach Radio

Prompt

Example
i need a radio with [color hex] color. First is checked. Width is [number value] and height is [number value]

Design Preview

Yaml Preview

How to reach Slider

Prompt

Example
I need a slider with [color name] color and [color name] bg. Value is [number value]. Width is [number value] and height is [number value]

Design Preview

Yaml Preview

How to reach Tablist

Prompt

Example
I need a tablist with items '[items split by comma]' and [color name] color and width is [number value] and height is [number value]

Design Preview

Yaml Preview

How to reach Toggle

Prompt

Example
I need a toggle checked with position [position value - before/after] and text [text value]. Color is [color value]. Background is [color value]

Design Preview

Yaml Preview