When I first started my web design studio, I used to design every single website from scratch. Since I’m not short on common sense, I quickly came to a realization: there’s no point in reinventing the wheel every time. Buttons, input fields, tabs, accordions — these elements repeat from project to project. They rarely need to be radically unique, but they swallow up a massive amount of time.
On top of that, I always built out animations for interactive prototypes. This is a critical step for us: it allows us to demonstrate the website’s full functionality to the client right during the design stage.
Why I Built It
At our studio, we primarily build promo websites and e-commerce projects. Our main goal is to quickly apply a brand identity to make the project unique, and then immediately start assembling pages.
While searching for the right tool, I looked through dozens of examples: Google’s Material Design, Taiga UI (used in T-Bank products), and countless others in the Figma Community. However, they all lacked the flexibility and simplicity I needed for tweaking styles.
Since nothing fit these requirements, I decided to pack all my own developments into a single design system. This killed two birds with one stone:
✅ First, the system became the ultimate design guidelines for our studio. I baked in not just ready-made elements, but also rules: the 4px grid rule, layouts, and baseline dimensions. Juniors stopped suffering from “gigantism,” no longer forget about responsive screens, and spend way less time setting up animations for prototypes.
✅ Second, I drastically cut project launch times. Previously, setting up a UI kit could easily eat up a week or more. Now, we can launch a project in a single day. You pick the colors, choose the fonts, drop them into the design system — and boom, you have a fully ready UI kit.
I don’t like beating around the bush, so here is the link to the design system: https://www.figma.com/community/file/1623663606281890998/free-ui-kit-design-system-ecommerce-website-template-ompletely-free-for-figma. Below is a quick breakdown with explanations of what exactly I’ve built.
Styles: Where the System Begins 🎨
Typically, the standard practice is to assign colors to each element individually: the color of buttons, inputs, backgrounds, text, and so on. Changing this for every new project isn’t necessarily hard, but it is incredibly tedious.
I structured the logic differently:
- A baseline palette of grays — used everywhere across the board.
- Color palettes — you can add as many as you want. By default, there are two, because websites most often rely on either complementary pairs or an analogous color scheme.
- Text colors are separated — this allows you to tweak text and background colors independently.
This setup was entirely derived through trial and error. I settled on this approach because, in my experience, it fits our specific workflow perfectly.
The same logic applies to typography: we have headings, body text, and dedicated styles for UI elements (like buttons and tabs). Why did I separate them? Because during active design work, I felt a serious lack of flexibility specifically when handling interface elements.
By streamlining these styles, I achieved the ultimate goal: the ability to give any project a completely unique look in no time.
UI: Only the Essential Elements 🔧
The UI section contains the exact set of tools you need to build a website. Sure, other design systems out there might overwhelm you with countless components. But I chose a different focus: we don’t design complex dashboards or web app dashboards; we build websites. That’s why I packed it with elements specifically tailored for web projects.
Another crucial detail: I’ve included multiple styling options for the exact same elements.
Buttons can be completely customized simply by adjusting their corner radius.
- Standard (Bootstrap-style)
- Old-school Material Design style
- Underlined fields (perfect for brutalist websites where aesthetic beats raw usability)
Almost every component comes with pre-configured light and dark themes. Why? Because real-world websites constantly mix light and dark sections. You can’t just flip a global switch to invert the colors — it’s much easier to swap the theme of individual elements within the layout.
Components: Ready-to-Use Elements with Built-In UX Logic and Animations 🧩
The design system is broken down into several component sections:
- Base Components
- Catalog Components
- E-commerce Components
- Blog Components
These names weren’t just picked out of a hat. I’ll let you in on a little secret: we develop websites using our own in-house platform (which we plan to release for free in the future). These design sections directly map to the component folders our developers use in the actual code repository.
This means a single component (from the catalog section, for example) can also be reused inside the user dashboard — everything is managed from a single source of truth.
I also made sure to pre-configure interactive prototype animations for almost every component. This is a massive pain point in most design systems you find online — they usually completely lack this feature.
By dropping a component into your layout, you can instantly demonstrate the logic and behavior of an element to both your client and your developer.
The Cherry on Top: A Ready-Made E-commerce Template 🍒
I’ve built a foundational e-commerce template. Of course, many clients require custom functionality — and that’s never an issue; we simply create unique components and integrate them right into the system.
However, this template allows you to wireframe and set up a shop incredibly fast, covering all essential pages, core functionality, and navigation. Best of all, it is fully interactive and clickable.
Plus, because I’ve already pre-designed all the necessary pages, junior designers are much less likely to miss any critical screens during the process.
What’s Next?
- Evolve the template further. I’ve already added two layout options for the blog section (grid and feed).
- Introduce more checkout flows. Plans are in motion to add multi-step, simplified, and enterprise-scale checkout variations.
The core is already there. And in any construction project, the most important thing is a rock-solid foundation.
The Grand Finale 😉
I’ve already published my design system in the Figma Community. To be completely honest, I wasn’t just looking to share it for free — I was also hoping to catch a bit of the spotlight. However, there was no instant miracle, and it easily got buried under a mountain of other files.
But I hadn’t tapped into all the available platforms to share it yet. That’s exactly why I’m writing this article.
The ultimate reward for my work is simply seeing you use it and seeing you appreciate the features I’ve packed inside.
For now — thank you so much for reading. Enjoy the system, and put it to good use!
Adios, amigos!
Top comments (0)