Page dividers. Blocks. Tender offer.
Sponsor
Why use Zeplin instead of your design tool for handoff?
Your devs will do just about anything to avoid getting another link to a jumbled canvas with unclear pathing.
App Updates
Page dividers are here
I fully expected all big product announcements to be saved for Config, but we have an unexpected treat! Jokes aside, this is a very elegant solution based on how people already organize their files. Reminds me of how Twitter came up with retweets and the book The Best Interface is No Interface.
“When you name a page in Figma using only hyphens, en/em dashes, asterisks or spaces, that page will now automatically convert into a page divider.”
Change pages in bulk
That’s not all! Now, you can also select multiple pages by holding Shift to rename, delete, or move them in bulk.
Using Figma
From Figma to code with Locofy.ai
Meng To shows a website made entirely in Figma and exported to React with Locofy.ai, which I wrote about in issue #155. Responsive layout, breakpoints, pages, animations — everything just works. He gives a few tips on preparing your design for the seamless export to code.
Modular illustrations
Vijay is doing his magic with a modular illustration built from components.
Design Beyond Breakpoints
Christine Vallaure’s talk at last year’s SmashingConf on CSS Container Queries and how designers can tackle them using Figma. If videos are not your jam, see her article on Why UI designers should understand Flexbox and CSS Grid.
My First Variable: Typography variables
A new video in Luis Ouriach’s “My First Variable” series on the typography support within variables. He explains using string and number variables to set font weights, combining weights with styles such as italics, grouping text variables, aliasing font families, naming conventions, and more.
Prototype with variables: Build a configurable volume bar
“In this two part series, we’re using variables to build an advanced prototype of an interactive, configurable volume bar. Configurable prototypes are easily customized and adapted and allow us to edit and change interactions in less time. In this first video, we’re going to set up the foundation of our interaction.”
Plugins
Blocks
Blocks is a Figma plugin that features a library of components so you can create low-fidelity wireframes with your whole team.
Perspective Grid Generator
Cool new plugin for creating perspective grids. It lets you adjust the grid angle and customize both horizontal and vertical lines.
Backstage
Figma valued at $12.5 billion in tender offer backed by Fidelity, others
“Cloud-based designer platform Figma is closing a deal to allow its employees and early investors to sell their stake to new and existing investors at a valuation of $12.5 billion, the company said on Thursday.” Good news for the team. After the Adobe deal was canceled, I assumed they’d do a liquidity event for employees and early investors.
“Figma is widely considered as a candidate to go public after antitrust regulators in Europe and Britain in December blocked what would have been among the biggest acquisitions of a software startup. New investors including Fidelity, Franklin Venture Partners and existing ones such as Sequoia and a16z are expected to acquire stakes totaling about $600 million to $900 million in the secondary sale. Figma was last valued at $10 billion in a private funding round in 2021.”