Preface

Being a driving force in the design tools market, Figma makes everything easier by bringing unique innovations and opening up real-time collaboration possibilities, so it comes as no surprise that so many designers decide to switch from other tools to Figma.

In this book, you will be challenged to design a user interface for a responsive mobile application by researching, understanding user needs, and mastering all this in a step-by-step fashion by exploring the theory first and gradually moving on to practice. Your learning journey will cover the basics of user experience research with FigJam and the process of creating a complete design using Figma tools and features such as components, variants, auto layout, and much more. You will also learn how to prototype your design and expand your possibilities with Community resources such as templates and plugins.

By the end of this book, you will have a solid understanding of the user interface workflow, be able to manage the essential Figma tools, and know how to properly organize your workflow in it.

Who this book is for

This book is for aspiring UI/UX designers who want to get started with Figma, as well as established designers who want to migrate to Figma from other design tools. This guide will take you through the entire process of creating a full-fledged prototype for a responsive interface using all the tools and features that Figma has to offer. As a result, this Figma design book is suitable for UX and UI designers, product and graphic designers, and anyone who wants to explore the complete design process from scratch.

What this book covers

Chapter 1, Exploring Figma and Transitioning from Other Tools, serves as an introduction to Figma and its mission, explains the main differences between its desktop and web apps, explores the Figma welcome screen interface, and provides guidance on how to migrate to Figma from Sketch and Adobe XD.

Chapter 2, Structuring Moodboards, Personas, and User Flows within FigJam, is about how to work in FigJam, an additional tool implemented in Figma, using it to collect and analyze data in the early stages of design work.

Chapter 3, Getting to Know Your Design Environment, provides an overview of Figma tools in the toolbar, left and right panel functionalities, and instructions on how to start a new project from scratch.

Chapter 4, Wireframing a Mobile-First Experience Using Vector Shapes, focuses on defining the structure of the application and building its wireframe using Figma's shape and vector tools.

Chapter 5, Designing Consistently Using Grids, Colors, and Typography, dives into styles, a powerful feature that makes it easy to manage and reuse grids, typography, colors, and effects throughout a design project.

Chapter 6, Creating a Responsive Mobile Interface Using Auto Layout, introduces auto layout, one of Figma's advanced features, and provides guidance on how to best apply it using resizing and constraints.

Chapter 7, Building Components and Variants in a Collaborative Workspace, focuses on creating components and variants, both of which are crucial functions in Figma, as well as exploring other tools such as multiplayer, libraries, and version control.

Chapter 8, User Interface Design on Tablet, Desktop, and the Web, explores the basic principles of responsive design and focuses on how to adjust the interface design for different devices and screen resolutions.

Chapter 9, Prototyping with Transitions, Smart Animate and Interactive Components, explores various prototyping possibilities and functions in Figma, from basic to more advanced.

Chapter 10, Testing and Sharing Your Prototype on Browsers and Real Devices, covers all the ways to view and test an interactive prototype, as well as share it with others and work with feedback.

Chapter 11, Exporting Assets and Managing the Handover Process, focuses on preparing design project assets for further development, along with providing an overview of the Inspect tab in the right panel in Figma.

Chapter 12, Discovering Plugins and Resources in the Figma Community, covers the Figma Community and how to navigate it to locate the right files and plugins that can improve your design workflow.

To get the most out of this book

You will need any modern browser to use the web version of Figma, or alternatively, you can install the Figma desktop app on your computer. The book provides a step-by-step guide to designing an application interface, as well as recommendations for self-practice. To get the most out of the book, it is recommended that you follow the hands-on steps in the following chapters and devote some time to practicing your skills in Figma on your own.

In Chapter 10, Testing and Sharing Your Prototype on Browsers and Real Devices, you will be asked to test your design on devices with smaller screens, and to do so, you will need to download the Figma app (available for iOS and Android) on your smartphone and/or tablet.

Download the color images

We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781800564183_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Create a new text layer in auto-width mode (with a simple click) anywhere inside the Login frame and enter Login."

Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "In the Design panel, you may have noticed a section not yet mentioned, namely Effects. This is definitely a tool that deserves an in-depth study, as with it you can apply various effects to elements such as Inner shadow, Drop shadow, Layer shadow, Layer blur and Background blur."

Tips or Important Notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [e-mail] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [e-mail] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you've read Designing and Prototyping Interfaces with Figma, we'd love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we're delivering excellent quality content.