Designing and Prototyping Interfaces with Figma: Learn essential UX/UI design principles by creating interactive prototypes for mobile, tablet, and desktop - Softcover

Fabio Staiano

Softcover

ISBN 10: 180056418X ISBN 13: 9781800564183

Publisher: Packt Publishing, 2022

Synopsis

Discover user experience and user interface design best practices while mastering a wide array of tools across Figma and FigJam

Key Features

• Learn the basics of user experience research, result organization, and analysis in FigJam
• Create mockups, interactive animations, and high-fidelity prototypes using this platform-independent web application tool
• Collaborate with a team in real-time and create, share, and test your designs

Book Description

A driving force of the design tools market, Figma makes it easier to work with the 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 possibilities with 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.

What you will learn

• Explore FigJam and how to use it to collect data in the research phase
• Wireframe the future interface with shape tools and vectors
• Define grids, typography, colors, and effect styles that can be reused in your work
• Get to grip with Auto Layout and the constraints to create complex layouts
• Create flexible components using styles and variants
• Make your user interface interactive with prototyping and smart animate
• Share your work with others by exporting assets and preparing development resources
• Discover templates and plugins from the community

Who This Book Is For

This book is for beginners looking to get into the UX/UI field and designers who want to move to Figma from other design tools. This guide will take you through the entire process of creating a full-fledged prototype for a responsive interface using all the tools and features that Figma has to offer. As a result, this Figma design book is suitable for both UX and UI designers, product and graphic designers, and anyone who wants to explore the complete design process from scratch.

Table of Contents

1. Exploring Figma and Transitioning from Other Tools
2. Structuring Personas and User Flows within FigJam
3. Getting to Know Your Design Environment
4. Wireframing a Mobile-First Experience Using Vector Shapes
5. Designing Consistently Using Grids, Colors, and Typography
6. Creating a Responsive Mobile Interface Using Auto Layout
7. Building Components and Variants in a Collaborative Workspace
8. User Interface Design on a Tablet, Desktop, and the Web
9. Prototyping and Creating Animations Using Smart Animate
10. Testing and Sharing your Prototype on Real Devices
11. Exporting Assets and Resources
12. Discovering the Figma Community

About this title

About the Author

Fabio Staiano is an Interface Designer, educator, and Figma Community Leader based in Italy, with a degree in Communication Design and a background in digital product design. After several years at the Italian creative agency Geko, where he later became a company partner, he contributed to digital products for established brands while supporting the local creative community. He began teaching user interface and web design in 2016 at The Guru Lab and later expanded his skills at the Apple Developer Academy, specializing in frontend development. Today, Fabio works as a design consultant, teaches at design academies, and delivers corporate training programs in Italy and abroad, focusing on interface design, design systems, and prototyping.

Edition details

• Publisher: Packt Publishing
• Publication date: 2022
• Language: English
• ISBN 10: 180056418X
• ISBN 13: 9781800564183
• Binding: Paperback
• Number of pages: 334