book

Designing and Prototyping Interfaces with Figma

by Fabio Staiano

March 2022

Beginner to intermediate

382 pages

8h 7m

English

Packt Publishing

Read now

Unlock full access

ForewordContributorsAbout the authorAbout the reviewer
Who this book is forWhat this book coversTo get the most out of this bookDownload the color imagesConventions usedGet in touchShare Your Thoughts
What is Figma?Why Figma?Creating an accountChoosing the right planDesktop app versus web appSetting up Font InstallerTransitioning to Figma from Sketch and Adobe XDComing from SketchComing from Adobe XDA quick final thoughtExploring the welcome screenRecent and DraftsCommunity Teams and ProjectsFigma and FigJam filesAccount and notificationsSummary
Exploring ideas and collaborating in FigJamExploring FigJamBrainstorming with othersMoving to the next stepCreating moodboards and personas in FigJamResearch phaseStarting a moodboardCreating user personasBuilding user flow in FigJamThe golden pathBe the userSummary
Starting a new design projectDesign filesFrames and groupsInterface overviewExploring the toolbarMain toolsSettings and moreQuick shortcutsExploring the left panelLayers and pagesAssetsExploring the right panelDesignPrototypeInspectHelp CenterSummary
Evolving the idea to a wireframeWhat is a wireframe?Why mobile-first?Playing with shapes in FigmaBasic shapesCombining shapesAdvanced vectors with the Pen toolWhat are vector graphics?Discovering the Pen toolVector networksDeveloping the app structureFlow to skeletonShaping the interfaceWhat's next?Summary
Getting started with gridsGrids are everywhereGuides and layout gridsWorking with typography, colors, and effectsTypography matters Choosing a paletteCreating effectsIntroducing stylesPreparing your fileCreating and managing grid stylesCreating and managing text stylesCreating and managing color and effect stylesSummary
Introducing auto layout What is auto layout?Adding, removing, and rearranging elementsNesting auto layoutResizing and constraintsResizing elementsDifferences with constraintsApplying auto layout to our interfaceShaping a buttonCompleting the viewSummary

Creating and organizing componentsWhat are components?Building a view using componentsExtending components with variantsWhy use variants?Setting up our Content Detail viewImplementing variantsMultiplayer mode, libraries, and version controlWorking with multiplayer featuresManaging librariesPreserving your work with version historySummary
Discovering responsive designDesign to code with fluid layoutsMobile-firstAdjusting the interface for tabletsIntroducing breakpoints Adjusting the interface for the web and desktopScaling up to the web and desktopPolishing detailsSummary
Mastering transitions and triggersMoving between frames with transitionsExploring triggersAnimating with smart animateWhat is smart animate?Getting advanced with smart animateStructuring interactive componentsWhat are interactive components?Creating interactive componentsCreating interactive overflows and overlaysMaking our view scrollable with overflowsCreating interface overlaysSummary
Viewing your interactive prototypeRunning the prototype on desktop/the webRunning the prototype on a smartphone/tabletSharing your prototype with othersLinking the prototype and managing permissionsEmbedding the prototypeWorking with feedback and reviewsViewers and commentsStructuring flowsAdvanced user testingSummary
Exporting from FigmaWhat formats are supported?Single- and multiple-assets exportExploring the Inspect tabStyles overviewDesign to codeHanding over the project for developmentWhat's next?Documenting, reiterating, and improvingSummary
Exploring the Figma CommunityAccessing and publishing to the Figma CommunityStarting off with FigJam and templatesFinding useful resourcesUI kits and design systemsEven more stuffExtending Figma with pluginsInstalling and managing plugins Suggested plugins Summary
Other Books You May EnjoyPackt is searching for authors like you

Content preview from Designing and Prototyping Interfaces with Figma

Part 1: Introduction to Figma and FigJam

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

In this part, we cover the following chapters: