
## 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](https://www.figma.com/design/On4yRGLcYLORVBIhBejboA/mikebifulco.com?node-id=0-2431&t=XlKb5D0viU7DPV4T-1).

This giant file contains almost all the images I've ever published on [mikebifulco.com](https://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:

1. **Brand Assets:** Logos, lockups, and even mockups for email components like ad placements and CTAs
1. **Full Articles:** Header and body images for tutorials, essays, and other long-form content
1. **Newsletters:** Every image for every one of my newsletters, including the one you're reading right now
1. **Videos:** Thumbnails for all my videos

<Image
  publicId="newsletters/open-sourcing-my-design-system/brand-assets"
  alt="The pages of the Figma file, showing brand assets, full articles, newsletters, and videos"
  caption="This file is a labor of love, organized over years of publishing."
/>

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](https://github.com/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](https://www.figma.com/design/On4yRGLcYLORVBIhBejboA/mikebifulco.com?node-id=0-2431&t=XlKb5D0viU7DPV4T-1). 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.

---

## Show & Tell

In a recent newsletter, I asked Tiny Improvements readers to share your projects with me. I got some truly incredible responses - thank you to everyone who shared! I'm always amazed by the talent and creativity that you all have.

### An incredible graphing calculator artist

Jake Walker's youtube is built around his incredible skill for creating beautiful, creative works with the Desmos graphing calculator. Jake is a CS student at NC State University, and I promise you that you're going to be blown away by his work.

Here's a great example to get you started: [Galaxy And Quasar Art in the Desmos Graphing Calculator](https://www.youtube.com/watch?v=5ykRxcsZjG0).

Holy moly. 🌌


---

## More of my work online

- [Surviving Other People's APIs](https://leanpub.com/surviving-other-peoples-web-apis?ref=mikebifulco.com) is a book I've been co-authoring with my APIs You Won't Hate co-founder, Phil Sturgeon. If you find yourself consuming APIs in your day-to-day work, this book is for you. Part of each sale goes to [Protect.earth](https://protect.earth), Phil's reforestation charity.

- I'm readying my next YouTube video for release - and I'd love it if you subscribed to my channel: [youtube.com/@mikebifulco](https://youtube.com/@mikebifulco).

- I'm also more and more active on Threads these days - if you're on there, I'd love to hear from you: [@irreverentmike](https://threads.net/@irreverentimke).


#figma: 1 posts tagged

Open Sourcing my Design System