Heads up... You're reading this book for free, with parts of this chapter shown beyond this point astext.
You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.
Over the course of the past seven chapters, you’ve built out a fully-fledged mobile app experience, picking up the tools of the trade along the way.
You looked at existing apps for inspiration and uncovered their design foundations. You also discovered some neat patterns to address interface challenges, like navigation and forming an informational hierarchy.
Using what you learned, you built out a high-fidelity version of your app and used components to refine it. While you did all that, you also introduced a lot of flexibility in the process.
In this chapter, you’ll connect everything you’ve learned so far to understand how that information comes together in a design system.
Understanding Design Systems
At its most primitive level, a design system is simply a collection of components you can reuse and recombine to design apps built according to a standard.
Think of those components like Lego bricks, which you can combine in multiple ways to build new experiences.
Don’t confuse design systems with style guides and UI kits, which are collections of pre-styled templates for building screens. They focus on a much higher level of abstraction.
Design systems go much deeper, bringing coherence to an organization’s products. Think about it this way: In a large company, multiple designers work on the same product and features. When each designer tackles the project in their own unique way, it results in unwanted variations and inconsistencies in different features of the same product. That becomes confusing for users.
Following a guideline and reusing the same fundamental principles across features and screens brings cohesion and consistency, not only within a single product’s features, but also across multiple products offered by the same company.
An analogy that might resonate well with engineers is to think of it like extracting core pieces of business logic into reusable libraries or modules and leveraging them when building new features for your products.
Just like coding conventions and style guidelines, how you build a design system varies across different companies and teams to suit their unique needs. The process evolves over time.
Goals of a Design System
Although design systems vary dramatically from company to company, they all try to meet some common goals:
Organizing the Colors
Download this chapter’s materials, then open chapter-08-starter.fig in Figma. This file contains the final states of the components, typography and colors. You’ll start by organizing and documenting the colors.
Improving the Typography Page
Open the Typography page and add a new frame measuring 397 × 774.
Cleaning up the Icons
For the final bit of cleanup, you’ll tidy up the icons. Open the Components page. The names of the icons and the context in which they’re used in the project are confusing.
Handling Code Generation and Asset Exports
When building screens in code, developers target a multitude of device sizes and resolutions. This is difficult because they have to fit the same amount of information into a variety of screen sizes.
Go back into the Components page and select the icons from the Icons frame.
Generating Code for UI Elements
Another helpful feature from Figma is code generation for UI elements. Select any UI element — like components, shapes, frames or groups — and click the Inspect tab in the Properties panel on the right:
Where to Go From Here?
Congratulations! With the tweaks and edits you made, your project is far more documented and flexible than before. Not only did you decompose your designs into their logical layers, but you also conveyed more information about lower-level details like colors and text styles.
- Design systems are collections of components used to design apps according to a standard.
- Documenting the typography and colors of the design system is essential so these elements are consistent throughout the project.
- Figma’s assistive developer handoff features make exporting assets in varying resolutions easy.