Back to projects

Case study / Design system & component library

August 2024 — June 2025

Optimacros.

A shared language for design and engineering.

Role

Frontend Team Lead

Company website
reusable components
40+
UI library · Optimacros
developers and designer
3 + 1
Team built from scratch

Context

At Optimacros, I owned the internal component library and design system. My role combined frontend team leadership, product ownership, project management, and design system leadership.

01

The challenge: a foundation for product teams

The task was to establish a shared UI library from scratch. This involved more than components: documentation, themes, package versions, and a reliable way to distribute updates.

02

My role and the team

I formed a team of three developers and one designer. I owned hiring, one-to-ones, development plans, and team processes. I introduced planning, retrospectives, task estimation, and documentation in Jira and Confluence.

I personally designed the library and component architecture and led code and design reviews. I developed a custom React state manager and a typed Zag.js adapter, and coached the designer on a component-based approach.

03

From design tokens to packages

I created the Figma design system and a token-based theming system. I set up Storybook for component development and documentation. Shared coding and project structure guidelines helped the team work consistently.

I organized a Lerna monorepo, GitLab CI/CD, package versioning, and npm publishing with Nexus. I wrote scripts for recurring operations and a Figma plugin to export component styles.

04

The outcome: a library managed as a product

The initiative delivered over 40 independent reusable components. The team had an architecture, documentation, themes, and a complete library release process, from a code change to a published package.

Behind the outcomes

A component library needs product thinking: a team, clear conventions, and support for its internal users. My work connected those responsibilities with hands-on architecture and development.

Project technologies

ReactTypeScriptZag.jsStorybookLernaGitLab CI/CDFigma
Next casePlatform under NDA

Contact

Let’s talk about your challenge.