Chapters

Hide chapters

App Design Apprentice

Second Edition · Figma

8. Design Systems
Written by Prateek Prasad

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

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.

Exporting Icons

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.

Key Points

  • 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.
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2024 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now