July 23, 2024
July 23, 2024

From Screen to Scene: Augmenting Reality in a Snap

Figma is the best designer's playground, toolbox, and studio all in one. Lens Studio creators internally and externally have long been leveraging Figma for UI/UX design, and now, those 2D designs can be put to work in a Lens. You don’t have to imagine it, you can just do it! In a few clicks, you can add dimension, personalization, and interactivity to 2D Figma designs with Lens Studio.

We introduced plugins to Lens Studio in the latest Lens Studio 5.0 release, and along with it, is our exciting partnership with Figma. The Figma Importer Plugin, allows you to bring any Figma design directly into a Lens Studio scene for easy Lens creation. Anyone can create an AR experience just with their Figma files. And from there, easily publish to a global audience on Snapchat and beyond. This hassle-free pathway between the tools provides a more enjoyable developer experience overall. Let’s see what some Lens Creators are already saying about it and what they’ve been creating.

AR Photo Frames

"Until now, exporting PNG images one by one from Figma and then importing them into Lens Studio was quite challenging,” says Lens Creator, Aoe. “However, using the new plugin made the process much easier, completing both material and texture setup instantly, which was very convenient."

Check out AOE’s very ~aesthetic~ Polaroid Lens, created with Figma designs and Lens Studio.

TBD

AR Games

Lens Creator, Hongwei Tang sees obvious use for the plugin as it relates to gaming Lenses. “The Figma Importer is ideal for creating graphic elements for games and quickly integrating them into Lens Studio," says Tang. 


Alex Bradt, Owner of the production studio MousePack, finds that designing UI with his team will now be incredibly streamlined. “Figma and Lens Studio are both top design tools; this integration brings them together,” says Bradt. “Copy and pasting design elements is extremely satisfying. [The Figma Importer] is an essential tool for UI.”

A Figma file screenshot of a woman vomiting a cartoon rainbow.

Alex Bradt’s ‘Endless Love’ project in Figma

And more!

As you can see, Lens Creators are thrilled with the efficiency and speed this plugin affords them. In an instant, you can transform your idea from screen to 3D scene, like applying your favorite Bitmoji sticker to your face—luv it!

Or, instantly try on a t-shirt you designed by combining it with Garment Transfer.

If you’re inspired by the Figma plugin, and want to create your own plugin for yourself and the Lens Studio community, you can follow documentation and best practices for creation. And when you’re satisfied, upload it to the Asset Library and promote it on socials and the Snap AR Discord for others to use as well.