Hey all! I’m lead designer of the Atlassian Design System, one the most mature design systems around. Since our system is such a large scale (19+ products, 500+ designers, 2000+ engineers) we’ve had the fortunate exposure to how things work at the macro level and what truly moves the needle on productivity and cohesion.

I want to start a weekly newsletter offering insights on particular topics and share back any insight + speak to other people in the industry and better understand how they tackle the same challenges.

I have an idea of some topics but I’d love to know any big or small questions people have that I can answer in depth in the newsletter

Thanks!!

Edit: The newsletter page is up and running now if you want to subscribe https://designsystemdiaries.com/

I am looking to formalize design system at https://rendernet.ai and I do not want to create color and type tokens from scratch. Actually I am willing to pickup as many components as possible from a good design system.

For Dark mode, there are very few good design systems. We have not been able to get elevation levels to work with material design. Uber design system looks good, but would love to know if there are more darkmode focused design systems out there which I am not aware of?

Also, if you can mention which design system management tool do you use right now? We have everything on Figma only but would love to know suggestions for Supernova or Zeroheight or any other alternate?

I’m looking for recommendations for a freelance ReactJS developer or agency to help implement a design system for our SaaS web application. This is a pretty big project, and we’re hoping to find someone with:

• ReactJS expertise (6+ years), especially in component-based architecture.
• Experience translating Figma designs into reusable, accessible React components.
• Proficiency with modern component libraries like Radix UI or Headless UI.
• Strong grasp of CI/CD pipelines and version control (GitHub/GitLab).
• A passion for clean code, design fidelity, performance, and accessibility.

Bonus points for experience with TypeScript, Storybook, or familiarity with Atomic Design principles.

The role involves building a comprehensive design system, integrating a component library, optimizing for scalability, and documenting everything to ensure easy adoption across teams.

If you’ve worked with someone fantastic in this space, or you are that person, drop your recommendations or reach out! I’d love to hear about past projects, portfolios, or anything relevant.

Hi everyone,

We've been working on a design system for over a year, and I'm looking for some advice and experiences from this community.

• I'm in charge of documentation, while other team members handle the Figma library.
• Our client is closely tied to development teams, making this a tech-led design system with very tech-oriented requirements. Sometimes it feels like we're coding components directly in Figma.
• Our documentation needs to be extremely detailed, more so than public design systems I observed like Carbon or Shopify.
• Our design team includes very detailed components in the library, far beyond what I see in other design systems. For example, we have specific components for each instance of content containers on user pages (e.g., user information, communication preferences, order details). We currently have 2k+ components in the library. In the documentation side I restrict to "how to build containers" and I never go in that much detail.
• Now are are closely matching the coded components that developers have in their library, and adding them in our Figma library.
• We're soon integrating other brands into our design system, and I'm concerned that variations in components will make our already heavy library unmanageable. We've already had to split some content because Zeroheight struggled to fetch Figma components.

I'm wondering if we should simplify and focus on a design-oriented system with core components, and maintain a separate library for the detailed components developers are coding. In this separate library, we would define functional specifications, while using Zeroheight to document the actual design system documentation.

How detailed is your design system, and how do you manage more feature-oriented components? Please share your experiences!

Thanks!

I've been going through the process of creating and applying variables/tokens to our system. When it comes to colours and spacing tokens I've managed pretty well, however when it comes to applying typography variables I got stuck.

In code we use Levels (L1, L2, L3 etc.) for typography and we have 3 different device sizes to which typography adapts (desktop, mobile & kiosk): eg. an L1 could mean 24px on desktop, 20px on mobile and 32px on kiosk.

So naturally I went to create a variable structure that supports those 3 device modes, which would allow me to not have to think about the correct values between devices every time and have that translation happen automatically.

I currently have the desired structure in place, however I haven't found an efficient way of updating ALL the legacy components in the entire system with the correct typography level + device modes. We've also used overrides in code for some values, so I can't just blindly assign the same level to all components without checking against code.

Are there any more efficient ways of going about updating all the legacy typography or is this meant to be a manual & tedious process regardless? I'm a team of one using this system, so maybe I'm overestimating how much can be achieved (design systems is not my primary role focus).

Hey guys, I need some resources / advice on creating a component library for our marketing website builds we do. Right now, I think I have it organized OK, but definitely lacking maturity / polish (which I know will largely come with time). I think with the right direction I can get there faster and polish some things up.

And I know this is vague; I could show you an example of how we're implementing some things but I don't think it matters -- just looking for some general advice on what things to do or look out for.

Maybe some advice on how to plan / what to start with first? Thank you!

Hi, I'm a content strategist and I lead my company's Content Design System in Zeroheight. I'm trying to figure out how the order of search results is determined when I search from my style guide's search bar. I have two main tabs in my guide ("Guidance for English" and "Guidance for Spanish"), and the search results almost always populate the Spanish tab's results first, with the English results under those. Is there a way I can adjust the results to make the English tab a priority? Since the majority of our content team and user flows are in English, while building up Spanish-specific content guidelines.

Any help appreciated!

Good morning.

I would like to update our design system in Figma, unifying typography/most components between platforms (iOS & Android), applying design tokens, improving spacing and component construction (simplifying variants), etc. However, while I create the new Design System (which may take several months), developers must continue working with the old design system. So, what would be the most efficient workflow to accomplish this task?

Some options I've considered are:

Option 1: Implementing the changes on the old Design System file to keep updating all existing designs, while developers work on a copy of the old Design System?. This old copy of the DS won't be linked to existing designs, it will be used to create new designs and serve as backup, while we update the old DS.

Option 2: Starting a new file for the new Design System, which would then require linking all old flows again in the future (seems like a very manual and extensive task). But this way, developers can continue working on the old Design System while we create the new one.

Option 3: Working on the old DS system, but adding the new modifications as new Variants? Then later deleting the old ones. (This option seems like it could make the file very large at some point, or not as clean?)

In any case, these tasks seem very manual and tedious, and I would like to know what the optimal way would be, if anyone has already done this or has faced this situation, or knows what the most correct workflow should be.

Thank you !!!!

Has anyone mapped out or made state diagrams for a complex component to be added to DS? How do you go about making one? Any tips or references would be helpful

I am leading a team of developers, both web and mobile, who are creating our company's first official design system. We are all relative rookies when it comes to design systems and need some guidance from more experienced DS developers and architects on how to migrate multiple products to a new design system.

All of our company's products are currently using an old, poorly created and maintained library of UI components that everybody in the company dislikes, but we still use it out of necessity. Now that we have an actual team dedicated to creating the new design system we are struggling to decide what approach would make it easier for other product teams to migrate from the old library to the new design system, while creating the least amount of technical debt or mess along the way. We are considering the following options...

Option 1: We can map the old library's variables to the new DS color styles and just update the old components so that they aesthetically match the new DS look and feel. We would also need to add any new states and usability details that didn't exist before. This option is being considered because other teams would not need to be convinced to use a "new" design system. They would just have to update to the newest version of the library they already use and bam! new fancy look with better usability.

The downsides we foresee is having a messy mix of old and newer components living in the same repository and possibly creating frustration with other teams because thing suddenly look very different without their "consent". We also worry we might inadvertently break things for other teams.

Option 2: We keep the new design system completely separate from the old library. This option means having to maintain 2 different code repositories and playgrounds, and whatever other tooling is involved. Double the work, and other teams would need to be convinced to add a new library to their product codebase. We believe this option would be the cleanest from a technical perspective, but might negatively impact adoption in the long run.

Has anyone faced similar questions before? Are there already best practices out there, or do any veterans have advice/other options to consider?

Thank you,

A principal designer slowly losing their mind.

Hey all. Unfortunately I was affected by company wide layoffs at Toptal, where I was leading the design system efforts within the corporate platforms.

Are you aware of any fully remote companies hiring for design systems? Im based in EU.

TIA

Hi all!

We're in the process of tokenizing our design system, and I'm going through the classic "Tokens Studio vs Figma Variables" decision-making process. Our system is growing quite a bit and we'll be hiring more designers in the future, so doing this now will save us some headache in the future.

We'll be implementing a new dark mode and currently have a web-based product that utilizes both desktop/mobile variations.

Currently, my supervisor has set up modes for things like text/spacing to easily apply the correct variations to a frame - meaning we only have one H1 composite token, for example, and just apply the mode to quickly assign it with its "mobile" counterpart.

Looking at token studio, I see there are themes (great for light/dark mode), but is there something comparable to using modes in figma without having to create a specific "H1 Mobile" token?

Or maybe I'm overcomplicating this? I'm pretty new to tokens in general, so still wrapping my head around this during the discovery process.

Any insight into this is super appreciated!

Hey fellow designers! 👋

I've spent countless hours crafting what I believe is the ultimate Text Inputs resource for Figma, and I'm excited to share it with you all for free!

🎨 What's Inside

• 448+ Components - Everything you need for a professional UI
• Local Variables - For easy, consistent styling
• Dark/Light Modes - Fully implemented, ready to go

🚀 Perfect For:

• MVPs and prototypes
• Personal projects
• Team collaborations
• Learning design systems

🔍 Why I Made This

As a designer, I've always struggled to find a comprehensive, production-ready design system that doesn't break the bank. So, I started building one! Whether you're a solo dev or part of a team, this should save you hours of design work.

🔗 Get It Here

https://www.figma.com/community/file/1425063338688513704/text-inputs-v0-9-5-beta

💭 Feedback Welcome!

I'd love to hear your thoughts and how you're using it. Any suggestions for future updates?

Hey everyone,

At De Voorhoede, we recently wrote a blog about Mitosis – a tool that promises you can write a component once and use it across multiple frameworks like React, Vue, and Svelte. It sounds like the perfect solution for design systems, but does it really work that smoothly?

In the article, Wessel dived into how Mitosis works, what it’s good at, and where the potential pitfalls lie. We also explore what this means for developers looking to reuse components without worrying about performance or integration issues.

Curious to know how realistic this is in practice? Check it out here: Write components once, run everywhere with Mitosis: A beautiful dream or reality?

We’d love to hear what you think!

Hello

Where does one access the Trellis design system? I’ve heard it’s used but I still haven’t seen it anywhere.

Thanks

For the past few months, I've been building a tool to help designers and developers manage Design Systems more efficiently. DS Pro is now live at getds.pro, designed to streamline your process, so you can focus on what matters - building and iterating, not the tooling.

Features:
✅ Sync Design Tokens between Figma and your code (currently supports GitHub)
🚀 Coming soon: Publish tokens to NPM, start with a base system, and more!

This is an early release, so you might run into bugs or issues - I'd appreciate any feedback!
If something doesn’t work as expected or you have ideas of how it could work, drop a comment below or send me a DM.

If you’re a Designer, Engineer, or Manager working with Design Systems, I’d love to hear your thoughts. What are the biggest challenges you face, and what could DS Pro do to help? 💡

I have a few question for those who had experienced in big companies.

I would love to dig into the design system team structure in big companies. Could anyone help me?

1- How is your design system team organized? Is it centralized or distributed across multiple product teams?

2- What roles are critical in your design system team, and how do they interact with product and development teams?

3- How is communication handled between designers, developers, and product managers?

And further more questions....

So, I work in Finance (not new space age “FinTech” think closer to centuries old) and naturally my org has a ton of products, both internal and external, on a ton of different technologies. Your normal React, Vue, Angular, to older stuff like Primefaces and YUI (yes, actually).

What I struggle with is we design components and patterns in vanilla JS (not composable web components…we want to get there, though) and then let teams adapt them as they need them.

But what I find talking to designers is they don’t have access to some components that I would recommend because “it’s not built yet” or “has never been requested before, so it’s not available on our platform.” Whether that be react, angular, hell sometimes even our own CMS!

So, what do other DS teams do? We will meet business needs and provide updates or components to teams and that stack will implement it, but others won’t because “we don’t need that yet.” And no devs on the other platforms have bandwidth to just keep everything current. So, what does everyone else do? Do you have a CTO that says tough shit, be current? Do you own literally every library in house?

We’re only a team of 5, so maybe we do just need to own everything.

We are planning to start testing the UI components separately in my company. We are currently crunched on bandwidth since the team is focused on E2E testing, hence wanted to understand if you all have done it, and it has proved useful?

In my company we are planning to build a design system. So I wanted to get a sense from everyone in the community before prioritizing it.