Articles

On April 1st, Figma makes URLs shorter and easier to read. If you call Figma’s REST APIs, embed files in your websites or apps, or use these URLs in your plugin or widget, you may need to make a few tweaks to your code.

Fast Company calls Figma one of the ​“most innovative companies in applied AI” for boosting creativity and digital collaboration with the OpenAI-powered Jambot plugin for FigJam. Wild to think that it was born out of an internal two-day AI hackathon just eight months ago. (For additional context, see the above interview with Nilay Patel.)

Nilay Patel, editor-in-chief of the Verge, talked to Dylan Field in a live interview from SXSW about life after the failed Adobe deal, the new multi-edit and Dev Mode, generative AI, the state of the web, design trends, solarpunk, and what comes next. Nilay is a great interviewer, so I highly recommend reading (or listening!) this conversation.

Christine makes a point that we can move beyond the rigid structure of fixed responsive breakpoints with modern CSS layouts, crafting flexible and dynamic designs that seamlessly adjust to different screen sizes. In this article, she covers responsive column-based design vs. modern CSS layout, CSS Flexbox and Grids, and questions if we still need breakpoints.

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.”