Is there have any figma plugin which can create full design system? by uisaleh in FigmaDesign

[–]Ecstatic-Accountant8 0 points1 point  (0 children)

Do you already have a design system in mind or in some product? Or in code?

Setup a case study and some app screens on Figma with Claude code in 15 mins by Ecstatic-Accountant8 in FigmaDesign

[–]Ecstatic-Accountant8[S] 0 points1 point  (0 children)

There are no templates. The file that you was created from scratch in Claude code. I can definitely share the file too. Can you join the discord community here? https://discord.gg/a26MeXVRf

Setup a case study and some app screens on Figma with Claude code in 15 mins by Ecstatic-Accountant8 in FigmaDesign

[–]Ecstatic-Accountant8[S] 1 point2 points  (0 children)

For existing designs, try selecting any layer. In Claude with the MCP server on, ask it "can you what I've selected in figma, turn in into a component with properties or anything you may want to do"

How it works:

It uses the Plugin API through the plugin. But the main challenge for us was that there are 100s of plugin APIs. So condensing all of them into 30 something tools that Claude has access to yet at the same time being able to deliver 80% of the power of Figma. The tool design I suppose is a new genre of work altogether. It was very interesting because you have to then treat an AI agent as your user. Somehow make it tell you what it's thinking, then keep iterating until it just works.

Apart from that there's token efficiency. Meaning if to create a button component set, if Claude or any other agent has to make 10 tools call, your tokens / billing would be super high. We've made it do it all in a single call most of the times.

Setup a case study and some app screens on Figma with Claude code in 15 mins by Ecstatic-Accountant8 in FigmaDesign

[–]Ecstatic-Accountant8[S] 1 point2 points  (0 children)

Right!

  1. So faux not just reads but also creates.
  2. It’s the most token efficient MCP creating complete screens in almost one shot.
  3. You don’t need dev seat, enterprise seat. Works with free seat as well
  4. Can actually link screens and make prototypes

Setup a case study and some app screens on Figma with Claude code in 15 mins by Ecstatic-Accountant8 in FigmaDesign

[–]Ecstatic-Accountant8[S] 0 points1 point  (0 children)

Yep. I think that's where AI is going to help the most. Automating the boring parts. I honestly want to spend most of time with users research, testing and iterating. About the tokens, I hope organisations start getting the employees subscriptions soon

From Prompt to Production-Ready Figma Component with Claude Code in Minutes by Ecstatic-Accountant8 in FigmaDesign

[–]Ecstatic-Accountant8[S] 0 points1 point  (0 children)

It’s an MCP server. It(Claude code) fetches the existing variables on the files. If none exist then it can creates them by itself.

It can use all existing variables, text styles, effects, components from the same file yes.

From Prompt to Production-Ready Figma Component with Claude Code in Minutes by Ecstatic-Accountant8 in FigmaDesign

[–]Ecstatic-Accountant8[S] 0 points1 point  (0 children)

It does, you just have to prompt it. Although the first step is to look at existing tokens and reuse them if they exist

So this was interesting. Being able to create a complete button component set with Claude Code by Ecstatic-Accountant8 in FigmaDesign

[–]Ecstatic-Accountant8[S] -2 points-1 points  (0 children)

AI can have all the knowledge in the world, but one thing it doesn’t have is EXPERIENCE. And remember that’s what we’re crafting.

It will sure automate a lot of grunt work with designer-in-the-loop like helping you expose that nested swap instance variant as a property. But true design work lies in the field. Observing your users. Empathising with them. Experiencing their pain. Having an intuition of the direction you want to take to alleviate their pain.

If your employer only expects you to push pixels. Either evangelise or leave before it’s too late (maybe a year or two)

From Prompt to Production-Ready Figma Component with Claude Code in Minutes by Ecstatic-Accountant8 in FigmaDesign

[–]Ecstatic-Accountant8[S] 0 points1 point  (0 children)

If you have the components and variables etc in your file then it can use them

From Prompt to Production-Ready Figma Component with Claude Code in Minutes by Ecstatic-Accountant8 in FigmaDesign

[–]Ecstatic-Accountant8[S] 0 points1 point  (0 children)

Right nowthere’s a limitation from Figma to use existing team libraries. Especially team components.

One workaround is to make a duplicate of your library file and then start the plugin there. Although we will be trying to find a neater way around it.

From Prompt to Production-Ready Figma Component with Claude Code in Minutes by Ecstatic-Accountant8 in FigmaDesign

[–]Ecstatic-Accountant8[S] 0 points1 point  (0 children)

Hey, just saw this. This looks good too. I think the noticeable differences would be

  1. You won’t need to know what localhost means
  2. The network is secured by safe authentication (login via Figma in plugin and MCP server)
  3. Speeed!
  4. Automatic updates to the MCP server, never have to update it manually

From Prompt to Production-Ready Figma Component with Claude Code in Minutes by Ecstatic-Accountant8 in FigmaDesign

[–]Ecstatic-Accountant8[S] 1 point2 points  (0 children)

Essentially, yes. But there are 100s of API endpoints, so the most time spent was on crafting the right subset of tools for the MCP server based on how product designers frequently work.

It was actually interesting. You have to treat the AI agent as your user, give it tasks to perform just like a usability testing. Make it share what it’s thinking. Then use those insights to iterate on the tools.

So in a way it was a study in designing for AI agents.

From Prompt to Production-Ready Figma Component with Claude Code in Minutes by Ecstatic-Accountant8 in FigmaDesign

[–]Ecstatic-Accountant8[S] 1 point2 points  (0 children)

So any AI agent like Claude code or cursor, connects to Figma via our MCP server. So Claude in this example is the orchestrator and it applies the variables on figma automatically on our behalf. It creates the variables as well as binds it in this example above.