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

Exploring the Inspect tab

As you can see, the right panel contains a huge number of functions, settings, and tools. It took you several chapters and a lot of practice to get to know it at a good level. All that's left for now is the last tab of this panel, namely Inspect, and in this section, you will fill this missing gap and explore it in detail. The main peculiarity of this tab is that, unlike Design and Prototype, it is also available to those with only view permissions, so it is a great tool for developers and external collaborators. This is what this tab looks like without any active selections:

Figure 11.5 – The Inspect tab

It basically consists of two parts: one is dedicated to Styles and Interactions and the other is about Code snippets, and now we will dive into both.

Styles overview

Let's start right off with part of a complete overview of the entire Styles library, which you can see in the Inspect panel with no active selections...