technical and ux tips for making a donut (or pie!) chart in figma.
00:23 creating a chart structure with ellipses
02:50 picking accessible colors
05:17 adding patterns to chart styles
07:29 wrapping up
figma file: https://www.figma.com/community/file/1368568320352304600/donut-chart-tutorial
tool for generating colors: http://vrl.cs.brown.edu/color
tool for testing colors: https://projects.susielu.com/viz-palette
donut chart tips by spectrum: https://spectrum.adobe.com/page/donut-chart/
example of a design system with chart colors: https://atlassian.design/components/tokens/all-tokens
even more resources (shout out to Kenji!): https://kenjivkaneko.notion.site/Color-Resources-94a9d7b172704b14a01f4b62bd6160ec
also, common dev libraries for charts:
recharts: https://recharts.org/en-US/examples/TwoLevelPieChart
d3: https://observablehq.com/@d3/donut-chart/2?intent=fork
plugins for charts:
https://www.figma.com/community/plugin/731451122947612104/charts
https://www.figma.com/community/plugin/734590934750866002/chart
#designsystems #figma #uidesign
—
💌 subscribe to my occasional newsletter: https://world.hey.com/mash
