The Designer’s Guide to Figma

Daniel Schwarz

Description

Figma is the most complete tool for designing apps, websites, and other types of user interfaces (UIs). Unsurprisingly, it’s also the most-used UI design tool according to the 2022 Design Tools Survey.

Figma can take product design teams all the way from ideation to high-fidelity prototyping—covering all the design processes in between. It can also facilitate diagramming, collaboration, and research. Figma’s design handoff and design system management features can help bridge the gap between design and development. It’s available for Windows, macOS, and as a browser app.

In this book, we’ll immerse ourselves in everything Figma has to offer as we design a simple web page.

• Get acquainted with Figma. Learn where everything is, while using some of Figma’s biggest and most exciting features.
• Learn how to collaborate with stakeholders
• Discover how to create and use Styles and Components, and how to create Design System Libraries to hold them.
• Cean up your design, check its accessibility, export its assets, and make sure that it’s ready to be “handed off” to developers.
• Take a deep dive into some advanced Figma workflows.

Sujets

• Loisirs
• Arts Numériques
• Communication visuelle
• Internet
• UX
• Design
• Informatique
• COMPUTERS
• Web Design

Informations

• Publié par: SitePoint
• Date de parution: 27 mars 2023
• Nombre de lectures: 1
• EAN13: 9781925836554
• Langue: English
• Poids de l'ouvrage: 2 Mo

Extrait

The Designer’s Guide to Figma: Master Prototyping, Collaboration, Handoff, and Workflow
Copyright © 2023 SitePoint Pty. Ltd.
Ebook ISBN: 978-1-925836-55-4 Author: Daniel Schwarz Product Manager: Simon Mackie English Editor: Ralph Mason Cover Designer: Alex Walker
Notice of Rights
All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews.
Notice of Liability
The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein.
Trademark Notice
Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.

Published by SitePoint Pty. Ltd.
10-12 Gwynne St, Richmond, VIC, 3121 Australia Web: www.sitepoint.com Email: [e-mail]

About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, design, and more.
About the Author
Previously, design blog editor at Toptal and SitePoint. Now Daniel advocates for better UX design alongside industry leaders such as Adobe, InVision, Marvel, Wix, Net Magazine, LogRocket, CSS-Tricks, and more.

Preface
Who Should Read This Book?
This book is for anyone who wants to better understand Figma, the design and collaboration app. No prior experience of Figma is required, but it's assumed you have some design experience.
Conventions Used
Code Samples
Code in this book is displayed using a fixed-width font, like so:
<h1>A Perfect Summer's Day</h1><p>It was a lovely day for a walk in the park.The birds were singing and the kids were all back at school.</p>
You’ll notice that we’ve used certain layout styles throughout this book to signify different types of information. Look out for the following items.
Tips, Notes, and Warnings

Hey, You!

Tips provide helpful little pointers.

Ahem, Excuse Me ...

Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.

Make Sure You Always ...

... pay attention to these important points.

Watch Out!

Warnings highlight any gotchas that are likely to trip you up along the way.
Supplementary Materials https://www.sitepoint.com/community/ are SitePoint’s forums, for help on any tricky problems. [e-mail] is our email address, should you need to contact us to report a problem, or for any other reason.
Chapter 1: Low-fidelity Prototyping
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.
Figma is the most complete tool for designing apps, websites, and other types of user interfaces (UIs). Unsurprisingly, it’s also the most-used UI design tool according to the 2022 Design Tools Survey .
Figma can take product design teams all the way from ideation to high-fidelity prototyping—covering all the design processes in between. It can also facilitate diagramming, collaboration, and research, although these may sometimes require the use of third-party plugins or Figma’s secondary tool, FigJam . Figma’s design handoff and design system management features can help bridge the gap between design and development. It’s available for Windows, macOS, and as a browser app. (We’ll need access to Figma in one of these forms to complete this book.)
In this first tutorial, we’ll focus on acquainting ourselves with Figma. We’ll learn where everything is, while using some of Figma’s biggest and most exciting features. In the end, we’ll have created a low-fidelity but functional (simulated) prototype.
Designer, Meet Figma
With our (free) Figma account set up, let’s open the Figma dashboard and click on New design file . (There’s obviously much more to the dashboard than this, but nothing that’s especially technical. It’s simply a place to manage our files, projects, teams, organizations, and account.)
We can now take our first look at Figma, where we’ll see the horizontal toolbar near the top, the Layers panel on the left, the Design panel on the right, and in the middle, a blank canvas. Let’s change that by creating something so that we can see first-hand what all of this means.

Step 1: Creating a Frame (Artboard)
Click the “Region tools” icon ( # ) in the horizontal toolbar, then choose Frame (or tap F or A on the keyboard) to reveal the list of the Frame options in the right sidebar.

Finding Menu Items

You can find any menu item directly by using the command + / / Ctrl + / keyboard shortcut and then typing its name into the popup field. These are referred to as “Quick action…” shortcuts.
A Frame is a contained spaced that we can dedicate to a specific web page or app screen (or section within either of those). As we can see, there are many Frames to choose from. Normally, I would suggest taking a mobile-first (“Phone”) approach to design. However, to make this tutorial easier to digest, we’ll focus on desktop first, so choose Desktop → Desktop 1440×1024 .

We should now be able to see a reference to “Desktop - 1” in the Layers panel. Whenever we want to do something to a Layer (such as a Frame), we can just click on it from the canvas or click on its reference from the Layers panel.
Different types of Layers are represented by different icons in the Layers panel. We should be able to see that standard Frames are represented by what looks like a hash ( # ) icon.
The Design panel is contextual: the options available for customizing will depend on the situation. When we were looking for a Frame, it showed the list of Frames, but now that a Frame is selected, the Design panel contains various options for customizing it.

Step 2: Setting Up Auto Layout
Next, we’re going to customize the Frame’s Auto layout options. Using Auto layout on a Frame makes its content more robust and responsive by enforcing alignment, spacing, and padding rules. In the long run, it also makes designing UIs more efficient.
Our objective in this step is to use Auto layout to ensure that any future content is padded and aligned. Click Auto layout ( shift + A ) in the Design panel to activate it. Change the “Horizontal padding” to 12 and the “Vertical padding” to 120 . (Note that some options—including these ones—aren’t labeled unless we hover over them.) Set the blue alignment bars to “Top center alignment”. (Use the image below as a guide if you’re unsure.)

Auto layout can be overzealous. In the Frame section, it will have added Horizontal resizing and Vertical resizing. Change their settings to “Fixed width” and “Fixed height” respectively, so that the Frame won’t hug its contents (once content is added).

We’ll see the outcome of this step after adding content, so let’s do that by creating a navigation section.
Step 4: Creating a Text Layer
To create a Text layer, click the “Text” icon in the horizontal toolbar (or press T on the keyboard), then click on the canvas and type some text. (In this instance, let’s write “Logo”.)
We’ll see right away that the Text layer doesn’t appear exactly where we clicked, and in fact seems to be aligned to the top center of the Frame, but for a bit of space. This is because the parent Frame has those Auto layout settings that impose those rules.

Step 5: Creating a Nested Frame
Frames inserted directly onto the canvas (such as “Desktop - 1”, the Frame that we already created) are called top-level Frames . In this step, we’ll Frame our “Logo”, and this Frame will be called a Nested Frame , because it will be nested inside our top-level Frame.
With the “Logo” selected, choose Frame selection from the right-click menu ( option + command + G / alt + ctrl + G ). The Frame will be called “Frame 1”, and “Logo” will be the only Layer inside it. (Look at the Layers panel to understand the structure.)

Next, activate Auto layout on “Frame 1” and then apply the following settings using the Design panel: Horizontal resizing: Fixed width Vertical resizing: Fill container W (width): 1000

You’ll notice that the logo now snaps to the top left. This is because “Desktop - 1” is no longer its parent, so it doesn’t have to respect its Auto layout rules anymore. “Frame 1” is now the parent of “Logo”, and “Desktop - 1” is now the parent of “Frame 1”, and both must now respect the rules of their new parents.
Step 6: Renaming “Frame 1”
Double-click on “Frame 1” in the Layers panel ( command + R / ctrl + R ), type “Container”, then tap return to confirm its new name. Renaming arbitrary-sounding layers to something more specific is a healthy habit that we should adopt early on.

Step 7: Setting Up a Layout Grid
“Container” will utilize a three-column Layout grid. Let’s set this up now so that we can better visualize the container’s bounds (which, currently, are unknown unless we select the container). Alternatively, we can tap shift + O to “Show outlines”, but we need a Layout grid anyway, so let’s use this way for now.
Click on Layou