
# Install Figma Plugin

To use LiveDemo in Figma, you need to install the LiveDemo App plugin.

**Important:** LiveDemo integrates seamlessly with Figma through the plugin. Simply install it and start creating amazing product demos directly from your Figma designs.

Install the Figma Plugin with the link below : 

<a href="https://www.figma.com/community/plugin/1592001133823412557/livedemo-app" target="_blank" rel="noopener noreferrer">LiveDemo App - Figma Community</a>

* Open your Figma desktop app or go to <a href="https://www.figma.com" target="_blank" rel="noopener noreferrer">Figma</a> in your browser.
* Go to <a href="https://www.figma.com/community/plugin/1592001133823412557/livedemo-app" target="_blank" rel="noopener noreferrer">the LiveDemo App plugin page</a>.
* Click on "Open in Figma".
* The plugin will be added to your Figma account and will be available in your plugins menu on a right click.


<figure><img src="/images/docs/open-figma-plugin.png" alt="Open Figma Plugin" style={{maxWidth: 650}}></img><figcaption></figcaption></figure>

Install the LiveDemo App plugin from the Figma Community to turn your Figma designs into interactive product demos.

Install the LiveDemo Figma Plugin

Install Figma Plugin

LiveDemo is an interactive demo platform: capture any web app with a Chrome extension, edit it, share it, track engagement and let an AI Demo Agent give demos.

Introduction

Use LiveDemo interactive demos for sales outreach, website product tours, customer onboarding, help center guides and employee training.

What can I use LiveDemo for?

Install the free LiveDemo Chrome extension from the Chrome Web Store to capture interactive demos of any web app or website.

Install Chrome Extension

Getting Started

Capture an interactive demo with the LiveDemo Chrome extension: screenshots and video, HTML, AI recording or a blank demo.

How to capture a LiveDemo

Compare LiveDemo demo types (screenshot, video, HTML, AI recording and AI Demo Agent) and pick the right one.

Demo Types

See how viewers engage with your LiveDemos and AI Demo Agents: views, completion, drop-off, sessions and leads.

Analytics

Capture a LiveDemo

Learn how to open a captured LiveDemo in the editor and change steps, text, design, zoom, popups and voiceover before you publish.

How to edit a LiveDemo

Add, reorder, duplicate and delete the steps of your LiveDemo so the interactive demo follows the exact flow you want buyers to see.

Steps

Customize the look of your LiveDemo: brand colors, fonts, hotspots and tooltip styles that match your product and website.

Design

Add popups to your LiveDemo to introduce a feature, explain a step or capture leads with a form inside the interactive demo.

Popup

Use zoom in the LiveDemo editor to focus viewers on the important part of a screen and make small UI details readable.

Zoom

Add AI voiceover to your LiveDemo so each step of the interactive demo is narrated for viewers.

Voiceover

Turn on autoplay to play your LiveDemo step by step automatically, like a video, while keeping it interactive.

Autoplay

Edit a LiveDemo

Publish your LiveDemo and share a public link so prospects and customers can explore the interactive demo without signing up.

Share your public LiveDemo

Embed your LiveDemo on your website, landing pages or help center with a responsive iframe snippet.

Embed on website

Share your LiveDemo in Medium articles so readers can try your product right inside the post.

Share on Medium

Share your LiveDemo on X (Twitter) with a link preview that drives followers into the interactive demo.

Share on X (Twitter)

Add your LiveDemo to marketing and sales emails with a preview image that links readers straight into the interactive demo.

Share into email platforms

Export your LiveDemo as a GIF or video to use in social posts, docs, presentations and anywhere iframes are not supported.

Export in GIF or Video

Share

Remove the LiveDemo watermark from your interactive demos and AI Demo Agent on any paid plan, or replace it with your own logo.

Remove Watermark

Branding

Create an AI Demo Agent that answers buyer questions from your knowledge, opens the right LiveDemo, qualifies visitors and books meetings.

Create an AI Demo Agent

Every AI Demo Agent conversation gets a summary, topics, buying intent, unanswered questions and an optional recap email to the visitor.

Conversation Insights

Let the AI Demo Agent ask your qualification questions, decide who is qualified with your own rules, and book meetings inside the demo.

Qualification & Booking

Put the AI Demo Agent on your website as a chat bubble, email pill, smart search bar, button or inline iframe, with different behaviour per page.

Website Widget

Teach the AI Demo Agent from your whole website, documents, FAQs and sales calls, see exactly what it reads, and fill the gaps.

Knowledge

Show every prospect a demo with their own company name, first name and logo, from an agent link or your website.

Personalized Demos

Every AI Demo Agent session gets a private, shareable recap page that visitors forward to their team, and you see who opened it.

Recap Page

Send AI Demo Agent leads, qualified visitors, bookings and conversation summaries to Slack, Zapier or your own endpoint with signed webhooks.

Webhooks & Slack

AI Demo Agent

Best practices for interactive product demos: set one goal, keep it to 5-7 steps, write action-oriented copy and end with a clear call to action.

Best Practices

Connect LiveDemo with your CRM, marketing automation and analytics tools to sync leads and demo engagement data.

Integrations

Guides

Answers to common LiveDemo questions: pricing and plans, free trial, demo limits, branding, analytics, integrations, security and billing.

Every LiveDemo release: new features, improvements and fixes for interactive demos and the AI Demo Agent.

Changelog

Get help with LiveDemo by email, live chat or a call, with response times per plan and links to tutorials and the blog.

Install Figma Plugin

More in Getting Started