Behind the Scenes: Building a Component Library from Scratch
A look at how I organized over 200 components into a cohesive library for designers.
When I started Design-with-Luna, my own Figma files were a mess. I had dozens of buttons, each slightly different. That’s when I decided to build a proper component library. It took months of iteration.
The key was establishing a design system first: a grid, a color palette, and a set of text styles. Every component—button, input, card—had to use those primitives. I created base components (e.g., "Button Base") and then variants (Primary, Secondary, Disabled). This reduced redundancy and made updates instant.
Naming was another challenge. I settled on a simple convention: Section/Element/Variant. So "Form/Input/Default" and "Form/Input/Error". This made finding components easy in the assets panel.
Today, the library contains over 200 components across 10 categories. Every template uses only those components, ensuring consistency. If you buy any template, you can reuse components across projects seamlessly.