“Code Connect is a tool for design systems and engineering teams to bring component code into Dev Mode. When inspecting a component with connected code snippets, developers will see design system code from their libraries instead of auto-generated code.” Currently in beta. Available on Enterprise or Organization plans only.

Developer Advocate Jake shows Jason Lengstorf how to bring your code into Figma with Code Connect.

The String and Number type variables can now be bound to typography fields and saved as a style. Included fields are font family, font weight (numeric or named alias) and style, font size, line height (no percentages support yet), letter spacing, paragraph spacing and indent. Use Modes to create responsive typography scales for different screen sizes.

Figma is bringing together the design systems community on April 16 to share new features, best practices, and a peek into what’s coming next in the half-day event. ​“We’ll share more about new capabilities to make design systems more powerful and easier to adopt, as well as features to connect your system closer to code. Our product sessions will dive deep into strategies for structuring and maintaining your system.”

Considering it’s only a couple of months until Config 2024, it’s pretty clear they will put a bow on some of the features announced last year. Typographic variables, anyone?

This April Fun Day, Figma had some fun with cursors. ​“What better way to celebrate this icon of interaction than with a look back at digital eras through the decades? For one week starting this April Fun Day, you’ll be able to choose throwback cursors inspired by four aesthetics from internet history: We’re calling them 8‑bit, Y2K, Skeuomorphic, and Aero. Here, we reminisce about bygone trends and reveal how we brought these vintages back to life.”

Andrew Hogan, Head of Insights at Figma, talks to Bob Baxley, SVP of Design at ThoughtSpot, about his view on AI’s impact, why it’s so important to design tools well, and what we can learn from history and huge projects like the Apollo Mission.

Now you can use the power of AI to generate and expand mindmaps and create visual timelines in FigJam. See examples in the gallery of ready-made FigJam AI prompts.

On April 1^st, 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.

Not the acquisition we had in mind: ​“Canva, the world’s only all-in-one visual communication platform, today announced the acquisition of Affinity, the award-winning creative software suite for professional photo editing, illustration, graphic design and page layout.”

Use the scroll wheel on your mouse to zoom in and out. Right-click and drag to pan around a file.

“Over the next few weeks, we are replacing the bottom right notification button for library updates and replacing with a new library icon for faster entry to library management.”

Figma shared the Config 2024 lineup with more than 75 speakers from around the globe — it’s absolutely bonkers this year, with folks from Teenage Engineering, The Browser Company, Humane, GitHub, Perplexity, Not Boring Software, Artifact, Ableton, Cron, Linear, Work Louder, Vercel, and many many more. This year’s conference tracks will be organized in a few stages, with separate conversations hosted around design systems, development and code, quality, leadership, etc. Can’t wait!

An update to file search — now you can filter results by owner, type, or organization/​team/​project.

There were hints about split tabs for a while, and now they’re available in the beta version of the desktop app. Luis highlights some of the use cases in this thread, including keeping a prototype on the side, managing variables, iterating on designs at different zoom levels, updating local components, and many more.

Dylan Field joins Sarah and Elad at No Priors podcast to discuss what’s next for an independent Figma, how AI can augment design and speed up the iteration loop, and how Figma is expanding beyond design with products that help the entire product team’s workflow.

Multi-edit is a powerful feature with many nuances when it comes to editing a series of related mockups or updating component variants, so Miggi prepared an entire playlist of videos covering every aspect in full depth. I highly recommend setting aside 30 minutes to watch them all in order.

If you can watch only one, here Miggi compares how editing objects across multiple frames works now and how it used to work previously. He covers some of the most significant changes — scaling and rotating multiple objects, the ability to select matching layers across a series of frames (Option-Command-A or Ctrl-Alt-A), reliance on the layer name and position, editing text across multiple frames (Enter), how editing works with Auto Layout, and using sections to scope selection of matching layers.

If you learn best by doing and experimenting, try the new playground file that explains finding and selecting matching layers, resizing and aligning them to their frames, batch text editing, changing all variants at once, and more.

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.

Creating beautiful gradients in Figma just got easier! New controls for flipping and rotating gradients (see why they’re separate controls), displaying the gradient stop position in percentage (another yay from me!), and even better-looking defaults (although they’re bringing back the old behavior if you add a gradient on top of another fill).

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.

What an incredible introduction to color spaces! It starts by stating an important point that ​“color spaces are all constructs”, then proceeds to explain how useful one particular color space from 1931 is: ​“CIE XYZ turns color mixing problems and color matching problems into math problems. This has proven so useful that every modern color space is defined in terms of CIE XYZ. When we say that a system is ​“color managed” what we’re saying is: it’s built on top of CIE XYZ.”

Later it covers my favorite topic of perceptual uniformity and explains why it’s so hard to achieve — communicating meaning in data visualization, storing colors digitally, measuring contrast to ensure accessibility, and rendering even-looking gradients are all highly desirable use cases. Both CIE XYZ and sRGB can’t do it: ​“sRGB, the web’s dominant, default color space, was constructed in order to model a typical 1990s cathode-ray tube display.” On the first attempt to create a perceptually uniform space: ​“Whereas every color theorist before Albert Munsell (and many, after him) worked from the ​“frame in”, trying to cram all visible colors into a regular shape like a wheel or a sphere or whatever, Munsell instead worked from the ​“content out”, trying to create even intervals between adjacent colors and letting each ​“branch” extend as far as it could before he reached some limit of saturation. The resulting solid resembles a lumpy, lopsided spinning top.”

In the end, he explains why and how the Oklab color space proposed by Björn Ottosson in 2020 became rapidly adopted by the web platform and tools. (Not all tools yet — wink-wink!) Lab parameters in ​“a” and ​“b” are hard to work with, so OKLCH offers a user-friendly way to navigate the color space through Lightness, Hue, and Chroma. That’s the color space I rely on the most in my work.

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.

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

Anthony DiSpezio shows how merge reviews now ignore top-level sections, allowing you to review changes at the frame or component level.

Designer Advocate Chad Bergman explains the basics of design systems — what they are, how they work, and how they can change the way you design.

The Stark team prepared simplified and actionable explanations of WCAG 2.2 criteria. ​“This is a collection of summaries of each and every criteria from the WCAG 2.2 designed for clarity, simplicity, and actionability. The WCAG is complex and detailed so we wanted to give you something that takes the awesome efforts that went into creating it and gives it to you in a really easy to understand package.”