Fixed panels. Designing UI3. Sketch & AI.
Sponsor
pdf.to.design – Import PDF into editable Figma designs
Convert any PDF into Figma designs, either as fully editable layers, or as pixel-perfect images. Extract images and text from your PDFs to get them directly in Figma, collaborate with your team, use them as templates for new designs… And much more! Plus, all PDF files are kept private as they’re processed locally!
Release Notes
Release Notes 2024: September Edition
Kaitie Chambers and Miggi kicked off the first episode of monthly Release Notes, where they dropped new features and recapped everything shipped in September. Readers of this newsletter will be already familiar with most of the changes, but there are some new things worth covering.
UI3 rolls out for everyone on October 10th. The biggest change in the final version is the return of fixed panels — Figma listened to the feedback from the design community and closed the gaps. The panels still float when the Minimize UI (Shift-\) mode is turned on. Other changes include the always visible Auto Layout pixel values along the resize modes, the layer header showing 3 reorganized actions by default and one more when the panel is wider on larger screens, and showing the component library info in the component properties panel. It’s now even easier to set the Auto Layout object’s width and height to Fill Container or Hug Contents via the quick actions menu (Cmd-K) or a custom macOS shortcut.
After research or brainstorming sessions, FigJam stickies can now be sorted by color, author, stamp count, or stamp type in addition to the previously announced FigJam AI. Figma Slides now supports custom slide deck templates, which can even be published in the community. Slides are now viewable on your mobile device, so you can view and join a presentation from anywhere.
Duplicate and rotate
Joey Banks shows one of the newly announced features. When objects are duplicated, rotated, and then duplicated again, Figma will continue that rotation with subsequent copies of your object.
New device frames
Figma added iPhone 16 (including Pro, Pro Max, and Plus), Apple Watch Series 10 (42mm and 46mm), and Android (Compact, Medium, Expanded) to the Frames menu. If you need vector iPhone 16 device frames for the prototyping, Keeyen published the community file with different models and colors.
One size thumbnail for any file type
In the past, the file browser and the community files required different thumbnail aspect ratios. Now, it’s standardized at 16:9 across Figma files, FigJam, and Figma Slides.
What’s New
Figma on Figma: Our approach to designing UI3
Jenny Xie interviewed Marcin Wichary, Joel Miller, Ryhan Hassan, and KC Oh about the new Figma UI: “Our goal with UI3 is to keep designers in the flow by minimizing distractions and placing their work center stage. With that north star in mind, our team worked for over two years, iterating on myriad approaches — even reversing some core design decisions, like the floating navigation and properties panels, after launch.”
Sketch and AI
Co-founders of Sketch shared their stance on AI: “We’re not ready to make a move with AI just yet — for reasons that will become clear. However, we wanted to share the principles that will guide our approach when that time comes.”
I respect their position on using AI to aid designers but never to create designs. To me, Make Design was the least exciting AI feature announced at Config, and I’m glad it was reframed as the First Draft during the relaunch a few weeks ago. Their focus on privacy and being local-first is a smart way to differentiate from Figma and offer something unique, even if that required burying Sketch Cloud first.
Interview With Björn Ottosson, Creator Of The Oklab Color Space
Smashing Magazine interviewed Björn Ottosson, the Swedish engineer who created Oklab color space, about developing an effective model with good hue uniformity that handles lightness and saturation well, and how it spread across the ecosystem.
One of the most common problems that Oklch solves: “One problem with sRGB is that in a gradient between blue and white, it becomes a bit purple in the middle of the transition. That’s because sRGB really isn’t created to mimic how the eye sees colors; rather, it is based on how CRT monitors work. That means it works with certain frequencies of red, green, and blue, and also the non-linear coding called gamma. It’s a miracle it works as well as it does, but it’s not connected to color perception.”
Tools for the Future: Your best semester with Notion, Arc and Figma
“Notion, Arc and Figma are teaming up to help you have your best semester yet. Join us for a special Back-to-School webinar featuring an exclusive panel with all 3 co-founder/CEOs (Dylan Field, Figma; Ivan Zhao, Notion; Josh Miller, The Browser Company) reflecting on their student days, followed by demos from fellow students showing how they set up these tools to organize their busy lives (and tame the chaos).”
Using Figma
How to Speed Up Prototyping by 50% with Figma Sections
Mizko explains how to use Sections when prototyping in Figma: “When presenting your final output with Sections, Figma remembers the user’s last viewed frame. This ensures that when the user returns, it will show the previously viewed frame first. This creates a more comprehensible transition of your prototype.”
In the file: Design Systems and Accessibility
“Join Luis from Figma and Daniel Henderson-Ede to talk all things accessibility with components, variables, and design at scale. Daniel is an accessibility expert and has contributed to the CVS accessibility kit, now used by companies, and has inspired new kits from GitHub, to document how components can be used and handed off to development teams.”
Plugins
Framer/Figma Sync
Yann-Edern Gillet from Linear built a plugin for syncing color and text styles from Figma to Framer.
Tailwind Sync
Tailwind Sync is a free plugin for Figma that synchronizes variables to Tailwind code, enhancing the design-to-dev handoff with speed, consistency, and scalability.