Export quality. Versioning. Zigma.
Sponsor
Sync Figma to Webflow
With the Figma to Webflow App, you can now do more than just import your Figma components and variables — you can also sync changes from Figma into Webflow. That means you can now send your styling, layouts, colors, text, and images to Webflow and transfer them seamlessly.
Release Notes
PDF & JPEG export quality selector
“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.”
What’s New
The Fallacy of Federated Design Systems
Nathan Curtis: “In 2015, I established three models of forming teams for scaling design systems: solitary, central, and federated. The article progressed through each, scoffing at solitary, considering central, and favoring federated based on the section’s positioning and proportional length. […] In this article, I’ll dig into how federated is not a choice, it’s a facet. In practice, it’s never pursued first and never without central investment. In most cases, it’s optional and its outcomes can be so expensive and frustrating that it’s not worth it. Even worse, positioning federated as a primary objective anchors so many stakeholder myths to unwind that it damages system potential and even threatens its existence.”
Cool Thing
Show Them
“Show Them” is a new course on landing page optimization by Rob Hope. He hosts one of my favorite design podcasts and curates an inspirational collection of single-page websites at One Page Love. Rob spent years analyzing landing pages, so when he shares knowledge, I’m listening! To see what his content is like, check out the bonus video on Social Proof.
The course is launching on November 19th and offers a generous 70% discount until September 18th, which I immediately took advantage of. (Not affiliated, just love Rob’s work.)
Using Figma
Some loose thoughts on versioning in Figma
I love when Luis gets down to the nitty-gritty of the mundane daily challenges: “If my team needs to ship a feature that uses version 1, and your team needs to support version 2 because you’re releasing much further in the future, how do we manage that with a single component in a single library? As soon as we update the component to version 2 in our library and hit the publish button, every single designer is grandfathered into the newest version. This should be sending alarm bells to us all! We need the ability to maintain two separate versions of the same component, but unfortunately this isn’t possible within Figma yet. As a result, we need to think laterally to figure out a solution for all.”
He makes so many good points: “Centrally though, I believe we should strive for a world where design files are throwaway deliverables, versus an ongoing “forever file” that’s constantly updated.”
Figma Slides
Office hours: Principles of effective communication
In this webinar, Designer Advocates Corey Lee and Hugo Raymond will guide you through communicating effectively through story-driven presentations and share techniques to up-level your slide designs to make your presentations and decks more compelling. “Good design tells a compelling story. How you convey that story can significantly impact its resonance with your audience.“
Resources
iOS 18 and iPadOS 18
Apple updated their iOS 18 UI kit to include iPhone 16 Pro bezels (in all colors), updated templates to match new display dimensions, and several other bug fixes and improvements.
Shu Ha Ri
Shu Ha Ri is a robust design system meticulously crafted for Figma, offering many essential features and a generous free version. It revolves around modularity and empowers designers to efficiently create diverse instances with a single master component.
Charcoal Icons 2.0
A new library of 514 modern handcrafted icons is available in two visual styles.
Plugins
Displace
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.”
Zigma
Zigma connects your design system to the production code, directly syncing design variables from Figma into your GitHub projects. Made by the NextUI team.
Foundation
The Foundation generates Figma spacing, color, and typography variables based on Tailwind CSS’s utilities, ensuring consistency across your design and code.
Syntaxer
Syntaxer adds syntax highlighting to your code samples in Figma. It preserves your preferences and supports 175 languages and 28 themes.
Quick Tracing
Quick Tracing easily traces and converts images into vector shapes directly within Figma.