Helion


Szczegóły ebooka

Designing and Prototyping Interfaces with Figma

Designing and Prototyping Interfaces with Figma


A driving force of the design tools market, Figma makes it easy to work with classic design features while enabling unique innovations and opening up real-time collaboration possibilities. It comes as no surprise that many designers decide to switch from other tools to Figma.

In this book, you'll be challenged to design a user interface for a responsive mobile application having researched and understood user needs. You'll become well-versed with the process in a step-by-step manner by exploring the theory first and gradually moving on to practice. You'll begin your learning journey by covering the basics of user experience research with FigJam and the process of creating a complete design using Figma tools such as Components, Variants, Auto Layout, and much more. You'll also learn how to prototype your design and explore the potential of community resources such as templates and plugins.

By the end of this Figma book, you'll have a solid understanding of the user interface workflow, managing essential Figma tools, and organizing your workflow.

  • Designing and Prototyping Interfaces with Figma
  • Foreword
  • Contributors
  • About the author
  • About the reviewer
  • Preface
    • Who this book is for
    • What this book covers
    • To get the most out of this book
    • Download the color images
    • Conventions used
    • Get in touch
    • Share Your Thoughts
  • Part 1: Introduction to Figma and FigJam
  • Chapter 1: Exploring Figma and Transitioning from Other Tools
    • What is Figma?
      • Why Figma?
      • Creating an account
      • Choosing the right plan
    • Desktop app versus web app
      • Setting up Font Installer
    • Transitioning to Figma from Sketch and Adobe XD
      • Coming from Sketch
      • Coming from Adobe XD
      • A quick final thought
    • Exploring the welcome screen
      • Recent and Drafts
      • Community
      • Teams and Projects
      • Figma and FigJam files
      • Account and notifications
    • Summary
  • Chapter 2: Structuring Moodboards, Personas, and User Flows within FigJam
    • Exploring ideas and collaborating in FigJam
      • Exploring FigJam
      • Brainstorming with others
      • Moving to the next step
    • Creating moodboards and personas in FigJam
      • Research phase
      • Starting a moodboard
      • Creating user personas
    • Building user flow in FigJam
      • The golden path
      • Be the user
    • Summary
  • Chapter 3: Getting to Know Your Design Environment
    • Starting a new design project
      • Design files
      • Frames and groups
      • Interface overview
    • Exploring the toolbar
      • Main tools
      • Settings and more
      • Quick shortcuts
    • Exploring the left panel
      • Layers and pages
      • Assets
    • Exploring the right panel
      • Design
      • Prototype
      • Inspect
      • Help Center
    • Summary
  • Chapter 4: Wireframing a Mobile-First Experience Using Vector Shapes
    • Evolving the idea to a wireframe
      • What is a wireframe?
      • Why mobile-first?
    • Playing with shapes in Figma
      • Basic shapes
      • Combining shapes
    • Advanced vectors with the Pen tool
      • What are vector graphics?
      • Discovering the Pen tool
      • Vector networks
    • Developing the app structure
      • Flow to skeleton
      • Shaping the interface
    • Whats next?
    • Summary
  • Part 2: Exploring Components, Styles, and Variants
  • Chapter 5: Designing Consistently Using Grids, Colors, and Typography
    • Getting started with grids
      • Grids are everywhere
      • Guides and layout grids
    • Working with typography, colors, and effects
      • Typography matters
      • Choosing a palette
      • Creating effects
    • Introducing styles
      • Preparing your file
      • Creating and managing grid styles
      • Creating and managing text styles
      • Creating and managing color and effect styles
    • Summary
  • Chapter 6: Creating a Responsive Mobile Interface Using Auto Layout
    • Introducing auto layout
      • What is auto layout?
      • Adding, removing, and rearranging elements
      • Nesting auto layout
    • Resizing and constraints
      • Resizing elements
      • Differences with constraints
    • Applying auto layout to our interface
      • Shaping a button
      • Completing the view
    • Summary
  • Chapter 7: Building Components and Variants in a Collaborative Workspace
    • Creating and organizing components
      • What are components?
      • Building a view using components
    • Extending components with variants
      • Why use variants?
      • Setting up our Content Detail view
      • Implementing variants
    • Multiplayer mode, libraries, and version control
      • Working with multiplayer features
      • Managing libraries
      • Preserving your work with version history
    • Summary
  • Chapter 8: User Interface Design on Tablet, Desktop, and the Web
    • Discovering responsive design
      • Design to code with fluid layouts
      • Mobile-first
    • Adjusting the interface for tablets
      • Introducing breakpoints
    • Adjusting the interface for the web and desktop
      • Scaling up to the web and desktop
      • Polishing details
    • Summary
  • Part 3: Prototyping and Sharing
  • Chapter 9: Prototyping with Transitions, Smart Animate, and Interactive Components
    • Mastering transitions and triggers
      • Moving between frames with transitions
      • Exploring triggers
    • Animating with smart animate
      • What is smart animate?
      • Getting advanced with smart animate
    • Structuring interactive components
      • What are interactive components?
      • Creating interactive components
    • Creating interactive overflows and overlays
      • Making our view scrollable with overflows
      • Creating interface overlays
    • Summary
  • Chapter 10: Testing and Sharing Your Prototype on Browsers and Real Devices
    • Viewing your interactive prototype
      • Running the prototype on desktop/the web
      • Running the prototype on a smartphone/tablet
    • Sharing your prototype with others
      • Linking the prototype and managing permissions
      • Embedding the prototype
    • Working with feedback and reviews
      • Viewers and comments
      • Structuring flows
      • Advanced user testing
    • Summary
  • Chapter 11: Exporting Assets and Managing the Handover Process
    • Exporting from Figma
      • What formats are supported?
      • Single- and multiple-assets export
    • Exploring the Inspect tab
      • Styles overview
      • Design to code
    • Handing over the project for development
      • What's next?
      • Documenting, reiterating, and improving
    • Summary
  • Chapter 12: Discovering Plugins and Resources in the Figma Community
    • Exploring the Figma Community
      • Accessing and publishing to the Figma Community
      • Starting off with FigJam and templates
    • Finding useful resources
      • UI kits and design systems
      • Even more stuff
    • Extending Figma with plugins
      • Installing and managing plugins
      • Suggested plugins
    • Summary
    • Why subscribe?
  • Other Books You May Enjoy
    • Packt is searching for authors like you

  • Tytuły: Designing and Prototyping Interfaces with Figma
  • Autor: Fabio Staiano
  • Tytuł oryginału: Designing and Prototyping Interfaces with Figma
  • ISBN Ebooka: 9781800561922, 9781800561922
  • Data wydania: 2022-03-16
  • Identyfikator pozycji: e_2t43
  • Kategorie:
  • Wydawca: Packt Publishing