UX Design with Figma PDF

DESIGN THINKING SERIES UX Design with Figma User-Centered Interface Design and Prototyping with Figma ― Tom Green · Kevin Brandon Design Thinking Design Thinking is a set of strategic and creative processes and principles used in the planning and creation of products and solutions to human- centered design problems. With design and innovation being two key driving principles, this series focuses on, but is not limited to, the following areas and topics: User Interface (UI) and User Experience (UX) Design Psychology of Design Human-Computer Interaction (HCI) Ergonomic Design Product Development and Management Virtual and Mixed Reality (VR/XR) User-Centered Built Environments and Smart Homes Accessibility, Sustainability and Environmental Design Learning and Instructional Design Strategy and best practices This series publishes books aimed at designers, developers, storytellers and problem-solvers in industry to help them understand current developments and best practices at the cutting edge of creativity, to invent new paradigms and solutions, and challenge Creatives to push boundaries to design bigger and better than before. More information about this series at https://link.springer.com/ bookseries/15933. UX Design with Figma User-Centered Interface Design and Prototyping with Figma Tom Green Kevin Brandon UX Design with Figma: User-Centered Interface Design and Prototyping with Figma Tom Green Kevin Brandon Etobicoke, ON, Canada Georgetown, ON, Canada ISBN-13 (pbk): 979-8-8688-0323-9 ISBN-13 (electronic): 979-8-8688-0324-6 https://doi.org/10.1007/979-8-8688-0324-6 Copyright © 2024 by Tom Green and Kevin Brandon This work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of the material is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storage and retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known or hereafter developed. Trademarked names, logos, and images may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, logo, or image we use the names, logos, and images only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. The use in this publication of trade names, trademarks, service marks, and similar terms, even if they are not identified as such, is not to be taken as an expression of opinion as to whether or not they are subject to proprietary rights. While the advice and information in this book are believed to be true and accurate at the date of publication, neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors or omissions that may be made. The publisher makes no warranty, express or implied, with respect to the material contained herein. Managing Director, Apress Media LLC: Welmoed Spahr Acquisitions Editor: James Robinson-Prior Development Editor: James Markham Editorial Assistant: Gryffin Winkler Cover designed by eStudioCalamar Distributed to the book trade worldwide by Springer Science+Business Media New York, 1 New York Plaza, Suite 4600, New York, NY 10004-1562, USA. Phone 1-800-SPRINGER, fax (201) 348-4505, e-mail [email protected], or visit www.springeronline.com. Apress Media, LLC is a California LLC and the sole member (owner) is Springer Science + Business Media Finance Inc (SSBM Finance Inc). SSBM Finance Inc is a Delaware corporation. For information on translations, please e-mail [email protected]; for reprint, paperback, or audio rights, please e-mail [email protected]. Apress titles may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Print and eBook Bulk Sales web page at http://www.apress.com/bulk-sales. Any source code or other supplementary material referenced by the author in this book is available to readers on GitHub. For more detailed information, please visit https://www. apress.com/gp/services/source-code. If disposing of this product, please recycle the paper To Jim Babbage —Tom Green I would like to dedicate this book with my deep appreciation to family, friends, and students who have encouraged, challenged, and inspired me and laughed at my jokes. —Kevin Brandon Table of Contents About the Authors xvii About the Technical Reviewer xix Acknowledgments xxi Introduction xxiii Chapter 1: Learning the Figma Interface 1 Figma and the UX Process 3 The Figma Dashboard 4 Creating a Team in Figma 8 Access the Figma Community 12 Getting Help 14 The Figma Workspace 16 Adding Frames 19 Changing Frame Properties 23 Using the Properties Panel 24 Using the Color Picker 26 Gradients 29 Strokes 31 Using the Polygon Tool 32 Using the Layers Panel 35 Testing Your Work 39 Community Resources and Templates 40 vii Table of Contents Sharing 46 Dev Mode 50 Conclusion 51 Chapter 2: Adding Content to Figma Screens 53 Vectors and Bitmaps 54 Bitmaps and Figma 56 Scaling Factors 61 SVG Images and Figma 64 Figma and Video 66 Preparing Video for Figma 68 Typography and Figma 73 Text Properties 78 Font Pairing 79 Adding and Formatting Text in Figma 81 Your Turn 84 Adding a Grid 86 Adding the Header 87 Create the Hero Image 89 Creating the Explore Section of the Site 92 Adding Cards to the Design 94 Adding a Text File in Figma 97 Creating the Social Media Section 97 Adding the Images 99 Finishing the Web Page 102 You Have Learned 104 viii Table of Contents Chapter 3: Figma and the UX Process 107 What Exactly Is a Prototype 108 Determining the Platform 113 Building a Team in Figma 115 Creating a Team Project 118 Sharing and Collaboration 121 Figma and User Testing 126 Usability Testing vs. User Testing 127 Usability Testing Requires Context 129 Iteration and the “Messy” UX Design Process 132 Accessibility and Inclusion in Figma 136 Adding Plug-ins in Figma 138 Using the Accessibility Plug-ins 143 Using the Adee Color Contrast Tool 148 Explore Inclusion with Cards for Humanity 151 You Have Learned 153 Chapter 4: Creating UX Design Documentation 155 Using the Figma Presentation Mode 157 Brainstorming with FigJam 159 How to Use FigJam AI 163 Using the FigJam Drawing Tools 165 Using the Connector Tool 166 Adding Text to FigJam Objects 168 Adding Comments to a FigJam File 169 How to Add a FigJam File to Figma 171 Creating Personas 172 Create a Persona Using a Template 174 Editing a Persona Template 176 ix Table of Contents Creating a User Journey Map 180 Adding Touchpoints 185 Creating a User Flow Diagram 188 Feedback and Iteration 195 Your Turn: Create a User Flow Diagram in FigJam 197 Build the Chart in Figma 201 Add the Chart to Figma 201 You Have Learned 203 Chapter 5: Building Low-Fidelity Prototypes 205 What Is a Low-Fidelity Wireframe? 206 The Case for and Against Wireframing 208 Creating Wireframes 209 Wireframing and the UX Design Process 212 What Is a Content Wireframe? 213 From Content Wireframe to Lo-Fi Wireframe 219 Creating a Low-Fidelity Wireframe in Figma 221 Creating a Team Library 224 A Quick Word About Shared Libraries 228 Build the Wireframe Using a Shared Library 229 Create Wireframes Using a Wireframing Kit 232 Use the Wireframer Library 234 The Interactive Wireframe 241 Add Interactivity to a Wireframe 243 Testing an Interactive Wireframe 248 Your Turn: Wireframe a Login Sequence Using FigJam 250 You Have Learned 256 x Table of Contents Chapter 6: Building Medium-Fidelity Prototypes 257 Lean UX 258 Agile 259 Straight to Code 259 What Is a Medium-Fidelity Prototype 259 Choosing a Platform 262 Graphics and Figma 266 Installing and Using Imaging Plug-ins in Figma 273 Color Correcting Images in Figma 276 Manipulating Image Content in Figma 277 Masking in Figma 283 Fonts and Figma 285 Color and Figma 286 Create a Scrim Using a Gradient 290 Adding Effects to Graphics 297 Apply a Drop Shadow 297 Apply an Inner Shadow to Create a 3D Effect 299 Applying Blur Effects 301 Applying a Blend Mode to a Layer 302 Create a Mesh Gradient in Figma 304 Using Auto Layout in Figma 306 Your Turn: Create a Medium-Fidelity Mobile App Location Card 314 Create the Top Search Bar 317 Creating the Location Card 318 You Have Learned 325 xi Table of Contents Chapter 7: Interactivity Fundamentals 327 The Basics of Adding Interactivity in Figma 331 Create a Drag Interaction 335 Create a Hover Interaction 336 Create a While Pressing Interaction 337 Create a Component in Figma 338 Add States by Creating Variants 341 Adding Interactivity to a Component 344 Create Interactivity Using a Component 346 Your Turn: Create Interactivity Using Components and Variants 350 Create a Component for the Home Button and Create a Text Property 351 Create the Variant States for the Main Navigation Button 353 Design Each of the Three States for the Main Navigation Home Button 354 Apply Interactions to Each of the Three Button States 355 Add the Main Navigation Button to the Header of the Swiss - Home Page 357 Creating the Main Navigation Buttons 358 Adding the Header Navigation to the Adventures Page 360 You Have Learned 362 Chapter 8: Microinteractions in Figma 363 Interactivity and Motion 365 Playing with Time and Motion in Figma 371 Microinteractions Overview 372 The Principles of UX in Motion 373 Easing and Smart Animate 374 The Eases Available in Figma 376 Editing an Ease 378 xii Table of Contents Applying the Transformation Principle in Figma 381 Create a Dissolve Transformation 382 Create a Move Transition 384 Create a Complex Interaction Using Smart Animate 386 Create a Scrolling Behavior 389 Create Scrolling Content 390 Create a Scrolling Loop Animation 392 Create a Scroll Control 395 Applying the Obscuration Principle 397 Using a Blur to Obscure the Image 400 Your Turn 402 Create an Overlay Side Menu Interaction 403 Style the Overlay Side Menu Interaction 404 Create a Card Template Area Using Auto Layout 407 Create the Card Component Variants 408 Apply an Accordion Microinteraction to the Card Component 410 Add Content to the Card Instance 411 Add a Second Card 413 You Have Learned 415 Chapter 9: Design System Fundamentals 417 The Single Source of Truth 418 Where Do You Start? 421 Take Stock of What You Have 422 The Pattern Inventory 428 The Color Inventory 430 The Typography Inventory 432 The Asset Inventory 434 xiii Table of Contents Figma Design Tokens 436 Creating a Component Token 440 Figma Design Tokens and Variables 442 Organize the Variables 446 Applying Variables 449 You Have Learned 451 Chapter 10: Building Stuff 453 Building an Image Carousel 455 Create a Complex Carousel 460 Create a Spinning Carousel 465 Create Video Controls 470 Create Interactive Video Controls 476 Create a Progress Bar 481 Create a Shopping Cart with Local Variables, Conditions, and Expressions 485 Bonus Round: Create a Boolean Variable 500 Animations Using LottieFiles 503 Using Aninix to Create a Lottie Animation Using Figma 507 Converting an Aninix Animation to a Lottie File 512 Add Diversity with the Humaaans for Figma Plug-in 514 You Have Learned 518 Chapter 11: Developer Handoff 519 Handoff Starts with User Testing 520 Device Preview Using the Figma Mobile App 522 Using the Figma Presentation Mode for Sign-Off 528 What Is a Handoff? 532 xiv Table of Contents Preparing Assets for Handoff 535 The X Factor of Raster Images 542 Code Introspection 544 The Design/Build Iteration Cycle 551 You Have Learned 553 Conclusion 553 Index 555 xv About the Authors Tom Green is an Emeritus Professor of Interactive Multimedia through the School of Media Studies and IT at the Humber College Institute of Technology & Advanced Learning in Toronto, Canada. He has created over a dozen UX-based courses for LinkedIn Learning. One course – UX Design for Non-Designers released two years ago – has been completed by over 35,000 learners throughout the world. Tom has written numerous books on UX Design for Apress, Que, Pearson Education, and New Riders. Along with his work with LinkedIn Learning, Tom has developed video-based training courses for Infinite Skills, Envato, Video2Brain, and others. He was the Graphics Software expert with About.com and has written hundreds of articles and tutorials for a variety of magazines and websites over the past 20 years. Tom has spoken and lectured at conferences around the world and universities throughout China and the United States including the University of Wisconsin, the Central Academy of Fine Arts in Beijing, the Wuhan Institute of Technology, and Shenzhen Polytechnic. In his spare time, you can catch him hiking a local trail or paddling across a lake in Northern Ontario. xvii About the Authors Kevin Brandon started his career in the print industry and then transitioned into web design and user experience design. After completing a Master of Arts in Professional Communication, he entered higher education as a full-time professor at Humber College Institute of Technology & Advanced Learning in Toronto, Canada. Kevin has taught in various programs such as Graphic Design, Advertising, Multimedia, and Film and Television. He is an active Adobe Education Leader, collaborating with fellow educators around the world and learning about upcoming technologies. As a consultant Kevin has provided professional development sessions for teachers through Edge Gain Ltd. Kevin is married and has three sons. When not at work, you can find him enjoying walks with his family and his dog. xviii About the Technical Reviewer Judy Wood is an experienced Graphic and Multimedia Design Specialist, with more than three decades of helping clients and students creatively develop user experiences. She has extensive experience in higher education and instructional design and holds a master’s in Learning and Technology. A staunch proponent of lifelong learning, Judy embraces cutting-edge technology to ignite her students. xix Acknowledgments Tom, thank you for inviting me to write this book with you. It wouldn't have happened without your experience and hard work, and I am grateful. —Kevin Working with a co-author can be a tricky business. It is a lot like a marriage. Everything is wonderful when things are going well, but you really never discover the strength of a relationship until you get deep into it. Working with Kevin over the past several months has been an absolute joy. Kevin and I first crossed paths 20 years ago when we first met each other as faculty members of Humber College’s Faculty of Media and Creative Arts. As we moved through our careers, we were constantly leaning on each other to try new ways of preparing our students to enter into a Digital Media industry that was constantly undergoing fundamental change. I also discovered he has some serious design chops and took full advantage of his knowledge and skills over the years. It was only natural that I bring him in as co-author. Sowmya Thodur, our Apress production editor, is also due a huge acknowledgment. It is her job to babysit the authors and ensure the manuscript is delivered on time. I don’t use the term “babysitting” in the pejorative sense. Sowmya kept us on track and, when things got tough, was a shoulder to cry on. Finally, writing a book of this size and complexity means I hole up in my home office and generally become moody and difficult to live with as I mull over an exercise or order of a chapter. How my wife and life partner, Keltie, puts up with it I’ll never know, but it does work out in the end. —Tom xxi Introduction When we are asked to define the term “UX,” our normal response is: “What do you want it to mean?” This is not us being facetious. Ask ten people involved in the industry that same question, and the odds are pretty good you will get 15 different answers. Ask these same ten people what tool they use, and the answer is always Figma. Having been involved in Digital Design since the mid-1980s, we have seen new tools appear, and after a few years, the profession settles around a tool. That tool – think Photoshop – then becomes a standard in the industry, and its competitors fight over a small slice of the market. Figma has become the UX Design standard application. The fascinating aspect of that is the proposed acquisition of Figma by Adobe was scuttled due to worries that it would reduce competition. When Adobe and Figma agreed to stop the acquisition, Figma came out on top. Adobe killed its UX Design tool – Adobe XD – which meant Figma’s major competitor had left the market. As a result Figma shrugged and moved on. Figma’s strength has never really been its tool. Figma’s strength is its rabidly loyal community of designers and developers. The reason for that loyalty is Figma is equally as rabid in listening to its users. When it rolls out a new feature such as the new Dev Mode, it doesn’t just drop it into the app with a cheery “Here you go.” Dev Mode was a beta feature of Figma for a while, and not only did Figma pay close attention to how it was being used but the Figma Community provided feedback on the strengths and weaknesses of Dev Mode. When it was finally released, it was in the context of “Thanks for the feedback. Hope this is what you were looking for.” xxiii Introduction This book’s genesis started with a simple question that Figma also asks: “What’s missing?” For us, the answer was “Something that explains where Figma fits in the UX process.” A common misconception is that Figma is a UX Design tool that churns out the interactive apps which land in our browsers, devices, and tablets. This simply is not the case. Figma is a collaborative tool whose features span the entire UX process from concept to upload. The UX process has been considered a “team sport” where multiple skills are involved to create a project. This explains why this book is not your typical “Here’s how to create cool stuff in Figma” book. We follow the process, pointing out where the various features of Figma fit or can be used at each stage of the process and where the team fits. One other aspect of this book is that we had a huge amount of fun developing the exercises and examples in this book. The word “fun” is important because if learning is fun, what you learn will stay with you. Book Structure and Flow This is not a typical software book. There is no common project that runs throughout the book. Instead, each chapter contains a number of exercises and examples designed to give you experience with the core concepts and features of Figma. Then, in several chapters, we turn you loose with a “Your Turn” exercise. To take full advantage of the exercises, you will need to have, at a minimum, a Professional Figma account. The first two chapters walk you through the Figma interface and how content is added to your Figma projects. For example, we spend a lot of time in Chapter 1 explaining how teams are created and how to invite collaborators to join the team before we dig into the Figma interface. UX is a team sport and you never start work without a team. In the second chapter, we not only explain the various types of content that can be added to Figma but also how to prepare that content in other applications for use in Figma. xxiv Introduction Chapter 3 is an in-depth look at the UX process with an emphasis on where Figma fits and what features of Figma are designed to support each step of the process. The key takeaway from this chapter is UX Design is a messy process requiring the team to constantly test and iterate the hypothesis. We also get into User Testing, Accessibility, and Inclusion as a project moves through multiple iterations. Having been exposed to the fundamentals of Figma’s role in the UX process, the rest of the book focuses on specific aspects of the process. Chapter 4 is an in-depth look at where Figma fits into the Documentation process. Chapter 5 deals with low-fidelity prototypes such as wireframes and ends with you being asked to wireframe a login sequence using FigJam. Chapter 6 is an in-depth look at how the boxes and arrows of a wireframe become a medium-fidelity prototype as the content is added and the project starts coming to life. The next three chapters – 7, 8, and 9 – explore the most popular features of Figma: Interactivity, Motion, and Design Systems. We show how interactivity and motion are added using Prototype mode. These are demonstrated using practical examples and how to share your ideas and subject them to User Testing. Chapter 9 deals with a topic that is all the rage these days: Design Systems. We don’t explain how to create one because they are, quite frankly, complicated. Instead, we focus on the features of a Design System such as Design Patterns, Components, Typography, and Color. We also dig deeply into Figma Variables and the creation of design tokens. Hopefully you will come out of this chapter understanding the creation of a Design System is a methodical and time-consuming process that, when implemented, turbocharges the design process and makes life easier for the developers as they incorporate the tokens and assets into their work. Chapter 10 is named Building Stuff. The reason behind the word “Stuff” is less intimidating than Practical Projects for Figma. In this chapter, the intention is to give you the opportunity to put everything you have learned to this point to practical use and to further expand xxv Introduction your knowledge. This will become evident as you learn how to create a shopping cart using local variables, expressions, and conditionals to move values from one component to the next. We also show how to create a custom video controller, a video progress bar for a video destined to Instagram, how to swap components with each other, and where Boolean operations fit. The final chapter covers off what you need to know when the prototype is handed off to the development team. Finally, we are no different than you in that we are constantly learning more about what you can and cannot do with Figma. The constant stream of updates and feature additions to Figma makes this a pretty exciting time for all of us as we discover where Figma fits into the app and web design fields. Our final bit of advice for you is “The amount of fun you can have with Figma should be illegal. We’ll see you in jail.” xxvi CHAPTER 1 Learning the Figma Interface What is UX? Let’s consider this scenario. You push the glass door to enter a store and almost crash into it because it should be pulled to open it. It is not a good start to your shopping expedition. You have just had a bad user experience. Whether you know it or not, you have also formed a negative impression of the store before entering it. Here’s another we have all had. You are purchasing an item from a company’s website or app. You reach the end of the process, but the process fails as you finish entering the required credit card information. You enter it again. Same failure. You give it one more try. Same failure. At this point, you give up and leave your full shopping cart sitting there and move to another site or app. You have just had a bad user experience, and the company lost a customer and a sale. How about entering an elevator in your hotel (Figure 1-1) and figuring out how to get to your floor? Each of those bad experiences has a simple solution that turns it into a good experience. The door could have a small, noticeable sign above the handle that reads, “Pull.” The website’s shopping cart could indicate it requires dashes between the credit card numbers and the expiration date in the form of “m/y.” Those three examples are common UX issues. © Tom Green and Kevin Brandon 2024 1 T. Green and K. Brandon, UX Design with Figma, Design Thinking, https://doi.org/10.1007/979-8-8688-0324-6_1 Chapter 1 Learning the Figma Interface Figure 1-1. Which floor, please? UX is user experience, and those not in the UX field instinctively understand its meaning. Many of those in the business of UX tend to dilute the term to the point where whenever asked, “What is UX?”, our response is, “What do you want it to mean?” The reason behind this facetious response is the term has become confused with job titles for everyone involved, ranging from Researchers to Graphic Artists and Developers. So “What is UX?” There are two aspects to user experience. As Louie Morais of Wayfair explains, “User experience is composed of two parts: the Mission and the Process.” The Mission focuses on the User who will use the product. The whole purpose of the Mission is to make life easier for that individual to have that user continue to take advantage of the product, service, website, or app. 2 Chapter 1 Learning the Figma Interface The Process answers the next obvious question: “How do we do that?” The answer is the workflow from initial research to upload to the Apple App Store, the Google Play Store, or a web server. This process requires a lot of planning, brainstorming, software tools, user testing, and so on, with all of that moving straight to the final product with multiple changes and iterations. This explains why we regard the UX Process as a Team Sport. The space where the Mission and the Process intersect is where collaboration happens, and this is where prototyping software like Figma enters the discussion. Figma and the UX Process Figma is not a design tool. Figma fits squarely into that space where the Mission and the Process intersect. It is a prototyping and collaboration tool, and that will become glaringly obvious throughout the balance of this book. Collaboration is the heart and soul of Figma, and collaboration does not infer “design by committee.” In a collaborative environment, Figma encourages a constant flow of communication between all members of the team and the stakeholders. The UX process brings together a team of researchers, designers, and developers who apply their knowledge to creating an app or website. They each use their unique skill set to provide users with a positive experience by meeting the needs identified during the Research phase of the project, designing an interface that is both intuitive and easy to use and developed to make interactions both speedy and smooth. To accomplish this, everyone involved needs to be on the same page and have access to the same material. Figma contains many features that do just that. FigJam, which we get into in Chapter 4, is designed to be a collaborative whiteboard where any team member can participate in the ideation phase of the project. Any page or project can be shared with any team member, and those team members can provide feedback 3 Chapter 1 Learning the Figma Interface on any aspect of what they are looking at. Dev Mode provides developers and designers a common area to reduce the friction between these two disciplines. Thanks to this feature in Dev Mode, developers can quickly identify which sections of a project are ready for development. When it comes to documentation, many templates, plug-ins, and features make creating such items as Flowcharts, Journey Maps, Personas, and other documents produced during the Research phase a simple process. This documentation can be posted to FigJam, included in the Team Folder or both. Figma is also available in both desktop and browser versions, so you are not locked into a browser. You can work on your Figma file on a Mac or PC, and any changes made will instantly appear in the file located in the Figma Dashboard – no upload required. Let’s take a look at the Figma Dashboard. The Figma Dashboard Whether you are working on the desktop version or in the browser, you first need to log into Figma. When you do, the first screen you see (Figure 1-2) is the Figma Dashboard. 4 Chapter 1 Learning the Figma Interface Figure 1-2. The Figma Dashboard The Figma Dashboard shows you all the files you are working on or have worked on. There are three ways of viewing these files: Recently Viewed: All the files you have worked on or looked at are shown. To open one, double-click the file. Shared Files: This view only shows the individual files shared with the entire team or individual team members. Shared Projects: All files in a project that have been shared with the team are shown. Moving to the right on the menu bar, there are three other ways of viewing the Dashboard: All Organizations: This feature is only available to Enterprise subscriptions where workspaces are assigned. Workspaces are where teams, people, and resources are collected and set. For example, XYZCorp 5 Chapter 1 Learning the Figma Interface could create organizational workspaces for Teams, departments such as Marketing, Cost Centers, or other administrative units. Once that is defined, admins are appointed to create the workspace and assign team members or others to that workspace. All Files: This pop-down allows you to filter what you see on the Dashboard. All files are the default, but you can also select Design files, FigJam files, or Prototypes, and only those files will be shown. Last Viewed: This is another way of filtering your view options. The pop-down lets you view the files either alphabetically, by Creation Date, or by using default, Last Viewed. There are two other options for bringing order to the Dashboard. You can rearrange them by Oldest or Newest first. The two buttons on the far right change the view from grid view (shown) or list view. If you right-click on the file, a drop-down menu (Figure 1-3) opens and offers you several ways to manage the selected file. They are all self-explanatory, but one you will most likely use is Delete. Select this, and the file is permanently deleted from the Dashboard. This feature is handy for creating Figma files to work out no longer-needed ideas. 6 Chapter 1 Learning the Figma Interface Figure 1-3. There are several ways to manage individual files in the Figma Dashboard Let’s now turn our attention to the panel on the left, commonly called the Left Sidebar. This panel is where the magic happens. Your avatar at the top is where you can manage your Figma account, and that little bell will sport a red dot when a notification regarding a file has been sent to you. This could be something like a comment attached to a particular file. The file area of the Dashboard can become a pretty crowded place, and scrolling through all of them to find just the one you need can be time- consuming. This explains why there is a Search area right at the top of the panel. You can quickly locate files, teams, and even members of a team by entering the name of the file, team, or individual. The next item is Your Teams. Before we get into that, it is important for you to understand there are two types of teams when it comes to Figma that depends upon your Figma subscription. If you are trying out the free 7 Chapter 1 Learning the Figma Interface plan, you have no access to the Teams feature. The best you can do is to invite collaborators. The Professional, Organization, and Enterprise plans let you share projects with your collaborators and create a Team Library. Just be aware the Professional plan limits you to a single team whereas the Organization and Enterprise plans offer a multiple teams feature. If you have an Organization or Enterprise plan, you are able to create multiple Teams to help organize projects. The Enterprise plan also allows you to set up a collection of teams in Figma Workspaces. In either case, Admins are assigned and will build the teams. If you have a Professional plan, you are limited to a single team and actually don’t have access to the formal Teams feature. Drafts are actually quite interesting. Think of them as your personal Figma folder where you can experiment, work out ideas, and so on. Drafts are not the final product. Though they can be shared, they are rough drafts. Maybe, after polishing, they are acceptable enough to move into a project by simply dragging them into a project. Favorite files are a handy way of giving yourself quick access to a particular file, such as a template. To add a Favorite, simply drag it in from the Dashboard. If you want to remove it, right—click, select Delete, and it is removed from your favorites. It doesn’t delete the file from Figma. Creating a Team in Figma We have talked about teams quite a bit so far, and this sections the inevitable question: “How do you create a team in Figma?” Actually, it is quite easy, but it is important for you to understand that those invited to the team must have a Figma account. Here’s how to create a team: 1. Click on Create new team in the Teams area of the left sidebar. The Create a team page appears. 2. Give the team a name (Figure 1-4) and click the Create team button. 8 Chapter 1 Learning the Figma Interface Figure 1-4. The first step is to give your team a name 3. Enter the email addresses of those being invited to join the team. (Figure 1-5). When finished, click Continue. Figure 1-5. Send an email to the team members inviting them to join the team 9 Chapter 1 Learning the Figma Interface 4. You will then be prompted to set up a Paid Team plan. For the purposes of this book, select Choose Starter. The team members will be sent an email invitation. 5. Click on the Team name to open the Admin panel. The team project opens, and three buttons appear on the right side. The first two are self-explanatory, but the one on the far right is where you set the permissions for each team member. 6. Click the button and a dialog box opens. Being the owner, Tom has what we call the “God Mode.” He gets to choose who does what. 7. Click the Can edit button and the permissions open as shown in Figure 1-6. For this person, the options are Can edit or Can view. Can view should be assigned to stakeholders and others that only need to see the file. As the owner, Tom can change the permissions at any time or even remove that individual from the team. Figure 1-6. The Administrator or Owner sets the permission for team members 10 Chapter 1 Learning the Figma Interface 8. While still in the dialogue box, click Settings. This dialog box (Figure 1-7) allows the owner to add some more information about the team, set the team’s library location, and even delete the team. When finished, click the close box to return to the Figma Dashboard. Figure 1-7. The Team Settings dialog box 11 Chapter 1 Learning the Figma Interface Access the Figma Community There is a link down at the bottom of the left sidebar that is actually one of the more powerful features of Figma. This is where you can access files, plug-ins, templates, and other material that will not only extend your skills but also extend Figma’s functionality. Here’s how: 1. Click the Explore Community link. This opens the Figma Community site as shown in Figure 1-8. Figure 1-8. The Figma Community site 12 Chapter 1 Learning the Figma Interface When you first access this site, we admit it can be a bit overwhelming. When you scroll down, hundreds of UI kits, Design files, Figma plug-ins, and so on are presented. This explains why the top of the page is so prominent. You can explore the paid and free offerings by selecting one of the ten categories or, if you know what you are looking for, you can search for it. For example, let’s search for the Stark Accessibility plug-in. 2. Enter “Stark” into the Search bar and, instantly, the Stark Accessibility Tools plug-in is shown (Figure 1-9). Click on the search result and you add this plug-in to your list of Figma plug-ins. In fact, as you will discover later on, this is exactly where you will come to add a Figma plug-in from within your Figma project. Figure 1-9. Using Search is a quick way to locate files and plug-ins when using the Community site 13 Chapter 1 Learning the Figma Interface Getting Help In the bottom right corner of the Dashboard, there is a question mark. This is how you can access Help in Figma. 1. Click the question mark and a dozen options (Figure 1-10) pop up. The first grouping allows you to access the Figma Help files. Access the Support forum where you can pose issues to the Figma Community and maybe even get a solution, access a series of YouTube videos, and check out what has changed in your current version of Figma and of course the usual legalese. The next grouping is focused around getting direct help. If you detect a bug in Figma or think there is a feature missing from the application, Submit Feedback is for you. If you want to know more about using Figma, then there is no better place than the Ask the Community forum. If you are having an issue with your account or something isn’t working, then Contact Support. The remaining two categories are pretty well self- explanatory. 14 Chapter 1 Learning the Figma Interface Figure 1-10. Accessing the Help files 2. We should also note if you are using the desktop version of Figma, Help is also a menu item as shown in Figure 1-11. Figure 1-11. If you use the desktop version of Figma, Help is also a menu item 15 Chapter 1 Learning the Figma Interface Having explored all of the features of the Figma Dashboard, now would be a good time to create a Figma file and to explore your workspace. To create a new Design file, click the big blue Design File button in the upper right. The Figma Workspace Figure 1-12. The Figma workspace looks rather basic When the Figma workspace, also formally known as the Figma IDE or Integrated Development Environment, opens, it looks rather sparse. As shown in Figure 1-12, the interface is composed of four different areas. Along the top is the Tool bar. There is a Layers panel that functions as you would expect. The Pasteboard is where the work gets done, and the Properties panel is where selections can be formatted. Even though we said it looks sparse, it is the exact opposite. It is deep, rich, and indulgent. Let’s take a look. 16 Chapter 1 Learning the Figma Interface We will be using the desktop version of Figma for the balance of this book. There are no major differences between the browser and desktop versions of the application. The major difference is the menu bar in the desktop version. It contains all of the commands available in the browser version and in fact duplicates the features in the Main Menu drop-down. Figure 1-13 Expanded Figma tools, drop down menus. Figure 1-13. The Figma tools and submenus The Home button is how you access your Dashboard; beneath it is a collection of tools you will be using quite a lot. They are as follows, from left to right: Main Menu: Click it and a pop-down menu presents you with a number of categories. If you are using the desktop version, each category is contained in the menu bar. 17 Chapter 1 Learning the Figma Interface Move Tool: This tool is actually two tools. The Move tool is how you select and move elements around the screen, and the Scale tool is used for scaling elements. Frame Tool: Frames are where content is placed, and you will be using this one a lot. The Section tool allows you to group frames on the Canvas – that big gray area you see. The Slice tool does nothing more than slice up the design for Export. Rectangle Tool: All of the common shapes can be created by selecting one and drawing it out. These are vector shapes. Pen Tool: Use this to create custom vector shapes. The Pencil tool draws bitmaps. Text Tool: This tool is used to enter and format text. Resources: A quick way of accessing plug-ins or Community Resources added to Figma. Hand Tool: Select this to move around the canvas. A quicker method is to hold down the space bar and drag. Comments: Select this to add comments to a shared file. Moving along, all new documents are saved as a Draft. Click the word Draft and you are returned to the Dashboard. Click and hold on the Untitled pop-down and you are presented with a few options. Should you choose to name the file, double-click the word Untitled and you will be prompted to do just that. That big blue Share button opens a dialog box and prompts you to enter the email addresses of those who can look at the shared file. The next button toggles on the new Dev Mode. The interface will change to a 18 Chapter 1 Learning the Figma Interface place where the development team can look at the underlying code behind the prototype and, even more important, know if the file is ready for development. We’ll get deeper into this later in the chapter. The next button to the right is the Play button. This one, just like the Frames button, will be one of the most used. You have two options available to you. Present treats the project as a slide deck, and Preview lets you test the file’s interactions. In either case, the file is moved to Figma’s web servers. Note Using the Figma desktop app or using Figma in browser, when you create a new Design file, the files are stored in Figma cloud storage and are accessible in both the web and desktop. Adding Frames Before we start, you need to understand Figma works a bit differently than many design applications. They use artboards. Figma uses frames. This is an important distinction. You don’t create an artboard; you create a frame, and all content in that frame is placed in other frames. This tells you the frame created for, say, an iPhone is a parent container and all of the contents nested inside that frame are children. Here’s how this works: 1. Select the Frame tool. As you can see, the Properties panel opens up in Design view and you are presented with a plethora of choices ranging from Smartphones to Social Media. 2. Twirl down the Phone group. A number of devices appear, and the dimensions of each device match that device’s viewport. Figure 1-14 Right-hand Figma Frame tool options. 19 Chapter 1 Learning the Figma Interface Figure 1-14. Your first frame is always tied to a device 20 Chapter 1 Learning the Figma Interface 3. Select Android Large. The frame appears on the pasteboard, the Layers panel lights up, and the Properties panel changes to show you all of the properties applied to the Frame. There are two things we need you to pay attention to. Notice how the Frame sports a Hash mark in the Layers panel and the name also appears above the frame on the pasteboard. 4. Double-click the name in the Layers panel. Change the name to “Frame” and press the Return/Enter key. Notice how, as shown in Figure 1-15, the name changes on the pasteboard. Double-click the name of the pasteboard and change it to Figma. Once again, the name changes in the Layers panel. Figure 1-15. Frames can be renamed either on the pasteboard or in the Layers panel 5. To delete a frame, either select the frame on the pasteboard or in the Layers panel and press the delete key. 21 Chapter 1 Learning the Figma Interface 6. To add more frames, you have a number of choices. Select the frame in the Layers panel and copy/paste. Select the frame and duplicate it by pressing Command-D (Mac) or Control-D (PC) With the frame selected on the pasteboard hold down the Option key (Mac) or Alt key (PC) and drag to copy the frame. 7. To nest frames, select the Frame tool and place the cursor inside the first frame; the cursor changes to a plus sign. Drag out a new frame. Notice how the new frame is indented in the Layers panel. This tells you this new frame is inside the Parent. You will also see a Tool Tip showing the frame’s Width and Height values. The dotted lines indicate distance from the left and top of the parent frame. You can see these values in the Properties panel as shown in Figure 1-16. Figure 1-16. A frame’s properties are shown on the parent and in the Properties panel 22 Chapter 1 Learning the Figma Interface From this point on in the book, we will be referring to the parent frame as an artboard. This way we don’t wind up confusing you. It is also common for Figma users to refer to these parent frames as artboards. Changing Frame Properties Frames are not static objects. They can be moved and manipulated to get them just right. Here’s how: 1. Click inside your new frame and drag it to a new location. This tells you frames can be repositioned. 2. Here’s another method. Select the frame and place the cursor over the X in the Frame properties. It changes to a split cursor. With the mouse button held down, drag the cursor to the left or right. The value changes, and the frame moves up or down. The term for the previous technique is called “Scrubby Numbers.” Say what? The technique is taken from applications containing a timeline. When you drag the playhead in a YouTube video to the left or the right, you are “scrubbing” the playhead. 3. For even more precision, change the X and Y values to 0. The frame jumps to the upper left corner of the frame. 23 Chapter 1 Learning the Figma Interface 4. To add a stroke to a frame, open the Stroke Properties. As you can see (Figure 1-17), the default value is a black stroke inside the frame that is 1 pixel thick. We are going to get a lot deeper into working with strokes in the next exercise, which is why we are staying with the default values. Figure 1-17. Strokes and fills can be applied to frames Using the Properties Panel The Properties panel is where you will spend a lot of your time. This is where you finesse objects, commonly referred to as elements, in a Figma frame or artboard. This is where elements get resized, moved around, colored, rotated, have strokes applied, and become opaque. This is where text is formatted and images manipulated. This should also tell you it is a Contextual Panel. Depending on which element is selected, the Panel will change to show the Properties that can be manipulated. To get yourself started, open the Properties.fig file found in your Chapter 1 Exercise folder. 1. When it opens, you will see four shapes created using the Shapes tools, a photograph, and a piece of text. If you look over to the Layers panel, you will see these shapes listed, and the icon beside their 24 Chapter 1 Learning the Figma Interface name indicates each one is a shape. The same goes for the House image and the Text. As you may have guessed, the Layers panel tells you what you are looking at. If you look over at the Properties panel, only the Page has color and opacity properties showing. That color is the frame’s background color. Here’s how to change it. 2. If selected, deselect the Properties frame. 3. Click the color chip in the Page area of the Properties panel to open the Color Picker (Figure 1-18) and choose a different color. When finished, double-click the Hex value and enter #F5F5F5 to return to the original color. What you have discovered is you can change the artboard color without selecting the frame. Figure 1-18. The Figma Color Picker is a powerful tool 25 Chapter 1 Learning the Figma Interface Using the Color Picker Now that you understand how to change color properties, let’s go a bit deeper and take a closer look at the Figma Color Picker. We are going to work with a shape because Figma sees shapes as being composed of a Fill and a Stroke. For those wondering, Figma regards images and text this way as well. Here’s how to work with a Fill: 1. Select the Rectangle on the artboard. The Properties panel changes to let you know which properties of the selection can be changed. We will start with the background color which is set in the Fill properties. This panel has a bit more to it than simply picking a color. The four dots let you access a color library that may be attached to the project. The + sign applies presets, which we will get not in a minute. You know about the color chip, and eyeball hides the color and the - sign removes it. Select the color chip to open the Color Picker. 2. When working with the Color Picker, you need to understand the key word is “Fill.” The five icons at the top from left to right are as follows: Solid Color Fill Gradient Fill: You have four choices: Linear, Radial, Angular, and Diamond. Image Fill: You are prompted to fill the selection with an image. 26 Chapter 1 Learning the Figma Interface Video Fill: You are prompted to fill the selection with a video. Blend Mode: These are the Booleans modes, and we will explore them later on in this book. 3. The slider lets you change color, and the one below it adjusts opacity. The eyedropper lets you sample a color on the artboard and use it. The hex pop-down (Figure 1-19) lets you choose one of five color spaces: Hex: The alphanumeric standard used on the Web. RGB: Commonly used for both the web and mobile design, expressed as 217, 217, 217. The 100% is the value from the opacity slider. CSS: This is actually the RGBA color space where the fourth value is Alpha or opacity. The color will be shown as RGBA (2171, 217, 217, 1), which is how it will be expressed if using CSS. HSL: Hue, Saturation, and Lightness. HSB: Hue, Saturation, and Brightness. 27 Chapter 1 Learning the Figma Interface Figure 1-19. You have your choice of five color spaces when it comes to choosing color in Figma Note You may be wondering what the difference is between HSL and HSB. The “B” includes nothing about the whiteness of the color, only blackness. The “L” concerns itself with both the black and the white. 28 Chapter 1 Learning the Figma Interface 4. Select the red (255,0,0) and that color is applied to the rectangle. 5. Select the eyedropper tool and click on a green in the image. The rectangle turns green. That circle lets you choose a pixel color. If you move the tool around the image, the pixel is highlighted. 6. Close the Color Picker. Gradients Gradients, when used properly, are a very effective means of pulling a User’s attention to an element, providing a delightful background color for the artboard or other element, and, when subtly applied, can provide the necessary contrast for elements on a dark or bright background. Here’s how to apply a gradient: 1. Select the rectangle and open the color picker. When it opens, click on the Gradient icon. If you look at the rectangle, the gradient has already been applied (Figure 1-20), and the colors are shown in the picker. The chip on the left is the start color, and the chip on the right is the end color. 29 Chapter 1 Learning the Figma Interface Figure 1-20. Select a gradient type and it is automatically applied to the selected object 2. To change the colors, select the End color chip and change it to a Red. And pull the Opacity slider to the right or enter 100 as the opacity value. 3. Move the Start and End color chips. Note how the look of the gradient changes. You can do the same thing by moving the chips up or down on the artboard. 4. Click and hold on the bottom handle of the color chip on the aboard. Drag it up and down. This is how you extend or compress a gradient. 5. Change the gradient types and play with the colors and handles to explore different effects that you can create. 6. Deselect the rectangle. 30 Chapter 1 Learning the Figma Interface Strokes As pointed out earlier, any selected element can have a stroke applied to it. Strokes are an important design element in that they separate design elements such a Cards from each other. Here’s how to apply a stroke to an element: 1. Select the Circle and open the Stroke area (Figure 1-21) in the Properties panel. Figure 1-21. There is a lot under the hood when it comes to the Stroke panel The color chip and opacity value are self- explanatory. The three items at the bottom are where the power resides. The Inside pop-down determines how the stroke is applied to the selection: Inside: The stroke is applied inside the selection. Center: The stroke is applied equally both inside and outside of the selection. For example, if a 4-pixel stroke is applied, 2 pixels will be outside the shape and 2 pixels will be inside. Outside. The stroke is applied to the outside edge of the selection. 31 Chapter 1 Learning the Figma Interface 2. The next item is the stroke width. You can change the width using the Scrubby Numbers or manually by double-clicking the value and entering it. Go ahead, try it. 3. The ellipsis is where you can get creative. Click this and the Advanced Stroke options dialog box appears as shown in Figure 1-22. Figure 1-22. The Advanced Stroke options lets you get creative with stroke styles The Style options are Solid, Dash, and Custom. Select Dash and you get to set dash length, the space between the dashes, and the shape of the dashes. Custom is where you unleash your creativity. Here you can set varying dash lengths and shapes. Using the Polygon Tool In simple terms, a polygon is a shape with multiple sides. The triangle you see is a three-sided polygon and is the default shape. Here’s how to turn the triangle into a pentagon: 32 Chapter 1 Learning the Figma Interface 1. Select the Triangle. 2. At the top of the Properties panel, the number three you see is the number of sides applied to the polygon. Change it to 5. As shown in Figure 1-23, you have created a pentagon. Figure 1-23. Increasing the side count for a polygon So far the shapes all have sharp corners. Such elements as buttons have rounded corners. Here’s how to round a shape’s corners. 3. Select the pentagon. 4. In the Properties panel, right under the H value is a curve with the number 0. This is the corner radius tool. Select the 0. 5. Change the zero to 5. The corners are rounded off. 6. Change the value to 10. The rounding is more prominent. Cards, which are a common UI element always, have a roundness value of 12 to 15 pixels applied to their shape. 33 Chapter 1 Learning the Figma Interface 7. Select the star. As you can see, the star’s default value is five arms. In fact stars have two shape properties: Count and Ratio as shown in Figure 1-24. Count is the number of arms, and ratio is the distance of the inner points of the star from the center of the star. The value is simply a percentage of the star’s diameter. Figure 1-24. Stars contain two editable shape properties 8. With the Star selected, change the count value to 15 and the ratio value to 50. You have just created a starburst as shown in Figure 1-25. Figure 1-25. Changing a star’s shape properties to create a starburst 34 Chapter 1 Learning the Figma Interface Multipoint stars are ideal for creating such UI elements as Badges or highlights. Using the Layers Panel If there is one panel you will use as often as the Properties panel, it has to be the Layers panel. The Layers panel is where everything appearing on an artboard, or the pasteboard, is shown. It is especially invaluable when creating complex screens with groups of objects. You can simply select the element in the Layers panel and go to work. Here’s how: 1. Open the Card.fig file found in your chapter download. When it opens, you will see a simple card used in a frame that highlights the city of Bern, Switzerland. 2. Over in the Layers panel (Figure 1-26), you can see all of the elements that make up the card are listed. At the top you can choose to view Layer or Assets. Assets are components, and we will dig deeper into them later in this book. At the top of the list is the current artboard indicated as a Frame and all of the elements located on that artboard. 35 Chapter 1 Learning the Figma Interface Figure 1-26. The Layers panel contains all of the objects contained on the pasteboard and the artboard 3. In the Layers panel, select the Rectangle layer. The blue square lights up showing it is selected. 4. Drag the Rectangle layer above the Learn More layer. The text is hidden. What you have just done is to reorder layers. In this case, the Rectangle layer is above the text layer. 5. Drag the Bridge layer to the top of the stack. Move the Bern and Founded Text layers under it and then move the line layer up below the Founded text. Finally, move the Rectangle layer below the Learn More layer. What you have done is to reorder the layers from the top to the bottom of the Card. 6. Roll the mouse over the Bridge layer. Two icons – Lock and Visible – appear. 7. Click the Lock. If you try to select the Bridge layer on the artboard, you can’t. Locking a layer is a handy way of ensuring an element is not moved or otherwise manipulated. 36 Chapter 1 Learning the Figma Interface 8. Click the Visibility icon. The Bridge layer disappears, and the eye icon changes to a closed eye. Turning off layer visibility is a handy way of working on a selected layer without the distraction of the rest of the content. Turn the Bridge layer back on by clicking on the closed eye. 9. Right-click on the Learn More layer. The Layer Options menu (Figure 1-27) opens. We are not going to get into them now because we will be using them quite a bit throughout the book. Figure 1-27. Right-click on a Layer to open the Layer Options 37 Chapter 1 Learning the Figma Interface 10. With the Shift key held down, select the Learn More and Rectangle layers. Press Command-G (Mac) or Ctrl-G (PC) to group the layers. Group is also available in the menu options. The group appears in the Layers panel. Double-click the name and change it to “button”. If you twirl down the group, you will see the Grouped items. To Ungroup the Button, select it on the artboard and press Command- Delete (Mac) or Ctrl-Backspace (PC). We have not talked about Pages found at the top of the Layers panel. The Layers panel is where an organization hierarchy is established. Pages are a way of organizing the project into separate themes such as Journey Maps, Wireframes, Personas, Prototypes, Assets, and so on, all in one page. A frame defines a specific area of the canvas, within a Page, such as the artboard for a device and asset placement. Frames can be contained within other frames. You can have a frame named Home, defining the width and height of the area, and inside that frame is one named Nav; there might be another frame containing a Hero image and another frame named Footer at the bottom. All of these frames are found inside the layer named Home in the Layers panel. Groups as you saw are a great way of combining layers to create a single layer. Thus, we have a Page named Web Site. Inside that Page are the Frames that compose Home page, and inside the Home page, items have been grouped together into a group named button. To wrap your head around Pages, Frames, and Groups, think of a Page as a workspace for your designs, a Frame as a container for the elements in those designs, and a Group as a collection of layers inside a frame. 38 Chapter 1 Learning the Figma Interface Testing Your Work It is a common practice to test your work to discover issues or to ensure interactivity does what it is supposed to do. This can be done right inside Figma. Here’s how: 1. Open the Play.fig file in your chapter download. The file contains a simple interaction. When the user clicks the Learn More button in the Card artboard, the Cathedral artboard opens. 2. Click the Play button to test. 3. The Screen turns black and just the artboard is shown (Figure 1-28). What has happened is Figma has uploaded the file to its server. Figure 1-28. Previewing a file in Figma’s browser version 39 Chapter 1 Learning the Figma Interface If you are using the browser version of Figma, you will see a URL for the file. On the desktop version, this URL isn’t visible. 4. Click the Learn More button. Note how the cursor changes when you roll over the button. This tells you this element is interactive. 5. When the Cathedral artboard opens, click the image. You are returned back to the first screen. 6. To return to Figma, click on the Card tab if you are using the browser version or on the Card tab at the top of the desktop version’s view. Alternatively, you can simply close the previews. Community Resources and Templates We have all been there. The creative synapses aren’t firing; you need something in a hurry or just need some inspiration. You could do a web search, or you could turn to the Figma Community. As we briefly pointed out earlier, the Figma Community site has become the “Go To” page for anything related to Figma. This is where Figma users go to obtain templates, UI kits, plug-ins, and widgets. You may be unfamiliar with what a widget is or does. Widgets, according to Figma, “are interactive objects that extend the functionality of design files and FigJam boards.” Plug-ins, on the other hand, extend Figma’s functionality and have a very specific purpose. The great thing about these add-ons is you don’t have to leave your project to grab one. Here’s how: 1. With a file open, click on the Figma pop-down to open the Main Menu. At the bottom of the pop- down is where you go to obtain plug-ins or widgets. 40 Chapter 1 Learning the Figma Interface 2. When this side menu opens, you can see which plug-ins are currently installed. Click one, and its interface opens. To add a plug-in, select Manage Plugins (Figure 1-29). This will open the Resources Window that is launched when you select the Resources tool. This should tell you there are two ways of grabbing plug-ins. The problem with both methods is you need to know exactly what you want. If you enter a general term in a plug-in search, it will suggest a list of Community plug-ins. Figure 1-29. Using the Figma menu to obtain plug-ins and widgets 41 Chapter 1 Learning the Figma Interface 3. With the Resources menu open, enter the word Photo. As you can see, we already have one plug-in installed, and the list of Community Resources with ratings is presented as shown in Figure 1-30. Figure 1-30. An alternative way to obtain plug-ins and widgets is through the Resources panel 42 Chapter 1 Learning the Figma Interface 4. To install a plug-in, click on it, and when the plug-in with description appears, click the big blue Run button. The plug-in appears in the Resources list. 5. Note: There is a difference between installing a plug-in and saving a plug-in. Installing is pretty close to a single use. If you want to add the plug-in to your lineup, click the bookmark icon beside the plug-in in the Resources panel. 6. Another, more general approach to obtaining plug-ins, widgets, and templates is to open the Community page from the Dashboard. Enter Plugin into the search bar, select Plugins and you will be presented with all of the plug-ins, including price and rating as shown in Figure 1-31. If you are looking for free plug-ins, change the Paid + Free option to Free. If you click the Try it out button, a demo will appear in Figma, and if you like it, use the Resources panel to save it to your lineup. This is also a great place to find a template or widget that meets your needs. 43 Chapter 1 Learning the Figma Interface Figure 1-31. Using the Community Resources to locate plug-ins, widgets, and templates Obtaining the iOS and Android UI Kits When it comes to mobile, there are two operating systems: Android from Google and iOS from Apple. Though there are a number of kits for both found in the Community Resources, we prefer to go right to the source. Here’s how: 1. Open your browser and navigate to http:// m3.material.io. Select Figma design kit for M3 (Figure 1-32). This will take you to the Figma Community, and you can download and install the kit from there. 44 Chapter 1 Learning the Figma Interface Figure 1-32. Accessing the official Material Design UI kit 2. For iOS, point your browser to developer.apple.com/ design/resources. In the Design templates area, select Figma as shown in Figure 1-33. Again, you are taken to the Community page where you can download and install the templates. 45 Chapter 1 Learning the Figma Interface Figure 1-33. Locating the official iOS UI kit Sharing Figma, as we have said, is a team sport. A lot of very skilled people are also working on the project and collaborating with each other to ensure the project remains faithful to the project’s intent. A key to collaboration is sharing your work and receiving feedback. Figma’s sharing feature is where this important communication within the team takes place. That is why there is a great big blue Share button on the toolbar. Here’s how to share and communicate with a team member: 1. Open the Share.fig file found in your Exercise folder. 2. Click the Share button and a dialog box opens asking you to enter the recipient’s email as shown in Figure 1-34. You also can choose whether the recipient can edit the file or only view the 46 Chapter 1 Learning the Figma Interface file. Setting the status to can view is ideal for stakeholders and other team members who only need to see the file but can also comment. You can also copy the link and include it in an email to selected recipients. Once you have added the recipients, click the Invite button. Figure 1-34. The Share dialog box is where you can invite the team to review the project Don’t think just anybody can be on the Share list. You may be tempted to share the link with family or friends to show them what you are up to and ask the inevitable, “What do you think.” Don’t do it. This group will tell you what they think you want to hear, not what you need to hear. We will focus on User Testing in the next chapters. 3. The recipient will receive the following email and tell they can open the file in Figma (Figure 1-35). 47 Chapter 1 Learning the Figma Interface Figure 1-35. The recipient receives this email and can open the file in Figma 4. To comment on the file, the recipient clicks on the Comment tool in the toolbar, for instance, asking if the Keyline in the card is really necessary. When finished, click the up arrow in the comment to attach it to the file. 5. The comment will appear on the sender’s file as a pin with the respondent’s avatar. As well, the Comment tool will spot a red alert circle saying there is a comment. 48 Chapter 1 Learning the Figma Interface 6. To view the comment, click or roll over the comment – the shape with avatar is called a “pin.” The comment will open as shown in Figure 1-36. Figure 1-36. Viewing a comment. Note the Red dot above the Comment tool telling you a comment has been added 7. When the Comment dialog box is opened, clicking on it, you can reply. Click the ellipsis to open the comment actions, click the circle with the check mark to resolve it, or click the DockTo Side button to open a longer conversation. If you reply, click the up arrow, and the recipient will see it on their copy of the project (Figure 1-37). 49 Chapter 1 Learning the Figma Interface Figure 1-37. Replying to a comment 8. When the issue is resolved to everyone’s satisfaction, delete it by selecting the resolve button in the dialog box. Dev Mode As Figma states, “Dev Mode is a developer-focused interface for inspecting and navigating designs.” In many respects, this is where the developer can start ripping apart your prototypes and wiring them up. Dev Mode is a robust area designed to make your development team’s life easier. When the developer clicks the Dev Mode button – right next to the Share button – the Properties and Layers panels change as shown in Figure 1-38. In the Layers panel, the developer can not only see if a file is ready for development but also track the changes made to the file before it was ready for development. 50 Chapter 1 Learning the Figma Interface Figure 1-38. The Figma Dev Mode Interface The “magic” is found in the Properties panel. As the developer rolls over the elements, the panel changes to reflect what is selected. The developer can then choose to view the code in a number of ways: CSS, iOS, and Android along with any associated plug-ins that also provide code. The Code pop-down gives the developer the opportunity to introspect the code and properties associated with the selection. The developer can also access code bases located in Storybook, GitHub, and other repositories. The Layout and Style areas show the code associated with the selection’s layout and style. This code, if the developer so chooses, can be copied and pasted right into a code editor. Conclusion In this chapter, you have Learned of Figma’s role in the UX process Toured the Figma Dashboard Learned how to create a Team 51 Chapter 1 Learning the Figma Interface Explored the Figma Interface Used the Layers and Properties panels Tested and shared a file Learned how to access Community Resources and Templates to extend Figma’s functionality Reviewed the new Dev Mode There is a lot you have learned in this first chapter that should give you a grasp of the Figma fundamentals. In the next chapter, we dig into the various content types that can be added to Figma such as images, line art, and video. Not only do we review them, but we also explain the underlying technologies behind them. The reason is simple: They will get handed off to development, and if handoff goes smoothly, the assets become a workflow accelerant. 52 CHAPTER 2 Adding Content to Figma Screens In the previous chapter, we covered a lot of ground focusing on the various features of the Figma interface. In this chapter, we focus on the content that will be placed into the Figma frames. The content falls roughly into four categories: images such as photographs, line art such as icons and illustrations, video, and text. We’ll start with what you need to know about graphics when it comes to working with Figma. Graphics come in two flavors: vector or bitmap. Vector images are traditionally created in a drawing application such as Adobe Illustrator, and bitmap images are created in such applications as Photoshop. What you need to understand about Figma is at its heart, Figma is a prototyping application where assets are assembled into layouts and eventually those layouts are chopped up by the development team as they wire up the application. By that, we mean the assets appearing in the layouts are essentially ripped out of Figma and, through the use of code, those layouts, with their assets, are reassembled. This explains why we sometimes refer to Figma as an Assembly application. In this chapter, we focus on preparing content for handoff to development. For example, images destined for frames in Figma aren’t simply imported into the frame and resized and it is off to the next screen. Do that and your developers and users are going to have issues. The developers will be constantly asking you, for example, to provide © Tom Green and Kevin Brandon 2024 53 T. Green and K. Brandon, UX Design with Figma, Design Thinking, https://doi.org/10.1007/979-8-8688-0324-6_2 Chapter 2 Adding Content to Figma Screens them with images containing the proper scaling factors for the targeted devices. They might ask you for the.svg code along with the.svg file. You may be told that cool video you added to a layout in a project needs to be optimized for the target devices. As for the users, you will hear loud and clear when the project is sent out for User Testing, those issues development raised are also resulting in a bad experience, or they find the text very difficult to read. Constantly fixing asset issues costs both time and money. Properly prepare the Figma document the first time and those issues boost workflow efficiency. Vectors and Bitmaps To differentiate between the placed static images in Figma, we refer to photographic assets as “raster or bitmap images” and logos, line art, and geometric shapes as “vector graphics”; this helps when talking with project collaborators as opposed to saying “images” for every asset within a website or mobile app (Figure 2-1). What makes vectors so appealing is they require very little computing power to be shown on a phone or tablet. Vectors are nothing more than code. For example, a circular red button is composed of five points – Center, Top, Right, Bottom, and Left – and those points are used in the mathematical calculation that results in the diameter of the circle. It also needs to know the fill color and the color and thickness of the stroke, if there is one. By needing only seven bits of information, you can quickly understand why vector images are so lightweight. Bitmap images are a whole different beast. To create that red circle, each pixel’s location in the circle must be remembered. Not only that but the three bits of color information – red, green, blue – must also be remembered. On top of all of that, the computer also needs to draw and map each pixel on the background. Let’s assume that red circle is 100 pixels in diameter and it is sitting in a white box that is 150 pixels square. 54 Chapter 2 Adding Content to Figma Screens This means each white pixel needs to be mapped as well. This means producing a simple red circle in a white box requires thousands of bits of information that need to be used to show the image on a device or table. What types of graphic objects can Figma use? Figma uses four types of graphic objects: Geometric Shapes: These are vector objects created by Figma’s Shape Tools: Rectangle, Line, Arrow, Ellipse, Polygon, and Star tools. Drawing Objects: These are the shapes created using Figma’s Pencil tool. Complex Shapes: These are vector graphics imported into Figma or drawn using Figma’s Pen tool. Bitmaps: These are the pixel-based images imported from Photoshop or some other imaging or drawing application. Shapes: These are vector images either imported into Figma or drawn using Figma’s Pen tool. Drawing Objects: These are the shapes created using Figma’s Pencil tool. Primitives: These are the vector objects created by Figma’s Shape Tools: Rectangle, Line, Arrow, Ellipse, Polygon and Star tools. Bitmaps: These are the pixel-based images imported from Photoshop or some other imaging or drawing application. 55 Chapter 2 Adding Content to Figma Screens Figure 2-1. Examples of common graphic assets that can be placed into Figma Bitmaps and Figma When it comes to bitmap images, these objects are ubiquitous in websites and apps. They support the message of information and, in many respects, are responsible for excessive loading times in a world where, if it doesn’t instantly appear, users are not prepared to wait for more than a couple of seconds. After that, impatience sets in with an idea that something is wrong. When it comes to apps and websites, in the case of images, small is beautiful. There are two main culprits behind this: the physical size of the bitmap and its resolution. Being aware of and accommodating these two factors not only removes a potential loading bottleneck but also will remove any potential friction between you and the developers. Here’s an example. Figure 2-2 shows an image of a flower box sitting on a windowsill in Bern, Switzerland. It is an Adobe Photoshop (.PSD) image that has the physical dimensions of 3872 × 2592 px, with a resolution of 300 px/in, and weighs in at 28.7 MB. The spec for Figma is it needs to fit into an area of a web page that is 1200 × 800 px. 56 Chapter 2 Adding Content to Figma Screens Figure 2-2. Great image but file size is a major issue Obviously.PSD is not a format that can be used in Figma. We use this to sensitize you to the relationship between file size and resolution. Simply dropping the image into Figma and resizing it is not a good idea – same file size, 28.7 MB, but in a smaller area. One option would be to scale the image in Photoshop to the correct dimension. The file size will drop, but the main reason for the reduction would be cropping the Photoshop artboard to fit the dimensions of the scaled image. On the surface, this may appear to be acceptable, but there is a better way. 1. Open the WindowBox.psd image in Photoshop. 2. Select Image ➤ Image Size in the menu bar. The Image Size dialog box shown in Figure 2-3 opens. The Width, Height, and Resolution along with the File Size values are shown. 57 Chapter 2 Adding Content to Figma Screens Figure 2-3. Photoshop’s Image Size dialog box 3. Making sure the width and height values are linked, change the width value to 1200. The height value will automatically change as does the file size. 4. Change the Resolution value to 100 (Screen Resolution) and make sure the width value is still 1200, and the File Size value plummets (Figure 2-4) because you have reduced the image’s information by quite a bit without affecting image quality. Screen resolution to be precise is 72 pixels/inch, which harkens back to the early days of computing when monitors really did have 72 pixels per inch. We use 100 because it is an easier number to grasp and has little or no effect upon the image or its file size. 58 Chapter 2 Adding Content to Figma Screens Figure 2-4. Physical size, resolution, and format are important factors in optimizing images for a Figma project 5. Click OK to close the dialog box. 6. Select File ➤ Save As… and select JPEG from the Format drop-down menu. 7. Click Save. If you check the original.PSD file size, it weighs in at 28.2 MB but, saved as a slimmed-down.JPG file, is now only 731 KB as shown in Figure 2-5. Figure 2-5. Not only do size and resolution play a role, so does file type 59 Chapter 2 Adding Content to Figma Screens As you see, outputting a.PSD file to the.JPG format resulted in a massive reduction in file size. To understand why this happened, you need to understand how the.JPG format works. The JPG (Joint Photographic Experts Group) file format is almost ubiquitous when it comes to images for websites and mobile apps. As you saw, it creates for you and the developer an image that will be quick to download and render on a smartphone, tablet, or web page. JPG is a method of compressing an image using contiguous color. By that, we mean the compressor looks at all of the color areas in the image and replaces blocks of pixels with a more uniform color. As you may have guessed, color information is thrown out, which results in the small file size. This is why JPG is known as a lossy compressor. Keep recompressing a JPG image and eventually the image develops serious quality issues. The other format that Figma accepts is the.PNG (Portable Network Graphics) format. This format was developed as a free lossless alternative to the GIF format for the simple reason that GIF was owned by Unisys and royalties had to be paid. What makes the.PNG format so appealing is it contains a transparency channel. The upshot is.PNG is ideal for situations where an image overlays content. The trade-off, of course, is.PNG files, due to their lossless nature, are larger than their.JPG cousins. That same.PSD image when converted to.PNG results in a file size of 1.4 MB compared to the.JPG size of 430 KB. Again, decisions around when to use.PNG and.JPG images should be made prior to the Design phase (Figure 2-6). Figure 2-6. Comparison of image quality and file size between.PNG and.JPG images 60 Chapter 2 Adding Content to Figma Screens Scaling Factors There is one task that must be decided before you start a UX project: What are the target platforms? Though this may be more of a general decision, it has a profound effect on the images you will add to Figma and send to the development team during Developer handoff. The reason is that device manufacturers compete around their screens. What it comes down to is pixel density or the number of pixels they can jam into one linear inch on a screen. For example, an iPhone 15 has 300 pixels per inch and there are Android devices that jam 460 pixels per inch into their screens. By jamming so many pixels into a linear inch, the image has an extremely high resolution, which is why Apple, for example, refers to its screen as “Retina.” Where it can get really confusing is there are now two types of pixels: screen pixels and device pixels. Without getting all technical, your computer screen has roughly 100 pixels per inch. Let’s assume you are developing a screen for an iPhone 12. That screen has a resolution of 300 device pixels per inch. Your computer has around 100 device pixels and screen pixels per inch. So what’s the difference? Screen pixels are an abstract measurement that is independent of the screen’s size or resolution. Device pixels are the real thing, pixels on a device’s screen. This is where scaling factors come into play. iPhone devices have scaling factors ranging from 1x to 3x. Android, due to its open source nature, has factors ranging from.75 or over 4x. If target devices are not determined at the outset of the project, the users are in for a bad experience. 61 Chapter 2 Adding Content to Figma Screens Figure 2-7. Scaling factors must be considered before the Design phase gets underway In Figure 2-7, the device is an iPhone 12. The image on the left has the proper scaling factor of 3x applied to the image. The one on the right has a scaling factor of 1x. Both images are 375 x 375 PX. This is where things can get ugly. In Figma, the image on the left will look great in a frame because it is displaying on a computer screen. Hand it off to development and the user, looking at the image on an iPhone 12, will see the image on the right. This is why it is so important that both the design and development teams determine the scaling factors before the Design and Development phases of a project. Here’s how to apply scaling factors in Photoshop: 1. With your WindowBox image open in Photoshop, select File ➤ Export ➤ Export As… to open the Export As… dialog box shown in Figure 2-8. The magic happens on the left side of the screen. 2. That first image strip you see is the 1x version of the file. Above it are two pop-downs Size and Suffix. This is where you make both your developers and your users happy. 62 Chapter 2 Adding Content to Figma Screens 3. To add a 2x version of the file, click the plus sign, and when the strip appears, select 2x from the Size pop-down. And you will notice the suffix, @2x, appears. This will become part of the file’s name. 4. Click the plus sign again and another image strip appears. Select 3x from the pop-down. Now that you have indicated the proper scaling factors, select JPG from the Format pop-down and move the Quality slider all the way to the right to set High Quality (Figure 2-8). Doing this maintains the integrity of the information in the file. Click Export and save the resulting files to your Chapter 2 Exercise file. These are the files that will be handed off when the Figma file is sent off to the developers. Figure 2-8. Images with the appropriate scaling factors applied can be created in Photoshop 63 Chapter 2 Adding Content to Figma Screens When it comes to designing in Figma, every image is shown in a frame with a 1x scaling factor. Though you can apply the scaling factors in Photoshop using the Image Size menu by increasing the Resolution value, our advice is not to do that. In this case, our adage “Let the software do the work” is where you get a productivity boost. If you prefer to do your design work in Sketch, scaling factors can also be applied to the images. SVG Images and Figma Before we dig into vector graphics and the.SVG format, let's spend some time examining what a vector graphic is. You can think of vector graphic as connecting dots, where the dots are placed anchor points connected by vector paths. Vector paths can create straight or curved lines, as open paths. If the vector path connects again to the starting anchor point, it is considered a closed path – often a shape, like a rectangle, ellipse, or polygon, or a unique vector shape. Vector corners are either angled, such as in a rectangle shape, or rounded using a Bezier curved from an anchor point. When you are using the Shape Tools in Figma, you are creating vector shapes. These are easily modified to create wireframe layouts, or graphic elements such as buttons. Vector shapes can continue to be modified after they have been created. Vector shapes also differ from raster images as they are not created within a resolution pixel grid, meaning that resolution is not an attribute of a vector graphic – dimensions: width and height, fill and stroke. Which makes vector file formats indispensable for logos and icons, as they can be scaled with no issues of poor resolution. Using the Pen tool or Pencil tool in Figma allows you to create unique vector paths to create icons, symbols, or even vector illustrations. The vector shapes can be filled with solid colors, gradients, images, or videos; an alpha transparency can also be applied to these shapes. 64 Chapter 2 Adding Content to Figma Screens Complicated vector graphics such as logos and icons have traditionally been created in desktop applications that focus on vector graphic creation such as Adobe Illustrator or Affinity Designer. Once created, the files are then saved as SVG files for placement into Figma. You may think about vector graphics as a connect-the-dots exercise (Figure 2-9) but with much more precision. The anchor points are all connected with vector paths. Control of anchor points can create straight paths, or angled corners, rounded corners (called Bezier curves) with handles that help determine the height, length and angle of the rounded corners. Figure 2-9. Vectors can be regarded as a connect-the-dots format with the dots being anchor points Scalable Vector Graphics or.SVG images are traditionally used for line art such as icons or illustrations and are created in such applications as Adobe Illustrator, Affinity Designer, or Bohemian Coding’s Sketch. You can also use Figma’s Pen tool to create.SVG images. There is also a Figma plug- in- LottieFiles - which are, essentially, animated.SVG files. What makes the.SVG format so efficient is that it is code driven and device independent. By that, we mean they are independent of device resolution and can be scaled up or down without any quality issues. The other advantage to.SVG files is they are code driven, meaning your development team can directly add the.SVG code, shown in Figure 2-10, to their code base or “tweak” the code with the approval of the UI design team. 65 Chapter 2 Adding Content to Figma Screens Though Illustrator’s.ai native format can't be imported into Figma, you can still select the object on the Illustrator artboard and copy and paste it directly into Figma. Figure 2-10. Adobe Illustrator lets you save line art as both a.SVG graphic and code Figma and Video We have all had the experience of watching a video on a smartphone and it stops and starts throughout playback. This is not your fault or that of your provider’s 4G or 5G network. The video has not been optimized for streaming playback. In very simple terms, a video’s information streams into a cache. When the cache has enough information to play the video, the video starts playing. Why a video starts and stops is due 66 Chapter 2 A

UX Design with Figma PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue