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

Mastering transitions and triggers

You have reached the point where we can say that the main interface design of our product is complete, and even from the static layouts, it is very clear what your application is about. However, the design is not complete yet, as there is still some work to be done. In this section of the chapter, you will take the first step into a new stage of work on the application. Before we dive into this new topic, let's summarize what you should have in your design file so far.

First things first, you should have a flow for a mobile app that contains four views – Login, Sign Up, Home, and Content Detail – plus two more parallel flows for tablet and desktop, the interface you have created by redesigning and scaling your screens for smartphones. Of course, we didn't create all the views that such applications might actually contain, as some of the design steps would take longer to be fully ready for development, but it was a great...