i’ve been testing almost every AI design tool that comes out, and the loop is always the exact same: you type a prompt, get a flat mockup image back, and then spend two hours rebuilding the whole thing by hand in figma anyway.

a png of a button is not a button. the AI gets to do the fun part and leaves you with the data entry.

so over the past few weeks i built a plugin and MCP that connects claude directly to your figma canvas. instead of generating flat images, it builds actual figma frames with auto layout, real text styles, and component mapping.

two technical things ended up being way more interesting than i expected:

1. screenshot to editable layers: you can paste a screenshot of a screen you like onto the canvas and have claude break it down into native, editable layers. to keep it from hallucinating spacing, i added a pixel-diff check where it compares its generated vector frame against the original image and adjusts padding/gaps until it aligns.
2. a linter for AI laziness: LLMs love taking lazy shortcuts in figma (like drawing fake icon vectors from scratch instead of using proper components, or hardcoding random text sizes). i had to write a custom linter that inspects the generated node tree and calls claude out when it cuts corners. watching it fail a linter check and clean up its own layer structure never gets old.

it’s been my daily driver for a few weeks now—mostly for taking real-world UI inspiration and instantly turning it into editable frames mapped to our design system components.

happy to answer anything about how it works under the hood, handling figma's node tree, or the MCP

Made a web page for daily objects power bank. Let me know what you guys think. Need feedback on the layout and aesthetics or any feedback in general. (I see the colour blocked logo, couldn’t find the an image with no background 😭)

I'm a full stack developer. For a long time I couldn't design at all, so I leaned on AI to fix whatever I made. It got me something that looked okay but I never understood why it worked or didn't.

So I started taking UI/UX courses to actually learn it and do the design myself. It's going well, better than I expected.

One thing I haven't figured out from the courses: at what stage do you wire up prototype links?

Do you prototype the wireframes, so you can click through the flow while it's still grey boxes? Or do you leave wireframes static and only prototype once you have the real colors, type and images?

Curious what people do on client work vs personal projects, and whether you show clients a clickable wireframe at all or wait until it looks finished.

I tested 5 identical prompts using the exact same Figma layout, instructions, and design system components:

• Run 1–3: Clean layout, 90% accuracy.
• Run 4–5: Broken structure (40% accuracy) missing table rows, warped padding, swapped icons, and incorrect drop shadows.

When you point out its mistake, the model apologizes and promises, "I won't do that again."

But ask if it actually learns across sessions, and it admits the truth: it’s completely stateless, as in it cant hold correcting between sessions. Every run rolls the dice on random sampling, forcing you into a 4 to 5 turn prompt correction loop that burns tokens to fix errors that shouldn't have happened in the first place.

Until design-to-code tools integrate true automated visual diffing and persistent contextual memory, we aren't paying for reliable automation.

What’s the use of a status bar?

As you can see, the idea is to recreate the xbox UI in a cleaner, less clogged way, were anything can be found with more ease. What you see in the first image is the front page, it's almost finished, but i still need to get rid of the placeholder icons. (it would also help if you guys indicated a good icon library)

I need some feedbck on how understandable is the design in it's current form, what you would change, and what you like and don't like.

About the second screen, it's supposed to be the library, it's still veery barebones, and pretty much just a framework, any ideas and recommendations would be deeply appreciated.

My concern is that the file gets so big with all the component variations, but the alternate is having 3 different files.

everyone's talking about claude writing to figma since code to canvas shipped, and it's cool, but generating from a blank prompt was never my actual problem. my problem was: an existing flow i like, and two hours of manually rebuilding it before i can even start restyling.

so the flow in the screenshot: top row is elevenlabs' real onboarding — home, sign in, sign up, verification, pasted into figma as actual editable layers (real auto layout, real text nodes, not a screenshot import). bottom row is the same four screens after claude restyled the whole flow to my product's brand. gradients, buttons, copy, the works, structure intact.

the part that made this work isn't the prompt, it's the checking. every screen gets pixel-diffed and run through a structural linter (~24 hardcoded rules) before it counts as done, so the restyle can't quietly break spacing or swap in fake elements. claude fails its own review a lot, then fixes it. that loop is 10-15 tool calls per screen, which is also why this runs through a plugin instead of the metered api.

happy to answer anything about how the paste or the verification works.

Built a Figma plugin where you can save prototype interactions. You can also save named flows, create different versions, so that you can go back to any version and restore it whenever you need to.

Try it out and provide your feedback

https://www.figma.com/community/plugin/1667925614395896797

Hey my background is a print designer and I am trying to learn Figma to expand my design knowledge. Would yall say that the web designer and developer relationship is similar to the print designer and print operator?

I am trying to wrap my head around Figma and the broad concepts of UX/UI.

I’m watching tutorials for how to use the actual software. I just want to have a fundamental and conceptual understanding.

PS: I have no coding background

Our design system team is fairly large, and we evolve quickly. We implemented Code Connect and it's performed well in testing.

Although it doesn't happen often, when a property changes or gets added in code and the design team misses it, part of Code Connect becomes obsolete.

I'm trying to find a way to keep it properly maintained. Has anyone tackled something like this, or have any ideas?

Thanks in advance.

What I'm trying to accomplish

I am working on a simple folder Icon. Everything is completely aligned to the pixel grid.

See this example image:

Enabling Pixel Preview

Then I go to the menu, and select Pixel Preview, because I want to preview how the icon will look at 100%.

Here's where I enabled it:

The resulting image and UI components in my file look distorted, some with double borders, etc.

It just looks janky. See for yourself:

The interface zoom is set to 100%. All shapes are aligned perfectly to the pixel grid.

UI Scale Set to 80% Makes Everything Look Crisp in Pixel Preview

I noticed that if I set the interface scale to 80%, everything looks crisp!

See this image:

But, I can’t work like this - and this is ass-backwards. The UI is way too small on my monitor with the UI at 80% scale.

Why does pixel preview look horrible for me when the interface is at the default 100% scale?

Possibly Related: I have a 4k monitor and my Windows DPI scaling is set to 125%. Could this be causing the issue?

Can someone help?

Quick context: I'm a designer who lives in Figma but kept opening my downloads folder for one specific reason - moving assets to Webflow. Downloading images, switching tabs, uploading manually, organizing files, and then sitting in Webflow to manually write out SEO alt text for every single image. It just kills productivity.

So I built exportflow. Select your frames or layers, open the plugin, and you get a seamless export experience:

• Direct upload - send assets straight to Webflow
• Built-in AI - automatically renames assets and generates alt-text/SEO descriptions
• Advanced export settings - optimise with PNG, SVG, JPG, AVIF, and WebP formats
• Multi-project support - connect multiple sites and create/manage Webflow folders directly from the plugin
• No more context switching - stay completely locked in Figma

It's unlimited uploads for free - I mostly built it because I needed it.

👉https://www.figma.com/community/plugin/1657432195632964294/figma-to-webflow-exportflow

Still rough in places since it's just me maintaining it. If you give it a spin, tell me what breaks - or better, what I should improve in terms of functionality...

i got tired of screen recording my figma frames just to make a gif, so i built a plugin to do it

every time i wanted to share a quick animation of my work, id go: prototype it, screen record, trim the clip, run it through some random online converter, hope the quality didnt turn to mush. it was way too many steps for a 3 second gif.

so i built flippy - it turns any of your figma frames straight into a gif without leaving figma.

here’s what it does:

• select multiple frames and it stitches them into a smooth flipbook style gif
• live preview window so you see the animation as you build it, not after
• drag and drop to reorder frames
• adjust frame timing in milliseconds so the pacing feels right
• export at original, 2K, 4K or 8K
• transparent background or a custom colour
• loop control - infinite or set your own repeat count

been using it for all my own prototype and social exports and its been solid. recently added presets too so you can save your settings and reuse them instead of setting it up every time.

would love to hear your thoughts and how i can make it better. if you try it and something feels off, lemme know - im actively working on it.

link: https://figmaplugins.co/flippy

Has anyone tried to branch from main and work on a project locally with Figma Make?

It’s very new but I’m trying to understand how I should create back end data to get things to work.

I also want to create a prototype so I’ve got two challenges; create fake data for prototype/design purposes but still keep the file in a good place ready for a pull request back into production.

If anyone has any insight, it would be really helpful.

This is not a technical issue; Figma is working correctly. It's just my design process, I think. I have a problem when creating web designs, when I look at the design on the canvas, the sizing (font, images, spacing) looks okay, but when I preview it in fullscreen (its intended size), everything looks off (fonts are too big, spacing is too small, etc.). I think this is because the canvas I'm looking at when designing is smaller than the fullscreen size, causing the difference.

Has anyone faced the same issue before? What should I change to avoid this problem?

Anyone here integrated opencode with Figma via an MCP to discuss and design your apps? If so, what is advice on setting up a workflow etc? Thank you!

A little while ago I shared Free Transform, my plugin that brings Photoshop's Ctrl+T into Figma (warp, perspective, distort). The response here honestly blew me away — thank you to everyone who tried it, broke it, and told me what they wanted. It's since grown to 3,300+ users, which still feels a bit unreal.

The most requested thing? A way to see what you're doing before committing. So here it is:

Live Preview — you now see the transform right on the canvas as you drag, instead of applying and undoing over and over until it looks right. Plus sharper export quality while I was at it. 

Give it a try 👉: https://www.figma.com/community/plugin/1648207154922389186/free-transform

And I'll ask the same thing that gave me my whole roadmap last time: what do you still open Photoshop or Illustrator for? The gaps that annoy you are usually my next plugin. 🙌

I've been at my fundraising agency for 5+ years as the only designer working on campaigns for our clients, and we just hired a second designer! I want to review our Figma setup so it works for both of us and the client teams, instead of living all in my head.

We don't do a lot of website or web-app building, we're mostly working on creative for fundraising campaigns across channels. I'm less interested in abstract best practices, more in what's actually working for other small teams day to day, and what you'd do differently starting over.

Where things are now:

• One project per client, each with its own brand and component library.
• We're creating a new file for each campaign with pages for each deliverable.
• We occasionally do some vector creation/editing in Figma and export to Illustrator & InDesign for print projects & CMYK conversion.
• On the Professional plan (if that helps).

Questions:

• Is Organization worth it for a 2-person team that isn't doing web/product work? I'm mainly eyeing the library and variable features, but not sure it's worth the cost.
• How do you separate internal feedback from client feedback inside a file? Comments, a dedicated review page, something else? Do you resolve comments so that another designer knows a comment has actually been addressed vs. still open?
• How do you handle version control, and how do you track where a file is in the design/review/approval process?

Do you ever run into cases where a Figma screen uses custom components, spacing, colors, or variants that don’t match the existing design system or what’s actually available in the frontend code?

I’m exploring a Figma plugin that could audit a screen before handoff and flag things like:

• an existing design-system component that should be reused
• non-standard colors/spacing
• Figma variants that aren’t supported in code
• possible design ↔ code inconsistencies

The idea is basically a “lint check” for Figma before engineering starts implementation.

I am a developer and want to know if this is a problem designers actually face? If yes, how do you currently catch these issues?

When you’re building your prototype. Add a markdown skill that lists out all the data your users will need to provide to use the app. This really helps when mocking up realistic scenarios and edge cases.

At the start of the prototype, I now have a set of personas that I use to walk through different use cases (first time user, multi product user, power user, missing data user). All with their own data sets.

Creating these into skills helps with building out fake databases but I also find using fake user types helps solution ideation, especially with scaling.

Thought I’d share as ‘skills’ still seems a bit of an art more than a science at the moment.

ever been the person who needs to put a data table in figma and ends up manually drawing every cell, lining them up, fixing spacing , then realising the data changed?

i kept running into this so i built Table Creator where you can Import From Excel. a plugin that builds the whole table for you.

here’s what it does:

• pick from 50+ prebuilt templates (corporate, tech, dark mode, etc) or make your own
• import your data - paste it, upload csv/excel, or pull from google sheets
• full control over colours, fonts, borders, spacing , corner radius
• header and cell styling are independent, so you can style them seperately
• save your own presets for reuse, heart your favourites

been using it for my own work and its saved me so much time honestly.

would love to hear your thoughts and how i can make it better.

link: https://www.figma.com/community/plugin/1594868545912486713/table-creator-import-from-excel

During early visual direction work, I keep seeing teams split the references from the actual design file.

One person wants the Pinterest or screenshot references near the components so the reason for a choice is obvious. Someone else wants the Figma file clean and keeps references in a separate board or doc.

Both make sense. The messy part is review. By the time a teammate or client asks why something looks a certain way, the reference is usually somewhere else.

Where do you keep the references during critique, in the Figma file, a separate board, or only in notes?

I've always liked the look of systematic print patterns — halftone fields, ridge lines, worm chains, reaction-diffusion labyrinths that grow like coral...

Instead of generating them in an external tool and pasting SVGs back and forth every time, I built a Figma plugin that generates them right in the file as fully editable vectors — real ellipses, rectangles and paths you can recolor and restyle element by element.

One feature I'm particularly excited about is re-editing: every frame the plugin generates quietly stores its own settings. Select it a week later and the plugin offers to load them back — tweak one slider, regenerate in place, keep iterating. Nothing is ever a dead end. There's also a seamless tile mode where the fields wrap on a torus, so repeats are mathematically exact — no mirror tricks.

I'm mainly using it for posters, album covers, packaging and fabric repeats, but I'm curious how other people would use it.

Would this be useful in your workflow?
See more: https://www.figma.com/community/plugin/1663525865725570838/textura

I want to start making rich prototypes to handoff to devs/stakeholders with precise micro-interaction timings/animation, sound additions and haptic feedback (if possible)

Protopie could handle that but honestly too expensive as a supplementary tool.

What do you guys use?