How to Use Figma App Integrations: The Complete Guide

• Figma now supports over 2,000 plugins and 50+ native integrations, making it the central hub for design-to-development workflows in 2026.
• Teams can sync components to Storybook, link designs to Jira tickets, embed frames in Notion docs, and trigger PR reviews on GitHub — all without leaving the canvas.
• FigJam now includes AI-powered brainstorming, auto-diagramming, and real-time voting — used by over 4 million teams monthly.
• Integrations install in seconds from the Figma Community hub, the REST API, or directly inside plugins. Most are free for Starter plans and above.

How to Install Integrations in Figma

There are three ways to add integrations. The fastest: open the Figma Community, search for the plugin or widget you need, and click Install. It appears immediately in your toolbar under Plugins. No restart, no config files, no waiting.

The second route is the REST API. Figma’s REST API allows external tools to read and write design data programmatically. Teams use it to build custom pipelines — pulling design tokens into CI/CD, syncing component libraries across repos, or generating changelogs when a file updates. The API supports OAuth 2.0 and personal access tokens.

The third method is through native integrations managed at the organization level. Go to Admin Settings > Integrations and enable tools like Jira, Slack, or GitHub for the entire workspace. Admins control which integrations are available and which data flows outside the organization.

Quick guide:

1. Open Figma Community and search for the plugin or widget.
2. Click Install — it appears instantly under Plugins in your toolbar.
3. For API access, go to Account Settings > Personal Access Tokens and generate a token.
4. Use Figma’s REST API to read files, export assets, or write design tokens programmatically.
5. For org-wide integrations, go to Admin Settings > Integrations and enable tools for the workspace.
6. Review permissions before granting third-party plugins access to your files.

Storybook — Design-to-Code Sync and Component Documentation

The Storybook integration bridges the gap between design files and coded components. Install the Storybook addon, link your Figma component URLs, and developers see the original design embedded directly alongside the code implementation. No more switching tabs to compare a button’s border radius in Figma versus production.

Storybook Connect, Figma’s official plugin, works in the opposite direction. It pulls live Storybook stories into Figma’s Dev Mode, so designers can inspect the coded version of any component without opening a browser. Over 60% of design teams using Figma’s Professional plan now use some form of Storybook linking, according to Figma’s 2025 State of Design report.

The integration supports variants. Map Figma variants to Storybook args, and both sides stay in sync. When a designer updates a component’s padding from 12px to 16px, the linked Storybook story flags the discrepancy — catching drift before it ships.

Quick guide:

1. Install the Storybook Connect plugin from Figma Community.
2. In your Storybook project, add the @storybook/addon-designs package.
3. Link Figma component URLs to individual stories using the design parameter.
4. Open Dev Mode in Figma to view live Storybook stories alongside design specs.
5. Map Figma variants to Storybook args to keep both in sync.
6. Use the plugin to flag discrepancies between design tokens and coded values.

Jira — Issue Linking, Design Reviews, and Status Tracking

The Jira integration connects design work to project management. Link any Figma frame or prototype to a Jira ticket, and it appears as a live embed in the issue — not a static screenshot, but an interactive preview that updates automatically when the design changes.

Design reviews happen inside Jira. Product managers and engineers comment on the embedded Figma frame without needing a Figma account. Status tracking is bidirectional: move a Jira ticket to “In Review” and the linked Figma file gets tagged. Designers see which of their files are blocking development, directly from Figma’s sidebar.

Quick guide:

1. Go to Admin Settings > Integrations and connect your Atlassian workspace.
2. Open any Figma file and select a frame or prototype.
3. Click Share > Copy link and paste it into a Jira ticket description or comment.
4. Jira renders a live, interactive embed that updates with design changes.
5. Add Jira ticket URLs to Figma frames via the Jira widget to see status in the sidebar.
6. Use Jira’s design review workflow to collect feedback from non-Figma users.

Notion — Embedding Designs, Specs, and Handoff Documentation

Notion is where most teams keep their product specs, and the Figma embed is one of the cleanest on the market. Paste a Figma link into any Notion page and it renders a live, zoomable, interactive preview. Team members can inspect layers, measure spacing, and navigate prototypes without opening Figma.

The integration is best used for design handoff documents. Create a Notion page per feature, embed the relevant Figma frames, and add context — user flows, copy specs, edge cases. Engineers get a single source of truth. Notion’s database views let you tag pages by status (Design, Dev, QA), creating a lightweight design ops tracker without adding another tool.

Quick guide:

1. Copy the URL of any Figma file, frame, or prototype.
2. Paste it into a Notion page — it auto-renders as a live embed.
3. Team members can zoom, inspect layers, and measure spacing directly in Notion.
4. Build handoff docs: one Notion page per feature, with embedded Figma frames and written specs.
5. Use Notion database views to tag pages by design status (Design, Dev, QA, Done).
6. Share Notion pages with stakeholders who do not have Figma licenses.

GitHub — Version Control for Design and PR-Linked Reviews

The GitHub integration turns Figma into part of the development pipeline. Link Figma files to GitHub repositories, and every pull request can include a visual diff — the before and after of any design change, rendered as an image comparison. Reviewers see exactly what changed without opening Figma.

Figma’s branching model mirrors Git’s. Designers create branches inside Figma, iterate on components, and merge back into the main file when approved. The GitHub integration surfaces these branch changes in PR descriptions, giving engineering leads a clear view of design and code changes in one place. Over 12,000 teams now use this workflow, up from 3,500 in early 2025.

Quick guide:

1. Install the GitHub for Figma plugin from Figma Community.
2. Authenticate with your GitHub account and select a repository.
3. Link Figma files to specific repos using the plugin settings.
4. When creating a PR, paste a Figma branch URL — GitHub renders a visual diff.
5. Use Figma’s built-in branching to create, review, and merge design changes.
6. Configure webhooks via the REST API to auto-post Figma updates to PR comments.

Zeplin — Design Handoff, Style Guides, and Token Export

Zeplin remains the go-to handoff tool for teams that need pixel-perfect specs. Export frames from Figma to Zeplin, and developers get auto-generated CSS, Swift, Kotlin, or Flutter code snippets for every element. Spacing, colors, typography, and assets are extracted automatically.

Zeplin’s style guide feature pulls design tokens from Figma and presents them in a developer-friendly format. Teams export tokens as JSON, YAML, or platform-specific formats — ready to drop into a codebase. The integration supports components: link a Figma component to its Zeplin counterpart, and updates propagate when you re-export. Zeplin processes over 8 million exports per month from Figma alone.

Quick guide:

1. Install the Zeplin plugin from Figma Community.
2. Select frames in Figma and click Export to Zeplin.
3. Choose the target project and section in Zeplin.
4. Developers access auto-generated code snippets (CSS, Swift, Kotlin, Flutter) for every element.
5. Build style guides by exporting Figma design tokens to Zeplin as JSON or YAML.
6. Re-export updated frames — linked components propagate changes automatically.

Slack — Design Notifications, Comment Threads, and Review Requests

The Slack integration keeps teams informed without constant tab-switching. Connect Figma to a Slack channel, and every comment, mention, or status update on a Figma file posts a notification with a live preview. Click the notification and it opens the exact frame in Figma.

Review workflows benefit the most. A designer finishes a screen, tags it as “Ready for Review” in Figma, and a Slack message fires to the #design-reviews channel with an embedded preview. Engineers and PMs react with emoji approvals or reply in-thread with feedback. Figma reports that teams using the Slack integration reduce review turnaround time by 35% compared to email-based workflows.

Quick guide:

1. Go to Admin Settings > Integrations and connect your Slack workspace.
2. Choose which Figma file updates post to which Slack channels.
3. Comments and mentions on Figma files appear as Slack notifications with live previews.
4. Click any notification to open the exact frame in Figma.
5. Use Slack threads to discuss design feedback without leaving the channel.
6. Tag frames as “Ready for Review” in Figma to auto-notify the designated Slack channel.

Webflow and Framer — Design-to-Website Publishing

Webflow and Framer both offer Figma-to-website pipelines, but they work differently. Webflow’s plugin converts Figma layouts into Webflow-compatible HTML and CSS structures. It handles auto-layout, text styles, and images. The output is a starting point, not a finished site — you still need to configure CMS bindings, interactions, and responsive breakpoints inside Webflow.

Framer takes a more direct approach. Copy frames from Figma, paste them into Framer, and they arrive as editable, responsive components. Framer preserves auto-layout, variants, and component structure. For marketing pages and landing sites, the Figma-to-Framer pipeline is now one of the fastest ways to go from mockup to live URL — under 30 minutes for a standard landing page.

Quick guide:

1. In Figma, select the frames you want to export.
2. For Webflow: install the Figma to Webflow plugin, select layers, and export to your Webflow project.
3. Configure responsive breakpoints, CMS bindings, and interactions inside Webflow.
4. For Framer: copy frames in Figma (Cmd+C), open Framer, and paste (Cmd+V).
5. Framer preserves auto-layout, variants, and component properties.
6. Publish directly from Framer to get a live URL in minutes.

FigJam + AI — Brainstorming, Diagramming, and AI-Assisted Ideation

FigJam has evolved from a whiteboard into a full ideation platform. The AI features, launched in late 2025 and expanded in early 2026, generate diagrams from natural language prompts. Type “user onboarding flow for a SaaS app with a free trial” and FigJam produces a structured flowchart with decision nodes, actions, and endpoints.

AI-assisted brainstorming goes further. Start a sticky note session, and FigJam’s AI suggests related ideas, groups themes automatically, and summarizes discussions into action items. Real-time voting and timer widgets keep workshops structured. Over 4 million teams use FigJam monthly, with AI features activated in 40% of new boards.

Quick guide:

1. Open FigJam and create a new board.
2. Type a prompt in the AI bar — e.g., “user onboarding flow for a SaaS app.”
3. FigJam generates a structured diagram with nodes, actions, and endpoints.
4. Start a sticky note session and let AI suggest related ideas and group themes.
5. Use voting widgets and timers to run structured workshops.
6. Click Summarize to turn a brainstorm into grouped action items.

Privacy, Data Sharing, and Team Permissions

Every integration shares data outside Figma. Jira sees your file names and frame contents. Slack receives comment text and preview images. Zeplin gets full design specs. Figma’s admin controls let organization owners restrict which integrations are available, but individual users on free and Starter plans have fewer safeguards — any team member can install a Community plugin that reads file data.

Figma’s security documentation confirms that third-party plugins run in a sandboxed iframe and cannot access files without explicit permission. But “explicit permission” often means a single click during install. Review every plugin’s data access scope before approving. Admins on Enterprise plans can enforce an allowlist of approved plugins and disable Community plugin installs entirely. For teams handling sensitive product data, this is not optional — it is baseline hygiene.

Quick guide to protect your team’s data:

1. Review the data access scope of every plugin before installing.
2. Go to Admin Settings > Integrations to see all connected tools.
3. Remove integrations that are no longer in active use.
4. On Enterprise plans, enforce an allowlist of approved plugins under Admin Settings > Plugins.
5. Disable Community plugin installs for sensitive projects.
6. Audit third-party access quarterly — Figma’s admin dashboard shows which tools accessed which files.

Figma REST API Documentation | Figma Community Plugins | Figma Security & Privacy