Figma Line Chart
Figma Line Chart
Preview
Figma Line Chart
Figma Line Charts
Line charts visually represent data as line-connected points using straight or curved lines. They are designed to show trends over time and convey large volumes of information.
Line charts excel at showing continuous data trends over time. Combine with Pie Charts to simultaneously display proportional data, creating richer insights and pattern visualization.
The file carries five LineArea layouts, each in an 800px desktop and a 360px mobile frame and each in a curved and a sharp line style: a three-value stat row over a three-line chart with a comparison table, a two-value header over two lines, a single line with a floating value badge, a two-line curved comparison, and a title-and-caption chart with a five-row data table.
Line Chart AI Prompt
Paste this into Claude, ChatGPT, or Figma Make:
Build a line chart card in Figma in an 800px desktop frame and a 360px mobile frame. Card: white fill, hairline border, 32px padding on desktop and 16px on mobile. Top: a ChartHeader with a title and a one-line caption. Below it a chart container, 736x364 on desktop and 328x328 on mobile, made of a ChartAxis instance (horizontal gridlines, Y labels on the left, X labels along the bottom) with one to three Line instances layered on top, each a vector path with a 2px stroke and a soft area fill. Under the chart a Legend row with a swatch and label per series, then an optional Table with a header row and three to five rows of label, value, value. Make a curved and a sharp variant of every line. Add a layout with a stat Row of three Value cards above the chart, and one with a Value badge floating inside the chart. Bind strokes and fills to chart colour variables.
Figma Line Chart
Line Chart
line chart in figma
line charts
line graph
Interactive component
Premium Figma UI Kit & design resources
Explore high-quality Figma components, templates, and UI elements.
