Skip to content
Work/03/2024

The Figma plugin I built to fix my own team's design system, now used by 25K+ designers

While working at Creatr as founding designer, I kept hitting the same wall on our own product: an untokenized, inconsistent design system that was slow to fix by hand. So I built Bloq, a Figma plugin that generates and repairs entire design systems automatically, as a self-directed side initiative, outside my core role. It shipped publicly, reaching #7 Product of the Day on Product Hunt.
  • Figma plugin
  • Design systems
  • Side initiative
Role
Independent side initiativeDesign + product ownership
Team
Self-initiatedShipped with Creatr's founders
Timeline
4 weeksconcept → shipped plugin
Outcome
25K+ users#7 Product Hunt
>summarize this case study in one line

In four weeks, working independently on the side while at Creatr, I built Bloq, a Figma plugin that auto-generates a complete design system: color tokens, typography, spacing, and fully variablized components, plus a synced pipeline to GitHub and documentation. It shipped publicly, reached #7 Product of the Day on Product Hunt, and is now used by 25K+ designers.

>what problem were we solving

The problem

This wasn't a hypothetical exercise; it was blocking real product work. Creatr's own colors weren't tokenized, there was no dark theme, spacing was a mix of 4pt and 8pt with inconsistent naming, and the standard fix (rebuild it by hand) was weeks of work with no payoff until it was fully done. Nobody assigned me this. I noticed it, and built the fix on my own time alongside my actual role.

My first step was understanding how people were actually organizing and implementing design systems, not just at Creatr. I ran 1:1s with designers and developers to see what they used day to day, and the same pain kept surfacing:

  • 01

    Fragile to maintain

    Every fix risks another break.

  • 02

    Variables take hours

    Every token set up by hand.

  • 03

    Consistency is manual

    Checked file by file.

  • 04

    Rebrands mean rework

    Everything repainted by hand.

  • 05

    Libraries take weeks

    Components built from scratch.

Since I was the only one on it, whatever I built had to be systemized well enough to survive without me maintaining it by hand forever. That's what pushed the project from "redo our design system" to "build the tool that redoes any design system."

>the moment everything flipped

The reframe

Every tutorial I found showed how to build a component library in Figma and call it a "design system"; none showed the real thing: an end-to-end path from Figma to code and documentation. So I went to the source. I read the biggest documentation systems in the industry (Atlassian, Material Design, Adobe Spectrum) hoping to use them as a template.

They were too large to be a yardstick for something I was building alone.

What actually taught me something were the small ones: Ariane by Maze, Pie.design, Burrito by Userlane. Concise, functional, clearly built by small teams instead of enterprise design orgs. That was the reframe: I didn't need to build a system as comprehensive as Atlassian's. I needed to build the tool that gets a solo designer or small team to a good enough system, without needing Atlassian's headcount to get there.

>what I built

What I built

Bloq automates what used to take weeks: pick a Figma file, and it generates or repairs the design system inside it (tokens, typography, spacing, and fully variablized components), synced straight to code.

Walkthrough · Bloq in Figma

Bloq in Figma, start to finish: set up a new design system, choose what it includes, walk the generated colours, naming, spacing and button variants, then publish the library.

01 / 04Bloq's new design system screen: a full shade scale for the primary, secondary, accent and info swatchesBloq's fix-a-page screen: 100 issues across 202 components, and a missing grey matched to a suggested tokenBloq's fix-a-component screen: a label's missing variants, each property linked to a tokenBloq's naming structure: the color.group.value pattern, with text and background tokens grouped by purpose
  1. 01 / 04

    A full token system, generated or repaired

    A full shade scale for every color, gradients tokenized for the first time, and a dark theme generated from the same structured palette. Spacing standardized on 8pt, with 4px and 12px as deliberate exceptions.

    Bloq's new design system screen: a full shade scale for the primary, secondary, accent and info swatches
  2. 02 / 04

    Every inconsistency, found and named

    A full audit of the page's styles: 100 issues across 202 components, sorted by category from colors to layout. Each undocumented value gets matched to a suggested token, ready to apply in one click or fix all at once.

    Bloq's fix-a-page screen: 100 issues across 202 components, and a missing grey matched to a suggested token
  3. 03 / 04

    A customizable component kit, not a static library

    Buttons, inputs, tabs and badges come with real, editable rules (size, hierarchy, icon treatment, corner radius, text style), all tied back to tokens instead of hardcoded values.

    Bloq's fix-a-component screen: a label's missing variants, each property linked to a token
  4. 04 / 04

    A naming structure that actually holds

    A consistent pattern across every token: role first, then the swatch it resolves to, so a token is never named after its hex. Text and background tokens are grouped by purpose, making the whole system easy to scan, extend, and hand off to a team.

    Bloq's naming structure: the color.group.value pattern, with text and background tokens grouped by purpose
>what didn't make it

What didn't make it

  1. Concept A

    Enterprise documentation as the template

    My first instinct was to model Bloq's documentation on the biggest, most respected systems in the industry: Atlassian, Material Design, Adobe Spectrum.

    Why it died

    They're built and maintained by entire teams. Using them as a yardstick for something one person was building on the side set an impossible bar. I was optimizing for comprehensiveness when I needed to optimize for something a solo builder could actually finish and maintain.

  2. Concept B

    Code Connect, fully wired

    The original pipeline plan was Design Tokens → Supernova → Bloq → Code Connect, with code and design components staying in sync automatically end to end.

    Still open, not dead

    As a side project with a real 4-week build window, full Code Connect integration didn't make the cut. I shipped the token-to-GitHub sync, which covers most of the value, and left full component-level code sync as the clear next step.

>where it shipped

Launched on Product Hunt

Launch · producthunt.com
PRODUCT OF THE DAY#7

Shipped publicly, reached #7 Product of the Day, and is now used by 25K+ designers.

Bloq by Creatr, featured on Product HuntSee the launch
>what happened

Impact

  • 4 weeks

    Concept to shipped, alongside a full-time role

  • 25K+

    Designers using Bloq today

  • #7

    Product of the Day · 201 upvotes, Product Hunt

>what I'd tell myself now

Reflection

  1. 01

    Small, finishable references beat prestigious, unfinishable ones

    Chasing Atlassian's documentation standard nearly stalled the project before it started. The tools that actually taught me something were built by teams my size. Scale your reference points to your actual resources, not your ambition.

  2. 02

    A side project still needs to survive without you

    Every decision (the token system, the GitHub sync, even the chatbot) was built so the system could hold up without me manually maintaining it by hand. That's a different bar than "make it good"; it's "make it not need me."

  3. 03

    Not everything was broken, and saying so mattered

    The typography system didn't need fixing, so I left it alone. It would have been easy to touch everything to make the redesign look more thorough; resisting that is its own kind of judgment.