Designing and Prototyping Interfaces with Figma
Learn essential UX/UI design principles by creating interactive prototypes for mobile, tablet, and desktop
Fabio Staiano
BIRMINGHAM—MUMBAI
Designing and Prototyping Interfaces with Figma
Copyright © 2022 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Group Product Manager: Rohit Rajkumar
Publishing Product Manager: Kaustubh Manglurkar
Senior Editor: Aamir Ahmed
Content Development Editor: Feza Shaikh
Technical Editor: Saurabh Kadave
Copy Editor: Safis Editing
Project Coordinator: Rashika Ba
Proofreader: Safis Editing
Indexer: Sejal Dsilva
Production Designer: Vijay Kamble
Marketing Coordinator: Elizabeth Varghese
First published: February 2022
Production reference: 1100222
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.
ISBN 978-1-80056-418-3
Foreword
More than 10 years have passed since Fabio was my student. Since then, he hasn't stopped growing. I was able to see a lot of this evolution because Fabio was always at my side, first as a university lecturer, then as my right-hand man.
It's a great opportunity to have someone with you who, like Fabio, makes you feel that no project is too big or too difficult to deal with. Now, my academic career has taken me away from him and, from everything I see, Fabio continues to evolve.
When he told me he wanted to write this book, I immediately thought it would be a text that would enrich and enlighten many people, including me. When he then asked me to write this foreword, I was both honored and a little frightened. The reason why I was honored is quite clear; the reason that I was scared – and I still am a bit scared – is that this book is about software (Figma) that is the competitor of Adobe XD, and I, in various ways, have always collaborated with Adobe. But let's get rid of any misunderstanding immediately: Figma is a fantastic tool, just like Adobe XD is, but beyond the tools, we all know that what really matters is how you use them. More than that, to say something more specific to our field, much depends on our design ability. And this is exactly what this book excels at: covering how to combine the tool with the correct vision and design of a digital product. Fabio, in fact, does not stop at the tool itself but embellishes this book with principles and best practices that he himself has applied in the real world over all these years, best practices that have distinguished him as an incredible leader of digital productions.
When you complete the wonderful journey of Designing and Prototyping Interfaces with Figma, many of you will probably feel ready to face the challenges that the world of UI/UX will put before you, but maybe keeping this book on the bedside table will give you that comforting sense of security I mentioned before: no project will be too big or too challenging to deal with.
Italo Sannino
UI/UX professor at Accademia di Belle Arti and Adobe Community Professional
Contributors
About the author
Fabio Staiano is an experienced interface designer and Figma Community Advocate from Italy. After having been part of the creative agency Geko for several years, he later became a partner, creating digital products for well-known brands and running local events for the creative community. He then began his career in education in 2016, at The Guru Lab, teaching students about user interface and web design. In 2019, he decided to face new challenges by deepening his development skills at the Apple Developer Academy, where he specializes in frontend development and publishes various apps and boilerplate. Currently, he works as a consultant for IT projects and teaches at private design schools.
About the reviewer
Reony Tonneyck has been a designer since 2008. Currently, he's working on design systems at Khan Academy. Previously, he led the product design of QOMPLX's cybersecurity app, and spearheaded their design system. Before that, he led the creation of the first design system at AmWell. Where it all started was when Reony first read Atomic Design by Brad Frost.
Figma is where he found a new home within the design community. Eventually, he co-founded Figma's DC area community group for his "passion project," and proudly became a Figma Community Advocate.
Notably, the rest of his time is taken up by:
- Being a fun dad and loving husband
- Appreciating good food
- Being an avid PC gamer
- Advocating for electric vehicles
- Doing yoga and hiking