Figma Autolayout improves responsiveness and it is super easy to use. To ensure you have a perfect pages with autolayout follow these two simple steps:
- Add autolayout to the frame of your page:
- Select the frame of your page
- Click on the autolayout icon as shown in the image below.
- Add autolayout to the sections of the page you want. This can be done in groups, frames, etc.
- Select the group/frame/section you want to add the autolayout to
- Click on the autolayout icon as shown in the image below.
- Adjust the autolayout properties to ensure the element behaves as you want for different frame sizes.
HOW TO VERIFY AUTOLAYOUT IS WORKING IN FIGMA
When you resize your page frame in Figma, if Autolayout is active in the page frame AND the content, and the content autolayout properties have been correctly set, your frame content should adapt to any page width. The following video shows this on the design below (that you can use):
- FIGMA DEMO DESIGN: https://bit.ly/figma-to-wordpress-demo-design
- GENERATED WORDPRESS THEME: https://bit.ly/figma-to-wordpress-demo-website
You can check the autolayout properties of DEMO DESIGN. Open the design and duplicate it by clicking on the design name (top-left) and choose Duplicate to your drafts. Then simply select any design element to see the autolayout properties on the right panel.
That’s all !
With Autolayout enabled for your page and sections, you can define how they will behave sizes different to the ones they have in the original design.
We recommend you to explore the autolayout options in the official Figma documentation, or ask any questions in our Live Chat by clicking the button below. We will be happy to help you getting your Figma design as WordPress theme in no time!