Layout Builder

Written By mycondy

Last updated 17 days ago

A new structure of selected screen(s) is split into several parts - Screens, Controls, Properties, Transitions, and Prototypes. Let’s look at them deeply.

Screens

If you select frame with a “screen“ prefix, then the name of your selected screen will be visible under this tree.

On mouse hover of a screen name in plugin, you will see two icons. The left icon represents location of your selected screen. If you click on this icon, Figma will localize it and show a target.

The second icon is a dropdown menu, where you can find these items:

  • Duplicate - duplicates your selected screen with unique prefixes

  • Delete - remove your selected screen

If you target your mouse on “Screens“ line in the top, you can add a new screen.

Click on the “+“ button and a popup with layout selection and type of screens will be visible.

On the screen is only one field mandatory - Title. Layout and type is filled in automatically. You can also specify a position where your screen will be located in your Figma page.

List of layouts

  • Mobile

  • Tablet

List of types

  • Blank

  • Calendar

  • Email

  • Form

  • List

  • Meeting

  • Scrollable

  • Success

  • People

  • Responsive (only in PRO version)

  • Split (only in PRO version)

  • Sidebar (only in PRO version)

Below, you can find an example of Email layout type after selection of the Email type.

Here is the output in Power Apps after exporting to YAML or copying to clipboard.

How to Swap control?

When you select a control in Figma you can swap it.

Then a new popup will be visible, where you can select Control or Icon to be replaced.

Responsive

This new feature is only available in PRO version. When you select this type, a frame with responsive inner frames will be visible in your Figma page.

In picture above you can see 4 inner frames:

  • Screen Container

  • Header Container

  • Main Container

  • Footer Container

Every container control is responsive. Their contain responsive width in YAML code, like this example:

In other words, if the parent screen contains a suffix “_res“ every your frame and frame with auto-layout will have responsive width in YAML code. Like “screen_<screenName>_res“ for example “screen_dashboard_res".

Controls like dropdown, combobox, container, button, slider, table, label, text, fluid, or svg will have responsive width if your screen has suffix “_res“.

In version 5.0 you can use a new suffixes - FH (fixed height), FW (fixed width) which signal for YAML code viewer to reuse height or width of selected control.

If you fight with suffixes, “Generate prefixes“ button also supports generate suffixes if your frame has fixed height or width in Auto layout section:

In version 4.2, the plugin prepare a switch function for font size property with various values for screen layout.

On the picture you can see the value of selected screen for title label with this code:

Size: =Switch(Tasker_res.Size,6,20,5,20,4,18,3,18,2,15,15)

This means, that your selected layout size will return particular font size according to your specified size in Figma. More info about sizes values you can read here.

In the last version, containers recognise padding from top, bottom, left, and right. Means, if you have controls in responsive screen under container that has padding, your Width will be calculated.

Warning Dialog

The new feature in the last version 4.5 is called Warning Dialog. It helps you to check naming of your selected screen. Power Apps does not allow repeated or wrong naming in YAML code.

Wrong characters in Power Apps YAML:

  • Emojis

  • White spaces

  • Math operators - ‘+‘, ‘-‘, ‘/‘

Controls

Includes a list of child prefixes included under selected screen or selected node. For example, if you have LBL prefix under screen_dashboard or you select a control with LBL prefix, the controls tree will show a name of your control.

Also selected control contains multiple actions.

  • Swap - you can change your control by another one.

  • Remove - removes your control

In the last version you can swap your selected control by another or by icon. Here is the example of how to swap icon:

How to ADD control

Click on ‘+‘ button and add these types:

  • Classic

  • Modern

  • Composed

  • Charts 🆕

In this dialog is only Title field mandatory. When you select particular type, you will get the list of available controls.

Classic controls:

  • Add Media,Audio Player,Barcode Reader,Button,ColumnChart,Combo,Datepicker,

  • Dropdown,Export,Form,Gallery,Checkbox,Import,Label,LineChart,Listbox,Microphone,

  • Octagon,Pentagon,PieChart,Radio,Rating,RichText,Slider,Star,Table,Text,Timer,Triangle Angled, Toggle,Video Player,ViewIn3D

Modern controls:

  • Avatar PCF,Badge PCF,Button PCF,Combo PCF,Datepicker PCF,Dropdown PCF,Form PCF,

  • Header PCF,InfoButton PCF,Checkbox PCF,Label PCF,Link PCF ,Number Input PCF,

  • Progress PCF,Radio PCF,Slider PCF,Table PCF,Tablist PCF ,Text PCF,Toggle PCF, Toolbar PCF

Composed controls:

Available only in PRO version

  • BarChart,Calendar,Feedback Box, Horizontal Menu,Profile Card,Stage Box

Charts controls:

Available only in PRO version

  • Bar chart,Doughnut chart,Line chart,Pie chart,Radar chart,Radial Gauge chart

Charts represent QuickChart.io where a plugin generates a template of particular chart.

After type and control selection, you can enter X and Y positions, where your control will be visualised in Figma.

Transitions

This functionality is great for documentation. In plugin you can create a dependency model, where is visible all transitions between screens.

What you need is to select a screen, click on “+“ button under Transitions tree, and choose start & target node with transition type.

Please do not remove the arrow between screens directly in Figma!!! Remove it through the plugin. The reason is that plugin saves IDs of selected screens to the storage. If you remove it directly, saved IDs will be still in storage and plugin will not find them anymore!

Properties

This feature is only available in PRO version

Power Apps for Figma plugin enables to add additional properties for Labels, Buttons, Text Inputs, Radio, Toggle, Combo, Dropdown, and Checkbox. Here is the list of supported properties:

  • Classic Label

    • AutoHeight , ContentLanguage , DisplayMode , Live , OnSelect , Overflow , Role , TabIndex , Tooltip , Wrap

  • Modern Label

    • AutoHeight , ContentLanguage , DisplayMode , Wrap

  • Classic Button

    • AutoDisableOnSelect, ContentLanguage , DisplayMode , OnSelect, TabIndex, Tooltip

  • Modern Button

    • AcceptsFocus, AccessibleLabel, Appearance, ContentLanguage, DisplayMode, Layout, OnSelect

  • Classic Text Input

    • AccessibleLabel, ContentLanguage, DelayOutput, DisplayMode, EnableSpellCheck, HintText, Mode, OnChange, OnSelect, Reset, Tooltip, VirtualKeyboardMode

  • Modern Text Input

    • AccessibleLabel, Appearance, ContentLanguage, DisplayMode, Mode, OnChange, Required, TriggerOutput, Type, ValidationState

  • Classic Toggle

    • AccessibleLabel, ContentLanguage, DisplayMode, OnChange, OnCheck, OnSelect, OnUncheck, Reset, TabIndex, Tooltip, TrueText

  • Modern Toggle

    • AccessibleLabel, ContentLanguage, OnSelect, ToggleSize

  • Classic Check

    • ContentLanguage, DisplayMode, CheckboxSize, OnCheck, OnSelect, OnUncheck, Reset, TabIndex, Tooltip

  • Modern Check

    • AccessibleLabel, ContentLanguage, CheckboxSize, DisplayMode, OnSelect

  • Classic Dropdown

    • AccessibleLabel, ContentLanguage, DisplayMode, OnChange, OnSelect, Reset, TabIndex, Tooltip

  • Modern Dropdown

    • AccessibleLabel, Appearance, ContentLanguage, OnChange, Required, ValidationState

  • Classic Radio

    • AccessibleLabel, ContentLanguage, DisplayMode, OnChange, OnSelect, RadioSize, Reset, TabIndex, Tooltip

  • Modern Radio

    • AccessibleLabel, ContentLanguage, OnChange, RadioSize, Required

  • Classic Combo

    • AccessibleLabel, ContentLanguage, DisplayMode, InputTextPlaceholder, IsSearchable, NoSelectionText, OnChange, OnSelect, Reset, SelectMultiple, TabIndex, Tooltip

  • Modern Combo

    • AccessibleLabel, Appearance, ContentLanguage, InputTextPlaceholder, IsSearchable, MultiValueDelimiter, OnChange, Required, SelectMultiple, ValidationState

  • Modern Avatar

    • Appearance, Badge, OutOfOffice, Shape

  • Modern Badge

    • DisplayMode, Content, OnChange, Shape

  • Modern DatePicker

    • AccessibleLabel, Appearance, IsEditable, OnChange, ValidationState

  • Modern Form

    • AcceptsFocus, ContentLanguage, DefaultMode, OnSuccess, OnFailure, OnReset

  • Modern Header

    • AccessibleLabel, Appearance, DisplayMode, IsLogoVisible, IsProfilePictureVisible, IsTitleVisible, LogoToolTip , OnSelectLogo

  • Modern InfoButton

    • AccessibleLabel, AcceptsFocus, Appearance, DisplayMode, IconSize, OnSelect

  • Modern Link

    • AccessibleLabel , AcceptsFocus, Appearance, DisplayMode, OnSelect, URL

More info about these properties you can reach on official Microsoft documentation.

After created property for particular control, you are able to edit or remove it.

Prototypes

This feature is only available in PRO version

The last tree contains your added links between screens. It is a similar to Transitions, but here you can connect appropriate screen through the inner control. Important is that you should be in prototype mode in Figma.

Like in Transitions, please do not remove prototype directly in Figma!!! Use plugin to remove it. The reason is the same.

Action Panel in bottom

In bottom you can see two buttons - Reload and button with multiple actions.

Reload

This button will help when you have already selected screen or control in Figma and you reopen the plugin. After clicking on this button, all parts will be re-loaded immediately.

Split Button

In FREE version you can use these actions:

  • Generate Prefixes - generates prefixes for all selected Figma nodes

  • Export to YAML - exports selected screens or control to YAML (to ZIP file if you select more than 1 object)

In PRO version you can use these extra actions:

  • Dependency Model - makes an dependency model of selected screens and its transitions

  • Export to PDF - exports to the PDF file for all selected screens

Generate Prefixes

Create a frame on Figma page, add some Figma controls, like Text, Autolayout, Ellipse, or others, and click on “Generate Prefixes“ button. The plugin will generate mentioned prefixes in names of your controls. In last version 5.0 also supports generate suffixes ‘_fix’, ‘_fh’, ‘_fw’.

Generate prefix button will be activated when you have prefix added on the top of Figma frame, like this:

Dependency Model

The feature is only available in PRO version

During importing of Solution file or particular YAML's files you can include dependencies between Power Apps Screens.

How it works?

In Power Apps editor you can specify Navigate function under OnSelect property for every Power Apps control.

Screenshot 2024-10-27 at 9.02.35.png

When you do this and activate Dependency Model in Power Apps for Figma plugin, under Settings tab, you will see all dependencies in Figma.

Imported Dependency Model in Figma

Export to PDF

The feature is only available in PRO version

When you select a screen or multiple screens you can choose “Export PDF” menu item in the split button. Then you need to fill title and description (optional) to generate documentation of your project.

The output file will be as exported to PDF as collected on the Figma page. The export contains:

  • Project name

  • Project description

  • Screens

  • Dependency Model (if it was selected)

  • Power Automate Flow(s) (If it was selected)

  • Design system - colors, icons, typography

Resize mobile/tablet

In the last version, plugin is able to resize your selected screen. There are 2 conditions:

  • Only 1 selected screen is possible to resize

  • Only screen with prefix “screen_“ is possible to resize

After clicking on “Resize mobile/tablet“ your screen will be resized. When you click again, your screen will be resized back to original layout.

Translate

This cool feature is great for translating to various combination of your app for bilingual users. Plugin contains 108 languages.

  • "Afrikaans","Albanian","Amharic","Arabic","Armenian","Azerbaijani" ,"Basque","Belarusian","Bengali","Bosnian","Bulgarian",

  • "Catalan","Cebuano","Chinese (Simplified)","Corsican","Croatian","Czech","Danish","Dutch","English"

  • "Esperanto","Estonian","Finnish","French","Frisian","Galician","Georgian","German","Greek","Gujarati" ,"Haitian

  • Creole","Hausa","Hawaiian","Hebrew","Hindi","Hmong","Hungarian","Icelandic","Igbo","Indonesian","Irish","Italian","Japanese","Javanese"

  • "Kannada","Kazakh","Khmer","Kinyarwanda","Korean","Kurdish","Kyrgyz","Lao" ,"Latin","Latvian","Lithuanian","Luxembourgish"

  • "Macedonian","Malagasy","Malay","Malayalam","Maltese","Maori","Marathi","Mongolian","Myanmar (Burmese)”,"Nepali","Norwegian"

  • "Nyanja (Chichewa)","Odia (Oriya)", "Pashto","Persian","Polish","Portuguese","Punjabi","Romanian"

  • "Russian","Samoan","Scots Gaelic","Serbian","Sesotho","Shona","Sindhi" ,"Sinhala","Slovak","Slovenian","Somali","Spanish","Sundanese"

  • "Swahili","Swedish","Tagalog (Filipino)","Tajik","Tamil","Tatar","Telugu","Thai","Turkish"

  • "Turkmen","Ukrainian","Urdu","Uyghur","Uzbek","Vietnamese","Welsh","Xhosa"

  • "Yiddish","Yoruba","Zulu"