View the original post
We are going to play with Figma’s auto layout, creating a flexible modal which can be stretched and accommodate multiple lines of content.
It seems that the title will align vertically to the close button after we shrink the entire modal, though it is made with auto layout.
Body and action section of modal
Like general modal, we got header, body and action section in our modal.
We set up the body section and action section with auto layout frame in order to control the padding of them.
The header of modal
It’s the important part about how to make it flexible:
Step1: Create title layout frame and close layout frame
Be sure there are two layout frames because we will do something later with their own padding.
Step2: Group two rows with vertical direction layout
Create an auto layout frame contains title frame and close button frame. But the direction is vertical, not horizontal. I put the title and close button into different rows and it makes the title shrink or grow as the modal scales.
Make both frame properties be fill container. And the title content must be set to fill container too.
Step3: Squash the height of close button frame
It depends on what layout do you want, Let the button align to the vertical center of frame container and lower the height.
- Left aligned title (please lower to 1px height)
Make close frame align to right, adding top padding to make the button move to the same row visually.
- Center aligned title
Lower the height of the frame as a little as you like and center the title content. Still, we have to align the close button to the right side.
Step4: Create paddings in title frame
Though title and button are on the different rows, they will still overlay with each other. So create padding in title frame to prevent overlay.
- Left aligned title (right padding)
Adding right padding in title frame. As we shrink the header, the title won’t be overlaid with close button.
- Center aligned title (both right and left paddings)
Adding both two sides padding in title frame in order to make title centered after we shrink header section.
Combine those sections
Be aware of frame property and paddings to the modal
After we group those sections to a new layout frame, we should check the properties of those section. Always, they will be set as fixed width. We have to set them as fill container.
- Two rows for the header section.
- Use padding in close button frame to adjust position.
- Remember to check frame property after grouping as a new frame.
Hope it will help you guys.
Here is the Figma wireframe library that includes the flexible modals. It still needs some updates to make it perfect. Hope you like it.
Thank you for reading.