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

Evolving the idea to a wireframe

Since the analysis and research phase are completed and the idea is approved, you are ready to turn it into something real. This time, you'll learn how to create a skeleton for our previously introduced streaming service application, which is a wired structure for visualizing and experimenting with usability and product functionality. This is an important process called wireframing that takes place before you start designing the first prototype and allows you to choose the right product structure. There is some theoretical knowledge that you should know about this step, so in this section, you will learn some of the important concepts about the interface and the related navigation elements.

What is a wireframe?

If you are a beginner, you may not know what a wireframe is and what it is for. Perhaps you cannot wait to finally get to work on a real design, and this step may seem like one more obstacle. But wireframing is a crucial part of the...