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

Chapter 2: Structuring Moodboards, Personas, and User Flows within FigJam

Now that you have an understanding of Figma as a design tool, and you already know about some of its basic functionality, you are ready to dive into learning by doing. This is a reasonable and logical next step, since the best way to learn is to practice as much as possible. As mentioned earlier, Figma now consists of two types of files – design and FigJam. You will start your practice with the second one, although it is a recently released brand-new feature. You might think that FigJam is Figma's complementary tool, but let's take a look at the reasons why you should start with it.

First of all, FigJam is much easier to use; consider it as a warm-up before you start practicing with more complex tools in Figma. Its functionality doesn't even come close to what the design editor has, since it was created for a different purpose, which we will talk about later. Secondly, it's important...