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

Packt.com

Subscribe to our online digital library for full access to over 7,000 books and videos, as well as industry leading tools to help you plan your personal development and advance your career. For more information, please visit our website.

Why subscribe?

Spend less time learning and more time coding with practical eBooks and Videos from over 4,000 industry professionals
Improve your learning with Skill Plans built especially for you
Get a free eBook or video every month
Fully searchable for easy access to vital information
Copy and paste, print, and bookmark content

Did you know that Packt offers eBook versions of every book published, ...