11.
Recap & Next Steps
Written by Prateek Prasad
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
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 to refresh your memory 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: Transitions & App Flow
In Chapter 8, 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 9: Feedback & Testing
In Chapter 9, 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 a filter feature and a new iteration for the movie list UI.
Chapter 10: Design Systems
Finally, in Chapter 10, 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.
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: