FigmaCharts — Charting Plugin for Figma

About this plugin

The Most Comprehensive Charting Plugin for Figma

Figma Charts v2 integrates 4 industry-leading JavaScript chart libraries — Google Charts, Highcharts, D3 - Nivo, and ApexCharts — giving you access to 200+ chart types and 576+ ready-to-use examples, all directly inside Figma and FigJam and with support of AI-Powered Editing — Describe your chart in natural language and let AI (Claude, ChatGPT, or Gemini) generate or edit it.

Design production-ready charts that match exactly what developers will ship. No more redlines, no more handoff gaps.

━━━━━━━━━━━━━━━━━━━━━━━━━

Charts in Figma Simplified, Instantly Customize, Visualize, Implement Charts Directly within Figma.

Integrate the most popular JavaScript chart libraries into your designs to visualize, customize, and implement charts directly within Figma.

1. Seamless Integration: Integrate popular chart libraries directly into your Figma designs.
2. Real-time Preview: Instantly visualize how your charts will appear within the design.
3. Customization Options: Easily customize chart styles, colors, and configurations.
4. Library Compatibility: Support for well-known chart libraries such as Google Charts, Highcharts, Apexcharts, and D3.js Nivo.
5. Interactive Editing: Edit and adjust chart parameters interactively within the Figma canvas.
6. Developer-friendly Designs: Ensure designs align perfectly with developers' capabilities for smoother implementation.
7. Time-saving: Streamline the design process by eliminating the need for manual adjustments during development.
8. Accurate Representation: Design with confidence, knowing your charts will translate accurately into the final product.
9. Collaboration Enhancements: Facilitate better collaboration between design and development teams.
10. Continuous Updates: Stay up-to-date with new features and library integrations to enhance your design workflow.

━━━━━━━━━━━━━━━━━━━━━━━━━

What's New in v2

1. Nivo Library — 32 new chart types including Chord, Sankey, Calendar, Voronoi, Circle Packing, Marimekko, and more
2. Highcharts Expansion — Now 65 chart types including Gantt, Flowmap, Organization, Word Cloud, Treegraph, Geo Heatmap, and 40+ more
3. AI-Powered Editing — Describe your chart in natural language and let AI (Claude, ChatGPT, or Gemini) generate or edit it
4. Animation Timeline — Create animated chart transitions with keyframes, easing, and export to GIF/video
5. 8 Data Connectors — Static, CSV, JSON, Excel, Google Sheets, REST API, Airtable, and Supabase
6. Code Export — Generate production code in React, Vue, Angular, or Vanilla JS
7. Advanced Export — SVG, PNG (up to 4x), PDF, design tokens (CSS/SCSS/Tailwind/JSON), and batch export
8. Chart Presets — Save and reuse chart configurations across your project
9. Color Presets with Figma Variables — Sync chart colors with your design system tokens and styles
10. Chart Inspector — Click any chart element to select and edit it directly
11. Accessibility Tools — Color blindness simulation and WCAG contrast checking

━━━━━━━━━━━━━━━━━━━━━━━━━

Supported Chart Libraries & Types

Google Charts (19 types) — Line, Area, Bar, Column, Pie, Scatter, Bubble, TreeMap, Sankey, Gauge, Candlestick, Histogram, Geo, Calendar, Timeline, Combo, Stepped Area, Word Tree, and more.

Highcharts (65 types) — All standard types plus Arc Diagram, Bell Curve, Box Plot, Bullet, Cylinder, Dependency Wheel, Dumbbell, Error Bar, Flags, Flowmap, Funnel, Gantt, Gauge, Geo Heatmap, Heikinashi, Item, Lollipop, Network Graph, Organization, Packed Bubble, Pareto, Pictorial, Renko, Sankey, Solid Gauge, Sunburst, Tilemap, Timeline, Treegraph, Treemap, Venn, Waterfall, Wind Barb, Word Cloud, X-Range, and many more.

D3 - Nivo (32 types) — Bar, Line, Pie, Radar, Heatmap, Funnel, Waffle, Stream, Bump, Area Bump, Calendar, Radial Bar, Polar Bar, Sunburst, Treemap, Icicle, Circle Packing, Chord, Network, Sankey, Geo, Marimekko, Box Plot, Bullet, Parallel Coordinates, Scatterplot, Swarmplot, Tree, Voronoi, Time Range, and more.

ApexCharts (18 types) — Line, Area, Bar, Column, Pie, Donut, Scatter, Bubble, Radar, Polar Area, Heatmap, Treemap, Funnel, Candlestick, Box Plot, Range Bar, Range Area, Radial Bar.

━━━━━━━━━━━━━━━━━━━━━━━━━

Connect Live Data

Pull data from 8 sources directly into your charts:

1. Static data & manual entry
2. CSV and JSON files
3. Excel spreadsheets
4. Google Sheets (live connection with auto-refresh)
5. REST API endpoints (GET/POST with auth)
6. Airtable databases
7. Supabase databases

━━━━━━━━━━━━━━━━━━━━━━━━━

AI-Powered Chart Creation

Describe what you want in plain English and Figma Charts will generate or edit your chart. Supports Claude (Anthropic), ChatGPT (OpenAI), and Gemini (Google) — bring your own API key.

1. Natural language chart generation
2. AI chart type recommendations based on your data
3. AI-powered editing of chart properties
4. Smart color palette generation

━━━━━━━━━━━━━━━━━━━━━━━━━

Chart Animation

Create animated chart transitions with:

1. Timeline editor with keyframes
2. Multiple easing options (ease-in, ease-out, bounce, etc.)
3. Snapshot-based state transitions
4. Figma prototype integration
5. Export to GIF or video

━━━━━━━━━━━━━━━━━━━━━━━━━

Export Anything

• SVG — Clean vector output

• PNG — Up to 4x resolution

• PDF — Print-ready with custom page sizes

• Code — React, Vue, Angular, Vanilla JS

• Design Tokens — CSS, SCSS, Tailwind, W3C JSON

• Data — CSV, JSON

• Batch Export — Export all charts on a page as ZIP

• Animation — GIF, WebM video

━━━━━━━━━━━━━━━━━━━━━━━━━

Design System Integration

• Figma Variables support for chart colors (light/dark mode)

• Figma Color Styles extraction

• Team Library color support

• Custom color presets with save/load

• Design token export for developer handoff

━━━━━━━━━━━━━━━━━━━━━━━━━

Free vs Pro

Free:

• Google Charts (all types)

• Highcharts (basic types: bar, line, column, pie, area, scatter)

• Static, CSV, and JSON data

• SVG and standard PNG export

• 3 color presets

Pro:

• All 200+ chart types across 4 libraries

• Nivo and ApexCharts

• Advanced Highcharts types (65 total)

• AI-powered editing (Claude, ChatGPT, Gemini)

• Animation timeline & export

• Google Sheets, Airtable, Supabase, API, Excel connectors

• Code export (React, Vue, Angular, Vanilla JS)

• PDF, HD PNG, batch export, design tokens

• Custom presets, chart inspector, accessibility tools

━━━━━━━━━━━━━━━━━━━━━━━━━

Works in both Figma and FigJam.