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.
In this section, I'll go through how I created, styled and published Wallop System to npm.
First step was to create a new Design System in Modulz.
On the design system settings page, I can update the name, style guide subdomain and manage team members - good for collabs.
On the editor screen, I have access to tokens. Here I can add, remove or update tokens, from colors to font families.
On the editor screen, I can start consuming my tokens and applying them to components. I can also create and manage variants - super powerful!
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.
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.
In this section, I'll go through how I'm consuming Wallop System as a React library.
Since this is already published to npm, I can install it as a normal dependency:
yarn add @peduarte/wallop-system
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>;
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>
);
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.
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>
);
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
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:
Modulz took care of that. I didn't have to worry about the accessibility concerns of Tooltip, Tabs, Select and many other complex components.
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.
Modulz took care of that. I just had to choose their values.
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.
If you have any questions about Modulz or would like to learn more, feel free to reach out to me on the bird site.
Share this post on Twitter