g.
about
work
resume
Socials.
Instagram
Linkedin
Email
↑
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.
Date

Summer 2023

Table of Contents
Project premiseDesign promptLearning auto-layoutsAuto-layouts? My takeaways

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
I've come to recognize that auto-layouts offer more than just responsiveness; they serve as a cornerstone for maintaining layout organization. Utilizing auto-layout in this project significantly improved my ability to distribute objects, ensure alignment, and manage spacing within designs. This newfound proficiency has boosted my confidence in collaborating with development teams, as auto-layouts enable more accurate representations of the final product. I eagerly look forward to incorporating auto-layouts into my future projects.
View prototype
↗
←
→