Nice to see stunning gradients made from scratch. The Figma file is now available for download.

You can always rely on Vijay to come up with the most creative ways to achieve special effects.

Anima has been working on design-to-code tools since before the recent AI craze. A few months ago, they added support for shadcn/​ui components, which I tried last week on my current project designed with this library.

Unlike v0, they parse the Figma file and get a lot of details right. I was impressed with how accurately it selected shadcn/​ui components, even if layers weren’t explicitly named or instances were detached in the mockup. It becomes obvious that parsing a file is the right approach when different components look the same on the surface. For example, the trigger for opening a dropdown or date picker uses the same button, but they are different Figma components under the hood, and Anima chose their counterparts in code correctly.

Exporting custom colors and typography variables to a Tailwind config is also a nice touch. I ran into a few issues with excessive Tailwind styling and newer shadcn/​ui components like the Sidebar not being recognized, but overall, this clearly feels like the right direction.

Vercel shares best practices on importing your designs from Figma to v0 and working with shadcn/​ui. I was excited about this integration until I realized it simply exports the Figma frame as an image and passes it to v0’s AI vision. Information about Auto Layout, spacing, color tokens, and typography is not preserved from Figma but inferred from the image. That’s fine for rough prototypes, but there is a better way.

Dev Mode users can now see variables used in gradients. Binding variables to gradients was also added to the plugin API so plugin developers can offer variables support out-of-the-box.

Two new AI features — quickly search through top Community files to find assets you need and increase the resolution and clarity of your images in just one click in the editor.

The new Lovable and Builder​.io integration lets you turn Figma designs into full applications. Lovable is a full-stack AI software engineer and editing environment. It’s designed to let you quickly create and iterate on your projects so you can move from an idea to a real application, deployed live, without wrangling complex tools or environments. AI-Powered Figma to Code is Builder​.io​’s toolchain that leverages AI models to convert Figma designs into React, Vue, Svelte, Angular, HTML, etc code in real-time. It can even reuse your existing components in the output and use any styling library or system you need.

So, by using the integration, you can convert Figma mockups into code with Builder​.io and then open them in Lovable, where you can add new functionality or connect it to the real data from Supabase. Soon, you’ll be able to update your app in Lovable whenever designs change in Figma. AI will merge the design changes while keeping all your custom code intact. (Unrelated, this combo was most recommended in answers to this question about the best AI tool for turning designs into a website.)

My working file got really sluggish recently, and this plugin had the biggest impact on improving performance. The Downsize plugin by Alex Einarsson scans the document for images, then converts them to JPG, resizes, and compresses. It took a while to run on a large file, but memory utilization decreased by ~10%, and the file became noticeably faster to navigate.

It is worth noting that multiple tweets about poor Figma performance (see Oğuz and T. Costa) popped onto my timeline last week. Based on Figma’s replies, they’re looking into it, so a dozen large images might not be the only source of my problem.

Mal and Akbar discuss ways to bridge the gap between designers and developers.

Yep! Type foundry explains why text in a dark UI often looks better when it’s slightly lightened. That’s one of the reasons why choosing variable fonts for new projects became one of my non-negotiables.

Miggi shows three updates to frame presets in UI3: the first frame dropped onto a blank canvas will land at 0x0y coordinates; when clicking on the canvas to add a new frame, Figma will default to the size of the last-used frame; when using the frame tool, quick-add indicators will appear beside and between frames so you can quickly insert additional frames.

Figma will raise prices and change the billing experience next year, as explained by Tom Lowry. (My heart goes out to him for being the face of this change.) The cost of the Professional plan goes up by 33% from $15/​month or $144/​year to $20/​month or $192/​year. (Consider switching to the annual billing before the price goes up!) The seat on the Organization plan increased by 22% from $540 to $660 per year (the cost of the Dev Mode seat didn’t change), and on the Enterprise plan by 20% from $900 to $1,080.

To soften the blow, all paid seats now include FigJam and Slides. The Dev seat became available on the Professional plan for $15/​m or $144/​year (the cost of the Full seat before the price increase). Slides is now bundled with FigJam on the new Collab seat, available for $5/​month or $36/​year on the Professional plan and $60/​year on other plans.

The new admin experience finally provides an upfront control of how users get upgraded. Later next year, they plan to roll out Connected Projects announced at Config, so freelancers and agencies won’t need to pay twice for seats.

The official announcement and walkthrough of changes.

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.

v0 from Vercel is a ​“generative chat interface with in-depth knowledge on modern web technologies. It can provide technical guidance while building on the web, generate UI with client-side functionality, write and execute code in JavaScript and Python, build diagrams explaining complex programming topics, and more”. v0 supported sketches and screenshots as a starting point for generation for quite some time, but now paid users can also import designs from Figma.

Molly Hellmuth with a tip on using the ​“Ignore auto layout” feature to add a scrollbar to the menu, among other things. It’s one of my favorite features, making it easy to preserve Auto Layout while making designs more realistic and interesting.

A tutorial from James on creating beautiful background patterns and effects. I haven’t tried the vga blurrific.exe plugin he recommends, but it looks really cool.

David Hill walks layer-by-layer through his process of designing a sick illustration for the lil bro coffee from Terminal.

Justin Jay Wang experimented with different methods for generating random gradient images, including those used by OpenAI visual identity. He explains the difference between heightmaps, layered radials, and AI-generated gradients. Loved this part: ​“In early 2019, OpenAI’s home page displayed a vibrant, full-screen gradient. The implementation was simple: a tiny, 2×3 pixel image of six color stops, which produced a smooth gradient when scaled up by web browsers. It weighed just 85 bytes (about the size of a brief text snippet) and loaded virtually instantly.”

An overview of everything shipped this year. It’s a long list!