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

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:

120 current variants, Interactive Component ready

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

Next Week

If you want to check out the updated Figma project, you can check it out here.

--

--

Design Systems @ CBS Sports

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store