I’ll be the first to admit it.
I’m a developer, not a designer.
Put me in front of some tricky Laravel code or a complex WordPress project, and I’m right at home. That’s what I’ve been doing for over a decade.
But a blank Figma file? That’s always been my biggest hurdle.
Staring at a blank screen and trying to create something from nothing is a real challenge. I realized that to be more efficient and deliver better work for my clients, I needed a more effective process. I needed a head start.
So I decided to build one myself. This is how I created my own design system, even though design isn’t my natural strong suit.
Finding a Head Start with DesignKit
My breakthrough came in 2023 when I stumbled upon a Figma resource called DesignKit.
It was precisely the kind of head start I was looking for, especially as I was designing the themes for my Crosswinds Framework.
At first, it was honestly a little overwhelming.
I was learning Figma at the same time, and the kit had so many options and features. It took a while to just sit with it and figure out what was what.
However, as time has passed, I’ve become more comfortable with both Figma and DesignKit.
At the same time, I started to realize that it had more features than I really needed, and that I needed to create something that worked more for what I wanted and needed. So it was time to build the design system that worked for me.
Building the Design System
As you can already see, a significant portion of the design system originates from DesignKit. It has already done a lot of the heavy lifting, and you don’t always need to reinvent the wheel.
I first started by planning it all out. First, I wrote down everything that I needed my design system to have so that it gave me the perfect head start for every project.
Then I figured out what I wanted to bring over, what I was okay with leaving out of my design system, and what I would need to create from scratch to complete it.
Once the plan was in place, the next step was to implement it.
Bringing Over Elements from DesignKit
I’d say I brought over at least 75 percent of the initial setup from DesignKit, which was a significant time-saver.
I brought over the “Exploration” section because I love having one place to drop design inspiration for a project. Having a single place to view different design ideas and inspiration alongside the rest of the designs is excellent. Additionally, each piece of inspiration includes a link to view the full-size version.
I also consolidated all the branding items to make it easier to manage logos and colors, which is essential for client work.
Next came all the core UI elements—buttons, form fields, media placeholders, and all the other small components that make up a website. These were always the most complex and most tedious parts of creating a design from scratch, so having those done 75 percent of the way through from the start is a massive help.
Finally, I brought over the larger components and patterns, such as hero sections, pricing tables, testimonials, and calls to action.
By the time I finished bringing over the DesignKit elements, I had already given myself a 50 percent head start on all future projects.
Customizing Those Elements
With all the pieces in place, I started customizing.
I removed a few things I knew I’d never use, but for the most part, DesignKit provided me with such a great starting point that I didn’t have to make many changes.
One of the first things I did was add all of the default Tailwind color schemes as color styles in Figma. This makes it extremely easy to call up a specific color when I need it, as I don’t have to visit Tailwind’s website, look up the color codes, and then import them into the designs. And if I don’t need to use those colors, I can simply remove them from the project.
For custom colors, I set up a simple system: base, contrast, primary, secondary, and accent colors that I can change for any website I’m working on.
Setting Up Components
With the basic styles customized, I began refining the components.
These were things like a single feature, testimonial, blog post, etc., — things that could be put together to create various patterns.
Again, these were other things that would become a huge time sink when creating designs from scratch. It takes a lot just to get them set up, and that’s before you have to add in the actual design elements to them.
However, setting them up as part of the design system and utilizing Figma’s components and variations features means I start every project with 75 percent of the work for those components already done. I just have to worry about the styles and design elements that are specific to that project.
Creating Prebuilt Patterns
Once the components were complete, it was time to create some prebuilt patterns.
Again, a lot of what DesignKit had already made this a breeze. There wasn’t much that I needed to do.
I only created a handful of different patterns for each component. When it comes to designing a website, I believe this is where I should be spending a lot of my time to achieve a great look and feel for the site. So there’s no need to spend a lot of time now on something that probably won’t be used.
But it’s still a great head start for future projects.
Wireframes and Mockups
The final piece of the puzzle was bringing over the wireframing and mockup sections from DesignKit.
This has completely changed my workflow for the better. It helps me separate the task of building the page structure from the task of adding the final content.
It’s so much easier to build out the wireframes with dummy content first. I can focus purely on layout and flow without getting distracted by a specific headline or image.
Once the structure is approved, swapping in the real content is a breeze. That, combined with all the prebuilt components and patterns, has made the entire design process feel smooth and logical.
I think I’ve finally found my perfect workflow.
How I’ll Use It in the Future
Moving forward, this design system will serve as the foundation for every website I build.
Some projects will utilize all of it, while others will use less, and some will require me to design new components. When that happens, I’ll roll those new designs right back into the system.
The idea is for it to be a living, breathing toolkit that evolves with every project.
It’s a system designed to help me be a better, more efficient developer and designer, which means I can deliver better results for the small businesses I’m here to help.
