Designing and Prototyping Interfaces with Figma Elevate Your Design Craft with UX/UI Principles and Create Interactive Prototypes
Are you a UI/UX designer eager to learn the art of creating compelling interfaces using Figma? Look no further! The highly anticipated new edition is here to transform your creative journey. Explore Figma's latest features and delve into the power of variables and conditional Prototyping. Get r...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham, England :
Packt Publishing
[2023]
|
| Edición: | Second edition |
| Colección: | Expert insight.
|
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009790332906719 |
Tabla de Contenidos:
- Cover
- Copyright
- Contributors
- Table of Contents
- Preface
- 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 vs web app
- Setting up Font Installer
- Transitioning to Figma from Sketch and Adobe XD
- Coming from Sketch
- How difficult is it to go from Sketch to Figma?
- Coming from Adobe XD
- A quick final thought
- Exploring the welcome screen
- Recents
- 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
- A - Select and Hand tool
- B - Marker
- C - Sticky Notes
- D - Shapes and Connectors
- E - Text
- F - Sections
- G - Tables
- H - Stamps and Reactions
- I - Widgets, Stickers, Templates, and more
- Brainstorming with others
- Moving to the next step
- Creating moodboards and personas in FigJam
- Research phase
- Conducting competitive analysis
- 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
- Getting used to the toolbar
- Main tools
- A - Menu
- B - Move
- C - Scale
- D - Frame
- E - Section/Slice
- F, G, H, I, J, and K - Shapes
- L - Place image/video…
- M - Pen
- N - Pencil
- O - Text
- P - Resources
- Q - Hand
- R - Comment
- Settings and more
- S - File title
- T - active users
- U - Share
- V - Dev mode
- W - Present
- X - Zoom/view
- Quick shortcuts
- Exploring the left panel
- Layers and Pages
- Assets.
- Exploring the right panel
- Design
- Prototype
- Inactive state
- With an Active selection
- 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
- What's 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
- A - Color modes
- B - Blend modes
- C - Color palette
- G - Eyedropper tool
- H - Color models
- I - Color styles
- 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?
- A - Direction
- B - Gap
- C - Padding
- D - Alignment
- 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
- A - top navigation menu
- B - main carousel
- C - content cards
- D - repeated rows.
- 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
- Login view
- Sign Up view
- Home view
- Content Detail view
- 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
- On click/On tap
- On drag
- While hovering
- While pressing
- Key/Gamepad
- Mouse enter/Mouse leave
- Mouse down/Mouse up
- After delay
- 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 in Browsers and Real Devices
- Viewing your interactive prototype
- Running prototypes on desktop/web
- Using the inline preview
- 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-asset export
- Exploring Dev Mode
- Switching to Dev Mode
- Overviewing the file
- Design to code
- Extending Dev Mode
- Handing over the project for development
- What's next?
- Documenting, reiterating, and improving
- Summary
- Chapter 12: Discovering Resources, Plugins, and Widgets 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
- More design resources
- Extending Figma with plugins
- Running and managing plugins
- Suggested plugins
- Iconify
- Content Reel
- Clay Mockups 3D
- Contrast
- LottieFiles
- Speeding up your flow with AI
- FigGPT
- Figma Autoname
- Wireframe Designer
- Magician
- Using widgets in Figma and FigJam
- Understanding the difference between widgets and plugins
- Suggested widgets
- Checklist (Figma/FigJam)
- Jira/Asana (Figma/FigJam)
- Giphy Stickers (Figma/FigJam)
- Jambot (FigJam)
- Summary
- Chapter 13: Going Advanced with Variables and Conditional Prototyping
- Understanding variables
- When to use variables
- Variables, collections, and modes
- Going responsive and multilingual with variables
- Pushing further with conditional prototyping
- The logic behind conditional prototyping
- Advanced prototyping with variables and conditionals
- Summary
- Packt
- Other Books You May Enjoy
- Index.
