Depth. Aligning design & code. Lil’ Pixel Icon.
Sponsor
Webflow Conf 2024
Join us this October for the conference that brings together the makers, creators, and visual developers behind the world’s greatest websites.
What’s New
Designing Depth
Rauno from Vercel wrote a fantastic article with over 20 visual examples of using depth for design, animation, and interaction.
Layers Portugal
On September 20th, the Portugal chapter of Friends of Figma organizes a free full-day hybrid conference for the community by the community. “Expect talks and workshops on the Future of Design, DesignOPS, Design Systems, Creativity and, as always, a lot of amazing Figma tips as tricks.” All talks will be streamed, but I wish I could attend the in-person event in Lisbon!
LGTM Design Conference
Speaking of design conferences, the GitHub Design team recently held its second internal design conference, LGTM. You can watch talks from last year in the YouTube playlist, but a couple of this year’s talks have already been published as well — “Who is the We in the How Might We” on building trust and “Async/Await” on close collaboration across non-overlapping time zones.
Yo! Podcast with Pablo Stanley
The Yo! Podcast by Rob Hope is one of my favorite shows. In this wrap-up of Season 3, Rob talks to Pablo Stanley: “Pablo Stanley is a designer, artist, and musician based in Mexico. We discuss the creative side of his childhood gang, the importance of having fun with your team, why he left the Roboto NFT community, monetizing his AI stock site, and the importance of details in all aspects of design.”
Can You Share the Figma Link
The team at Superside put together an album that “captures the rollercoaster of the creative process, laced with some questionable humor and turbocharged by AI.” Starting today, I’ll be attaching this song to every Figma link I send out.
Figma Slides
Skip slides
The last of the ten newly announced features — hide slides to skip them!
I tried Figma Slides. Here’s what I’m missing
After giving Slides a good try, Raquel Piqueras shares a few things she has been missing — a simple timer, access to sharing settings from the open presentation, slide-level components, and hotkeys to streamline the work.
Using Figma
Aligning design libraries with code
Ana Boyer on creating a component API — a process of defining how you will approach constructing and naming your components across all of your libraries and documentation that will be consumed by your design and engineering teams.
The significance of color scales
This is a topic near and dear to my heart. Ana discusses the benefits of using color scales — consistency, accessibility, and efficiency.
Create a magic light beam in Figma
Tyler created a short tutorial on making a realistic light beam using simple shapes, a blend mode, and a blur.
Shortcuts to manage your text fields
Miggi explains how to control the behavior of text fields with visual and keyboard shortcuts without touching the auto width/height or fixed size controls in the Design panel.
Styles or variables, which one goes where?
Luis shows where styles and variables can be used in the Figma UI.
Plugins
Lil’ Pixel Icon
The Lil’ tool for creating pixel-perfect icons in a 16×16 grid, all in vector format.
Style Setuper
A new version of the Style Setuper plugin that makes setting up text and color styles a breeze now creates text styles using type variables, so changing your font properties is very easy.
Variables & Styles List
A widget that makes all your local variables and styles visible. You can narrow down the list to a specific collection or type.