Wallop System, built with Modulz

April 09, 2020

I've often thought about creating a design system for myself. Something I could rely on for my personal website and projects. The thought of being able to build consistent user interfaces using my own system was exciting.

I had never gotten round to it, though. It always seemed too big a job and I had too many questions:

Fast forward a few years... and I've finally done it! I've got my own design system, aptly named Wallop System.

In this article I'll share how I designed, developed and deployed a production-ready design system with Modulz — without writing code.

Creating, styling and publishing

In this section, I'll go through how I created, styled and published Wallop System to npm.

Creating a design system

First step was to create a new Design System in Modulz.

Updating settings

On the design system settings page, I can update the name, style guide subdomain and manage team members - good for collabs.

Configuring tokens

On the editor screen, I have access to tokens. Here I can add, remove or update tokens, from colors to font families.

Styling components

On the editor screen, I can start consuming my tokens and applying them to components. I can also create and manage variants - super powerful!

Publishing

On the publish screen, I can publish my design system to npm. I can also select between a major or minor version and add release notes. Have a look at Wallop System on npm.

Style guide

A documented style guide is auto generated. This will serve as documentation for anyone wishing to use my design system. Have a look at Wallop System's style guide.

Consuming the generated library

In this section, I'll go through how I'm consuming Wallop System as a React library.

Installing it

Since this is already published to npm, I can install it as a normal dependency:

yarn add @peduarte/wallop-system

Wrapping it in a Provider

Then, I can wrap my app in WallopProvider, this makes it so all of the components are correctly bound to my tokens:

import { WallopProvider } from "@peduarte/wallop-system";
 
<WallopProvider>
  <h1>Wallop!</h1>
</WallopProvider>;

Importing components

I'm able to import all of my components directly from @peduarte/wallop-system, like this:

import { Box, Text } from "@peduarte/wallop-system";
 
() => (
  <Box>
    <Text as="1">Wallop!</Text>
  </Box>
);

Using system props

All components support margin, padding and sx props. I can use these to start laying out components on the page:

import { Box, Text } from "@peduarte/wallop-system";
 
() => (
  <Box m="5" sx={{ backgroundColor: "black" }}>
    <Text as="h1" sx={{ color: "gray" }}>
      Wallop!
    </Text>
  </Box>
);

If I want to change a value based on breakpoint, I can use the responsive syntax, like this:

import { Box, Text } from "@peduarte/wallop-system";
 
() => (
  <Box m={["3", "5"]} sx={{ backgroundColor: "black" }}>
    <Text as="h1" sx={{ color: "gray" }}>
      Wallop!
    </Text>
  </Box>
);

This API is inspired by Styled System and Theme UI.

Using variants

All the variants created in Modulz are available here too. Obviously. And I can use them like this:

import { Box, Text } from "@peduarte/wallop-system";
 
() => (
  <Box m={["3", "5"]} sx={{ backgroundColor: "black" }}>
    <Text as="h1" size="5" sx={{ color: "gray" }}>
      Wallop!
    </Text>
  </Box>
);

Demo

If youre curious to play around with the exported code, I've created a Wallop System playground on CodeSandbox.

Feel free to fork it and build something with it. Make sure to refer to the style guide for documentation

Conclusion

Being able to focus on the design system in one place, and then compose my screens in another felt really refreshing.

When I'm in Modulz, I'm worried about my tokens, the syling of my components, their variants, and how everything works in harmony – how a design system should be.

When I'm coding, my focus is on layout, logic and product-features. I can trust that when I import a component from my design system it works and it looks how it should.

It felt like the gap between design and development has just gotten shorter.

But most importantly, I can now answer those questions that have been hunting me for years:

How do I build accessible components?

Modulz took care of that. I didn't have to worry about the accessibility concerns of Tooltip, Tabs, Select and many other complex components.

How do I keep it up to date?

Modulz took care of that. Whenever a token is changed, all of the instaces where that token's being used get automatically updated. Publishing a new version to npm is only a few clicks away.

How do I structure my tokens?

Modulz took care of that. I just had to choose their values.

How about the Component API?

Modulz took care of that. All components are shipped with a consistent and documented API, I just had to worry about passing the right props.

Thanks for reading

If you have any questions about Modulz or would like to learn more, feel free to reach out to me on the bird site.