132/So what’s a design system??

I found this in one of my old notes tab, i didn’t design this but i think these are some of the best definitions of what a design system is and does

A design system is a set of rules, a living library to make and collaborate on software.

Here’s how i work with and build my design systems for each project. This is the basic pre-requisite for me before starting work on the high-fidelity designs. I’m heavy on making a lot of changes in the hi-fi designs because they are the best visualization of how the final design would look like; something i can’t see in wireframes and lo-fi designs. This means a lot of big and tiny changes till if feels just right and i would go crazy remembering and resizing all the fonts and changing the colors with each iteration. That’s where design systems come in, and I’m so grateful for it (throwback to the dark days when i didn’t know what that is 😂)

Now we’re not reinventing the wheel here; i usually don’t start from scratch. When i was building my very first system, i scoured through community files and picked my favorites as a starting point. Choose a template that fits the best for you and make the tweaks. This is a living document that will change with each project, multiple times through the project even. But that’s the point.

I’m redoing my design system today and here’s what it looks like. i started with the ‘Figma Web Style Guide and FLEGOs’ community file. I’m not taking everything, just the pages for typography, buttons and input fields. The typography page here is so well made; when i my previous systems i never had a sample text written alongside the style to really see how it looks in action along with all the other font styles so i really like that and want to include that going forward.

Here are some cool resources and source files from the community that i took and molded into something my own and are great starting points and references to learn the concept and practical guides.

1. Figma Web Style Guide and FLEGOs
2. BAM Design system
3. Figma for Education: Intro to Design Systems
4. Figma Hanoi: Introducing Design Systems
5. Material 3 Design Kit
6. Build it in Figma: Design Systems
7. Dynamic components & Variants in design systems
8. Design systems compariative charts

I’ll share my own master design system on the Figma Community that i bring into each of my projects to then fill in and modify (working on the master cheat sheet right now :’)