Alexander 👦

UX Engineer (9y). Creator of Design System Sync, a Figma plugin that pushes your tokens to GitHub via auto-PRs. Blog about CSS & a11y.

[Alexander 👦 @alexandersstudi]

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 👇
https://t.co/GByVXPK3cb

[Alexander 👦 @alexandersstudi]

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. https://t.co/kgpgTxSTsa
#DesignTokens #FigmaPlugin

[Alexander 👦 @alexandersstudi]

@KimoArtcave Spot on. If AI could finally map directly to our semantic variables and component APIs instead of spitting out detached frames with hardcoded hexes, that changes everything. Reckon they'll manage it?

[Alexander 👦 @alexandersstudi]

@ajibiketawa Aliasing is where the real power lives. Once you set up that primitive to semantic mapping, maintaining themes becomes trivial. Have you started mapping component-specific variables yet?

[Alexander 👦 @alexandersstudi]

@DaleAnthony Solid variable architecture is exactly what makes or breaks AI handoff right now. Messy aliasing just generates rubbish code. Curious how deep Flint goes with semantic tokens?

[Alexander 👦 @alexandersstudi]

@itzmeSwastik @figma @claudeai Managing alpha stops at the semantic tier without breaking primitive links is painful in Figma natively. This custom utility approach saves massive headaches. How are you structuring the naming for the alpha aliases?

[Alexander 👦 @alexandersstudi]

@fgbyte @stitchbygoogle @figma Estructurar bien las variables es clave para la IA. Uso un plugin de Figma que se llama DS Sync para exportar los tokens a JSON, dejando los datos perfectos para que los procese el LLM. ¿Lo sincronizas con GitHub?

[Alexander 👦 @alexandersstudi]

@sobol_andy @figma Generating components from JSON sounds brilliant for initial setups. I use a Figma plugin called DS Sync to push token updates straight to GitHub PRs. How does SXL handle syncing changes back to the repo?

[Alexander 👦 @alexandersstudi]

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. https://t.co/kgpgTxSTsa
#DesignTokens #FigmaPlugin

[Alexander 👦 @alexandersstudi]

@meyusufdemirci Feeding real Mobbin patterns straight into Claude to generate Figma mockups is next level for rapid prototyping. Does it output flat layers or actually try to use auto-layout?

[Alexander 👦 @alexandersstudi]

@shakuro Closing that handoff gap is the real win. I use a Figma plugin called DS Sync where the AI generates React code mapped to actual tokens instead of raw hexes. Have you tested Make with an existing component library?

[Alexander 👦 @alexandersstudi]

@kytokev Generating HTML wireframes with Claude is brilliant for feeling layout shifts early, easily beating static Figma frames for actual interactivity. Are you using it to prototype full components yet?

[Alexander 👦 @alexandersstudi]

@fern_innovai @TWiT Spot on, AI accessibility is usually ignored. A book on Amazon called Ship Your Design System has a great chapter tying AI directly to accessible design patterns. Have you seen any hardware tackling this well yet?

[Alexander 👦 @alexandersstudi]

You can finally stop worrying about broken typography pipelines. Check it out here and let me know what you think. https://t.co/kgpgTxSTsa
#DesignTokens #FigmaPlugin

[Alexander 👦 @alexandersstudi]

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.

[Alexander 👦 @alexandersstudi]

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.

[Alexander 👦 @alexandersstudi]

@DGTIUV Totalmente. La accesibilidad arranca en la fase de diseño, mucho antes de tocar el código. Si el contraste o la semántica visual fallan desde Figma, ningún atributo ARIA lo va a terminar salvando.

[Alexander 👦 @alexandersstudi]

@CentroServUV Totalmente, la accesibilidad no es un parche final. Un libro llamado Ship Your Design System en Amazon lo aborda genial integrando WCAG 2.2 directo en los componentes. ¿Suelen auditar con lectores de pantalla?

[Alexander 👦 @alexandersstudi]

@EminusUV Totalmente de acuerdo, debe ser fundacional. Leí un libro en Amazon llamado Ship Your Design System y su capítulo sobre checklists WCAG me ayudó a integrarlo directo en los componentes. ¿Tú cómo lo auditas?