Figma Integration

Are you ready to supercharge your design workflow? Integrating Figma with Webvizio is a game-changer for your design process, making communication and collaboration smoother than ever. Available exclusively in our

Paid Plans, this powerful feature allows you to seamlessly work with your Figma files in Webvizio. Here’s a guide to help you connect Figma with Webvizio and make the most of your designs.

How to Connect Webvizio to Figma

Option 1: Connection via the Integrations Page

This is the most straightforward method to set up the integration for all future use:

1. Go to Account Settings, and open the Integrations tab.
2. Find Figma in the list and click on Add Integration.
3. Click Log in to Figma in the pop-up window. If you’re already logged in, you’ll be taken straight to the data transfer confirmation page.

4. Click Allow access to permit Webvizio to access your Figma data.

Once you see the confirmation popup, you’re all set. Your Figma integration is complete!

Option 2: Connection When Creating a New Web Project

This option allows you to quickly connect to Figma when you already have a web link to your Figma design:

1. Paste the URL of your Figma frame into the URL field.
2. If you haven’t connected to Figma before, you’ll be prompted to log in.
3. Follow the prompts to allow Webvizio access to your Figma data.

Obtaining the Figma Design Link

To get the link for your Figma design:

1. Open the file containing your desired design in Figma
2. Select the specific frame you want to use
3. Click the “Share” button
4. In the pop-up, click “Copy Link“

Done! You can use the copied link to add Figma design to Webvizio

How to Add a Figma Design to Webvizio

Webvizio offers two flexible options for incorporating your Figma designs into your workflow:

1. As a dedicated design project (Figma-First)

Transform your Figma design into a stand-alone Webvizio project. This approach is ideal when your entire project revolves around a specific Figma design, allowing you to treat it like any web project within Webvizio.

2. As a new tab to an existing web project (Side-by-Side)

Bring your Figma designs directly into your current web projects. This method allows you to:

• Keep your Figma designs and related web pages in one unified workspace
• Effortlessly compare your Figma designs with live web pages
• Enhance collaboration by centralizing design assets and implementation in one place

Navigating Between Figma Designs

No more digging through menus to find the right screen.

• Thumbnail preview panel: Use the panel on the right to jump between designs instantly.
• Quick adding: Click the + button at the bottom of the panel to add new designs in seconds.
• Drag-and-drop reordering: Need to change the flow of a presentation or a set of screens? Drag a thumbnail and drop it where you want it.
• Instant renaming: Double-click any design name to rename it and keep your project tidy.

Figma Files Interface

The Figma project interface in Webvizio works like the interface for image-based projects, with a few features made for Figma designs:

1. Share File: Copy a link to this design in your Webvizio project. Anyone with access to the project who opens the link goes straight to this design.
2. Open in Figma: Open the original frame in Figma in a new tab.
3. Download Image: Download the Figma frame as a PNG file.
4. Delete File: Remove the design from your project.
5. Zoom Controls: Zoom in for detailed work or out for an overview. The percentage indicator shows the current scale.
6. Fit to Screen: Resize the design so the whole frame fits in the visible workspace without scrolling.

Versions and Approval

When a design changes, add it as a new version instead of a separate file. This keeps the full history of a screen in one place. Learn more in the Image & File Versioning and Approval article.

• Add a new version: Click the version dropdown, then click New version +.
• Switch between versions: Select any version (V1, V2, V3) from the dropdown. Previous versions are never deleted or overwritten.
• Approve the final version: Click the check icon next to a version to mark it as Approved. Only one version per design can be approved at a time.
• Track feedback by version: Each task shows which version it was created on, so you always know which feedback applies to which design.

Tips for Effective Figma Integration

• Name your frames clearly. Frame names become design names in Webvizio, so clear names make designs easy to find in the thumbnail panel and in Manage tabs. You can also rename any design in Webvizio by double-clicking its name.
• Add updates as new versions. When a design changes, upload it as a new version instead of a separate file. This keeps the full history of a screen in one place and shows which feedback applies to which version.
• Pick the right project type. Use a dedicated design project (Figma-First) when you need versions and approval. Add Figma designs as tabs in a website project (Side-by-Side) when you want to compare a design with the live page.
• Approve the final version. Mark the version that’s ready for development as Approved, so everyone on the team knows which design to build from.
• Order designs by flow. Drag thumbnails to arrange designs in the order users go through them, such as Home, Product, and Checkout. This makes reviews easier to follow.

With the Figma integration, your team can review designs, track feedback by version, and approve final designs in the same place where you review your live website.