AI design tools have a problem (that Figma's Code Layers might fix)
Making final UI is all about tinkering with multiple layouts and UX patterns until the best one wins.
This is so hard to do with AI design tools, where you have to one-shot sweeping changes across multiple sections & pages.
But imagine prompting AI in the infinite canvas section by section. That's what you can do with code layers in Figma Sites.
We made some cool stuff with it in the 3rd episode of UX Outpost 👇
AI tells us what to design, then beats us at our own game
Key Workflow
Take a design you already have or just make a blank rectangle in Figma Sites.
Press Make code from design in the top right bar.
Prompt to update the design or make new elements from scratch. (Be specific about numbers and levers you might change later because it will add them as properties!)
Duplicate the section again & prompt it in more different ways.
Grab the one you like the best, and bring it back into the page.
Repeat until you have a full design with siloed code layer elements you can manage and position pixel by pixel.
Nolan's Thoughts
It is frustrating to work with AI design tools right now. I feel like I'm constantly fighting for control, worrying that my prompts are inadequate instead of actually designing.
When I design, I try to work with the atomic design approach, where I build blocks that I can re-use in different ways to make a coherent, systemized experience.
I recently made a post about a component-first AI design approach, but inside of Lovable or Figma Make, it's just so slow. You have to wait for each generation, and the returns might not be what you had in mind.
With code layers in Figma Sites, you can now take atomic-level sections and prompt with AI in multiple ways on multiple sections at the same time because it's in the infinite canvas.
Imagine this approach in Figma Design. This is how we're all going to be designing really soon!
Andy's Thoughts
The ability to prompt different interactive elements in real-time feels like a significant shift in how we approach design.
I was particularly impressed by how Figma Make could predict and generate properties for animations, though I noticed some inconsistencies when certain props would appear. The infinite canvas approach seems like a huge advantage over tools like Bolt or Claude where you're more siloed.
I found myself thinking about practical applications like using variables to connect these code layers to other parts of a design system. The demo got me fired up about the possibilities, even though there were some technical limitations and bugs to work through.
Get emails like these in your inbox
No spam, ever. Unsubscribe anytime.
Rad Collab | 2024, All Rights Reserved |