The Abyssale plugin for Figma makes it easy to turn your designs into fully editable templates that can be used directly in Abyssale.
Install the Plugin on Figma
Before you can use the plugin, you’ll need to add it to Figma. This only takes a couple of minutes.
Open the Figma app and open any file.
In the top menu, go to Plugins → Manage plugins
A modal open at the bottom, search the Abyssale plugin in the search bar.
You’ll see “Figma to Abyssale” listed
Select the "Figma to Abyssale" plugin listed, and run it
Connect Figma to Your Abyssale Account
Now that the plugin is installed, the next step is to link it to your Abyssale account so the two can communicate.
Open the Figma app and open any file.
In the top menu, go to Plugins → Figma to Abyssale, and select the plugin
You’ll be prompted to enter an import key.
Head to your Abyssale account, go to Account Settings → Connections.
Under the Figma integration card, click Generate access key and copy the code.
Return to Figma, paste the key in the plugin, and confirm the connection.
Send a Design from Figma to Abyssale
Once connected, you can start sending your Figma designs to Abyssale as editable templates.
Open the Abyssale plugin and Select the main frame of your design — the plugin will treat everything inside this frame as part of the template.
Click Send to Abyssale to upload it.
After a few seconds, the design will appear in your Abyssale account as a new template.
Unselected layers will still be included as non-editable raster images : Layers not actively selected will be flattened into images. If you want them to remain editable, make sure to select them before sending.
Important: Certain Abyssale components (like buttons, ratings, QR codes, and logos) don’t exist natively in Figma. They’ll be imported as text, images, or shapes, so you’ll need to replace them in Abyssale with the actual components to fully benefit from automation
Start Creating in Abyssale
Your design is now available in Abyssale and ready to use.
Use the newly created template in Abyssale into one of your project to duplicate it as a design
Edit the design and Make any necessary adjustments to text, colors, or elements.
Start generating multiple variations and formats automatically — saving you time and keeping your designs consistent.
Limitations & Best Practices
While the plugin transfers your visual design from Figma into Abyssale, not every element can be mapped exactly. Components such as buttons, ratings, QR codes, and logos are specific to Abyssale and don’t have a native equivalent in Figma.
When you import a Figma design that visually includes these elements, they’ll appear in Abyssale as text layers, images, shapes, or sometimes grouped objects depending on how the design is organized.
To unlock the full power of Abyssale’s automation, replace these placeholders in Abyssale with the actual components:
Replace any static image or text with a background shape that looks like a button or a rating element with the actual Abyssale Button or Rating layer.
Replace visual QR codes with the QR Code component for dynamic generation.
Exchange logo images with an Abyssale Logo layer to handle brand variations automatically.
Making these adjustments ensures your templates aren’t just visually correct, but also flexible, scalable, and ready for data-driven content creation.
With the Abyssale plugin for Figma, you can keep designing in the tool you know best while unlocking the full automation power of Abyssale. Whether you’re creating one banner or hundreds, this workflow ensures your assets stay on-brand, editable, and ready in every format you need, without starting from scratch each time.