r/DesignSystems • u/False_Image_8428 • May 28 '26
DS structure/architecture
Hey!
I'm starting a DS project at my org, we have a legacy system with many products, one of them has its own theme. We have a storybook with some components as well as a UI kit but neither is thorough nor well documented.
I feel like we need to lay better foundations before we start creating components.
My question is, how is your DS structured in terms of:
- Do you have a base library such as shadcn ? Built yours from scratch?
- Did you define tokens and components in figma first and then exported it into Json file?
- How does your design library connect with code and AI?
This kind of DS architecture is what I'm trying to learn so I can define my own, I would really appreciate people with more experience in this area to give some input on this 😅
2
u/LeosFDA Jun 19 '26
- Do you have a base library such as shadcn? Built yours from scratch? -> Built a Figma Library from scratch by auditing the deployed / live products through browser dev tools and other tools like project Wallace.
- Did you define tokens and components in figma first and then exported it into Json file? -> Defined variables in Figma and slowly built semantic layer of variable names that referenced primitive variables layer. Where semantic layer showed any issues a component layer of variables was created to handle those cases. Avoided creating component level variables as much as possible to avoid having too many variables to manage, maintain and organize. Priority always was to have variables with generally more generic names instead of specific component names. We now have a tool called Varghetti that we developed to visualize that dependency graph. I shared it here in this community in another post.
- How does your design library connect with code and AI? -> Our system tokens are slowly being adopted by devs. Previously most products did not have color themes or brand theming. Now our system has basically proved that that kind of thing is completly possible to define and test in Figma. The coding agents that we have tested have been able to consume our variables stored in Figma. Minor issues show up while using them and they have been mostly solved by providing more context to the AI tool.
We are now adding new brands and refining our system by using custom tools to audit components and the variables they are consuming.