Figma Integration

What Is the Figma Integration Feature in the Design Editor?

The Figma integration feature in the Design Editor allows you to select design layers created in Figma and import them directly into the DPromotion editor to use them as promotion design elements.

With this feature, you can integrate selected layers into the DPromotion editor screen without separately saving or uploading the promotion design draft created in Figma as an image.

Prerequisites for Figma Integration 

Before using the Figma integration feature in the Design Editor, prepare the following items in advance. 

1. Figma account
2. Dpromotion account 
3. Dpromotion Figma integration plugin 
4. Dpromotion editor 
5. Figma layer or group to integrate 

Integrating with Figma 

Select the Figma button from the left-side menu of the Design Editor to move to the Figma main screen. 

Select the Try in Figma button on the Figma main screen. 

• When you select the Try in Figma button, you will move to the Dpromotion plugin screen in Figma Community. 

Select the Open in... button on the Dpromotion plugin screen, and select the Figma file where the Figma design layer or group to be integrated is located. 

• When you select the Figma file to integrate using the Open in... button, you will move to the Figma editor screen for that file. 

On the Figma editor screen, select the design layer or group to integrate with Dpromotion’s Design Editor. 

With the design layer or group to be integrated selected, select the Actions button on the bottom toolbar of the Figma editor. 

• When you select the Actions button, the Actions panel screen appears on the Figma editor screen.

Search for the Dpromotion Exporter for Figma plugin using the Plugins & Widgets search feature on the Actions panel screen. 

Select the Dpromotion Exporter for Figma plugin, and enter your Dpromotion account information (Username, Password) on the login screen. 

• When Dpromotion login is successful, the Selected Layer Export screen appears. 

On the Selected Layer Export screen, check the preview screen, SIZE, POSITION, and SELECTION information of the design layer or group to be integrated, and select the Export button. 

When the integration between Figma and Dpromotion is successful, the Figma Import screen appears. 

Move to the Dpromotion Design Editor screen and check the design layer or group selected in Figma, placed in the central workspace of the canvas.

• The uploaded design layer or group can be further edited in the Dpromotion Design Editor.