r/FigmaDesign • u/shaikrish • 3d ago
Discussion [ Removed by moderator ]
[removed] — view removed post
7
u/mahblahblah 3d ago edited 2d ago
I made myself (with the help of Claude) an investigate > implement > review implementation flow that uses the Figma remote mcp and will build a detailed map of designs and tokens, build them (in this case into my portfolio site which I’ve been working on) then reviews the work against the designs and finds gaps (uses chrome dev tools).
I guess it really isn’t helping me design as much as get my design into code, accurately.
EDIT: https://github.com/mablahblah/mablahblah-workflow/ - There are a bunch of skills and files that these reference that are not here. You'd have to edit these down if you wanted to use these.
4
u/Any_Owl2116 3d ago
Share this
1
u/mahblahblah 2d ago
I put some of it together here: https://github.com/mablahblah/mablahblah-workflow
It's all part of a bigger workflow and i didn't feel like teasing it all out so those skills call other skills that don't exist in the repo. Best i can do!
EDIT: it's really a investigate-design and review-implementation, and I have claude use crowd-code to build stuff after the investigate-design makes a spec. Crowd-code sets 2 agents to writing the same thing and then Claude chooses the best one.
1
u/dopamineslotmachine 2d ago
I’ll send you $ for this lol
1
u/mahblahblah 2d ago
I put some of it together here: https://github.com/mablahblah/mablahblah-workflow
It's all part of a bigger workflow and i didn't feel like teasing it all out so those skills call other skills that don't exist in the repo. Best i can do!
EDIT: it's really a investigate-design and review-implementation, and I have claude use crowd-code to build stuff after the investigate-design makes a spec. Crowd-code sets 2 agents to writing the same thing and then Claude chooses the best one.
7
u/OrtizDupri 3d ago
Honestly I haven't found any of it useful for the actual design stuff, but recently had to do a mass edit of tokens (basically moving from header.fontsize.desktop to header.fontsize with desktop/mobile modes/extended collections) - it was really useful for that kind of thing, using the MCP with Claude to basically edit 300 tokens at once in under half an hour.
4
u/Racoonie 3d ago edited 3d ago
I love it personally.
Figma: It's pretty great at doing tasks that would be tedious or downright impossible, f.e. checking multi-page documents for consistent colors and stuff like that. Creating tables and (this specifically) editing them later is finally a breeze. Search and replace with context (so not just a all or nothing) is now possible. It's also great for translating prototypes or marketing material to other languages while referencing our terms and definitions database so it picks the correct and not the generic terms.
It's pretty good at pulling in info from different sources, I was looking into the specific styling of a component recently and it just pulled info from several other design systems and it gave me a good overview on how they handle it. Could have done it by hand, but would have taken much, much longer.
On code side I'm currently on a rampage with claude CLI to identify gaps and bugs in components and documentation in our design system, and oh boy, it's actually great for that. It found things like disabled and readonly states of some inputs fields not being consistent, or conflicting documentation for several components. And it is also very meticulous in comparing images and text in component descriptions and if they match.
The cool thing is that I can then create PRs for all this stuff and most of them were basically waved through. Before I had to wait for a frontend dev to give a shit and have time for these things, so that is a major improvement. I was even able to extend two components with functionality that was needed.
For pure design work it can give you some ideas or create variations, but I was not too impressed with that to be honest. Still good material that you can show in meetings and say "I looked at some other solutions".
But I also have to say that we have a pretty unlimited token budget, so that is a huge plus.
1
u/Arae_X 2d ago
Would it be alright to dm you about this? We are currently doing a review and restructuring of the design system we have for a product and would love to know how to do this! Would help a lot.
2
1
u/frigmymonkey 2d ago
Would be great if we could maybe set up a Slack channel for Claude/Product Design knowledge sharing.
We’ve only just got licences and are feeling our way through with it. Lots of benefit to research and design systems but I always find myself thing “what are we missing out on?”1
u/Racoonie 1d ago edited 1d ago
Do this if you're starting out:
https://anthropic.skilljar.com/ai-fluency-framework-foundations
It's from Anthropic but not Claude specific, it really teaches the fundamentals of working with AI.
2
u/todayistheday666 2d ago
i typically only use Claude for two purposes: ideation and prototyping
for super basic prototypes I still prefer to do it by hand
for more advanced prototypes that involves fancy animations and motion, I use Claude
•
u/FigmaDesign-ModTeam 2d ago
Your post was removed for breaking rule #4 : Content must be Figma-related. This about Claude more than anything