The Design Community Hub

c/design-system-stories

7

gavinwood•3d ago

Seeing my team's old Photoshop mockups side by side with our live site finally made me understand why we needed a design system

I spent 2 years arguing with our devs about inconsistent spacing before I laid out all 47 mockups from the last 3 projects on a table and realized every single one used a different 4px, 6px, 8px, or 10px gap for the same kind of card component - has anyone else had that moment where you physically see the mess and just know you have to build something?.

12

max388•3d ago

Spent $60 on a token system plugin and it actually fixed my component naming chaos

I bought a UI token management tool for my small team's design system, $60 a month. Within 3 days we stopped having six different shades of 'primary blue' floating around in Figma. Has anyone else found a paid tool that actually paid off for their system?

30

wren301•4d ago

Stop naming your components by their current position on the page

I keep seeing teams build design systems where they name things like 'HeaderButton' or 'SidebarCard' and it drives me crazy. At my last job we had a button that was called 'ProfileMenuButton' for 6 months until the design team moved the profile to a different part of the screen. Then we had to rename it across 40 files and update all the references. A button is a button no matter where it sits on the page. Name it by what it does like 'LogoutButton' or 'SaveButton' not where it lives on the screen. I learned this the hard way after we did a complete layout redesign and half our components had outdated location based names. Has anyone else dealt with renaming a whole batch of components because of this?

13

ben_shah93•4d ago

Spent 6 months ignoring component naming conventions and it cost me 3 hours last Tuesday

Back when I first started building a design system at a startup in Austin, I thought I could just name my button variants whatever came to mind. Primary, main, cta-blue, action-button - it was a mess. Last Tuesday I had to update every single file because nothing was consistent, took me 3 hours just to track down the right components. Now I use a strict naming pattern based on function first, appearance second. Has anyone else had to redo their entire library because naming got out of hand?

18

charlie_stone72•5d ago

Rant: my dev team threw out my design system tokens after 2 years of work

Last week I found out my team replaced all my carefully named color tokens with hex codes hardcoded into the CSS. I built that system 2 years ago after pulling 3 all nighters to fix our old mess. They said it was "faster for now" but now we've got 14 shades of blue that all look the same. Has anyone else watched their design system get ignored after the handoff?

1

keith_henderson•5d ago

Three years ago I hated design systems, now I get it

Back in 2021 I was working on a single landing page for a small real estate firm. I thought design systems were just extra work for big corporate teams. Then last month I had to rebuild the same component set for three different property websites. Took me about 8 hours total to recreate buttons, cards, and forms from scratch each time. Now I'm wondering if anyone else has a lightweight system they use for smaller projects that doesn't feel like overkill?

25

betty_fisher5•6d ago

Rant: My team spent 6 months building a design system that nobody used

I work at a mid-sized SaaS company in Portland. Last spring our design team of 5 people decided we needed a proper design system. We spent 6 months documenting every button, card, and input field. We made a 200 page site with examples and code snippets. Launched it with a big email and Slack announcement. A month later I checked the analytics and only 3 people from our 40 person product team had even clicked on it. The developers kept copying old patterns from previous projects. The designers said it was too hard to find things. Felt like a huge waste of time. Has anyone else had a design system rollout that just flopped? What did you do differently the second time around?

1

charles_henderson•6d ago

Hit 50 reusable components in our design system today, never thought we'd get there

I checked our component library stats this morning and saw we crossed 50 reusable parts, which felt wild since we started with just 3 buttons and a form field 6 months ago. Has anyone else had that moment where you realize your system grew way faster than you expected?

17

thomas_johnson35•7d ago

Chose a token-based system over a component library and it took me 3 months to stop second-guessing it

Last year I had to decide between building a full component library (like Material UI) or going with a token-based design system using CSS custom properties. I picked the token route because our team has 5 different apps that look totally different from each other. The first month was rough, I kept thinking I made the wrong call when my buttons looked naked. But by month 2, the developers started really getting how the tokens worked, and they could spin up new pages way faster without fighting existing components. Now 7 months in, I can tweak the entire look of two apps just by changing a few token values in a single file. Has anyone else gone the token-only path and felt like you were missing guardrails at first?

3

lucaslane•8d ago

Can we talk about how our color tokens turned into a mess after v2.3?

Last month our team pushed a design system update and suddenly all the secondary buttons went from blue to green. Turned out someone renamed a token in Figma but forgot to update the CSS variable mapping. We had to roll back and spend a whole Thursday fixing 47 components by hand. Anybody else deal with token names that drift between design and code?

23

blair_butler47•9d ago

The moment I caught myself overcomplicating a button component

Last month I was building out a button system for a small e-commerce site in Indianapolis. I had 14 variants, 3 sizes, and 6 state colors before my coworker asked why a simple 'buy now' button needed 12 lines of CSS. He pulled up the original wireframe and pointed out the design only had 3 button types. I stripped it down to 4 variants and the devs actually started using the system instead of fighting it. Has anyone else had to undo their own overbuilt components because nobody on the team would touch them?

27

oscarwilliams•10d ago

Senior dev told me to stop over-engineering my design tokens

My lead at a startup in Austin told me to cut my color token system from 200 entries down to 30. I thought he was crazy but he said just use shades for primary, secondary, and neutral. Three months later I was glad I listened because the team actually adopted the system instead of ignoring it. Has anyone else had a developer push back on token complexity and it ended up helping?

22

zarak18•12d ago

Tried a global token system for our app and got a mutiny from the devs

I pushed to switch all our colors and spacing to a single JSON token file last month for a client in Austin. Thought it would be clean and fast, but the frontend team hated it because every tiny change needed a full rebuild and deploy. Three weeks in, I had to roll back to plain CSS variables because the token pipeline was breaking their hot reload workflow. Has anyone else had a token system backfire like that?

8

the_jenny•15d ago

Figma's $15/month team plan almost cost me a client deadline.

Went with the basic free tier for my solo work. Then a client asked for a shared library. Paid for the upgrade but it didn't sync right for 3 days. Lost a whole weekend fixing component conflicts. Anyone else get burned by sudden feature paywalls?

21

avery366•15d ago

Just realized how much time I wasted on token naming until I compared two side-by-side

I was building out a color system for a project last month and got stuck on how to name everything. One approach I tried was super specific like "button-primary-hover-bg" and the other was more general like "surface-primary-hover". After laying them out on a board for the dev team to look at, the general approach won by a mile. The specific names made me rewrite whole tokens every time a design tweak happened, which was about 3 times a week. With the general names, I only had to update the core scale and everything else just followed along. The downside is the team had to learn a bit more about how the system connects, but after 2 weeks nobody complained. Has anyone else found a naming convention that killed their token overhead?

25

miles_roberts22•15d ago

Warning: Our component library doubled in size after one Figma plugin change

I manage a design system for a team of 15 at a mid-sized agency in Denver. Six months ago we let a junior dev install a plugin that auto-generated variants for every button state, and suddenly our file went from 300 components to over 600. Nobody noticed until the load times hit 45 seconds and our production builds started failing. Has anyone else dealt with a tool update that quietly bloated your system before you caught it?

1

wendysmith•16d ago

The day our entire design system broke because of one missing period in a CSS file

Took me 6 hours to find it, a single missing period in a class name. My PM stood over my shoulder the whole time, told me "you look like you're solving a murder." Has anyone else had a bug that simple ruin your whole week?

18

the_viola•17d ago

Just watched my team triple their handoff speed after adding live design tokens

Before I added actual live tokens to our Figma library, every developer handoff took at least 3 rounds of 'this blue is wrong' back and forth. Over 4 months of using tokens tied to our codebase, we cut merge request disputes from 8 per sprint down to maybe 1. Has anyone else seen that big of a shift from a single system change?

17

cole_mitchell57•19d ago

Our design system component library hit 400 variants last month and I want to scream

Started building this thing about 2 years ago with like 20 basic buttons and inputs. Then product teams kept asking for 'one more variant' for their specific use case. Now we have 47 button styles, 62 modal variations, and nobody knows which one to use. Last Tuesday I spent 3 hours helping a new dev pick between three nearly identical dropdown components. Has anyone else watched their design system bloat into a mess like this?

20

blair_dixon•20d ago

My coworker told me to stop reinventing the wheel 3 years ago

I kept building custom buttons and modals for every new project instead of just reusing the component library. After I hit 5 different button styles across 2 apps I finally saw she was right. Did anyone else fight against using a design system at first?

9

charlie_stone72•20d ago

I finally saw the real cost of ignoring our design system tokens

After our last audit, I found out we had 47 different shades of blue across 12 components because nobody enforced the color palette, and that stat came straight from our Figma plugin report last Wednesday.

5

ivancoleman•20d ago

Discovered a color palette trick that actually saved my butt

Been building a design system for a healthcare app. Client wanted 12 shades of blue for their brand. I kept tweaking and tweaking. Nothing felt right. Then I tried this thing where I picked one base blue and just adjusted lightness in 10% steps. No hue shifting. Cleaned up the whole system in 2 hours. Before that I was manually picking every shade. Took me 3 days. Has anyone else found a simpler way to generate color scales without losing your mind?

5

adams82•21d ago

Switched from Sketch to Figma in 2019 and never looked back

Switch from Sketch to Figma helped a lot with component library maintenance. Took a weekend but saved loads of time. Any similar experiences?

15

wendy_clark•21d ago

Ten years ago I thought consistent buttons were enough

Back in 2013 I built my first real design system for a healthcare app. I was so proud of the button styles and color palette. Took me 6 months to realize I had zero rules for error states or loading animations. The developers just made stuff up on the fly. Now I always start with the edge cases first. Has anyone else had to backtrack hard because of missing states?

16

ross.jessica•22d ago

I finally got why our color palette made the client angry

Last Thursday I was looking at a proposal we put together for a local restaurant renovation. We used our standard paint color system that works fine on houses and office buildings. But the client said the greens felt wrong and I didn't understand until I stood in their dining room with the afternoon sun coming through. The warm light changed everything about how those colors looked on the wall. Has anyone else had a design system fail because of lighting conditions you didn't account for?