Freshly baked goodies: FigPals for April Fun Week (extended until April 11); a button for collapsing layers — love that it excludes the layer tree of your selection; quality-of-life improvements to corner radius inputs and flyouts for effects, fills, and layout grids; reordering variables modes and collections; annotations in Design Mode; accessibility contrast in color picker; and finally, an eyedropper added to Dev Mode.

This one is a big ​“finally” for me! BRB, I have some library cleanup to do.

Annotations are now available in Design Mode with new color-coded categories. Love that categories are fully editable, so you can adjust them to your team’s workflow.

See if color contrast meets accessibility standards right within the color picker. I’m glad this is now built-in and the UI looks great (see an X thread from Billy Sweeney), but as a color nerd and creator of Accessible Palette, I wish Figma went a step further and supported APCA. I wrote about issues with the WCAG 2 back in 2021 (see the last section), and Arthur Objartel made a strong case for supporting it as well.

A few tweaks and improvements to the file browser create a more consistent experience.

“Figma is localizing for the Spanish market. This includes full product translation, culturally adapted user interfaces, and dedicated support for Spanish language users. Figma plans to expand product localization to additional languages throughout the year, as it continues to invest in its global community.” (Coincidently, I was in Spain when this was announced. Rest assured I didn’t touch Figma while vacationing with my family.)

Last Tuesday, Figma rolled out the new pricing, which was announced in December. The design seats price increased, while Dev Mode seats remained unchanged and all paid seats now include FigJam and Slides. Admins got upfront approval over seat upgrades.

“Figma now transforms common character combinations into smart symbols in all fonts. Now when you type the following characters – ©, ®, ™, ->, <-, vv, ^^, \[ \] – Figma will automatically transform them into smart symbols: ©️, ®️, ™️, →, ← , ↓, ↑, ▢. This will occur with every font, as long as you have the ​“Use smart quotes/​symbols” preference on. Also available in FigJam and Slides.”

Dann Petty has been one of the most vocal Figma critics lately. (See his previous post for some context, or go all the way back to moving drafts drama in the summer.) I don’t think corporations need help defending themselves, but in this case, I see the situation from a different angle and want to share some thoughts.

First, I built my first Framer website recently and thought it was a compelling alternative for designing websites. It often takes me longer to prototype a throw-away interaction in Figma than to do it straight in code (especially with AI!), so designing and animating the actual website instead of a mockup felt refreshing. I missed some of the more advanced features (no variables, really?), but I’m sure they are on the roadmap. In the end, it wasn’t the right tool for this project, but I agree with Dann that similar tools will be ​“owning the web design market”. That said, they have nothing to offer product designers.

Here is the part I disagree with: “(People are) mad at Figma because they lost focus on designers and got over bloated with useless features no one wanted or needed and started to focus on developers and their Config event.” Dann doesn’t specify which features he considers useless, but I assume it’s those related to larger design systems and developer handoff. Personally, I rarely feel restricted while working on visual design, but often hit the wall with a lack of CSS grids, inability to replicate the props.children behavior in components, still incomplete variables support, barebones design system analytics, Dev Mode, prototyping, etc. On my product team engineers outnumber designers 5 to 1, so a lot of our time and attention is spent on cross-team alignment. These features might be useless to freelancers and agencies, but worth their weight in gold to product teams.

Lastly, a note on Figma becoming ​“incredibly expensive.” First, they kept the same $15/​m price of the Professional plan since 2018. According to the CPI Inflation Calculator, $15 in 2018 had the same buying power as $19.31 today — pretty close to $20. Second, at least in the US, $20/​m or $192/​year is not much for a pro tool — some of my streaming and newspaper subscriptions cost more. Third, it now includes two more products! My team just upgraded our Figma account to the Organization plan and it was cheaper to wait for the new pricing as we no longer needed separate licenses for FigJam and Slides. This will not be true for everyone, but not all seats increased in price while getting some perks.

Figma shared new details about connected projects that will launch in the first half of 2025. They let two separate teams or organizations — like an agency and a client — collaborate on a shared project using billable seats from their plans without paying for extra seats. Pro users can connect up to 3 projects, Organization 6 and Enterprise 15. The plan of the team initiating a connected project determines features available to all users collaborating on the project. Resources like shared libraries and fonts can be enabled for everyone.

Nice built-in support for code blocks with syntax highlighting in Slides.

(Read without a paywall.) The New York Times reports: ​“Figma, a cloud-based design platform, has met with investment banks in recent weeks to discuss an initial public offering that could come as soon as this year, two people with knowledge of the matter said.”

Product Marketer Sarah Kelly and Designer Advocate Kaitie Chambers share all the recent launches and introduce a few brand-new features. The Figma team also gives hands-on demos on how to use the new features in your workflow immediately.

Plugins are now available in Figma Slides, and three dozen plugins have already been updated to support it.

“See when teammates and invited guests last visited your Figma files, helping you track engagement and keep projects moving forward.”

The Billing section in Admin settings is now organized into an Overview tab with a high-level summary of your plan and everything you’re paying for, as well as an Invoice tab with all your past payments. On the Enterprise plan, a new tab for billing groups enables admins to drill in and navigate to a specific billing group page.

Creators can now add structured tags to boost visibility and make it easier for you to find the right templates, UI kits, or design assets in Figma.

Carly Ayres asks the Figma community to weigh in on Andrej Karpathy’s ​“vibe coding.” ​“Perhaps the question isn’t whether vibe coding will replace traditional development—it won’t—but rather how it might expand who can build software and how we build it.”

When exporting a raster image (JPG, PNG, PDF), now you can choose an image resampling option. Image resampling helps maintain the quality of your exports by determining the color of each pixel. It’s useful when exporting images to different sizes or a vector design to a raster format.

The Detailed option (default) uses an image resampling method called ​“bicubic sampling.” This method looks at each pixel and uses a weighted average of at least four surrounding pixels from the original image for export. Best used when optimizing for detail in exports, such as high-quality images, vector art, and assets with gradients or drop shadows.

The Basic option uses an image resampling method known as ​“nearest neighbor sampling.” This method looks at pixels from the original image and finds the closest matching pixel to use for the export. Best used when optimizing for hard lines in assets or for assets that don’t need finer details, like icons, low-resolution images, and pixel art.

Miggi explains and shows the new export options in action.

SVG exports will now correctly render background blur and both angular and diamond gradients.

“You can now lock the aspect ratio of almost any object in Figma – including frames, shapes, images, videos, vectors, and text – so that the proportions of that object are respected as you scale the object or its parent container. This functionality replaces Constrain proportions, which only worked when you adjusted the width or height fields of an object in the properties panel.”

To see it in action, watch video explainers by Miggi and Christine Vallaure. Miggi shows how to temporarily unlock the aspect ratio by holding down the Ctrl key, while Christine points out the correct CSS syntax for implementation.

A new sidebar provides a large collection of diagramming shapes for engineers, along with quick access to recently used ones. Stroke color is now independent of fill color for shapes and sections, and connector labels are movable. Additionally, there is an updated color palette with more variety and consistency.

This obviously oversimplified attention-grabber made the rounds on design Twitter last week. Tools, processes, and skills are rapidly changing, but they complement each other. Instead of being line cooks focused on a single station, designers can now prepare an entire meal. However, if the ingredients are undercooked and the sauce is sloppy, that meal won’t be worth much.

Ideation, visual exploration, prototyping, and even building deserve the best tools for the job. Check out insightful takes on this from Noah Levin, Jordan Singer, Ridd, and Jess.

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.

Figma Community Forum got a big makeover in January. It’s a great place to ask questions or share your thoughts.

If you’ve been waiting for more details to start planning your trip to Config 2025, now is the time. Azra Daniels, Director of Events at Figma, gives a first look at what the team is building for the community on both sides of the Atlantic. The conference will kick off on May 6 at Config Commons near Moscone Center in San Francisco, where you can grab the badge and meet other attendees. To avoid long registration lines, partner hotels will offer multiple check-in locations. 50+ sessions will take place in multiple tracks on May 7 and 8. The Maker Space will feature a dedicated stage where community leaders showcase their latest work. Config will continue in London the following week for a one-day event with 10 sessions.

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.)

Fons Mans now uses Figma mostly to translate ideas onto the screen quickly, then switches to a tool that lets him build or create the final product or visual. Cameron Moll also follows this approach.

It works really well when the designer is involved in the implementation. Figma is a fantastic tool for quickly exploring different directions, but after reaching an alignment, it’s time to polish the final version of the product, not its image. I was frustrated by wasting time whenever I spent hours prototyping an elaborate but disposable interaction in Figma. Modern AI tools make this final iteration even more accessible to less technical folks. That said, in most organizations, designers still can’t touch code — either that will change, or the final polish will still be happening in Figma for quite some time.