Design · Tip
Dynamic Charts in Figma
Figma technique to create editable donut charts using radial vector handles
This technique demonstrates how to build interactive, editable donut charts directly within Figma by connecting segments to a common center point. Designers can drag radial vector handles to adjust arc proportions live without breaking the component. It also retains its structure when rotated or styled into 3D isometric perspectives.
How it works
"Dynamic charts in Figma" — build a donut chart from segments joined at a common center point; each segment exposes a radial vector handle (blue endpoint) that can be dragged to change its angular size. The quoted follow-up shows the same construction working on a 3D torus view. A follow-up tweet in the thread promises a quick tutorial but posts no media.
What it's for
- Design customizable donut charts for dashboard mockups and analytics UI
- Adjust data visualization segment sizes dynamically without redrawing vector shapes
- Create 3D isometric chart illustrations that remain editable
Key points
- Construct donut chart segments joined at a single center anchor
- Expose radial vector handles for click-and-drag arc resizing
- Maintain shape integrity when rotated or transformed into 3D torus views
- Live visual feedback directly on the Figma canvas without external plugins
Pricing
Free
Details
- Type
- Tip
- Category
- Design
- Topic
- Figma Tips
- Platforms
- Web, macOS, Windows
- For
- UI/UX and product designers
- Tags
- figma, charts, data viz, vectors, ui design
Why it was saved
- @writenicecode: Reusable technique: segments connected to a center point with radial blue handles let you drag to change arc sizes, and the construction survives being extruded/rotated into 3D.
Related
Customizable illustration collections created by artists for web and app design
Create and animate soft mesh gradients natively in Figma prototypes
Open-source icon set designed on a 24x24 grid
AI-powered Figma plugin to automatically rename layers in one click
Library of over 60,000 icons across multiple visual styles
Open-source icon library available across web frameworks, design tools, and SVG
Updated