Variables. Hueplot. Figarc.
Sponsor
Get the Perfect Domain Name at Porkbun.com
Porkbun offers hundreds of domain extensions ranging from .com and .tech to .dev, .app, & more so you can create, share, and test designs for websites, mobile apps, and other digital products. Plus get freebies like SSL certificates, WHOIS privacy, URL forwarding, web hosting trials, and personalized support 365 days/year.
Release Notes
Check network settings
“Some Figma features require users to upload or retrieve content from our servers (e.g. publishing a library, adding media to comments), but customers might have strict firewall settings that block these actions. Searching for “Check network settings” in quick actions will open a network settings modal, which indicates whether any of these services are blocked. IT admins can update their firewall’s allowlist to restore access. This modal is also accessible via a visual bell if users run into errors trying to use features blocked by their firewall settings.”
Updates to the Figma for Jira App, now in GA
The new Figma for Jira app is now generally available, with a couple of new features — searching for linked Figma designs in Jira issues using Jira Query Language, and creating design automations in Jira to notify you of changes to designs, transition issue statuses, and easily add labels to issues with designs.
Design & Code
What is the view-only experience without Dev Mode?
I keep seeing complaints about the removal of code generation from the free view-only mode, and want to point out this section of the “Dev Mode is out of beta: what admins need to know” article. CSS, iOS, and Android codegen is still available but now is in the copy/paste menu when you right-click a layer and choose “Copy as code”. For an overview of the other collaboration features available on the free plan, see Use the right sidebar with view-only access help article.
CSS for UI Designers: Understanding Flexbox and Applying it to Figma’s Auto Layout
Christine Vallaure explains the basics of CSS Flexbox and how it translates to Figma’s Auto Layout. “Discover how to set up individual flex properties for items and explore the nesting capabilities of Flexbox. While Flexbox is great for component layout, CSS Grid offers more control for overall page layout. Find out how to use both in harmony for optimal design.”
UI elements are not so elementary
Erez Reznikov shows some examples of the divergence between how code and visual design tools treat interactive elements and components in general, then suggests an alternative to the handoff process. “Construct tools and processes for designers and developers that will make it much harder to not be on the same page. Suppose a design tool would be made out of real elements, with an already existing, verified structure, that is backed by code beneath it all. You mainly see web builders do it today, like Webflow and Framer. When you use an element like a checkbox in these apps, it’s a real, working checkbox.”
Variables
Using variables to change variants
Chad shows how to use variables to change a variant on a component instance in your designs.
Are icon wrappers still worth using?
Molly suggests it’s time to support multiple icon sizes with number variables.
Default modes for workspaces
“Using variables in your Figma libraries? Learn how to set a default mode for a library that applies to all of your teams and files within a workspace.”
My First Variable
The new video series from Luis Ouriach on variables. The first part introduces the basic concepts and terminology — variable types, collections, modes, and aliases. The second part is “The 3 levels of variable” where Luis explains the definitions of primitive, semantic, and component-level variables. The third part focuses on creating your first variables and using modes to manage theming and densities.
Made in Figma
Bot Detection illustration
James walks through his process of creating small animated illustrations for the new Clerk website.
Design Tools
deckd
A promising new app providing the presentation interface for Figma. Design your deck templates in Figma, instantly sync the template to deckd, and start building your presentations. Deckd lets you edit all text elements, present directly or share via link, and decide who can see what with access control.
Hueplot
Alexey Ardov built a new app to explain color spaces visually. Make sure to enable DCI-P3 in Gamuts to compare it with sRGB, and drag an indicator to transform spaces from one to another. A really powerful tool for understanding different models and spaces.
Resources
Figarc
Figarc is a design system for floor plans. You start by setting up a foundation with walls and load-bearing pillars, then add doors and windows from 100+ fixtures. After aligning early-stage structural elements like water pipes and electrical cords with wall layouts, you can drag-and-drop 150+ furniture pieces with component overrides to unlock a plethora of options. Love so much about this project!
VisionOS Isometric icons
Cool design explorations of isometric icons inspired by VisionOS.
Backstage
The Engineering behind Figma’s Vector Networks
Stumbled upon this old blog post from 2019 by Alex Harri, one of the engineers behind Figma’s Vector Networks. Fascinatingly deep dive! “This post can be thought of as an introduction to a really interesting problem space, and as a resource for people interested in making use of some aspects of Vector Networks for future applications. I hope it succeeds in providing value to both developers being introduced to new concepts and ideas, and to designers interested in learning more about the tool they know and love.”