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.

Meng To is working on a free plugin (requiring API keys) for turning designs into code using Claude.

“SVG Pattern Builder allows you to create, customize, and download unique animated SVG patterns for your web and design projects. Great for Figma, Framer, Webflow and video projects.” Made by Meng To from Design Code with a lot of help from Claude AI.

A 2‑hour course by Meng To on building a real website from a Figma template using Codux. ​“You’ll master responsive design, collaborate with developers on a real React project, export CSS from Figma using Locofy, set up breakpoints with media queries, add CSS animations, improve SEO, create multiple pages with React Router, and publish your site. By following best practices, you’ll bridge design and development, improve your web design skills.” 

Meng To shows a website made entirely in Figma and exported to React with Loco​fy​.ai, which I wrote about in issue #155. Responsive layout, breakpoints, pages, animations — everything just works. He gives a few tips on preparing your design for the seamless export to code.

New plugin from Meng To: ​“AI Text Generator is a super handy Figma plug-in made for designers who want to rewrite their text in a couple of clicks. It uses OpenAI GPT‑4 to give you smart, creative text suggestions—think names, titles, or even Lorem Ipsum dummy text—right where you need them. It automatically detects the selected text’s length and generates the perfect amount of words for your alternatives. You can also add custom prompts, which is useful for more control, generate any type of text, in different languages and amount of words.”

This Figma template that Meng To prepared for his new free Framer course is nuts. It’s a beautiful work and an excellent resource for playing with Framer’s Figma plugin.

A new design system from Meng To with hundreds of customizable Figma and Framer components and templates. Looks incredible, and the kit is meticulously organized with variables, variants, and adaptive layouts. See also his recent livestream with a discussion around key challenges while building the design system, the experience of using Figma variables and components, and tips for transitioning from Figma to Framer.

The new plugin by Meng To uses AI to upscale up to 8X the original resolution. Perfect for a variety of images including avatars, background images, Midjourney renders, and marketing images. (Interesting that the author heavily relied on ChatGPT 4 to build it.)

Meng To published a set of gorgeous handcrafted 8K wallpapers generated from 3D.

A high-quality free tutorial from Design+Code: ​“Design a Web app design inspired by Discord and Slack in the Figma design tool.”

When you don’t use an Auto Layout, a Drop Shadow with blur set to zero may be a nice alternative.

Good advice on when to use a fill opacity vs. layer opacity.

Lots to learn from the founder of Design+Code.