UX Design with Figma: User-Centered Interface Design and Prototyping with Figma (Design Thinking)

Table of Contents
About the Authors
About the Technical Reviewer
Acknowledgments
Introduction
Chapter 1: Learning the Figma Interface
	Figma and the UX Process
		The Figma Dashboard
		Creating a Team in Figma
		Access the Figma Community
		Getting Help
		The Figma Workspace
		Adding Frames
		Changing Frame Properties
		Using the Properties Panel
		Using the Color Picker
		Gradients
		Strokes
		Using the Polygon Tool
		Using the Layers Panel
		Testing Your Work
		Community Resources and Templates
			Obtaining the iOS and Android UI Kits
		Sharing
		Dev Mode
		Conclusion
Chapter 2: Adding Content to Figma Screens
	Vectors and Bitmaps
	Bitmaps and Figma
	Scaling Factors
	SVG Images and Figma
	Figma and Video
	Preparing Video for Figma
	Typography and Figma
		Text Properties
		Font Pairing
		Adding and Formatting Text in Figma
	Your Turn
		Adding a Grid
		Adding the Header
		Create the Hero Image
		Creating the Explore Section of the Site
		Adding Cards to the Design
		Adding a Text File in Figma
		Creating the Social Media Section
		Adding the Images
		Finishing the Web Page
	You Have Learned
Chapter 3: Figma and the UX Process
	What Exactly Is a Prototype
	Determining the Platform
	Building a Team in Figma
		Creating a Team Project
	Sharing and Collaboration
	Figma and User Testing
		Usability Testing vs. User Testing
		Usability Testing Requires Context
	Iteration and the “Messy” UX Design Process
	Accessibility and Inclusion in Figma
	Adding Plug-ins in Figma
	Using the Accessibility Plug-ins
		Using the Adee Color Contrast Tool
		Explore Inclusion with Cards for Humanity
	You Have Learned
Chapter 4: Creating UX Design Documentation
	Using the Figma Presentation Mode
	Brainstorming with FigJam
		How to Use FigJam AI
		Using the FigJam Drawing Tools
		Using the Connector Tool
		Adding Text to FigJam Objects
		Adding Comments to a FigJam File
		How to Add a FigJam File to Figma
	Creating Personas
		Create a Persona Using a Template
		Editing a Persona Template
		Creating a User Journey Map
		Adding Touchpoints
	Creating a User Flow Diagram
	Feedback and Iteration
		Your Turn: Create a User Flow Diagram in FigJam
		Build the Chart in Figma
		Add the Chart to Figma
	You Have Learned
Chapter 5: Building Low-Fidelity Prototypes
	What Is a Low-Fidelity Wireframe?
	The Case for and Against Wireframing
		Creating Wireframes
	Wireframing and the UX Design Process
		What Is a Content Wireframe?
	From Content Wireframe to Lo-Fi Wireframe
		Creating a Low-Fidelity Wireframe in Figma
		Creating a Team Library
		A Quick Word About Shared Libraries
		Build the Wireframe Using a Shared Library
	Create Wireframes Using a Wireframing Kit
		Use the Wireframer Library
	The Interactive Wireframe
		Add Interactivity to a Wireframe
		Testing an Interactive Wireframe
	Your Turn: Wireframe a Login Sequence Using FigJam
	You Have Learned
Chapter 6: Building Medium- Fidelity Prototypes
	Lean UX
	Agile
	Straight to Code
	What Is a Medium-Fidelity Prototype
		Choosing a Platform
		Graphics and Figma
	Installing and Using Imaging Plug-ins in Figma
		Color Correcting Images in Figma
		Manipulating Image Content in Figma
			Crop an Image in Figma
			Scale an Image in Figma
		Masking in Figma
	Fonts and Figma
	Color and Figma
	Create a Scrim Using a Gradient
	Adding Effects to Graphics
		Apply a Drop Shadow
		Apply an Inner Shadow to Create a 3D Effect
		Applying Blur Effects
		Applying a Blend Mode to a Layer
		Create a Mesh Gradient in Figma
	Using Auto Layout in Figma
	Your Turn: Create a Medium-Fidelity Mobile App Location Card
		Create the Top Search Bar
		Creating the Location Card
	You Have Learned
Chapter 7: Interactivity Fundamentals
	The Basics of Adding Interactivity in Figma
		Create a Drag Interaction
		Create a Hover Interaction
		Create a While Pressing Interaction
		Create a Component in Figma
		Add States by Creating Variants
		Adding Interactivity to a Component
		Create Interactivity Using a Component
	Your Turn: Create Interactivity Using Components and Variants
		Create a Component for the Home Button and Create a Text Property
		Create the Variant States for the Main Navigation Button
		Design Each of the Three States for the Main Navigation Home Button
		Apply Interactions to Each of the Three Button States
		Add the Main Navigation Button to the Header of the Swiss - Home Page
		Creating the Main Navigation Buttons
		Adding the Header Navigation to the Adventures Page
	You Have Learned
Chapter 8: Microinteractions in Figma
	Interactivity and Motion
	Playing with Time and Motion in Figma
		Microinteractions Overview
	The Principles of UX in Motion
		Easing and Smart Animate
		The Eases Available in Figma
		Editing an Ease
	Applying the Transformation Principle in Figma
		Create a Dissolve Transformation
		Create a Move Transition
		Create a Complex Interaction Using Smart Animate
	Create a Scrolling Behavior
		Create Scrolling Content
		Create a Scrolling Loop Animation
		Create a Scroll Control
		Applying the Obscuration Principle
		Using a Blur to Obscure the Image
	Your Turn
		Create an Overlay Side Menu Interaction
		Style the Overlay Side Menu Interaction
		Create a Card Template Area Using Auto Layout
		Create the Card Component Variants
		Apply an Accordion Microinteraction to the Card Component
		Add Content to the Card Instance
		Add a Second Card
	You Have Learned
Chapter 9: Design System Fundamentals
	The Single Source of Truth
	Where Do You Start?
	Take Stock of What You Have
		The Pattern Inventory
		The Color Inventory
		The Typography Inventory
		The Asset Inventory
		Figma Design Tokens
		Creating a Component Token
		Figma Design Tokens and Variables
		Organize the Variables
		Applying Variables
	You Have Learned
Chapter 10: Building Stuff
	Building an Image Carousel
	Create a Complex Carousel
		Create a Spinning Carousel
			Using the To Path Plug-in
			Rotating the Carousel
	Create Video Controls
		Create Interactive Video Controls
			Swap Component Icons
			Adding Interactivity to the Buttons
		Create a Progress Bar
		Create a Shopping Cart with Local Variables, Conditions, and Expressions
			Adding Variable Modes
			Linking Local Variables with Component Instances
			Using Expressions in the Prototype
			Creating an Expression
			Create a Conditional Expression
			Adding Variables to the Shopping Cart
			Calculating Multiples Using Variables
	Bonus Round: Create a Boolean Variable
	Animations Using LottieFiles
		Using Aninix to Create a Lottie Animation Using Figma
		Converting an Aninix Animation to a Lottie File
	Add Diversity with the Humaaans for Figma Plug-in
	You Have Learned
Chapter 11: Developer Handoff
	Handoff Starts with User Testing
	Device Preview Using the Figma Mobile App
	Using the Figma Presentation Mode for Sign-Off
	What Is a Handoff?
	Preparing Assets for Handoff
	The X Factor of Raster Images
	Code Introspection
	The Design/Build Iteration Cycle
	You Have Learned
	Conclusion
Index