Figma has several features under development that are available to users in beta. In this article, find out which beta features are available, what they are, their beta types, and how to access each one.

“Experience your designs on any screen size with a new Prototype viewer experience that resizes responsively. With a new menu option for previewing or presenting prototypes, the viewer will respect constraints and Auto Layout properties as you resize the viewer window or select a different device frame.”

A guide to Dev Mode, updated with all new features and available for both the previous and new UI.

“Now in Dev Mode, new statuses like Edited and Completed make it easier to communicate what’s changed and ready — supporting a more fluid development process.”

“When it comes to design handoff, communication is key. As designs change, designers need to be able to iterate while still providing clarity to developers about what’s new and what’s ready to build.”

Code Connect is out of beta: ​“Today, we’re excited to make Code Connect generally available, alongside improvements like surfacing connected code snippets in the component playground, a new tool to streamline setup, and support for React, React Native, iOS, Android, and more to come.”

“Our new Ready for Dev View cuts down on the noise and helps developers, designers, and other stakeholders know exactly what’s needed to drive projects forward. And with Focus View and the ability to mark designs as dev complete, developers can stay in the flow while staying in sync with their collaborators.” See also a short reelof all the latest updates.

Software Engineer Shirley Miao explains how the new ​“auto auto layout“ was built.

Jackie Chui, a Product Designer at Figma, shares a few more quality-of-life improvements to Auto Layout that the new Suggest Auto Layout feature might have outshined.

“We’ve updated Auto Layout to make it more predictable when you need it and easier to ignore when you don’t. Now, Figma can not only suggest when multiple frames of Auto Layout might be needed for a full design element, but also create those frames for you. This will save you time from having to apply it frame by frame within a design. Plus, you can hold Ctrl to ignore Auto Layout while dragging a design element into an Auto Layout frame to set an absolute position.” Try it out at the playground.

Daniel Destefanis from Figma made a plugin that shows how text layers within a selection are styled (or unstyled). This plugin complements the existing native Figma feature Selection colors and is a great way to see what layers aren’t using styles or select layers by font. Read more in Daniel’s Twitter thread.

Gavin Nelson made a beautiful alternative icon for the desktop Figma app. 

Checks out.

Double Glitch made a new tutorial on creating a real working parallax effect in Figma. Don’t miss the Community file as well! 

Ridd explains how to make your components easier to use by exposing nested instances.

I had no idea that a Spread value in drop shadows can be negative! This effect could shrink the shadow and simulate the object’s elevation. The article explains the box-shadow property in CSS, but luckily, Figma’s drop shadow is based on it and works similarly. 

James shows how to achieve a very cool mesh gradient effect with simple tools: ​“It’s kinda silly how much you can achieve with a single blurred vector line, a gradient and a blending mode.” 

Jacob Miller shares two variables tips to avoid the most common problems: 1) ​“Never create a mode that shouldn’t be set at the page level” (read more about inheriting a context), and 2) ​“Never publish a variable that users shouldn’t consume” (see why component-scoped variables can 10x the number of variables you ship). Don’t miss discussions in replies. 

Essential Figma shortcuts as A4 and A3 posters, via Nick Babich.

Whoa, finally! Can’t believe this is getting fixed a few days before Config. Add bold, italic, underline, or strikethrough font style to a portion of text with an applied style without detaching it first.