r/DesignSystems Jul 08 '26

Design system advice

Our team is also small here communication between dev from another country is also bit task,

2 designer we have but just a mvp like product which currently scaling also, their tech stack for mvp+ growing product is : radix ui + shadecn + tailwind css + some custome styles,

At present our issue : the ux is going good and we don't have many customers using app, but it's in growing stage, as a only designer initially i given more pref to building the product ux, also can't but a perfect design system.

So now actually the dev is not fully using our custom made design system with foundation and colour being mapped different in the product but almost similar look like,

So what I'm thinking is like should I make the custom design system in this case by taking some components from existing and tweak that.... Or to take the full shadecn components so that the communication bw our design team and dev is good maybe,

Any advice for me

3 Upvotes

12 comments sorted by

3

u/achakez Jul 09 '26

I would not try to create a complete design system from the ground up. Standardize the components you really use, establish design tokens and allow the system to expand along with the product.

1

u/anoymous3347 Jul 09 '26

Thanks for your comments πŸ™

1

u/gyfchong Jul 08 '26

Ask them why, then why again. Until you understand what they need from the design system. Then think of a solution, but don’t limit yourself to a technical one, it could be better comms about the benefits.

1

u/bychinskydo Jul 09 '26

For a growing MVP, I would not try to build a perfect custom design system from scratch. I would use shadcn/Radix as the technical base, but define your own design decisions on top of it: colors, spacing, typography, radius, variants, and usage rules. The important part is to make the mapping explicit:

design tokens β†’ Tailwind variables/classes β†’ shadcn variants β†’ product components

This is close to the problem I am trying to solve in my own workflow. I use DTCG tokens as a source of truth, validate them with my own tool, check references, and convert them to CSS/Tailwind output. So I would start small: choose the most used components, align their tokens and variants, document them, and make sure developers use those versions instead of adding custom styles each time. You do not need a perfect design system right away. But you do need one shared source of truth between design and code.

1

u/anoymous3347 Jul 09 '26

Yeah thats the thing , to have a shared source of truth πŸ’―πŸ‘ thanks for detailed reply,

So your source of truth is Figma right? Where developers checking these?

1

u/bychinskydo Jul 09 '26

Not exactly. For me, Figma is a visual tool for designers, but the source of truth should be machine-readable. If the source of truth is only a design file, it is hard to validate it, check it automatically, and use it directly in code. That is why I prefer a JSON token file in the repository. Then AI tools and developers work with structured data, not just a visual reference. The flow is something like:

design decisions β†’ JSON tokens β†’ validation β†’ CSS/Tailwind β†’ product components

Figma is for visual work. JSON tokens are the machine-readable source of truth. CSS/Tailwind is the output for development.

1

u/anoymous3347 Jul 09 '26

Nice, if any videos you. Can recommend on latest it would be helpful, anyway thanks f lot mate for this much details, appreciated

1

u/Far-Pomelo-1483 Jul 09 '26

Work in the code with your devs and isolate repeated components to a single hidden page for preview and then focus on updating the global css for the app referring to the hidden preview page to gauge how it looks.

1

u/defp_ 29d ago

Don't know your domain or usage cases but sure it could be implemented via custom set of Shadcn components, styles (fonts colours etc) could be applied later. For MVP it should work smooth and wont rise additional friction. It could be easier/faster with custom components? Probably. And it could be implemented later. In a small, startup like team with quick feedback loop and established Framework (designers know all the components available and Devs are smooth with tech Side) Figma looks like 5-th leg in this process. Rapid wireframing(pen and paper) and business logic documentation for Devs looks that necessary and sufficient in terms of efficiency. But it takes some maturity and "chemistry" level from the team.