Squilp System Weekly #1: Figma Component Structure
In my previous article, I wrote about the plans for my upcoming design project: Squilp System. In order to expand my skills in both a technical and design direction, I want to create an open-sourced design system built on technology similar to that of an enterprise one.
Each week, I plan to give a short update on my work. It’s a good way to keep myself accountable and I hope that others can join the conversation.
Component Structure
Before I get into the technical pieces I discussed, I first need to create a base set of components to build out later.
To save future Andrew some time, components are nested within one another for easy changes across instances.
For example, our button component is an instance of the button-master which contains an instance of button-content-master. Edits made to master components will make their way up to our main components and their instances. Future Andrew will thank us.
Additionally, I use Public and Private to sort our components. Public contains our components and variants for general use. Private contains our master components, and shouldn’t be instantiated unless creating or editing components.
With that, I have our current set of buttons:
Along with the buttons, I have also built out some of the Form Field variants but they have a problem that I plan to go into next week.
Tokens
Along the way, I have also been keeping up with defining tokens for all the styles I use and apply to components. It’s sometimes easy to forget to create them along the way, but I’ve been keeping it pretty consistent while creating components.
Next Week
Moving forward, I plan to begin working on the React components for the current button variants. It’ll be a new experience for me so I look forward to the challenge!
If you want to check out the updated Figma project, you can check it out here.
