Open Sourcing My Design System
I'm open sourcing the Figma file I use to design and create images for my personal site.
It's right here, ready for you to explore: mikebifulco.com Design System.
This giant file contains almost all the images I've ever published on mikebifulco.com, meticulously organized and ready for you to explore.
What's Inside?
First off, what's in the Figma file? Here's the rundown:
- Brand Assets: Logos, lockups, and even mockups for email components like ad placements and CTAs
- Full Articles: Header and body images for tutorials, essays, and other long-form content
- Newsletters: Every image for every one of my newsletters, including the one you're reading right now
- Videos: Thumbnails for all my videos
The images I use go a long way in helping me communicate my ideas, and in getting people to click through to my articles. I take the time to create a unique Open Graph Header image for every article I write, so that each one stands out on social media.
I've spent a lot of time over the years organizing, refining, and refining this system, and I'm excited to share it with you.
Why Open Source This?
The point of open-sourcing this Figma file is simple: there's nothing magical here. I'm not doing anything you can't do. Heck, the source code for the rest of my site is publicly viewable as well on github (mbifulco/blog), so this is a perfect pairing.
Having a system like this helps every article I write stand out a bit more. And I hope it can help you too.
A Tool for Efficiency
One of the biggest advantages of having everything organized in Figma is that it makes publishing easy. I've created a toolkit for myself that minimizes decision fatigue.
Need a header image for a new article? There's a template for that. Newsletter? Ditto. This means I can publish content faster without getting bogged down by the details every single time.
Stay Organized
This file keeps me organized. If I need to add, remove, or edit anything in the future, I can come back to this file and do it seamlessly. No more hunting around for that one logo or header image from two years ago.
Opportunity for more
My hope is that by sharing this publicly, I'll be keeping myself accountable. This figma file is the foundation of what will eventually become a full-blown design system.
If you've dabbled in design systems before, you'll notice It's missing some critical pieces, like specific color selections and layout mockups, but hey, it's a work in progress.
The Epiphany
Last week, I hit a milestone: nearly 70 published newsletters and 60 full articles. That's when it hit me—sharing this file might inspire you to create your own system. So here it is, for you to poke around and hopefully find some inspiration.
Check out the Figma file here: mikebifulco.com Design System. Explore it, use it, heck, feel free to model your own after it.
And as always, let me know what you think - hit reply and let me know if you have any questions or feedback.
Tiny Improvements
This post comes from my weekly newsletter for startup founders, indiehackers, and product builders, called 💌 Tiny Improvements. It's one small improvement shared each week, straight from my brainmeat to your inbox.
If you enjoyed this, I'd love it if you considered subscribing.
Top comments (0)