Home iOS & Swift Books App Design Apprentice

10
Design Systems Written by Prateek Prasad

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

Unlock Now

Over the course of the past nine chapters, you’ve gone through an entire design cycle, building out a fully-fledged mobile app experience and 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 prototype of your designs 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 to use 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 convention 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, there are some common goals they all try to meet:

Organizing the colors

Download this chapter’s materials, then open chapter-10-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 Components page

For the final bit of cleanup, open the Components page. There are a few things to improve here.

Documenting the filter and genre tags

Next, you’ll work on the filter and genre tags. Visually, they’re similar. Someone working with these components on another project or feature might accidentally use the wrong one. To help convey the components’ intents, you’ll add documentation that will show up in the Assets section.

Converting buttons to components

As a final bit of cleanup for the project, you’ll extract the buttons the prototype uses, convert them to components and use the components instead.

Handling code generation & 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

You learned about what design systems are.

You covered the steps you took so far toward creating a design system.

You improved the typography and colors section of the design system with helpful documentation.

You explored Figma’s assistive developer handoff features.

11. Recap & Next Steps 9. Feedback & Testing

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.

Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below: