Use Figma Integration in Wingz Chat and Visual Editor Next

Overview

The Figma integration in the Wingz Chat and Visual Editor connects your Figma design workspace directly with Wingify’s AI agent, Wingz. By providing a direct Figma design link with your prompts, you give the AI agent visual context. This enables Wingz to read external designs, interpret specific UI changes, and generate variation code, such as custom countdown banners, sticky headers, or new promotional layouts, within your campaign.

For example, a design team creates a sticky promotional countdown banner in Figma for an upcoming sale. Instead of manually recreating the design’s CSS and HTML in the Visual Editor, a marketer can copy the frame link from Figma, paste it into Wingz, and direct the agent to implement the banner at the top of the page. Wingz uses the design as a visual context to generate the exact element changes.

Key Benefits 

Key benefits of the Figma integration include:

• Accelerated variation creation: Converts visual designs into functional webpage variations without manual coding.
• High design fidelity: Preserves colors, layout structures, and styling from your Figma design files when generating variations.
• Account-wide access: Once connected by an account user, the integration becomes available across the entire Wingify account.

Prerequisites

Ensure you have:

• An active Wingify account with a Wingz Core or Advanced plan.
• A Figma account containing the design files you intend to import.
• SmartCode 3.0 added to your website to create variations in Visual Editor Next.

Configure Figma Integration

Setting up the integration requires a one-time connection between your Wingify account and Figma. To set up the one-time integration:

1. Launch the Wingify Visual Editor from your campaign configuration or through the Live Page Editor Canvas mode in Wingz Chat. 
   Enter a prompt in Wingz Chat to create a test campaign. The Live Page Editor Canvas mode appears after you submit the prompt. For example, use a prompt like -  Create a new A/B test campaign for the blog page - wingify.com/blog.

   Note: If you are using the Visual Editor, the Wingz Chat panel appears on the right side.
2. Once the Editor Canvas appears, click the Import Figma design icon below the prompt input field.
3. In the pop-up modal, click Continue to Figma.
4. In the next pop-up, click Allow access to authenticate your Figma account in the browser. 

5. Upon authorization, you are redirected back to the Visual Editor, and your account is linked. Now you can link your Figma designs to create variations.

Upon authorization, you are redirected back to the Visual Editor, and your account is linked. Now you can link your Figma designs to create variations.

Import Figma Design into Wingz Chat

You can access and use the Figma integration within the Wingz Chat in Live Page Editor Canvas mode or via Visual Editor during test creation.

1. Open your Figma design file in a browser or the Figma app.
2. From your design file, locate the specific element, frame, or component you want to apply to your variation.

3. Right-click the target element or frame, select Copy/Paste as, and click Copy link to selection.

   Info: To prevent rate-limit errors, copy links to specific nodes or frames (such as a single banner or modal) rather than entire, multi-page canvas files.

4. Return to the Wingify Visual Editor.
5. Select Import Figma design (Figma icon) in the Wingz panel.
6. Paste the copied link into the Enter Figma frame URL here field and select Import design.

7. Type your instruction in the prompt box. For example, implement a countdown timer banner at the top as per the attached design. Make sure it is sticky so it stays when the user scrolls.
8. Click Send.

Wingz processes the request, evaluates the DOM structure, and applies the requested variation changes to the page.

Verify the Figma Integration

To verify that the feature is functioning correctly:

• Check element rendering: Observe the live canvas preview to ensure the design elements match the visual properties defined in your Figma frame.
• Inspect applied changes: Review the Wingz chat response log. Wingz lists the exact actions taken such as added sticky container, adjusted margins, verified color contrast.
• Test interactive elements: Use the Preview mode in the Visual Editor to interact with dynamically generated elements, such as running timers or sticky headers.

Best Practices

• Use organization-level Figma files: Store your design files in a Figma organization or Enterprise workspace to benefit from higher API rate limits.
• Obtain Dev access in Figma: Make sure you have Dev access to the design files. This gives you higher API request limits.
• Isolate Target Frames: Copy links to specific frames rather than broad top-level pages to help Wingz process designs faster.

Troubleshooting

FAQs

• Is the Figma integration set up per user or per account? 
  The integration operates account-wide. Once a user connects a Figma account, the connection is available to all users within that Wingify account.
   
• Can I connect multiple Figma accounts to a single Wingify account? 
  No. Wingify supports one active Figma account connection per Wingify account at a time.
   
• Does using the Figma integration consume Wingz credits? 
  Yes. Generating variations via Wingz using Figma imports consumes standard Wingz credits. The consumption of credits depends on the complexity/number of changes you make using the prompt. For more information, refer to Manage Wingz AI Credits.
   
• What is the difference between selecting an element on the page versus attaching a Figma link?
  Selecting an element sends the existing webpage's HTML/DOM structure to Wingz as context, whereas attaching a Figma link provides an external visual design target for Wingz to replicate.

Need more help?

For further assistance or more information, contact Wingify Support.