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.

To follow along with this book, you will need one of the following Figma apps:

• Figma – Web app (Chrome, Firefox, Safari, Edge) or desktop app (Windows, macOS)
• Figma – Mobile app (iOS, Android)
• FigJam – Included within Figma or iPad (standalone app)

In Chapter 10, Testing and Sharing Your Prototype in 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/diagrams used in this book. You can download it here: https://packt.link/gbp/9781835464601.

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.