I shared the teaser in issue #132, but last week Builder​.io introduced Visual Copilot, ​“a completely reimagined version of the Builder Figma-to-code plugin that will save developers 50–80% of the time they spend turning Figma designs into clean code.” The major difference between Visual Copilot and previous design-to-code tools is a specialized AI model that was trained to solve this problem. The features include one-click conversion, automatic responsiveness, extensive framework and library support, customizable code structures, and easy integration with the existing codebase.

One of the most exciting parts of this announcement is still in private beta and targeted at teams with well-maintained design systems. This feature in Visual Copilot uses AI to map reusable components in your Figma file to those in your code repository and generates code using your existing components when you have them. This could be genuinely useful to get the first rough version ready in no time.

I’m still waiting for access to GPT‑4 Vision, but examples like this make me so excited about possible use cases! Imagine using LLM for a heuristic evaluation or pairing design and sketching sessions.

Alright, so in the last issue, I wrote that ​“plugins for code generation in Dev Mode using GPT‑4 might provide an even better result.” It didn’t take long for a better example! Ben shows a new feature in Sidekick AI (using GPT‑4) for dropping a link to a frame in a Figma file to improve the code generation and even fix visual bugs. This looks freaking amazing.

You can now opt out of beta AI features, so your data will not be sent to Figma’s third-party AI vendor. ​“Figma’s agreement with OpenAI provides that data is not to be used for model training. Data inputted into AI features is sent to OpenAI for processing and generating AI output. Data is temporarily retained in OpenAI’s environment to provide the services, however it is not used for model training.”

This result is based on an exported PNG, so plugins for code generation in Dev Mode using GPT‑4 might provide an even better result.

Dylan Field, founder and CEO of Figma, looks at the relationship between designers, developers, and AI, in conversation with a16z’s David George. In the process, he also demoes Jambot, their new AI widget for FigJam. Love this quote from Dylan: ​“It [AI] will lower the floor for who’s able to participate in the design process, but also raise the ceiling of what you can actually do.”

Miggi causes the ​“figception” by using Jambot to come up with ideas for making Figma content. Quite amazing to see how it can be used as a tool for thought (or even programming, FWIW).

Jambot is a free widget from Figma to interact with ChatGPT right in FigJam. Use it to create visual mindmaps, take a multi-threaded approach to brainstorming, or generate ideas with teammates and ChatGPT on the same canvas. Quite amazing that it was born during last month’s Maker Week and is already live!

Amber Bravo sat down with Jambot engineers and a designer to learn what inspired them to make the widget, and why they’re so excited to see ChatGPT go multiplayer. As a power user of Logseq, I loved this bit from Daniel Mejia on where the inspiration came from: ​“I’ve been a heavy user of these tools called Networked Thought — especially Roam Research and Logseq — which basically allow you to create pages that link between each other, so you can connect, organize, and trace ideas. More recently, I also found this tool called Albus, which adds a visual feel to interacting with AI, and so I thought there should be a way to connect these concepts to create a potentially useful alternative to ChatGPT.”

Use Stable Diffusion to create unique AI images for your designs without ever leaving Figma with this text-to-image plugin. Won the ​“3rd Product of the Day” at ProductHunt on August 1st.

John Maeda shares takeaways from his Design in Tech Report, thoughts on designing with artificial intelligence, and why we should embrace uphill thinking in a world optimized for shortcuts. See also the livestream ​“Diving deeper: Designing with AI in the future”.

The first-ever demo of a new plugin by Diagram. Can’t wait for it to become a part of the editor!

The first segment of the opening talk of the second day, with Noah Levin and Diagram team discussing how AI will shape our future and work. Continue by watching Generative AI and Creative Arms Race by Ovetta Patrice Sampson from Google, AI and empowering creative careers by Scott Belsky and Brooke Hopper from Adobe, and wrap up with The crescendo of AI in our collective future by Kanjun Qiu and Reid Hoffman.

Noah Levin, VP of Design, unveils Figma’s vision for AI and shares that Figma has acquired Diagram. (It’s fun to look back at all Jordan’s experiments I shared in this newsletter, starting from 2020.) ​“In short, AI can help us do more — across every part of the product development process — faster. It’s not a feature, but a core capability; more than a product, it’s a platform that can up-level our work to the plane of problem solving — arguably the core pursuit of our craft, and the reason many of us got into design and product building in the first place.”

“Hippo is a plugin to create stunning vector illustrations and web assets right in Figma, thanks to AI. It’s made to be easy to use, with 22 handpicked styles tailored for the web – no prompt engineering required. It can also vectorize or edit any image with AI.”

This new AI assistant for Figma that helps you write effective UX copy just won the Product of the Day on Product Hunt last week. It’s focused specifically on UX writing best practices and provides copy suggestions inspired by world-class products in your industry, tailored to your target users, and product voice and tone.

Amelia Wattenberger wrote an insightful essay discussing a few reasons chatbots are not the future of interfaces and how adding controls, information, and affordances can make them more usable.

Tutorial Tim shows how to use the AI plugin Wireframe Designer.

Silvia Bormüller interviews Chris Lüders about his upcoming ​“The Power of AI in Design Systems” workshop, where they discuss how AI can help with the design systems documentation, how tokens help in daily work, and the steps and prompts for generating design tokens for Tokens Studio with ChatGPT.

Punit Chawla showcases a few new AI plugins — Figaro, FontExploreAI, Aidentic, Cube GPT, QoQo​.AI, AI Designer, AI Color Palette Generator, and Diagram. While many of them still feel like proof of concept rather than a daily tool, it’s really interesting to see the direction design tools are taking.