Visual summary of Building Blox. Content includes buttons, media cards, sliders, avatars, color swatches, modals, toast, snackbars, and input fields.

A custom and minimalist Figma design system built for quick assemblies and easy customization.

Overview

Building Blox was a personal project to gain a deeper understanding of best practices when constructing a system of styles and nested components in Figma.

Why build my own?

UI kits abound in the Figma community so why go through the trouble of building one from scratch? Simple: learn by doing.

Overview showing all the foundations and components in the Figma file.

Overview of Building Blox.

8px Grid System

Spacing and sizing measured in increments of 8.

Atomic Design

Nested components of atoms and molecules for bulk editing and consistency. 

Auto Layout

Fully utilized Auto Layout 3.0 for responsive design.

 

Components and Variants

Components built with multiple variations for easy adjustments.

Styles

Text, color, grids, and effects styles for easy per-project customization.

Icon Library

250+ icons from Feather (v4.28).

Icons with multiple states are grouped together as variants for easy changes. 

Foundations

Defined spacing classes.

Neutral color palette with error and on-colors.

Three standard elevations.

Layout grids at four breakpoints.

Four grouped sections showing the foundations of Building Blox.

Spacing Classes, Typography, Colors, and Elevations.

Animation demonstrating the expansion and contraction of five fluid grids.

Fluid grids at 4 breakpoints.

Interactive Components

Icon variants for fast state toggles and animations using interactive components.

Icon pack built from Feather Icons v4.28.

On the left, icon states are grouped together. On the right, an animation showing icon state toggling and an animated "Add to Cart" button.

Icon states with animated button.

Animation showing all the different options for the input field component.

Input field adjustments.

States, Styles, Options

Matrices include a Bulk Edit area for making adjustments to the base components.

Fully nested Atom and Base components.

Deliberate use of larger matrices to make the final component much easier to use as all options are visible at the top level.

 
Variants of input fields arranged by Regular, Left Icon, Right Icon, Double Icon, and Text Area.

Partial view of Input field matrix.

Fully Customizable for fast builds

 
Animation showing customization of Figma components: a top menu header; a tool tip; a pie chart; a card with an image, text, a price, and a button; and a credit card form being built.

Customization of multiple components.

 Final Thoughts

This design system can serve as a stepping-off point for any personal project. I can go from a wireframe to a fully functional prototype in a fraction of the time, with complete customization to suit the specifics of the project.

In my research, I found that some designers rely on deep nesting of components to build smaller matrices of variants. In practice, I found these difficult to use because it was hard to know how deep I could go when I wanted to make changes. The Inputs matrix has 240 variants. Yes that’s a lot and it took a while to build, but the final components are easier and faster to use and the entire set can still be easily updated by making changes to the atoms and bases in the Bulk Edit area.

More effort on the front end is always a worthwhile tradeoff for a more usable end result.