Articles

A detailed guide from the creator of Untitled UI: ​“Create responsive data tables in Figma with our ultimate guide and free Figma file. Learn Auto Layout best practices, how to create visual hierarchy, and how to create flexible and responsive tables the right way.”

Christine Vallaure doesn’t like to rely on plugins too much, but in this article, she shares ​“some little helpers that I wouldn’t want to do without.” Some are time-tested tools, but others were completely new to me.

“Inspired by the Figma design team’s principles and methods for running design crits, a core group of Figma engineers, led by Ojan Vafai, set out to introduce a process somewhere in between a design crit and a technical review. This was the genesis of Figma’s engineering critiques, dedicated time for the engineering team to brainstorm novel approaches to technical problems, get feedback on existing work, and unblock each other. Today, engineering crits are a core part of our workflow, but it didn’t start out that way.”

This technical guide looks into tools and workflows for building a single design system to support multiple brands, platforms, or products. Lots of great tips for anyone involved in building an advanced design system for white-label products with full control over colors, typography, and visual styles.

Joey Banks with the deepest dive on the multi-edit: ​“The team solved and shipped a feature — actually, kind of a whole new way of working within the canvas — to help address a problem I didn’t even know I had.”

Vice President of Product Sho Kuwamoto and Product Designer Nikolas Klein walk us through the journey of multi-edit. Love this observation: ​“When you look at Figma, almost every feature that helps you structure your file has a free-spirited cousin feature for the times when you want to keep things loose. You can use styles and tokens to change your colors quickly, but if you want to leave things unstructured, you can use the selection colors feature to make mass edits. You can use auto layout to group things into stacks and move them quickly, but if you want to leave things unstructured, you can use the smart selection feature to reorder things quickly. When it came to editing, you could use components to edit multiple copies of an object quickly, but if you wanted to leave things unstructured, we just didn’t have a great alternative!”

A fascinating story of using Figma to design and craft… quilts! ​“I would say that I design 80% of my quilts in Figma before I even cut the fabric. Other quilters improvise much more than I do, but I think my UX background and experience preparing assets for engineering teams makes me want to go in with a plan. Everything needs to be measured to the quarter inch, and Figma is a great tool for that.”

An interview with Figma’s CTO Kris Rasmussen about Dev Mode and targeting developers. His take on low-code and no-code tools, like the two featured above: “…we’re actually really supportive of Locofy and also Anima — another example of one of these plugins on the Figma ecosystem. So we’re definitely thinking about their needs as well, as we continue to evolve.“ He added that Figma itself is looking at similar problems, but ​“at different ends of the spectrum”: ​“So we’re very much focused on helping to make the actual design process, the act of essentially visualizing what’s in people’s heads and aligning around it, more accessible and easier for the organization to participate in.”

Christine Vallaure with the best Figma tips and tricks of the year! As you’d expect, this year’s edition of her regular roundup has a strong focus on Dev Mode, variables, prototyping, min/​max values, and slot components. Thanks to Christine for sharing a friend’s link with Figmalion readers! If you prefer watching to reading, check out her free video with these tips.

Replit Vice President of Marketing and Design David Hoang talks about how AI is reshaping the future of product design and development, and the role it’s playing in the company’s team and products. On synergy between design, engineering, and AI: ​“Whether you currently work more in engineering or design, AI offers augmentation for you to do both. Engineering and design are on a course to become one tightly woven discipline.”

On hiring with regards to their Artificial Developer Intelligence (ADI) strategy: ​“At Replit, we’ve always leaned towards hiring multidisciplinary designers who understand the technical depth it takes to create software and bring it into the world. Each designer has the output of three to five designers that you’d ordinarily work with. They code, prototype, review pull requests, do unit testing, facilitate research sessions, and run workshops, too.”

Figma acquired Dynaboard, a collaborative low-code IDE for developers building full-stack web apps.

Here is what stood out to me in one of the interviews with Dylan Field I shared last week: ​“Dylan considers using this fee to do more strategic mergers and acquisitions in the future, and has an insightful way of thinking about what kind of products that could be: ​“Let’s figure out the value chain of what it takes to think about, get buy-in for, design, code, ship, and measure software. How do we complete that value chain?”

“We’ve expanded our EU file hosting capabilities to support localization of videos and images in addition to previously supported assets. For Figma Enterprise accounts that are configured for EU file hosting, this upgrade will be applied to your account automatically with no action required on your part.”

Org and Workspace admins on the Enterprise plan can now mark libraries as approved for the organization or workspaces they manage. ​“Approved libraries are badged with a checkmark and pinned to the top wherever they appear — be it in the assets panel, the properties panel, the admin console, etc. Approved libraries help users know which libraries are sanctioned by their admins and help them find them more easily.”

A few updates to granting or managing access to teams and projects (currently being rolled out). These include improved UI for the teams and projects share dialog, roles for team members on a project, and audience setting on teams and users will have the ability to directly control the audience setting on projects.

A big release of ​“squeaky stairs” fixes to the prototyping! First, the inline preview now shows mobile prototypes in draggable and resizable device frames. For a deep dive on this, see the article Behind the feature: Inline device frames.

Second, there are multiple improvements to the editing speed — copy and paste noodles and interactions to a different element; delete noodles and associated interactions; delete a starting point by dragging the ​“flow label” outside of the frame; disable all shortcuts on a prototype; enable multiple ​“After Delay” events on every node; use the ​“Change to” interaction on a nested variant; auto-exit the Scale tool when switching to the Prototype tab; copy a link to the selected flow; resize the inline preview to the actual size of the prototype, and auto-focus on the input when creating a new flow.

Third, improvements to prototyping with variables — when copying and pasting an element with a local variable bound to it, Figma will create a new collection with the copied variable; overlays now inherit the mode of the frame linking to them; negative numbers support in the expression builder; support for ! or not in a boolean conditional check (yay!), and string values ​“true” or ​“false” can be bound to instance visibility in addition to booleans. Prototyping performance has also improved, cutting down loading spinners by 22%.

Finally, the width and height values can now be set to zero, so we don’t need to rely on the 0.001 hack anymore! For a nice roundup of the above improvements, see threads by prototyping PM Garrett Miller and designer Niko Klein.

The original reporting by Forbes from last month on employee equity packages refresh and severance program. ​“Under Figma’s compensation update, employees who joined the company in the 16 months since the announced Adobe deal will receive additional shares of Figma, up to 70% of the initial intended value of their pay packages negotiated under the higher $20 billion price tag.”

On the updated valuation: ​“Figma’s move comes as the company must readjust to a startup environment more austere than the one during which it raised $200 million at its original $10 billion valuation in June 2021. Over that period, many startup unicorns […] raised down-rounds or saw their prices in the secondary market slashed. In his messaging to staff reviewed by Forbes, Field admitted that he didn’t know exactly what shares of Figma […] were worth.”

Regarding the Adobe acquisition, The New York Times writes about a few things that I don’t remember being covered before: ​“In the spring of 2020, Scott Belsky, Adobe’s chief product officer, tried buying Figma, according to regulatory filings. Mr. Field said no. A year later, Shantanu Narayen, Adobe’s chief executive, tried again. Mr. Field declined. […] In June 2022, Adobe offered to buy Figma again, this time for $20 billion. Figma solicited another buyer and aimed for a higher price, according to a filing, but ultimately accepted the $20 billion. A week before the merger was announced that September, Adobe canceled work on ​“Project Spice,” a new product that regulators said would have put it in direct competition with Figma.”

Sounds like providing employee liquidity and IPO are on the table for the future: ​“Employees and early investors expect Figma to let them sell a portion of their shares this year in what is known as a tender offer, though no plans have been made. The company’s best option for a payout now is to go public, which could take years.”

(Archived link without a paywall.) The Verge sat down with Dylan Field for his first extended interview since the acquisition fell through. First, they discussed the impact on the team — Figma cut internal valuation in half to $10 billion and updated everyone’s comp packages to account for the lost value from the deal not happening. Also, they announced the severance program called Detach (get it?!) for anyone who wanted to leave — around 52 people or 4% of the employees took it.

The company is doing well: ​“The business has been cash-flow positive for a while, I’m told, and it finished 2023 with about $600 million in annual recurring revenue — a roughly 40 percent increase from the year before. […] And Figma is now flush with even more cash, thanks to Adobe having to pay it a hefty $1 billion breakup fee.” Dylan considers using this fee to do more strategic mergers and acquisitions in the future, and has an insightful way of thinking about what kind of products that could be: ​“Let’s figure out the value chain of what it takes to think about, get buy-in for, design, code, ship, and measure software. How do we complete that value chain?”

Love this take on the AI: ​“If you think about what it takes to create great design, there’s so much in that context window that’s emotional or thinking temporally about a brand experience or a user flow. I just don’t see how, in the near term, AI is able to have that as part of its context, which means that humans are providing that.”

Webflow announced Design System Sync, a more seamless integration between Figma and Webflow powered by the new companion Webflow App for the Figma to Webflow plugin. The new app allows instant synchronization of design components and variables: ​“This means that any change made in Figma can be directly reflected in Webflow, eliminating the need for manual updates and ensuring that the final website is always in sync with the latest designs.”

Designer Advocate Lauren Andres shares tips on how to streamline handoff when it’s a constant stream of WIP designs, communication, and collaboration. Her advice involves using annotations in Dev Mode, adopting a shared language, organizing your files with sections and ​“Ready for dev” statuses, archiving old designs, and leaning on components.