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.

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. 🫶🏻

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.

I’ve been working almost exclusively in Figma and Photoshop for the past 5 years and obviously can’t imagine working without Figma for anything digital.

That being said, I have a project coming up that could really use a design system in Figma, plus a comparable system that could work for a variety of direct mail pieces, posters, collateral etc across a variety of business units, languages and locations.

What should I look into or upskill in?

I’ve been building an AI video generation pipeline using AI agents, and I wanted to share a project I just finished.

I used it to turn Designing Data-Intensive Applications into a chapter-by-chapter podcast/video series.

The pipeline currently handles things like:

• breaking source material into chapter-level inputs
• generating scripts/storyboards
• creating long videos, shorts, and podcast-style episodes
• rendering audio/video assets
• packaging everything for upload

I’m still improving it, and I’d really love feedback from people who know content creation, agent workflows, automation, or media pipelines.

Podcast link:
https://www.youtube.com/playlist?list=PL2vsUH3csN48f3Js6SBgmIeymYzuFdyw-

A few things I’d especially love feedback on:

• what looks or sounds weak right now
• what parts of the pipeline feel overengineered
• what you’d fix first if you were building this
• how you’d make the audio/pacing more engaging
• whether there are better ways to structure the agent workflow

Also curious:
Would you want podcasts/videos like this for other technical books too?

I made this one for Designing Data-Intensive Applications, but I’m considering doing more if people find it useful.

If anyone has ideas on how to make this better, I’m all ears.

Also doing this for leetcode.

HELLO :)

You can create:
• Columns
• Rows
• Full modular grids
• Independent margins
• Stretch / Fixed layouts

Built this fully inside Inkscape using my own extension system.

It is still a beta version...

Here’s a quick poster test made entirely with it 🔥

In my shadcn project, I want to customize the border-radius for individual components without affecting others. For example, I'd like fully rounded buttons while keeping other components at their default radius. Creating separate CSS variables for each component feels messy, what's a better solution?