A preview of the design lint plugin for identifying and fixing issues like missing tokens or styles.
A new plugin from the Tokens Studio: “Already have your variables set up and want to bulk apply them to your work? You can swap styles with variables or apply variables that match raw number values to elements in any file with access to your variables collections!” See also the walkthrough video.
Interested in learning how to migrate from Styles to Variables? Join Luis Ouriach, Akbar Mizra, Jacob Miller from Figma, and Jack Minogue from Ford for a look at approaches you can use to lower the friction of your rollout of variables.
Ozan Öztaskiran shows how to create responsive grids in 5 simple steps.
❖ Creating Responsive Grids
— Ozan Öztaskiran (@ozanoz) July 31, 2023
A Step-by-Step Guide
Responsive grids can make your life a lot easier as a designer if you want your content to be flexible.
Here's how it's done in 5 simple steps ↓
🧵 pic.twitter.com/Z48ub7fOq3
Christine Vallaure reminds us of using Selection Colors for applying variables to multiple objects.
Tip: Quickly add #figma color variables. Don't select each element individually -make a bulk selection and jump to "Selection colors" at the end of your properties panel. Easy and efficient! This way, you ensure you don't miss any elements and can even out slight color imbalances pic.twitter.com/NZsHU9a16A
— Christine Vallaure (@moonlearning) July 31, 2023
An interesting challenge from Miguel Solorio — how to make nested icons in a component inherit color overrides when switching between outline and solid styles without having to outline the strokes? Two solutions that surfaced in comments are using a mask or a union.
👀🔎 Have been trying to figure out how to make nested icons in @figma components inherit color overrides when switching between outline and solid styles without having to outline the strokes. Does anyone know of any ✨ magic ✨ to make that happen? My research tells me no... pic.twitter.com/aamVgToJgQ
— Miguel Solorio (@miguelsolorio_) August 2, 2023
“Saving” and “liking” resources are now combined to make Community simpler to use. Your saved resources are available from your Community profile or the Resources dropdown in a Figma file.
You can now embed videos in FigJam. MP4 and MOV files are both supported.
The number of installs or downloads used to be the only metric in the Community, but over time it was replaced with how many times a resource was used. Now you can also rate and review Community resources. It’ll be interesting to see which of the most used resources are also the most loved ones.
That’s pretty cool, especially if your team has multiple products with distinct color palettes! “Introducing custom color palettes in FigJam: you can now create custom color palettes for your team, so your files can match your team’s own aesthetic or company branding (Organization and Enterprise plans only).”
“On the Enterprise plan, workspace admins can now brand the workspaces they manage to reflect their group by adding custom icons to workspaces. Organization admins can do this for any workspace in the organization as well.”
So excited about this release! I spent a good chunk of my Config talk discussing workarounds for using wide gamut colors in Figma, and this update addresses them all. See this thread by Qi Linzhi on the engineering challenges of implementing support for Display P3.
The next thing I hope for is a more precise way to select colors. Figma relies on hex values in the UI, but they’re supposed to be limited to sRGB and aren’t representative of what you’ll see in the browser. The Dev Mode uses the correct color(display-p3 R G B)
syntax as an output, but that doesn’t help much with input. Besides that, I’d like to see when the color is outside of the sRGB range and what is its closest fallback. OkLCH isn’t the easiest color space to use, but OkLCH picker gets that part right.
Ridd shares a free annotation components library to help designers communicate more effectively and nail down the handoff process. Comes with a video lesson on organizing Figma files using the helpers library.
…and one more list, but for advanced prototyping!
At Smashing Meets Figma event, Christine Vallaure showed how to add real data to your Figma designs, and various ways to include Google Sheets and API data via Kernel.
Miggi on using sections in Figma for prototypes and how to preserve the state of a given flow.
Designer Advocate Mallory mapped out a helpful list of resources like YouTube videos, playgrounds, community files, plugins, and articles to get started with Variables.
Molly shares her 3 favorite tips from the Config talk “Designer and developer workflows unlocked using Dev Mode” — using “Compare changes” (my favorite as well, and the first thing I showed my team!), testing components in the Playground, and switching between the design and Dev Mode by pressing the Shift‑D shortcut.
💡 Start using Figma's new dev mode with these 3 tips!
— Molly Hellmuth (@molly_hellmuth) July 28, 2023
Config's deep dive on dev mode with @Avantika789, @laurenbandres, @jennylea_, and Jake Albaugh is CHALK FULL of amazing tips!
Keep reading for my favorite 3.. pic.twitter.com/xf8dM6nYfb
“In this livestream, Jake, Lauren, and Emil dive into Dev Mode, the newest space in Figma built for developers.”
Carly Ayres from Figma sat down with the people working across design systems tooling both inside and outside Figma to understand what the rise of tokens and features like variables mean for the future of design systems.