How to ProtoPie: Using Auto-Layout in ProtoPie

What if I told you that you could use the most common Figma-Feature inside your ProtoPie Project. Yeah you would say something like “Whaaat”. To be honest it is more a workaround, then a full integrated Feature. At the moment it`s not possible natively inside of ProtoPie, but there are some components like buttons that you can transform into a self-adjustable button which can be adjust automatically based on the Text-Input.

Here is what we are creating today inside of ProtoPie:

Step 1: Creating a Text-Element

First we have to create a Text-Element & give it the following specifications:

• Text-Color #FFFFFF with a corresponding Fill-Color of #E59423
• Text Resize = Auto Width
• Line Height = 2.09
• Radius = 15
• Padding Left & Right = 15

Step 2: Transform Text-Element into a component

After the Setup we can create a component out of the Text-Element we just created by clicking on the Lightning-Icon

Step 3: Create Variables

Inside the component we first create 3 variables:

• Btn_Text (Overridable-Text-Variable with a Placeholder-Text i.e. Button)
• Color_Text (Overridable-Color-Variable with a Color i.e. #FFFFFF, which we use as the color of the text)
• Fill_Color_Text (Overridable-Color-Variable with a Color i.e. #E59423, which we use as a Fill-Color for the surrounding button)

These Variables enable us to customise the UI of the Button afterwards, without the need to change the component.

Step 4: Adding Triggers

After creating the base of the component, we need to link these variables to a specific Trigger. In this case we are using the Start-Trigger and adding two elements into it:

• Color
• Text

Inside the Color-Element, we use the following settings:

As the Color-Variables are linked to the Text-Color & Fill-Color, we are using the Text-Variable (Btn-Text) to be used inside the Text-Element.

Step 4: Using the component

Good news, we are done. Yes really, you don`t believe it ? Try it out. You simply has to drag & drop your component, which you have now created, into your desired scene & it will resize based on the Text-Input.

Conclusion

This workaround I presented to you is a good first step into increasing the efficiency creating faster & better prototypes. Also provides steps to create other UI-Elements like Chips.