Master the most complete tool for designing apps, websites, and user interfaces.

The Designer’s Guide to Figma

The Designer’s Guide to Figma: Master Prototyping, Collaboration, Handoff, and Workflow

Preface

Welcome to this tutorial on Figma . In this book, we’ll immerse ourselves in everything Figma has to offer as we design a simple web page. The layout of this page will be based on an older and a newer version of the iA Writer website’s splash page.

Low-fidelity Prototyping

Figma’s collaboration features are arguably its best selling point. Think beyond contextual feedback, role management, design handoff, version control, and even the innovative live collaboration features that Figma is known for—since rival tools now offer this too. Instead, imagine having the ability to give presentations and have audio conversations within Figma. This is the Figma that we’re looking at in this tutorial series, and other tools just aren’t matching up right now.

Collaboration

In this third chapter, we’ll focus on high-fidelity design, which is often regarded as the fun aspect of UI design—where we can be creative as we style our design. However, it’s important that we maintain consistency by reusing styles when it makes sense to do so, speeding up our high-fidelity design workflow as an added benefit.

High-fidelity Prototyping

In this fourth chapter, we’ll learn how to clean up our (relatively simple) design, check its accessibility, export its assets, and generally just make sure that it’s ready to be “handed off” to developers.

Handoff

In this final chapter, we’ll take a look at some advanced Figma workflows. We’ll explore some totally new concepts, but also expand on some of the concepts explored in earlier tutorials.

Community Questions