Designing and Prototyping Interfaces with Figma E-Book

Fabio Staiano

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 472

Veröffentlichungsjahr: 2023

Beschreibung

Are you a UI/UX designer eager to learn the art of creating compelling interfaces using Figma? Look no further! The highly anticipated new edition is here to transform your creative journey.

Explore Figma's latest features and delve into the power of variables and conditional Prototyping. Get ready to transform your static designs into dynamic, interactive prototypes, offering users and stakeholders an immersive experience. Stay at the forefront of design innovation with insights into integrating AI capabilities and optimizing your workflow with the latest Figma plugins. With user-centric design at its core, this book guides you through mastering design thinking, enabling you to tackle complex design challenges with ease. One unique aspect of this edition is its focus on effective communication. Learn how to convey your design vision clearly to both technical and non-technical audiences. In the rapidly changing world of UI/UX design, iteration is key. This book will teach you how to gather user feedback and iterate on your designs by creating interactive prototypes.

Whether you're new to Figma or a seasoned pro, this comprehensive guide equips you with the skills to create captivating interfaces, fosters creativity and problem-solving, and makes you an indispensable, forward-thinking designer.

Leseprobe

Designing and Prototyping Interfaces with Figma

Second Edition

Elevate your design craft with UX/UI principles and create interactive prototypes

Fabio Staiano

BIRMINGHAM—MUMBAI

Designing and Prototyping Interfaces with Figma

Second Edition

Copyright © 2023 Packt Publishing

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 embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Senior Publishing Product Manager: Larissa Pinto

Acquisition Editor – Peer Reviews: Jane D’Souza

Project Editor: Namrata Katare

Content Development Editor: Soham Amburle

Copy Editor: Safis Editing

Technical Editor: Karan Sonawane

Proofreader: Safis Editing

Indexer: Pratik Shirodkar

Presentation Designer: Rajesh Shirsath

Developer Relations Marketing Executive: Sohini Ghosh

First published: March 2022

Second edition: December 2023

Production reference: 1211223

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK.

ISBN 978-1-83546-460-1

www.packt.com

Contributors

About the author

Fabio Staiano is an experienced Interface Designer and Figma Community Advocate from Italy. After having been part of the Italian creative agency Geko for several years, he later became a company partner, creating digital products for well-known brands and running local events for the creative community. He then began his career in Education in 2016, at The Guru Lab, teaching students about user interface and web design. In 2019, eager to embrace new horizons, he honed his development skills at the Apple Developer Academy, specializing in frontend development while launching various apps and boilerplate projects. Now, as a consultant for IT projects, he provides tailored solutions, and continues to educate at design academies. His journey embodies a fusion of design, education, and advocacy, showcasing his enduring commitment to his craft and the wider design community.

To my family, to whom I owe everything.

Special thanks to Gerel Burgustina, Fabio Di Corleto, and Alessia Saviano, for their precious contribution to the project.

About the reviewer

Reony Tonneyck has been a designer for 15 years in various domains, such as Cybersecurity, Education, and Data Analytics. Most recently, he led design systems at Khan Academy. Apart from that, he has also led design system efforts at multiple start-ups, alongside leading product design and contributing to front-end development.

Figma is where he found a new home within the design community. Eventually, he co-founded Figma’s DC area community group for his “passion project” and proudly became an official Figma Community Advocate.

I couldn’t have contributed to this book without my wife putting my son to bed each night.Thank you, Adalia.

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask questions to the author, and learn about new releases – follow the QR code below:

https://packt.link/figma

Contents

Preface

Who this book is for

What this book covers

To get the most out of this book

Get in touch

Part 1 Introduction to Figma and FigJam

Exploring Figma and Transitioning from Other Tools

What is Figma?

Why Figma?

Creating an account

Choosing the right plan

Desktop app vs web app

Setting up Font Installer

Transitioning to Figma from Sketch and Adobe XD

Coming from Sketch

How difficult is it to go from Sketch to Figma?

Coming from Adobe XD

A quick final thought

Exploring the welcome screen

Recents

Drafts

Community

Teams and projects

Figma and FigJam files

Account and notifications

Summary

Structuring Moodboards, Personas, and User Flows within FigJam

Exploring ideas and collaborating in FigJam

Exploring FigJam

A – Select and Hand tool

B – Marker

C – Sticky Notes

D – Shapes and Connectors

E – Text

F – Sections

G – Tables

H – Stamps and Reactions

I – Widgets, Stickers, Templates, and more

Brainstorming with others

Moving to the next step

Creating moodboards and personas in FigJam

Research phase

Conducting competitive analysis

Starting a moodboard

Creating user personas

Building user flow in FigJam

The golden path

Be the user

Summary

Getting to Know Your Design Environment

Starting a new design project

Design files

Frames and groups

Interface overview

Getting used to the toolbar

Main tools

A – Menu

B – Move

C – Scale

D – Frame

E – Section/Slice

F, G, H, I, J, and K – Shapes

L – Place image/video…

M – Pen

N – Pencil

O – Text

P – Resources

Q – Hand

R – Comment

Settings and more

S – File title

T – active users

U – Share

V – Dev mode

W – Present

X – Zoom/view

Quick shortcuts

Exploring the left panel

Layers and Pages

Assets

Exploring the right panel

Design

Prototype

Inactive state

With an Active selection

Help Center

Summary

Wireframing a Mobile-First Experience Using Vector Shapes

Evolving the idea to a Wireframe

What is a wireframe?

Why mobile-first?

Playing with Shapes in Figma

Basic shapes

Combining shapes

Advanced vectors with the Pen tool

What are vector graphics?

Discovering the Pen tool

Vector networks

Developing the app structure

Flow to skeleton

Shaping the interface

What’s next?

Summary

Part 2 Exploring Components, Styles, and Variants

Designing Consistently Using Grids, Colors, and Typography

Getting started with Grids

Grids are everywhere

Guides and layout grids

Working with Typography, Colors, and Effects

Typography matters

Choosing a Palette

A – Color modes

B – Blend modes

C – Color palette

G – Eyedropper tool

H – Color models

I – Color styles

Creating effects

Introducing Styles

Preparing your file

Creating and managing grid styles

Creating and managing text styles

Creating and managing color and effect styles

Summary

Creating a Responsive Mobile Interface Using Auto Layout

Introducing auto layout

What is auto layout?

A – Direction

B – Gap

C – Padding

D – Alignment

Adding, removing, and rearranging elements

Nesting auto layout

Resizing and constraints

Resizing elements

Differences with constraints

Applying auto layout to our interface

Shaping a button

Completing the view

Summary

Building Components and Variants in a Collaborative Workspace

Creating and organizing components

What are components?

Building a view using components

A – top navigation menu

B – main carousel

C – content cards

D – repeated rows

Extending components with variants

Why use variants?

Setting up our Content Detail view

Implementing variants

Multiplayer mode, libraries, and version control

Working with multiplayer features

Managing libraries

Preserving your work with version history

Summary

User Interface Design on Tablet, Desktop, and the Web

Discovering responsive design

Design to code with fluid layouts

Mobile first

Adjusting the interface for tablets

Introducing breakpoints

Login view

Sign Up view

Home view

Content Detail view

Adjusting the interface for the web and desktop

Scaling up to the web and desktop

Polishing details

Summary

Part 3 Prototyping and Sharing

Prototyping with Transitions, Smart Animate, and Interactive Components

Mastering transitions and triggers

Moving between frames with transitions

Exploring triggers

On click/On tap

On drag

While hovering

While pressing

Key/Gamepad

Mouse enter/Mouse leave

Mouse down/Mouse up

After delay

Animating with smart animate

What is smart animate?

Getting advanced with smart animate

Structuring interactive components

What are interactive components?

Creating interactive components

Creating interactive overflows and overlays

Making our view scrollable with overflows

Creating interface overlays

Summary

Testing and Sharing Your Prototype in Browsers and Real Devices

Viewing your interactive prototype

Running prototypes on desktop/web

Using the inline preview

Running the prototype on a smartphone/tablet

Sharing your prototype with others

Linking the prototype and managing permissions

Embedding the prototype

Working with feedback and reviews

Viewers and comments

Structuring flows

Advanced user testing

Summary

Exporting Assets and Managing the Handover Process

Exporting from Figma

What formats are supported?

Single- and multiple-asset export

Exploring Dev Mode

Switching to Dev Mode

Overviewing the file

Design to code

Extending Dev Mode

Handing over the project for development

What’s next?

Documenting, reiterating, and improving

Summary

Discovering Resources, Plugins, and Widgets in the Figma Community

Exploring the Figma Community

Accessing and publishing to the Figma Community

Starting off with FigJam and templates

Finding useful resources

UI kits and design systems

More design resources

Extending Figma with plugins

Running and managing plugins

Suggested plugins

Iconify

Content Reel

Clay Mockups 3D

Contrast

LottieFiles

Speeding up your flow with AI

FigGPT

Figma Autoname

Wireframe Designer

Magician

Using widgets in Figma and FigJam

Understanding the difference between widgets and plugins

Suggested widgets

Checklist (Figma/FigJam)

Jira/Asana (Figma/FigJam)

Giphy Stickers (Figma/FigJam)

Jambot (FigJam)

Summary

Going Advanced with Variables and Conditional Prototyping

Understanding variables

When to use variables

Variables, collections, and modes

Going responsive and multilingual with variables

Pushing further with conditional prototyping

The logic behind conditional prototyping

Advanced prototyping with variables and conditionals

Summary

Other Books You May Enjoy

Index

Landmarks

Cover

Index

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 have decided 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 and 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 Figma Community resources such as templates and plugins. As you progress, an advanced chapter will introduce you to using variables and conditional prototyping to add a higher level of interactivity and functionality to your designs.

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 Figma.

Who this book is for

This book is tailored for aspiring UI/UX designers eager to dive into Figma, as well as established designers aiming to transition to Figma from other design tools. It will guide you through the comprehensive process of creating a robust prototype for a responsive interface, harnessing all the tools and features that Figma has to offer. Hence, this book is ideal for UX and UI designers, product and graphic designers, and anyone looking to thoroughly understand the complete design process from the outset.

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 in Browsers and Real Devices, covers all the ways to view and test an interactive prototype, as well as how to 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 Dev Mode.

Chapter 12, Discovering Resources, Plugins, and Widgets in the Figma Community, covers the Figma Community and how to navigate it to locate the right files, widgets, and plugins that can improve your design workflow, side by side with AI-based add-ons.

Chapter 13, Going Advanced with Variables and Conditional Prototyping, introduces you to variables and conditional prototyping in Figma, aiming to add more interactivity to your designs, and making your prototypes more dynamic and functional.

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.

Important notes appear like this

Get in touch

Feedback from our readers is always welcome.

General feedback: Email [email protected] and mention the book’s title in the subject of your message. If you have questions about any aspect of this book, please email us at [email protected].

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 reported this to us. Please visit http://www.packtpub.com/submit-errata, click Submit 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 [email protected] 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 http://authors.packtpub.com.

Share your thoughts

Once you’ve read Designing and Prototyping Interfaces with Figma-Second Edition, 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.

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application. 

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the link below

https://packt.link/free-ebook/9781835464601

Submit your proof of purchaseThat’s it! We’ll send your free PDF and other benefits to your email directly

Part 1

Introduction to Figma and FigJam

In this part, we’ll introduce you to Figma and take the first step in using it by building your first wireframe. Also, we will be exploring FigJam, which is a collaborative space where you can run a whole design process.

This part comprises the following chapters:

Chapter 1, Exploring Figma and Transitioning from Other ToolsChapter 2, Structuring Moodboards, Personas, and User Flows within FigJamChapter 3, Getting to Know Your Design EnvironmentChapter 4, Wireframing a Mobile-First Experience Using Vector Shapes

1

Exploring Figma and Transitioning from Other Tools

Whether you are taking your first steps in design or already have some experience in the field, the tool you choose significantly influences your design process and creative expression. It’s not just about knowing all the functions for professional use; it’s also about aligning with the tool’s philosophy, recognizing the benefits it offers, and ensuring it supports your growth as a professional. Here’s where Figma shines. A standout feature of Figma is its multiplayer functionality, which allows real-time collaboration and fosters a seamless workflow between designers. This aspect, among others, sets it apart in the competitive landscape of design tools, aligning well with the professional growth and collaborative spirit inherent in the design community.

Figma is one of the most advanced design tools available, continually introducing new features and enhancements. This commitment to advancement has transformed Figma into more than just a tool—it’s an indispensable assistant for numerous designers. In this chapter, you will learn how Figma manages to consistently push the envelope and why it has become the favorite tool for many in the design community.

Figma is open to everyone and very flexible in many ways, allowing for personalized usage and adaptability to various design needs. It offers a variety of plans, including a free one, which is perfect for beginners in design and with no huge limits. Figma also has web and desktop applications, each of which has its own benefits. This chapter contains detailed information about all of these and will help you to make your own choices. Here, you will also learn how to switch to Figma from other tools, namely Sketch and Adobe XD.

After that, we will look at how Figma presents you with a welcome screen, where you will explore all the buttons, toolbars, and areas, such as drafts, teams, projects, and Community. It may seem overwhelming at first, but don’t worry; we’ll go over all the topics step by step. So, by the end of this chapter, you’ll be ready to start putting Figma into practice!

In this chapter, we are going to cover the following main topics:

Introducing Figma and its missionThe difference between the desktop and web appsTransitioning to Figma from Sketch and Adobe XDEverything about the welcome screen

What is Figma?

You may have already heard about Figma, a powerful real-time collaborative tool known for its versatility in the design community. If you’re new to this tool, get ready to learn what Figma is and what you need to know before using it.

Figure 1.1: Figma’s icon

One of the most remarkable advantages of Figma lies in its accessibility. With the starter plan, you can use the majority of the tool’s features without incurring any costs; all you need to do is go to figma.com and create a personal account.

You can download the Figma desktop app on your computer, but it also runs just as well in a modern web browser, allowing you to use it on any operating system: Windows, Mac, Linux, or even ChromeOS. Since Figma is cloud-based, you need to be connected to the internet to keep the auto-saved changes in your file. However, if you lose your internet connection and continue working, Figma will store every edit in your local cache. So, once you are back online, all the changes in your file will be synced immediately.

Why Figma?

There are many design apps available on the market right now that can be used to solve any kind of creative challenge, but Figma is surely the most popular at the moment. There are many good reasons for this. Let’s talk about some of them:

First, Figma allows designers and other teammates to work simultaneously in real time, which takes the collaborative workflow to a whole new level. This powerful feature makes Figma stand out among other tools because it improves not only design work but also the team collaboration process itself. “Collaboration is hard. We make it easier” is one of Figma’s fundamental principles.Second, Figma has succeeded in bringing together a whole suite of design tools to provide an all-in-one solution. Figma covers just about everything you need to create a complex interface, from brainstorming and wireframing to prototyping and sharing assets. In addition to this, Figma goes beyond the design side of building a product and generates CSS, iOS, and Android code for developers to use.Finally, Figma is not only a design app but also a community platform for sharing ideas and solutions. Designers from all over the world use Figma, not only for interfaces but also for creating vector illustrations, graphic design for digital media, and team-building activities. You can even play board games in Figma; how crazy is that?! Yes, the Figma Community can definitely inspire you with tons of creative design projects, but it can also help you simplify your workflow by providing plugins and widgets created by other community members. You can even develop your own resources and share them with others!

Now you can see why Figma is a great tool, built for designers who want to stick to an effective and efficient workflow. However, keep in mind that neither Figma nor other tools will magically turn you into a good designer. Mastering a tool is not part of design, but it can save you time that you can reinvest into research and UX problem-solving.

Excited? Time to dive in and see it in action!

Creating an account

The first thing you need to do before using Figma is to sign up at figma.com. On the home page of the site, click the Sign up button and create an account with your email address and a password of your choice, or simply register using your Google account. That’s it.

Figure 1.2: The Welcome popup

After registration, a few pop-up messages might appear with suggestions for creating a team. We will talk about teams later, but for now, just skip it and go straight to the Welcome screen.

Choosing the right plan

As mentioned earlier, you can use almost all of Figma’s features while staying on the free Starter plan. This plan allows you to have unlimited cloud storage to keep your Figma and FigJam drafts, with unlimited pages and viewers, plus some additional advanced features, such as one team with three files, unlimited editors, and 30-day version history. This is more than enough if you are just making your first steps in UX/UI design or working on your own. You can be sure that there will be no hidden fees and you won’t be forced to sign up for an expensive premium service.

If a Starter plan is not enough for you, Figma offers a few upgrade options: Professional,Organization, and Enterprise.

Figure 1.3: Plans chart

The Professional plan is perfect for small to medium-sized teams and allows you to have unlimited team projects, unlimited version history, shareable team libraries, Dev Mode, and custom file permissions. It can be billed monthly or annually – your choice.The Organization plan is suitable for larger or multiple teams and, in addition to all the benefits of Professional, provides file branching, advanced security, private plugins, shared fonts, and design system analytics. This plan is billed annually only.Lastly, Figma offers the Enterprise plan, tailored for sizable corporations with specific production and security requirements.

Note:

If you are a student or an educator, you can apply for a free Figma Professional license here: figma.com/education.

Once you’ve created your account, you can immediately start using Figma from any web browser you have. Google Chrome, Firefox, Safari, or Microsoft Edge—all of those work great with Figma. So, you can continue to use it on the web or download the desktop app if your computer is running on Windows or macOS.

Head over to figma.com/downloads if you prefer to have the desktop app (which has no exclusive features but better tab management and native support for local fonts). We’ll see more about the differences between the two in the next section.

Desktop app vs web app

In fact, there are no technical differences between Figma’s desktop and web applications—both give you almost the same experience. Figma won’t open when you’re offline whether you’re using a desktop app or a web app. So, what’s the point of downloading the application instead of using it in your favorite browser?

Figure 1.4: Web app and desktop app

If you prefer to minimize distractions in the environment while working on projects, you can go for the Figma desktop app. In addition to the clean interface of the app, you don’t have to worry about all the other open tabs you might have in your browser, which could cause some crashes or slowdowns. Plus, with an actual native app, you can access the features of your operating system, such as setting up custom shortcuts or, on a Mac, quickly switching between apps using Cmd + Tab, or Alt + Tab for Windows. If you have an Apple silicon CPU, there are some performance advantages to using it as well.

One key difference between the web and desktop apps is the access to local fonts. In the desktop app, once installed, you can use all of your local fonts. However, in the web app, you only get access to Google Fonts (also available in the desktop app through the Preferences menu), and your local fonts won’t appear in the list.

Setting up Font Installer

Fortunately, there’s a workaround for accessing local fonts in the web app. Go to figma.com/downloads and download and install the macOS or Windows version of Font Installer. This quick step enables you to use all your favorite local fonts in the web app too. After installing the app on your computer, you can still access the Figma web app through your account and work with your files there. Figma will automatically save and sync all your changes across both versions, allowing you to work on your files even outside of your personal computer.

Whether you’ve chosen the web browser or the desktop app, it’s time to give it a try, which you’ll do very soon. If you have design files in other tools and wish to transfer them to Figma, you can follow the instructions in the next section.

Transitioning to Figma from Sketch and Adobe XD

This part of the chapter will be useful if you are not new to design, and you are thinking about switching to Figma from other tools. Switching to a new tool can be tricky and stressful, even if the transition seems smooth or your previous tool looks similar to the new one. Nobody likes to sacrifice an already-established and familiar routine for the sake of something risky and unfamiliar, something that will have to be explored and mastered all over again. But being a digital designer means adjusting to new technologies, tools, and specifications every day. In this part, you will find detailed instructions on how to switch from Adobe XD and Sketch to Figma as painlessly and quickly as possible. So, let’s start without any hesitation.

Coming from Sketch

Sketch was a revolutionary tool that completely changed how we design today. It managed to combine everything that designers needed to create a UI in a simple and fast way. Designers used whatever tools they installed to create the UI, such as Corel, Illustrator, and Photoshop. Sketch was completely focused on the UX/UI-creating process, getting rid of everything unnecessary and providing a clean, simple, and ultra-fast tool.

Figma has taken this a step further by offering real-time collaboration and speeding up just about any challenge a designer might face. Be assured that you are making a great choice having decided to give it a try!

How difficult is it to go from Sketch to Figma?

The good news is that you don’t have to worry about seeing a completely unfamiliar experience in Figma. Once you first open Figma, you can easily identify most of its features. Of course, there are still major differences between Sketch and Figma. Some of them will be completely new to you, but you will learn everything step by step in this book.

So, let’s say you have a ton of projects created in Sketch. How do you transfer all the data from one tool to another? Unfortunately, Sketch doesn’t have a magic button that says “Export to Figma”—no one wants users to leave their ecosystem. But don’t worry, you have an import function in Figma, right on the first screen!

Figure 1.5: Import function

Just click on Import, select a .sketch file on your computer, and you’re done. Alternatively, if you’ve already opened a new design file, access the menu bar at the top left, by clicking the Figma logo, then click File | New from Sketch File.

The loading time estimate will change depending on the size and complexity of the file. But after this simple operation, you will end up with a converted, fully working Figma file with all your Sketch pages, components, and layers. Nevertheless, no software automation is error-free, so the results of this transition may not be perfect.

If you convert simple shapes, vectors, and texts, you’ll find everything as it should be in Figma. But if your source file contains a complex interface, or even a complete design system, it can take some time to create a satisfying Figma file. Sketch symbols will be converted into Figma components without any additional manipulation. But you will need to recreate styles and then apply them to your components to restore the original library. It is also better to double-check the entire file, clean up, reorganize layers, and so on.

Note:

Copy-pasting individual layers or artboards also works if you prefer to migrate manually, or you just need a few elements from the source file.

Coming from Adobe XD

After Sketch’s revolution in the process of creating UIs, similar design tools began to come up in the market. Adobe upgraded Photoshop with artboards and additional interface design tools, but that still didn’t help it gain popularity among interface designers. Therefore, the company released Adobe XD, an essential and simple tool built specifically for UX/UI. In fact, XD’s standout line was its commitment to experience design.

The competition between Sketch and XD was quite intense from the beginning. Adobe XD did not have the same wide range of features as Sketch. But it was constantly updated and, most importantly, was included in the Creative Cloud subscription. It has also been integrated with other Creative Cloud software, such as Illustrator and Photoshop, making working with vectors and images easier than ever before.

When Figma was released, it managed to simplify everything from the ground up and speed up the workflow with collaboration features, variants, advanced prototyping, and auto layout. Now Figma is a driving force among design tools; it sets trends and introduces new ones.

So, now you may be wondering how easy it is to migrate all your files from the entire Adobe ecosystem to Figma. Well, this can be tricky since Figma doesn’t have an import function for your .xd files like there is for Sketch.

The complexity of the transition from XD to Figma really depends on the content of the source file. If you don’t need to transfer components, styles, or even raster images (JPEG, PNG, and so on), the fastest way is to copy and paste artboards individually from XD to Figma, or export elements in SVG format to import them into Figma.

The end result of these manipulations will be visually similar to the content from the original file, but the functionality from one tool to another will not be transferred. In most cases, this is not enough, and you will have to spend additional time manually rebuilding the base, renaming and organizing layers, creating components and styles, and prototyping your interface.

If you can’t just let your old projects go, or you don’t have time to rebuild the file to make it correct for use in Figma, there is an unofficial workaround. Go to magicul.io and select the from Adobe XD to Figma option in the converter.

Figure 1.6: XD to Figma converter

After uploading the .xd file to the website, you will have a working .fig file with styles and components, ready to be imported into Figma. Sounds cool, but the service is not free. You will have to pay for each file you want to convert. Is it worth it? Up to you, but it surely is a time-saving solution.

A quick final thought

Transferring your designs to Figma may not always be easy, but with the right amount of time and patience, it is certainly doable. On a long-term project, you won’t regret your transition because Figma helps recover any time lost, improving your daily tasks with more unique features available.

However, migration is not always the only and most convenient solution. Switching to a new tool does not mean transferring everything that you have done until today.

You don’t have to say goodbye to Sketch and Adobe XD forever. Instead, you can keep them beside Figma, ready to open your old projects for quick changes if needed.

Now that the tricky transition is done, it’s time to focus your attention on Figma and take a closer look at it!

Exploring the welcome screen

Whenever you open Figma, the first thing you see is the file browser. This is your personal hub with a huge amount of information and functions. It may take some time to learn everything that is presented on this screen, but at the end of this section, you’ll know all about its functionalities.

Figure 1.7: Welcome screen

Recents

If you have already used Figma before or you have just transferred some files from another tool, you’ll see all of your most recent Figma and FigJam files. If you are just starting Figma for the first time, you may be confused by some files already appearing there. Don’t worry, no one hacked your account; those are simply some pre-existing example files provided by Figma itself.

As a rule of thumb, Recents in the left sidebar shows you all the files and prototypes that you’ve recently opened or edited. This area includes files and prototypes from your drafts, teams, and any files you opened. You can only see recent files from the account you are currently using, not ones from other Figma accounts, if you have more than one.

Drafts

Let’s now take a look at Drafts. Despite the obvious title, this page is more than just a collection of all your preliminary files. According to the pricing plans, there is no draft limit, not even on the Starter plan. This way, you can create as many files in Drafts as you like and keep all of them in the cloud.

The main difference between Drafts and a regular team project (like a folder) is access restrictions. This means that no one can view your draft files unless you share a personal link with them. As your personal space, Drafts lets you play with Figma, draw mock-ups, and test ideas without worrying about others seeing them. When you’re done with the design file in Drafts, you can immediately move the draft file to a team project at any time. This action unlocks multi-editor capabilities for your file.

Community

Figma’s Community feature is a place for all creators to share their design files, widgets, and plugins with others. It’s a big topic that I’ll help you dive into more. I know it sounds exciting, but it’s better to stick to the basics for now. We’ll get back to this in Chapter 12, Discovering Resources, Plugins, and Widgets in the Figma Community, for a close look.

Teams and projects

Figma wouldn’t be Figma without its collaborative core. It succeeded in understanding the designer’s struggle and came up with a brand-new way of working with others. Since the beginning, its focus has been to simplify this experience, making teamwork as easy as being in the same room, editing the same file.

As stated earlier, Drafts is a safe place where you can freely follow your inspiration and test your ideas. But when that folder starts to get messy, which happens very soon, it’s time to move on to teams, where you can better organize your design files. Moreover, Teams, unlike Drafts, are about collaboration. You can invite an unlimited number of viewers to your file in Drafts, but not editors (if you try to do this, you’ll be prompted to move it to a team). Once you create or move your file to a team, you can add as many editors as you want, and you can all work on the same file in real time.

As you create your Figma account, you’ll be prompted with your own personal team, ready to host up to one project, three Design files and three FigJam boards. Here’s a simple breakdown: a team is your collaborative space; a project, just like a shared folder, helps organize your files within a team; and files are your actual design and FigJam documents. Each design file can contain one or more pages (up to three for a Starter plan).

Figure 1.8: Visual structure of your account

We’ll use the preset personal team soon as a playground for our step-by-step project, so you don’t have to add anything new. But if you need to create a new team at a later point, follow these steps:

In the left column, click on Create new team.Select a name for your team and click Create team.You’ll be asked to add collaborators to the team by entering their email addresses. Collaborators can instantly view, open, or edit any new file you create within this team. They can also create new files themselves unless you manually change the permissions. You can skip this part and add people to your team whenever you want.The final step is choosing a plan. The free starter plan won’t be available if you already have one.

Once your team is set up, you should see it on the left sidebar of the welcome screen, ready to be used. Clicking on it will take you to your team’s private space and selecting an individual project will lead you to explore files within it and view a quick recap of it, plus contributors and used files.

Figure 1.9: Project details

If the Free plan doesn’t cover your needs, or you want to collaborate with others on multiple projects and files, there is a Professional team option for you. By choosing this plan, you can have an unlimited number of projects, files, and viewers, plus shared libraries in one team. But be careful; each editor in a Professional team needs to pay for access, even if they already pay for a different Professional team on their own.

Figma also has options for large companies that have multiple products offering Organization and Enterprise plans. Every Org/Enterprise team has access to Professional teams’ functionality, as well as an unlimited number of teams and shared libraries across all these teams. Companies on those plans will have their Figma account linked to the organization’s email address. Every file, including drafts created by members of this team, will be owned by the organization. Moreover, they get access to other extra, advanced features, such as branching and merging files, private widgets and plugins, shared fonts, improved security, and library analytics.

Figma and FigJam files

In this section, you will learn about two types of files that you can create right from the welcome screen in Figma: Design files and FigJam boards. FigJam is a whiteboarding tool that you can use with your team to brainstorm, build flows, organize your ideas, and even play activities! It’s a very helpful tool, especially for working on the early phases of a project.

Figure 1.10: New file options

Before the release of FigJam, many professionals relied on dedicated tools designed for digital whiteboards and diagrams. Some attempted to use Figma itself for these functions but found it challenging for such tasks. Since Figma already managed to get us to ditch a lot of tools by bundling everything into a single solution, the introduction of FigJam seemed like the right way to fill the last gap. FigJam became a different space with a completely unique interface and new features.

Plus, it is still a part of Figma, and this makes it very easy to switch from one to another as if they were a unified experience.

Figure 1.11: FigJam file

We’ll briefly introduce FigJam and you’ll learn more about it in the next chapter. For now, let’s take a look at one more thing on the welcome screen.

Account and notifications

It seems that every function placed on the top toolbar of the welcome screen is easy to understand. However, there is still something to clarify before moving on to practice.

Starting from the top-left search bar, Figma’s search functionality is very powerful, as it can search through your personal and shared files, even within file content, as well as Community templates, widgets, and plugins.

There is a bell icon right next to your account name. This is where you will see all your personal notifications about invitations to shared files and so on. It’s important to always keep an eye on this. Finally, by clicking on your name or avatar, you can access all settings, add accounts, log out, and more.

Figure 1.12: Search, notifications, and account

Now, can you say that you are familiar with the welcome screen? If so, you’re finally ready to sail!

Summary

As you can see, Figma is a revolutionary design tool that allows creators to take their workflows to the next level. It covers every need a designer could ever have. Therefore, it is equally perfect for individual workers as well as teams of small and large companies. Through this approach, Figma is gaining popularity among designers all over the world. Now you can become a part of this community, exchange experiences, and contribute to its growth. No other tool has achieved this level of user loyalty!

In this chapter, we learned about the ideology of Figma and its benefits over other tools. You also created an account and found out about Figma’s plans and the difference between its desktop and web applications. Perhaps you even managed to switch from another tool! We also explored Figma’s welcome screen, so now you know about some primary elements and sections, and what stands behind those.

In the next chapter, our journey will become even more exciting! We’ll learn how to use FigJam in practice by structuring personas and creating user flows for your first file in Figma!

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask questions to the author, and learn about new releases – follow the QR code below:

https://packt.link/figma

2

Structuring Moodboards, Personas, and User Flows within FigJam

Now that you have an understanding of Figma as a design tool, and you know about some of its basic functionality, you are ready to dive into learning it by starting to do it. This is a reasonable and logical next step, since the best way to learn is to practice as much as possible. As mentioned in the previous chapter, Figma now consists of two types of files – design files and FigJam boards. You will start your practice with the second one, although it is a recently released brand-new feature. You might think that FigJam is Figma’s complementary tool, but let’s take a look at the reasons why you should start with it and not vice versa.

First, FigJam is much easier to use; consider it as a warm-up before you start practicing with more complex tools in Figma. Its functionality doesn’t even come close to what the “design editor” has, since it was created for a different purpose, which we will talk about later. Second, it’s important to study all stages of the design process, many or even most of which are not related to the creation of screens or even a wireframe. Before doing this, you must go through several brainstorming sessions with your team, collect and analyze data, get to know your user, and so on. In this chapter, you’ll learn about these foundational activities, collectively referred to as “pre-design research.” This encompasses all the preliminary work that informs your design decisions, and you’ll practice each of these stages using FigJam within Figma.

This chapter may seem tricky and confusing to you because it’s filled with a lot of information, and of course, it can be overwhelming, especially if you are new to design. Just know that the deeper and better you understand the basic principles of research and analytics in design, the easier it will be for you to get started with the user interface. So, there is no doubt that this chapter deserves your attention, and by the end, you will have a clear idea of what to consider when working with a real prototype.

In this chapter, we are going to cover the following main topics:

Gathering and analyzing data in a collaborative environmentCreating a moodboard and designing user personas in FigJamDefining a functional flow with FigJam tools

Exploring ideas and collaborating in FigJam

You were briefly introduced to FigJam in the previous chapter, but now it’s time to learn how to use it and for what purposes. You will be guided through a complete workflow of collecting, analyzing, and processing data. This is a necessary part of a designer’s work before building any prototype. All designers, freelancers, and those who work in agencies or in-house should devote a significant amount of their working time to the research stage. It will be a very challenging but interesting journey, and FigJam will be our main tool, with our aim being to learn it successfully. Before gathering any data, let’s start with an overview of the FigJam interface.

Exploring FigJam

As you already know, FigJam is completely different from Figma’s design file, although it is still implemented in Figma itself, so we don’t need to install anything or create another account to start using it. It’s a very easy-to-use tool that is as simple as using pen and paper while also allowing collaboration. Before diving into FigJam together, try to explore it yourself, and feel free to play with it in different ways to find your own unique approach, as if you were working on a personal notepad.

When you launch your first FigJam file – by clicking on the FigJam Board right on the welcome screen – you’ll already have an idea of what this tool really does. Basically, it’s a full-screen whiteboard that can be filled with ideas, notes, rich hyperlinks, images, even video, and so on. It’s that simple.

The entire interface of FigJam is intuitive and simple. You can immediately see all the available tools in its toolbar at the bottom of the screen, as shown in the below image.

Each tool offers specific properties for customizing the output, but you will soon find out that FigJam doesn’t have many options for colors, styles, and fonts. This is a conscious decision made by the Figma team because they don’t want you to waste time choosing the right typeface instead of thinking about the underlying idea. The point is that FigJam is not a tool for designing, and this is the main reason behind its simplicity. Anyone in a team can take part in the initial stage of the project, participate in brainstorming, and show a different way of thinking, which certainly helps to conduct more effective research.

Let’s now take a look at what each of these tools actually does:

Figure 2.1: FigJam’s toolbar

A – Select and Hand tool

Streamline your design workflow with the intuitive Select tool in FigJam. Activate it with a simple click, and you can effortlessly click and drag to select one or several elements, moving them freely within your workspace. For smooth navigation without altering element positions, switch to the pan (Hand) tool by clicking the hand icon in the toolbar. This feature allows you to glide across different areas of your design, ensuring a comprehensive view of your work.

An efficient alternative for quick canvas navigation is holding down the spacebar, which temporarily activates the pan tool. You can then click and drag to move around. Releasing the spacebar will revert you to the previously used tool, allowing for a seamless transition in your design process.

Keyboard shortcuts:

Press V to activate the Selection tool, press H for the Hand tool, or hold down the spacebar for quick panning across the board.

B – Marker

The Marker tool in FigJam offers a selection of colors and two thickness options for freehand drawing on the canvas. It’s ideal for expressing ideas visually in your workspace. Additionally, under the marker tool, you’ll find other useful tools (highlighters, tapes, and more), enhancing your ability to annotate, design, and collaborate within FigJam.

Keyboard shortcut:

Press M to select the marker tool.

C – Sticky Notes

Stick these anywhere on the canvas, as if you were doing it on a whiteboard, to quickly add notes or comment on something.

Figure 2.2: A shape and sticky note comparison

It’s common to wonder about the differences between shapes and sticky notes in FigJam, especially since both can contain text. Here’s a breakdown to clarify their differences:

Sticky notes:

Predefined width options: Choose from a range of fixed widths.Adaptive height: Height adjusts automatically to fit the text length.Author identification: Displays the author’s name, which can be toggled off.Flexible text alignment: Offers various text alignment options within the note.

Shapes:

Customizable dimensions: Users can adjust both the width and height manuallyDiverse applications: Suitable for a wide range of design purposesVertical text centering: Text within shapes is centrally aligned vertically

D – Shapes and Connectors

Effortlessly populate your canvas with the selected shape, or click on the right arrow to switch to a different shape, such as circles, rectangles, or triangles, along with more complex options. Every shape is easily resizable; simply drag its corners or sides to adjust its dimensions to your liking. In the same drawer, you’ll find connectors, which you can use to create connections between any objects on your canvas. Whether you’re linking text, shapes, notes, or components, this tool is versatile enough to link any element. Its magnetic feature ensures that it stays attached to an object’s side and follows it around the canvas. It has everything you need to create flow charts and mind maps in seconds.

E – Text

Add any text to your canvas using this tool. It is perfect for creating titles, paragraphs, and even clickable links.

Keyboard shortcut:

Press T to activate the text tool.

F – Sections

This tool allows you to easily create colored sections on your canvas by simply dragging a selection over any area. It’s an effective way to group various elements, greatly aiding in organizing your workspace.

Keyboard shortcut:

Press Shift + S to select the Section tool.

G – Tables

This tool is simple, as you may expect, and it lets you create tables by dragging to define an area on the canvas.

H – Stamps and Reactions

After clicking on this tool or pressing E on your keyboard, a selection wheel will pop up with two options in the center:

Figure 2.3: The stamp and emote wheels

The bottom one, stamps, contains all kinds of stickers that let you visualize your reaction and provide feedback, for example, with permanently sticking upvotes, downvotes, and more. If you switch to the top one, emotes, you will see a set of icons that will help you to express your live reaction. Select an emote, click on the canvas, and share your feelings in real time. Keep it pressed to trigger a flood of emotes. All those emotes appear temporarily and stay on the canvas only for a few seconds. You can also switch between emotes and stamps by hitting your E key repeatedly.

Among the emotes, there is one that is truly special – the chat bubble icon. This is not a simple temporary reaction but a fully functional live chat in FigJam, called cursor chat. By clicking on this icon, or using the / key (on non-US keyboards, this shortcut may differ), you can activate cursor chat mode; you will recognize it by the empty bubble attached to your cursor on the screen.