Post #9 (Design System Chronicles) - Component Thinking: A recap of my component design workflow
Design System Chronicles (Tenet UI)
Post #7 - Typography variables | Post#8 - Component research | Post#9 - Component design
Recently, I shared my thoughts on component research for Tenet UI - the thinking, the planning, the foundations behind the builds. If you missed that one, you can catch up here - Component Research in Design Systems.
This time though, I wanted to talk about how I approach component design itself. But instead of adding yet another new article to the pile, I realised I've already covered a good chunk of it across 4 pieces.
So here’s what I’m doing. I am stitching them together.
This article is a curated recap of those past writings, each with a short summary to give you context before you dive deeper. Here’s what I’ll be covering:
The fundamentals of component properties.
The power of subcomponents and nesting.
A real-world breakdown of how I design components in Tenet.
And one slightly underrated but super useful topic with regards to how I handle icons inside a design system.
Component Properties 101
Read the article here 👉 Breaking It Down: The Basics of Component Properties
This one’s for anyone who's ever felt confused by all the toggles, swaps, component properties and wondered where to even begin when building components.
I wrote this to lay down a foundational understanding of Figma’s four key component properties:
Variant
Boolean
Instance Swap
Text
I dive into how each of these work, what they’re useful for, and how they can be combined to create flexible components.
The core idea?
Understanding the basics of component properties and their potential is key to designing consumable components.
If you’re just starting out with components, or if you’ve used them but never quite understood why they work the way they do, this article will give you the clarity you’ve been missing.
Going Modular: Subcomponents & Nesting
Read the article here 👉 Crafting Components with Subcomponents and Nested Instances
This article is where I really dig into the power of subcomponents and nested instances that makes component systems more modular, flexible, and scalable.
I talk about how using subcomponents helps you:
Break components down into reusable building blocks.
Create complex components like a Side Nav without turning the main component into an unmanageable monster.
Expose nested instances smartly, so designers working with the system still have the control they need.
There’s a deep dive on how I built the Side Navigation component in Tenet and how subcomponents helped manage complexity without compromising flexibility.
Real-World Component Strategy: A Case Study
Read the article here 👉 Building for efficiency and usability: A Case Study on Component Design
This article is centered around a challenge I kept running into while building Tenet:
How do I design flexible and composable components that support layout and content changes without adding unnecessary complexity?
To solve this, I broke the problem down and focused on three things:
Constrained components that still allow variation where needed.
Flexible layouts built with subcomponents and slots, so I could manipulate and swap pieces in and out without blowing up the structure.
And most importantly, a clean, code-aligned component API - the kind that’s intuitive to use and easy to consume.
The article walks through how I think about flexibility vs. simplicity, and how I make property decisions based on real usage.
If you’re trying to design components that are both adaptable and usable, this piece might help you find that middle ground.
Icon Swap: Handling Icons Like a System
Read the article here 👉 The "Icon properties" hack: Manipulating icon component properties
In this piece, I walked through how I manage icons for any system. This is the same approach I used for Tenet.
It starts with setting the scene, importing an icon library. I then explain how I:
Created a Master Icon component that acts as the base for all icons.
Built instance swap logic around this Master Icon, so I could easily swap icons (within components) without having to go back to the library and doing this stuff manually.
Introduced “size” variants (like 16, 20, 24) directly within the Master Icon, so I could change sizes on a whim (within the component).
Showed how these icons plug seamlessly into other components.
If you’ve ever found yourself duplicating the same icon frame or resizing manually, this article will help you clean things up and future-proof your icon workflow.
Wrapping up
This article is a curated recap of four key pieces where I break down my approach to component design, using Tenet UI as the backdrop. Whether you're just getting started with components or revisiting these concepts, this recap gives you a complete picture of how I went about building components for Tenet, and more broadly, how I usually approach component design in any system I work on.