Christopher Deane

Creating Design Systems @macquariebank. Loving Husband, Awesome Dad.

[Christopher Deane @deanemachine]

Now, I love #claude, but if you're on a @claudeai pro plan, you'll reach your #claudedesign weekly limit in 15 minutes, creating 28 of an 118 component #designsystem in #react instead of #lit.

See you in a week Claude Design 😐

@react @buildWithLit #scaledesignsystem

[Christopher Deane @deanemachine]

And that's a wrap! The final 3 episodes of my @figma FDS #designsystem series are up where we create #input, #row and #alert components 🤘

Check out the last episode here: https://t.co/RNSozlp2x4

@YouTube #figma #tutorial

[Christopher Deane @deanemachine]

Scale for #framer is here 👋

- 56 Components. 8,368 possibilities
- 120 Styles & Variables
- 288 Feather and Status Icons
- 15 Content Modules. 8,117 possibilities
- 3 Page Templates

Design in @figma , build in @framer, or do both at: https://t.co/8wi2GQmnIz

#scaledesignsystem

[Christopher Deane @deanemachine]

In the second episode of my #pencildev series, we export Semantic Color Variables from @figma and use @claudeai to convert them into Pencil variables automatically 🤘.

https://t.co/PS0xYig0ue

#vibedesign #ai #claudecode #vscode

[Christopher Deane @deanemachine]

In my latest tutorial we look at #Pencil from @tomkrcha and High Agency, a bi-directional MCP design canvas for @AnthropicAI @claudeai Code, and see whether this is the AI Design tool we’ve been dreaming of.

https://t.co/FoYObjaqWp

#vibedesign #ai #claudecode #vscode

[Christopher Deane @deanemachine]

Episode 17 of my tutorial series is up where we create a #designsystem in @figma called FDS. In this episode, we’re doing the Help Text Component 🤘.

https://t.co/msnnheAJhJ

@YouTube #figma #tutorial #helptext

[Christopher Deane @deanemachine]

First time (that I know of) that someone has ripped off my work and is claiming it as their own.

@Suryanaray98176 released MDS on the Figma community that is a copy of my FDS tutorial series system: https://t.co/HKP9hZl1P0

Here's a comparison: FDS left, MDS right.
@figma

[Christopher Deane @deanemachine]

Scale for @framer progress update: Foundations, Components, Sections and a few Templates are done. Now working on Cover frames, then docs and a new site. We're almost there 🙂.

Check out the @figma version of Scale here: https://t.co/WtumbI4i7L

#scaledesignsystem #framer #figma

[Christopher Deane @deanemachine]

Scale for @framer progress update: Hero, Feature, FAQ, CTA and Logo Section module components. And Table, Toast and Tooltip components.

#scaledesignsystem #framer

[Christopher Deane @deanemachine]

Scale for @framer progress update: Help Text, Menu, Modal, Tabs, Toggle components.

#scaledesignsystem #framer

[Christopher Deane @deanemachine]

Scale for @framer progress update: Badge, Banner, Button Pill, Button Icon, Breadcrumbs, Form, Status Indicator components.

#scaledesignsystem #framer

[Christopher Deane @deanemachine]

Scale for @framer progress update: Accordion, Alert, Avatar, Button and Spinner components.

#scaledesignsystem #framer

[Christopher Deane @deanemachine]

Liquid Glass Materials and Components are here with Scale 3.0! Grab a licence at https://t.co/8wi2GQmnIz, members grab it from your @gumroad library🤘.

#scaledesignsystem @figma @Apple #liquidglass #iOS26

[Christopher Deane @deanemachine]

Episode 16 of my tutorial series is up where we create a #designsystem in @figma called FDS. In this episode, we’re doing Checkbox and Radio Components 🤘

https://t.co/ArIF0knmLO

@YouTube #figma #tutorial

[Christopher Deane @deanemachine]

In my latest tutorial, learn how to use @figma's MCP to convert a Button component into a @reactjs one using @Microsoft visual studio @code, @roocode and @Google @GeminiApp 2.5 Pro.

https://t.co/lX2HmS0k9f

#scaledesignsystem #figma #AI #mcp #vscode #roocode #storybook

[Christopher Deane @deanemachine]

Episode 15 of my tutorial series is up where we create a #designsystem in @figma called FDS. In this episode, we’re doing some updates🤘

https://t.co/lB0u2vphpw

@YouTube #figma #tutorial

[Christopher Deane @deanemachine]

Scale v2.9.5 has been released! Grab a licence at https://t.co/8wi2GQmnIz, members grab it from your @gumroad library.

This release include Scales first plugin: Semantic Color Variable Picker! 🤘

#scaledesignsystem @figma

[Christopher Deane @deanemachine]

Used #ai to created my first @figma plugin that allows you to find the right semantic variable when you design with #scaledesignsystem 🤘

Vibe coded in @code, #roocode with @Google #gemini 2.5 then reviewed by @github #Copilot Agent Mode and @AnthropicAI #claude 3.2 🤩

[Christopher Deane @deanemachine]

Scale for @reactjs progress. 11 components including an Avatar that can display an icon, image, text or group along with it's status.

@figma to @code with #talktofigmamcp and @roocode using @GeminiApp 2.5 ✨.

#scaledesignsystem @sonnylazuardi #roocode #googlegemini #avatar #ai

[Christopher Deane @deanemachine]

Scale for @reactjs progress. 7 components including one that allows you to use custom SVG icons.

@figma to @code with #talktofigmamcp and @Google @GeminiApp 2.5 ✨.

#scaledesignsystem @sonnylazuardi #google #ai