The desktop app on macOS now sports a refreshed app icon.
Syntaxer adds syntax highlighting to your code samples in Figma. It preserves your preferences and supports 175 languages and 28 themes.
Quick Tracing easily traces and converts images into vector shapes directly within Figma.
Zigma connects your design system to the production code, directly syncing design variables from Figma into your GitHub projects. Made by the NextUI team.
The Foundation generates Figma spacing, color, and typography variables based on Tailwind CSS’s utilities, ensuring consistency across your design and code.
I shared a sneak peek at this plugin in issue \#179, but now it’s finally out! “Displace brings powerful displacement effects to Figma. Easily create stunning reeded glass, noise, and glitch effects with real-time adjustments. Perfect for photos, typography, and beyond.”
“We’ve added a new export quality setting to give you more control over the file size and quality of images when exporting frames and images from Figma as JPEGs or PDFs. A new quality dropdown in Advanced export settings allows you to choose from High, Medium, or Low quality when exporting as a JPEG or PDF. Low quality will compress your images the most, resulting in the smallest file size, and High quality won’t compress images at all. If you do not select a quality setting upon export, there will be no change to how your files are exported; Figma will follow existing default settings (Medium quality for PDFs and High quality for JPEGs). Also available in FigJam.”
A collection of fun interactions made by Nitish Khagwal.
In this clip of the Sneak Peek episode, Dion Chooi shows how LottieFiles organizes and uses components in Figma.
Molly recommends organizing components with sections to provide a hierarchy in the Assets panel and allow viewing components with a specific background color. Pro tip: set a background to a “danger” color for deprecated components.
Speaking of new typefaces, I’ve been enjoying a highly versatile Innovator Grotesk lately. Unlike some of the traditional typefaces from the print era, this one is made with UI design in mind — its well-balanced vertical metrics make it a breeze to center text vertically inside elements or next to icons. It works well as a drop-in replacement for Inter or San Francisco, and I like a slightly wider width and less ubiquitous look. Highly recommend checking out its beautiful specimens and a simple license.
In the first article in the series on Figma’s brand evolution, editor Jenny Xie takes us behind the scenes of the new custom typeface, Figma Sans, designed by Swiss and American type foundry Grilli Type. Don’t miss the Figma Sans page on the foundry’s website.
“Org admins on Organization and Enterprise plans can now use Figma’s pre-integrated Google SSO app to configure SAML SSO for their org. Customers on the Enterprise plan can also use the pre-integrated app to enable SCIM provisioning.”
Figma just added 450 new Google Fonts to the app. Select “Google Fonts (8÷24 update)” from the font picker dropdown to access them.
“We’ve improved the experience for moving files. Now you can bulk move a group of files and find the right destination more easily.”
Constraints and a blend mode now display inline when toggled on, or the default is changed.
Mike Bespalov is cooking something dope. The glass effect is very cool, but I love the displacement effect applied to the text even more. The plugin is not out yet, but it’s coming soon — can’t wait to try it out!
I’ve always wanted a quick way to do these effects in @figma, so I made a plugin for it. Coming soon pic.twitter.com/9y09vmismq
— Mike Bespalov (@bbssppllvv) August 22, 2024
A Chrome extension that converts any page or a section of a page into React code or an editable Figma design.
New plugin for Vijay Verma for creating a beautiful stippling effect.
Figma Developer Advocate Jake Albaugh joins a livestream on the Visual Studio Code channel to talk about Figma for VS Code extension, allowing developers to easily access and inspect designs from VS Code.