Luis Ouriach built a plugin for copying or exporting your Figma variables into CSS variables format.

A new plugin by Vijay Verma to quickly create animated smart components that are used most of the time, like rotate, zoom, slide, etc. It generates a set of components based on the selected animation preset.

A creative workaround to turn text underline into color highlight with no hacks.

Kinda wild how big of a deal last week’s Aspect Ratio release has become. While it’s one of the ​“finally!” releases, it’s also a good reminder that many features considered essential by product teams might actually wait quite a while. The Technology Brothers podcast covered the design community’s reaction and followed up with a discussion about Figma’s position in the market.

Chad from Figma explains how Library Analytics in Figma Organization and Enterprise enables you to gain insights into library usage trends and drill into component, style, and variable usage.

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

Org and Enterprise customers can now find styles and variables data in their analytics reporting within Figma. This is in addition to the existing component data for a given library. Library Analytics API is out of beta and includes styles and variables data as well, but it’s only available to Enterprise customers.

Miggi explains and shows the new export options in action.

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.

“The Handoff Figma plugin makes it easy to extract tokens from your components. Use it to annotate your design system, marking components that are ready to be used. Pick which attributes should be extracted from each component layer. Preview foundational and component design tokens in CSS and configure how they are named.”

A new plugin for variable management is currently in free beta. ​“Effortlessly visualize, organize, and optimize your variables and nodes with various features designed to supercharge your workflow.” See the in-depth feature list by the author.

Miggi shows a wildly creative application of boolean groups to vector networks.

Continuing with surprising discoveries, Ridd noticed that interactive Figma prototypes could be embedded on Twitter/​X. In his own words: ​“If I’m looking for work on here… I’m going to have a pre-assembled reply tweet in Typefully that is a Figma embed of my best designs.”

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.

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

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.