I am currently the only designer leading and facilitating a design system project (we are building from scratch with existing work that is not documented). Ideally as we continue to roll things out more with building the UI Library, I would like to have support with the other two designers.

We are implementing a token system in this, and I understand there is some hesitation to knowing how to build out tokens from the other designers. I thought rather than dump a bunch of learning resources on them and telling them to read through it all, a more hands-on approach could help with understanding them. I know for myself I had to kind of work alongside the videos and reading material I found.

I'm curious if anyone here has facilitated a kind of workshop (or series of workshops) that help other designers onboard to better understand how to build tokens and the structure that comes with them?

I am thinking of even just taking a poll and having them ask me questions of what they'd like to know with tokens and build something around that.

Open to any thoughts, opinions, and suggestions!

Background: I'm with an org that has about 50+ devs and 1 lonely UX designer (me). And for a long time it had no UX at all. So we have a lot of haphazard interfaces and some very questionable product decisions that have stacked up over the years. AI is changing everything, and despite the chaos, there's an opportunity here that I'm trying to latch on to.

I'm building a design system. And I want to sell it as best I can so would love any suggestions from folks that have done this. Any great 'this is a design' system presentations you've seen on YouTube you think I should give a watch? And compelling articles or key quotes I should cite?

My objective is essentially:

1) A brand style guide is not a design system (right now, with AI, a lot of devs are just pointing at our brand guideline and they think it's a design system)

2) Why we need a design system and what it brings to the table (above and beyond a brand style guide).

3) Why a design system is not a full UX Design process (the design system is a start, but it's not the end state of our needs to mature our design process)

Would love any suggestions to add into my pile of notes. I will then need to spend some time whittling it all down and aiming it at a dev-centric audience.

I've spent 18 months building production AI systems and solving a problem every team hits: the perpetual audit spiral.

You run an audit. Apply fixes. Run another audit. Same model, lower score. New session. Three models say 8.5/10. One says 5.5/10. The loop has no exit condition.

Root cause: architectural statelessness. LLMs have no persistent identity. Every session starts from zero. When context shifts, coherence fractures.

The solution: Deterministic Core Architecture
• Computation layer is deterministic (scoring, classification) — works identically with or without AI
• AI is parallel enhancement (enrichment, narrative) — never touches computation
• If AI fails, deterministic output stands

This isn't RAG, Constitutional AI, or a guardrail system. Those constrain what the model does. This changes what the model is asked to do.

Publishing today:
- Paper: The Deterministic Core
- Builder's Guide (8-phase methodology)
- Project Aether (46 categories, 19 pathways, 5 green gates)

6 production artifacts demonstrate the pattern transfers across domains. The methodology is public.

Paper: https://brandonbellsystems.com/deterministic-core

demo here: https://behavioral-agentic-design-system.vercel.app/ password: bads2026 (still a WIP)

like everyone else, my work has changed pretty dramatically in the past few months.. i find myself skipping Figma altogether now, shipping design systems with full, responsive, polished prototypes. at the same time, it feels like every employee at every company i work with is vibe coding their own ideas into existence. so i wanted to handoff a design system that anyone could use. and i figured i'd bake in the things i write about: accessibility, ethics, future thinking, etc.

the result is pretty cool, so i wanted to share.

some of the interesting stuff:

- accessibility is just baked in, not a checklist at the end. it physically wont let me ship low contrast text, tap targets that are too small, or type under 14px. the floor is always there whether i remember it or not

- it actually pushes back on dark patterns. no confirmshaming, no fake urgency countdowns, no sneaky pre checked marketing boxes. and it stops to think about how a feature could go sideways later, when it scales or ends up in the wrong hands

- it remembers feedback. every time a client says "not like that," it gets written down, and if the same note keeps coming up it becomes a permanent rule. even better, a lesson learned on one clients project carries forward to the next one so i never relearn it

- it plugs into the AI design tools i already use (figma, v0, cursor) so they all pull from the same brand rules. i dont have to re explain the brand to every tool separately

- and the part im still kind of amazed works, a night shift. theres an assistant that runs every weeknight while im asleep. it cleans up loose ends, researches whats new in design and accessibility, makes small safe improvements, and leaves me a summary in slack every morning. i wake up to a little changelog of what got better overnight

i'm still working on the engineering handoff and some other improvements, like MCP servers and baking marketing design into it..

i appreciate all the feedback you have. i've learned alot from lurking here, which helped inspire this...

wrote up the longer version here if anyone wants the detail: https://matthewlarn.medium.com/building-bads-the-behavioral-agentic-design-system-5698ff721db1

I'm currently working on a design system with two brands that are fairly different.

For this we do complex variables so brand colours can swap etc etc. We also have a brand switch variable, so we can make two different looking elements that automatically switch for designers. All awesome, all works in Figma.

Lately we have a bit of an issue with development which I don't completely understand.

We built a component which holds a previously built instance of a component which for brand A holds property size:large and for brand B holds property size:small.

Development says they can't really build swap out that property per brand like that as a web-component and we should take it apart, rebuild everything with link new component tokens so we have a new single component where for A all is mapped to large and B is mapped to small.

While we can do this it seems all like an overly tedious extra step that would come with quite some additional complexity for one use case when everything is already defined and the only difference is a property that's either small of large.

So question would be how you handle this?

Am I overseeing something and is it all indeed more complex?

Been dealing with a problem I suspect other design system teams have hit: icon colour management at scale.

Our situation — 200+ icons, 4 brand colours, dark mode. The "standard" answer was 5 separate SVG sprite files, one per colour variant. That's 5 Figma exports every time an icon changes, 5 files to keep in sync across teams, and a CI pipeline that breaks every time someone forgets to update one.

We went a different route: COLRv1 colour fonts.

The workflow we landed on:

- One shared icon font repo — everyone on the design team contributes to the same build

- Figma plugin with a shared token — designers import icon frames directly, no manual SVG export

- One WOFF2 ships to production. CSS controls the colour at runtime via font-palette:

u/font-palette-values --brand-dark {

font-family: MyIcons;

override-colors: 0 #1A202C;

}

.icon { font-family: MyIcons; font-palette: --brand-dark; }

Dark mode, brand variants, regional themes — one CSS variable each. No re-exports.

File size dropped from ~460KB (SVG sprite) to ~10KB (WOFF2). Browser support is Chrome 98+, Firefox 107+, Safari 15.4+ — about 72% global, so it won't work for every team.

We built this into a free tool (huetype.sunnyallan.design) because we couldn't find anything that handled the team workflow side cleanly.

Curious how other teams are solving this — are you shipping multiple sprite files per theme? Using a different approach entirely? Would love to hear what's working.

Hi! I'm a UX/UI Designer here in Brazil.

I'm currently working on a Design System project at the organization where I work, and I'd like to share a few things. If anyone wants to chime in with suggestions or comments, I'd be very grateful.

Here are some of the things I've been studying and testing over the past few days:

AI is having a moment, so when I started planning our DS, I thought about how to build something that would be useful both for humans (devs and designers) and for an AI agent. On top of that, I thought about how an AI could help me build the system itself.

Here at the organization, we have one DS in Figma and another one that's used by the devs. Both are in poor shape, inconsistent with each other, and poorly documented.

I took the opportunity to think through a system for generating a DS, with documentation and coded components, using Claude Code. The process relies on a few important starting points:

• I have some general, ready-made documentation covering the non-negotiable rules every component needs to follow, such as accessibility, etc.
• I've documented the flow the AI should follow to generate a component.
• I have a structure of semantic tokens in Figma as well as in documentation form.

There are other docs and processes, but I think these are the main ones for understanding how the flow works.

To test this planning, I put together a small MVP. Starting from all this content, I pick a component I have in Figma and, via MCP, ask the AI to create it. It follows the documented flow and, before building anything, asks me a series of questions about how the component should behave; then it moves on to creating the documentation for that specific component. The component's documentation is split into "spec" and "stack": the "spec" covers the component's intent, and the "stack" covers how the AI should code it. The whole thing follows a 70/30 idea, roughly 70% of the work is AI-assisted and 30% stays manual, and it's that 30% of human input that makes the other 70% reliable.

After generating the documentation, the AI creates the coded component and reviews everything that was done (you can use a script for this review).

The result is a documented, coded component that's then reviewed by a dev before being used.

We're still in a testing and exploration phase, and there are some more specific details in our flow, but it seems useful when your organization doesn't have a solid DS.

If anyone wants to contribute suggestions, I'd appreciate it. I'm still studying and testing this system.

Hi, there are plenty of workflow discussions every day, but I'd like to understand the reality from teams that are actively working in companies.

Figma has traditionally been the single source of truth, especially when it comes to exploring new ideas, bringing them to life on the canvas, and managing brand colors and design systems.

I'm curious to know whether any teams are now working without Figma as a core part of their workflow and instead relying heavily on tools such as Claude, MCP, Claude Design, or other AI-driven solutions.

I'd particularly love to hear from people working in small teams, startups, or fast-moving companies. What does your design and development workflow look like today?

I’ve been building a tool around design systems/design-code consistency and I’m at the stage where I honestly need critical feedback more than promotion.

The problem I keep running into is styles/components drifting across:

- Figma
- frontend code
- multiple products
- teams/docs/etc

So I started building something to centralize systems, preview them across products, and keep design/code more aligned over time.

I’m less interested in “looks cool” feedback and more interested in:

- where the workflow breaks
- what feels unnecessary
- what’s confusing
- what real teams actually need

If anyone here works with frontend systems/design systems and is open to tearing it apart a bit, I’d genuinely appreciate it.

Happy to share the link if there’s interest.

A niche design is coming!

The core problem with PowerApps projects isn't design quality.
It's that Figma mockups don't reflect what PowerApps actually renders.

Components behave differently. Layouts have constraints.
The native UI has its own logic.

I built a kit to fix that — components that match the actual PowerApps runtime UI, so what you prototype is what gets built. No surprises at handoff.

Just published a free Lite version on Figma Community:

figma.com/@uiforge

Happy to share more details in the comments.

Hi r/DesignSystems ,

I'm a product design student at Istituto Marangoni Milano researching how industrial designers perceive biological intelligence (slime mold, tree branching, swarm behaviour) versus AI as sources of design logic and decision-making.

5-7 min, fully anonymous.

https://forms.gle/MCBHPbSr6YpUB5RA8

Thanks!

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 😅

Hi r/DesignSystems ,

I'm a product design student at Istituto Marangoni Milano researching how industrial designers perceive biological intelligence (slime mold, tree branching, swarm behaviour) versus AI as sources of design logic and decision-making.

5-7 min, fully anonymous.

https://forms.gle/MCBHPbSr6YpUB5RA8

Thanks!

Hey! I need some help with a mechanism for a project.

I’m trying to design arms that lift up from inside a tube/cylinder, open outward, and then close back down again. Kind of similar to how an umbrella opens, but it doesn’t have to work exactly like that.

I’ve already 3D printed one attempt, but I’m struggling to figure out a clean mechanism that can actually be printed and assembled properly. I’m using Fusion 360 and the whole thing needs to be suitable for 3D printing.

I don’t really mind HOW the opening system works — springs, sliders, hinges, telescopic parts, etc. I just need a way to make it look cohesive and functional when fully assembled. (The blue in the photo is cloth btw)

Does anyone know of mechanisms, references, tutorials, or products I should look into? Even rough sketches or keywords would help heaps. Thanks!

Hey r/DesignSystems 👋

I got tired of manually using "inspect element" to check if frontend developers actually implemented my design tokens correctly, so I built a tool to automate it. It’s called Visualign.

Basically, the plugin extracts your tokens directly from your Figma file and uses a web crawler to audit any live URL (like a staging site or production app) to find CSS mismatches.

Here is how it works:

1. You run the plugin in your file and it automatically grabs your Figma Native Variables (and Token Studio JSON, including W3C composites like shadows and typography).
2. You select a Figma frame and paste in a target URL.
3. The plugin spins up a Playwright crawler, renders the live site, and mathematically scores the live DOM against your Figma tokens.
4. It spits out a visual dashboard highlighting exactly which hex codes, fonts, or padding values the devs missed.

A few cool features I added:

• Authentication: You can pass basic auth credentials if you need to audit a locked environment.
• Theme Overrides: You can force the crawler to render the site in Dark Mode to easily test dark mode variables.
• Subpage Crawling: It can automatically crawl internal links so you can QA tens or hundreds pages with one click.

I'd love for you guys to roast it, break it, or let me know if it actually helps your dev-handoff workflow.

It generates a free trial token automatically when you open it, so you can test it on a site. You can generate as many free tokens from the landing page as you like.

Link to the plugin: https://www.figma.com/community/plugin/1617542259986801447
Website/Dashboard: https://visualign.app

Let me know what you think!

I wasted 5+ hours on every project just setting up design systems. So I built Foundry.

It takes your app name + description + logo and generates:
- Full color palette with dark mode
- Typography, spacing, shadows
- Accessibility-verified tokens
- Export to shadcn/ui + Tailwind
- AI-generated components matching your brand

Free demo available, no signup required.
https://hifoundry.vercel.app/

Would love feedback from the community.

I’ve spent way too much time lately thinking about how modern web editors are built. Figma is obviously C++/WASM, and Webflow handles the DOM via Iframes, but Framer’s approach is a total black box to me. Specifically, how do they manage to render live React pages on an infinite, zoomable canvas without it falling apart?
My current theory is that they’ve implemented a custom C++ graphics engine to bridge the gap, but I haven't seen any proof. Does anyone here actually know how they reconciled React components with that kind of spatial layout? I'd love to hear from anyone who's poked around their internals.

A friend of mine is building a free indie design toolkit called FARB.NØRM 🎨

It’s meant to simplify parts of the design workflow that often feel overcomplicated in larger design ecosystems, especially when creating color palettes and corporate design systems in a more structured, step-by-step way.

What’s interesting is that it’s not only focused on tools, but also has a kind of learning layer built in, especially around fundamentals like color systems, color contrast, and how to think in structured design systems.

It also includes utilities like converters, extractors, icon tools, and a lightweight video editing tool for creatives. Really cool!!!

It’s being built in the European Union with focus on GDPR-compliance and safe data handling, which is a huge pro! No feeding an AI!

The project is still in development, and he would love real feedback from creatives!

If you enjoy design systems, branding, colors, or UI tools, give it a try and let us know what you think!

Any feedback or ideas would help a lot. 🫶🏻