Auto-layouts on Figma
Creating a mock mobile app to learn Figma's auto-layout tool. The project expanded my technical proficiency in Figma, and boosted my confidence in auto-layouts.

Summer 2023

Table of Contents

Project premise

Responsive design is the key to modern web design. Being able to adapt to trends in the field is important for any designer. Figma auto-layout is a powerful tool to mockup HTML flex box layouts—a growing trend in web design. I decided to tackle this project to grow my confidence in auto-layouts, and prepare myself for future design projects.

Design prompt

Using auto-layouts, design a mobile app for a high-speed railroad company. The app is the hub for passengers to purchase tickets and check train schedules.

Wireframes of my practice to learn how to use auto-layout
Started with simple wireframes to learn auto-layout...
Figma canvas of my designs for a high-speed railroad app. All screens designed using auto-layout
..eventually progressing to hi-fi prototypes after extensive practice

Learning auto-layouts

The learning curve for auto-layouts was rather steep because it's different to the drag-and-drop model that I have grown so accustomed to on Figma. Rather, the key to learning auto-layouts was mastering the settings of vertical/horizontal layout, fill/hug contents, and alignment. Adjusting those settings manipulated the way objects appeared on the screen.

If you are curious in learning, I'd love to share my newly acquired knowledge to hopefully reduce the learning curve.

Home page of the high speed railroad app (prototype)
Home page
Mock up of the high speed railroad app
Final product
Auto-layouts? My takeaways