FigmaCharts — Charting Plugin for Figma

About this plugin

The Most Comprehensive Charting Plugin for FigmaFigma 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.Seamless Integration: Integrate popular chart libraries directly into your Figma designs.Real-time Preview: Instantly visualize how your charts will appear within the design.Customization Options: Easily customize chart styles, colors, and configurations.Library Compatibility: Support for well-known chart libraries such as Google Charts, Highcharts, Apexcharts, and D3.js Nivo.Interactive Editing: Edit and adjust chart parameters interactively within the Figma canvas.Developer-friendly Designs: Ensure designs align perfectly with developers' capabilities for smoother implementation.Time-saving: Streamline the design process by eliminating the need for manual adjustments during development.Accurate Representation: Design with confidence, knowing your charts will translate accurately into the final product.Collaboration Enhancements: Facilitate better collaboration between design and development teams.Continuous Updates: Stay up-to-date with new features and library integrations to enhance your design workflow.━━━━━━━━━━━━━━━━━━━━━━━━━What's New in v2Nivo Library — 32 new chart types including Chord, Sankey, Calendar, Voronoi, Circle Packing, Marimekko, and moreHighcharts Expansion — Now 65 chart types including Gantt, Flowmap, Organization, Word Cloud, Treegraph, Geo Heatmap, and 40+ moreAI-Powered Editing — Describe your chart in natural language and let AI (Claude, ChatGPT, or Gemini) generate or edit itAnimation Timeline — Create animated chart transitions with keyframes, easing, and export to GIF/video8 Data Connectors — Static, CSV, JSON, Excel, Google Sheets, REST API, Airtable, and SupabaseCode Export — Generate production code in React, Vue, Angular, or Vanilla JSAdvanced Export — SVG, PNG (up to 4x), PDF, design tokens (CSS/SCSS/Tailwind/JSON), and batch exportChart Presets — Save and reuse chart configurations across your projectColor Presets with Figma Variables — Sync chart colors with your design system tokens and stylesChart Inspector — Click any chart element to select and edit it directlyAccessibility Tools — Color blindness simulation and WCAG contrast checking━━━━━━━━━━━━━━━━━━━━━━━━━Supported Chart Libraries & TypesGoogle 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 DataPull data from 8 sources directly into your charts:Static data & manual entryCSV and JSON filesExcel spreadsheetsGoogle Sheets (live connection with auto-refresh)REST API endpoints (GET/POST with auth)Airtable databasesSupabase databases━━━━━━━━━━━━━━━━━━━━━━━━━AI-Powered Chart CreationDescribe 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.Natural language chart generationAI chart type recommendations based on your dataAI-powered editing of chart propertiesSmart color palette generation━━━━━━━━━━━━━━━━━━━━━━━━━Chart AnimationCreate animated chart transitions with:Timeline editor with keyframesMultiple easing options (ease-in, ease-out, bounce, etc.)Snapshot-based state transitionsFigma prototype integrationExport 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 ProFree:• 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 presetsPro:• 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.Questions or feedback? Reach out at [email protected]