UX Engineer (9y). Creator of Design System Sync, a Figma plugin that pushes your tokens to GitHub via auto-PRs. Blog about CSS & a11y.
Joined February 2015
- Tweets 1,819
- Following 3,638
- Followers 874
- Likes 1,146
272 Photos and videos
Pinned Tweet
After 3 years of copy-pasting design tokens from Figma to our codebase every sprint, I got tired and built Design
System Sync.
One click in Figma → auto PR in GitHub with your tokens.
Free on Figma Community 👇
figma.com/community/plugin/1…
3
131
Tools can't fix a bad design system tbh. Without strict governance, you just have a messy UI kit. I wrote Ship Your Design System to give you the missing manual. ds-sync.netlify.app?utm_sour…
#DesignSystems #Figma
4
So I did the maths. A normal Figma file has about 40 hidden unwired hex codes. Fixing them by hand takes ages. That's why my DS Sync plugin now wires them in one click. ds-sync.netlify.app?utm_sour…
#DesignTokens #FigmaPlugin
10
Copying token updates into PRs by hand is a massive waste of time. I got fed up and built a free Figma plugin to sync them automatically. ds-sync.netlify.app?utm_sour…
#DesignTokens #FigmaPlugin
2
A design system without governance is literally just a UI kit tbh. You need proper RFCs before syncing tokens. I wrote Ship Your Design System to fix this mess. ds-sync.netlify.app?utm_sour…
#DesignSystems #FigmaPlugin
5
Deleting tokens without warning just ruins builds tbh. I cover safe deprecation and RFCs in my new book Ship Your Design System. Read it and sync safely.
ds-sync.netlify.app?utm_sour…
#DesignSystems #UX
13
Setting up text variables in Figma feels great until you actually try to export them. You spend hours linking everything. Then the output just flattens all those beautiful aliases into raw pixels. It completely defeats the point of having a system.
1
11
That is why I built Text Styles Export v2 into Design System Sync. It exports typography as proper W3C tokens. Your bound variables stay intact as aliases. It even normalises text casing and line heights into standard CSS units automatically.
1
6
You can finally stop manually fixing typography JSON files. The plugin handles it all and opens a pull request directly to your repo. Try the new text export here.
ds-sync.netlify.app?utm_sour…
#DesignTokens #FigmaPlugin
1
4
Hunting for raw hex codes in Figma is awful tbh. I built a free plugin that finds unwired values and binds them for you. ds-sync.netlify.app?utm_sour…
#DesignTokens #FigmaPlugin
3
Finding hidden hex codes in Figma takes forever. I got lazy and made a free plugin that binds them to your tokens in one click. ds-sync.netlify.app?utm_sour…
#DesignTokens #Figma
10
Sending flat pixels to devs totally ruins your text tokens. They need the actual aliases. My plugin v2 finally exports bound W3C text styles properly. ds-sync.netlify.app?utm_sour…
#DesignTokens #FigmaPlugin
8
So I checked the stats. 40% of Figma files still hide raw hex values. Connect Unwired in my plugin finds and binds them to tokens in one click. ds-sync.netlify.app?utm_sour…
#DesignTokens #FigmaPlugin
13
Typography handoff is honestly a massive headache. You set up beautiful text variables in Figma. Then you hand it over and the devs just get raw pixel values instead of your aliases.
1
9
That is exactly why I built Text Styles v2 into Design System Sync. It exports typography as W3C tokens and actually preserves your bound aliases. It even normalises line heights and text casing to standard CSS units automatically.
1
4
You can finally stop worrying about broken typography pipelines. Check it out here and let me know what you think. ds-sync.netlify.app?utm_sour…
#DesignTokens #FigmaPlugin
3
Curious how your team handles renaming design tokens. If devs already use the old name in code, do you just break the build and hope for the best? ds-sync.netlify.app?utm_sour…
#Figma #DesignTokens
10