11 Insights & Next Steps

Over the course of the last ten chapters, you’ve gone from playing with basic shapes to building a full-fledged design system that acts as a foundation for your movie app. You learned about low-level design concepts like colors and typography and you built style guides for them. You realized the significance of flexibility and modularization in design and leveraged what you learned to build a component library to serve as a foundation for designing your app’s screens.

This has been a long journey, and you’ve added many essential skills to help you in your journey as a designer. This new information will come in handy when working on a new project, helping you collaborate more effectively and empathetically with your design team.

Before finishing the book, take a moment for a quick recap of the previous chapters and to get some ideas about where to go next with your new-found skills.

Recapping the Book

You’ll now look back over everything you learned. You can also use it in the future, to help you find the right chapter if you want a quick refresher on a specific subject.

Chapter 1: Book Overview & App Preview

The book started with a quick introduction to design and its importance in building an inclusive and satisfying product. You set up your Figma account, then got a high-level overview of the app you’d build. You finished the chapter by adding some interactions to a prebuilt app prototype.

Chapter 2: Workspace Tour & Figma Fundamentals

Chapter 2 kicked off with a quick walkthrough of the Figma interface and some fundamental concepts to help you work with the tool. You played with basic shapes and styled them with fills, strokes, gradients, then learned about effects. You then covered layers and the alignment options available in Figma and used that information to build the sign-in screen for the app.

Chapter 3: App Teardowns

Chapter 3 took a slight detour to show you how to build an eye for good design. You learned how to boil screens down to their simplest building blocks and realized that most screens are built using just a handful of elements. It’s the variation in placement and data that creates unique experiences. You compared how two popular apps, Airbnb and PocketCasts, leverage reusable components with variations in data to create drastically different experiences in their discovery screens.

Chapter 4: Wireframing & Screen Layout

Chapter 4 introduced you to the concept of wireframing and its importance in a design cycle. You learned how to reduce the app’s essence into key intents and components. You then used low fidelity wireframes to iterate on those intents. You got your first glimpse at the importance of reusability and built a component to create wireframes for the app’s key screens.

Chapter 5: Reusable Elements & Data

In Chapter 5, you built on what you learned in the previous chapters to decompose your designs into small, flexible and reusable components. You then leveraged these components to build out your app’s different screens. You also learned how to organize your designs using pages in Figma and how to use existing design libraries and plugins to make the design process easier.

Chapter 6: Typography

In Chapter 6, you dug deeper into the lower-level details of design, typography. You learned about the fundamentals of typography: fonts, typefaces and weights. You then used that information to build a typographic scale for your app and incorporate it into your app’s design.

Chapter 7: Colors

Chapter 7 continued with the lower-level details of design by diving into colors. You learned about the basics of color theory including what hue, saturation, contrast are and how they make designs more accessible. You then built the app’s color styles and incorporated them into the design.

Chapter 8: Design Systems

In Chapter 8, you learned about design systems and realized how everything you’ve done so far worked toward building a design system. You learned about the importance of documentation and improved your design system with helpful documentation. You finally looked at more elaborate and comprehensive design systems built for large scale projects.

Chapter 9: Transitions & Animations

In Chapter 9, the app came to life with transitions. You played with the different transition and animation options available in Figma to build a fully interactive prototype. You created different screen destinations within the app and handled the various interaction states within the app.

Chapter 10: Feedback & Testing

Finally, in Chapter 10, you handed the designs to your team for feedback and testing. You learned about the collaboration features available in Figma and you incorporated the feedback left by various stakeholders, including adding a filter feature and a new iteration for the movie list UI.

This brings you to this chapter. You’ve learned quite a lot, so take a step back to reflect upon how much you’ve grown throughout the last ten chapters. The skills you’ve picked up in this book will help you build inclusive products that look great.

Design is not just about the look and visual appeal of an app, but also about the emotions it invokes and how it simplifies a problem. Building something that looks great while being easy to understand and adopt by a large audience is no easy job.

With the skills you’ve covered here, you’ll be able to look deeper at problems in your app and ask questions to solve those problems at a more fundamental level.

More importantly, these skills give you the language to communicate and better collaborate with your design teams. You’ll have more insight into their process and be able to contribute toward the ideation of the product. As an engineer, you can use your knowledge to identify constraints early on and bring your perspective to the process.

Where to Go From Here?

With your shiny new design skills, the world is your oyster. You can take on new projects and crank their polish up to 11. But, if you’re keen on expanding these skills, I have a few recommendations for you:

• “The Design of Everyday Things” by Don Norman: Consider this the bible in the world of design, the book most designers swear by. This book takes examples from real-world objects, like doors and light switches, to uncover their usability issues and how you can build products that effortlessly guide their users to the correct actions.
• “Thinking with Type” by Ellen Lupton: This is a personal favorite because I’m a sucker for great typography. This book goes deep into typography and discusses aspects like font combination aesthetics. The best parts about this book are that it’s exercise-oriented and it goes into the history of typography.
• “Graphic Style: From Victorian to Hipster” by Steven Heller and Seymour Chwast: This book is like a historical archive or a survey of different design styles spanning decades. It’s full of illustrations and gives you an idea of how modern design is, in many ways, influenced by history and global cultures of the past.