Book Image

Designing and Prototyping Interfaces with Figma

By : Fabio Staiano
Book Image

Designing and Prototyping Interfaces with Figma

By: Fabio Staiano

Overview of this book

A driving force of the design tools market, Figma makes it easy to work with classic design features while enabling unique innovations and opening up real-time collaboration possibilities. It comes as no surprise that many designers decide to switch from other tools to Figma. In this book, you'll be challenged to design a user interface for a responsive mobile application having researched and understood user needs. You'll become well-versed with the process in a step-by-step manner by exploring the theory first and gradually moving on to practice. You'll begin your learning journey by covering the basics of user experience research with FigJam and the process of creating a complete design using Figma tools such as Components, Variants, Auto Layout, and much more. You'll also learn how to prototype your design and explore the potential of community resources such as templates and plugins. By the end of this Figma book, you'll have a solid understanding of the user interface workflow, managing essential Figma tools, and organizing your workflow.
Table of Contents (17 chapters)
1
Part 1: Introduction to Figma and FigJam
6
Part 2: Exploring Components, Styles, and Variants
11
Part 3: Prototyping and Sharing

Introducing auto layout

In this section, you'll start by discovering the powerful Figma auto layout feature. Its use covers many aspects of a designer's work, from improving your interface to speeding up your workflow. At first, auto layout may seem similar to the grids you explored in Chapter 5, Designing Consistently Using Grids, Colors, and Typography, as they are both used for precisely aligning elements in your designs. As you know, grids are incredibly useful for ensuring that all elements follow the same harmony and layout logic. However, in many cases, relying only on them is a very risky decision, which cannot be said about auto layout. The word "auto" gives you a hint that once you set properties, you don't need to worry about checking whether everything is positioned correctly. With this feature, you can save yourself from mistakes that are sometimes difficult to track down. But auto layout goes beyond that and does a lot more, and you...