Figma Importer Plugin
The Figma Importer plugin allows you to seamlessly and effortlessly bring your Figma designs into Lens Studio while preserving their layout and responsiveness. This guide will help you get started.
Where to Find it
Asset Library
To Install Figma Plugin in Lens Studio
-
In Lens Studio, navigate to the Plugin category in the Asset Library.
-
Locate the Figma Importer Plugin and click on it to install.
-
Access the
Figma Plugin
panel by navigating toWindow -> Figma Importer
in the top menu bar.
If you have a local plugin files, you can follow the local installation guide.
Usage
Authentication
After installing, open the Figma Importer
plugin within Lens Studio. To access your designs, you'll need to connect the plugin to your Figma account. Click the Authentication
button and follow the on-screen instructions to grant the plugin read access to your Figma files. Once connected, the plugin interface will change, indicating that you are now ready to import your Figma files.
Importing
-
On Figma, find the desired frame for importing from the targeted Figma file and right-click on it to copy its URL. You could also copy the link through right clicking the name of the Frame object on the left Layers panel.
-
After switching back to Lens Studio, paste the copied Figma URL into the input box of the Figma Importer plugin. Click the
Import
button to initiate the process. A progress bar will appear, indicating the status of the import. Upon completion, you'll find the scene hierarchy automatically created for you in Lens Studio, ready for further customization.
Disconnect your Figma account
If you want to change the Figma account associated with Lens Studio, or disconnect them entirely, you can disconnect Lens Studio from your Figma account.
- Login to your Figma account and open the File Browser
- Click on your name in the top-left corner and select the Settings tab.
- Scroll down to the Connected Apps section.
- Click Revoke access next to the Lens Studio integration.
Once disconnected, you can connect a different Figma account to Lens Studio. Follow our instructions above to connect Figma and Lens Studio.
Best Practices
While we're actively developing improvements to the Figma Importer plugin, you can achieve the best results by considering these recommendations when designing in Figma:
By keeping these factors in mind, you'll be able to minimize the time spent fine-tuning your imported assets within Lens Studio.
- Rasterization: For elements that involve masking, consider rasterizing or flattening them before import for optimal compatibility.
- Aspect Ratio: To ensure your designs look their best, align the aspect ratio of your Figma Frame with that of the Lens Studio simulation window. This will help maintain the visual fidelity of your rasterized images.
- Responsiveness: Utilize Figma's Constraint system to guide the placement of your elements. The plugin will do its best to translate these into Lens Studio's Screen Transform settings for a smooth responsive experience.
- Naming: Clear, descriptive names for your Figma objects make it a breeze to navigate your imported assets within Lens Studio.
Current Capabilities
The Figma Importer is currently focused on core functionality, with ongoing development to expand its capabilities:
- PNG Exports: Most elements are currently imported as PNGs, ensuring visual fidelity across platforms.
- Group Node Handling: Figma's "group" nodes are currently bypassed during import, with child elements treated as direct descendants of the parent node.