UX Design with Figma : User-Centered Interface Design and Prototyping with Figma

• Autore: Green Tom
• Pubblicazione: Berkeley, CA : , : Apress L. P., , 2024; ©2024
• Edizione: 1st ed.
• Descrizione fisica: 1 online resource (585 pages)
• Disciplina: 620/.00420285
• Soggetto topico: Computer-aided design; Computers - Design; Computer graphics
• Altri autori: BrandonKevin
• Note generali: Includes index.
• Nota di contenuto: Intro -- 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.
• Sommario/riassunto: Maximize Figma's arsenal of tools and plugins within a team-based collaborative environment and accelerate your company's decision making. This book will show you where Figma fits into the user experience (UX) design process from documentation to developer handoff. Since its release as a browser-based design tool in 2016, Figma has fast become the de facto UX Design tool for the industry mainly due to its accessibility and ease of use. As you move through the book you will learn where Figma fits in the UX process. For example, using FigJam (an online whiteboard) for brainstorming, and creating interactive prototypes for mobile devices, tablets, and web sites. You'll also see how Figma is used to create and integrate with design systems, and how variables, when applied to design system components, can accelerate the design and development workflow. With the help of step-by-step examples, and using Figma's tools and templates, you'll create artifacts such as Flow and Journey diagrams, Personas, and wireframes. From there you will explore other design and interactivity features, and how to prepare a Figma file for handoff to a development team. This book is your roadmap to utilizing Figma, the industry's fastest growing collaborative design tool for building meaningful products. What You Will Learn Create interactive prototypes Test and submit designs for team review Understand the collaborative workflow involved in an UX project Prepare common UX documentation Who This Book Is For Designers, developers, and UX specialists with little-to-no Figma experience who are looking to integrate it within their workflows, and intermediate Figma users who are just starting to become involved in the collaborative UX workflow.
• Titolo autorizzato: UX Design with Figma
• ISBN: 9798868803246
• Formato: Materiale a stampa
• Livello bibliografico: Monografia
• Lingua di pubblicazione: Inglese
• Record Nr.: 9910869155203321
• Lo trovi qui: Univ. Federico II
• Serie: Design Thinking Series