A new plugin from Meng To turns Figma designs into production-level code with the power of Claude AI and GPT-4o. I mentioned it in the last newsletter, and it looks very promising so far. The plugin is free, but you’ll need to bring your own API keys.

Watch the video where Meng explains his Figma to SwiftUI code workflow.

AI is a big help in developing software, but this plugin takes it to another level: ​“Artifig is an AI-powered Figma plugin that empowers anyone to build their own Figma plugins using just natural language. No coding needed — simply describe what you want, and watch as your idea transforms into a fully functional, real-time plugin.” See examples in a thread from one of the authors.

“An AI assistant that does the boring stuff for you. MATE supports you in your small boring tasks, allowing you to focus on the not boring things. Ask it to rearrange elements, create a color palette, change the stroke for hundreds of items, apply random opacity to selected items, rename variables, and much more.” Watch the demo.

If you’re curious about the new wave of AI-based development tools, I found this review of Cursor quite insightful: ​“A few months into using Cursor as my daily driver for both personal and work projects, I have some observations to share about whether this is a ​“need-to-have” tool or just a passing fad, as well as strategies to get the most benefit quickly which may help you if you’d like to trial it. Some of you may have tried Cursor and found it underwhelming, and maybe some of these suggestions might inspire you to give it another try.”

Unblocked is a new image editing plugin powered by AI for generating images and vector graphics, erasing objects and backgrounds, adding generative fills, vectorizing images, and turning vectors into 3D renders.

Paint any object or person in an image to remove it completely.

“After months of iterative development, including a closed beta and continuous refinement using our eval plugin, we were ready for a broader launch. Looking back, shipping this work was guided by four key principles: 1) AI for existing workflows: We applied AI to streamline tasks that users already perform, like file browsing and copying frames into their current file. 2) Rapid iteration: We continuously shipped updates to our staging environment, using insights from our internal beta to refine features. 3) Systematic quality checks: We developed custom evaluation tools to monitor and improve search result accuracy. 4) Cross-disciplinary teamwork: Our success stemmed from close cooperation across product, content, engineering, and research.”

A good demo of all Figma AI features by Tair from a few months ago.

Misha Frolov provides an overview of how the new AI tools change the workflow.

Co-founders of Sketch shared their stance on AI: ​“We’re not ready to make a move with AI just yet — for reasons that will become clear. However, we wanted to share the principles that will guide our approach when that time comes.”

I respect their position on using AI to aid designers but never to create designs. To me, Make Design was the least exciting AI feature announced at Config, and I’m glad it was reframed as the First Draft during the relaunch a few weeks ago. Their focus on privacy and being local-first is a smart way to differentiate from Figma and offer something unique, even if that required burying Sketch Cloud first.

The AI feature Make Designs is back under a new name, First Draft, which I greatly prefer as it sets more accurate expectations. (Curiously, that was the original internal project name.) ​“We’re also introducing some key updates, like letting you choose from one of four libraries depending on your needs — whether it’s a wireframing library to help you sketch out less opinionated, lo-fi primitives, or higher-fidelity libraries to provide more visual expressions or patterns to explore.”

I believe that wasn’t previously shared: ​“Our vision is for First Draft to extend beyond our current libraries and allow organizations to incorporate their own custom libraries. In the future, teams will be able to draft ideas using their company’s unique design language without having to sift through hundreds of components by hand.”

Ugic is a plugin for generating multi-language UI drafts from your component library. It can be trained on your internal components, which is key — more details in the plugin introduction.

“Dora AI plugin helps turn your website ideas into fully editable Figma designs, perfect for web designers seeking inspiration and efficiency.”

Ridd on two big issues and two opportunities of designing with AI: ​“If I’m in my design tool it’s because something is in my brain (even if it’s just a simple sketch). That’s why I don’t buy the so-called ​“blank canvas problem” as a real pain point for professional designers. Pointing AI at this ​“problem” is really a way to expand the user base by lowering the bar for non-designers to participate.”

Kate Moran from Nielsen Norman Group demonstrates how to get better results from generative AI chatbots by writing ​“CAREful” prompts. Use the acronym CARE (context, ask, rules, and examples) to remember what information to give AI tools to achieve your desired results: include context, what you’re asking the system to do, rules for how to do it, and examples of what you want.

In-person attendees of Config 2024 received Issue 2 of The Prompt, a print magazine by Figma’s Story Studio and Brand Studio. A digital version is now available on the blog. ​“Featuring leaders working across design, engineering, product development, and the built environment, this collection of essays and interviews takes on questions about how AI might shape the way we create.”

A 7‑minute tutorial from Miggi on using the new Suggest Auto Layout and the AI features ​“Rewrite this,” ​“Replace content,” and ​“Rename layers.” 

Coming soon: ​“An AI assistant that does the boring stuff for you. MATE supports you in your small boring tasks, allowing you to focus on the not boring things. Ask it to rearrange elements, create a color palette, change the stroke for hundreds of items, apply random opacity to selected items, rename variables, and much more.”

A retrospective on an issue with Make Designs from Noah Levin, a VP of Design at Figma. First, a reminder on how the feature works: “[…] Make Designs feature employs three parts: a model, some context, and a prompt. This feature currently uses a collection of off-the-shelf models like OpenAI’s GPT-4o and Amazon’s Titan model—the same generally available models that anyone can use—and we have not done any additional training or fine-tuning. To give the model enough freedom to compose designs from a wide variety of domains, we commissioned two extensive design systems (one for mobile and one for desktop) with hundreds of components, as well as examples of different ways these components can be assembled to guide the output.”

What went wrong: ​“We carefully reviewed the underlying design systems throughout the course of development and during a private beta. But in the week leading up to Config, new components and example screens were added that we simply didn’t vet carefully enough. A few of those assets were similar to aspects of real world applications, and appeared in the output of the feature with certain prompts.”

Artiom Dashinsky asked a lawyer to check how Figma AI affects his work’s copyright. The good part: ​“You own the copyright for your work. You also own the copyright for the work Figma generates for you with AI.” The bad part: ​“Let’s say you create a mood board with screenshots of others’ designs. You don’t own the copyright for these designs, but now you’ve allowed Figma to train their AI on it. Now you’ve violated the copyright of the original owner.”