Skip to content

Commit

Permalink
feat(website): update data viz docs with plugin and license info (#4228)
Browse files Browse the repository at this point in the history
* feat(website): update data viz docs with plugin and license info

* chore: remove data viz figma image

* chore: wording change for internal tools
  • Loading branch information
serifluous authored Feb 4, 2025
1 parent f1689f3 commit 5da344e
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 6 deletions.
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import {
PieChartCaption,
LineChartCaption,
} from "../../../component-examples/DataVisualizationExamples";
import FigmaColors from "../../../assets/images/foundations/data-visualization/figma-colors.png";
import PieChart from "../../../assets/images/foundations/data-visualization/pie-chart.png";
import LineChart from "../../../assets/images/foundations/data-visualization/line-chart.png";
import DefaultLayout from "../../../layouts/DefaultLayout";
Expand Down Expand Up @@ -67,6 +66,8 @@ The easiest way to use the data visualization tokens in your charts is to use `u

Be sure to include the [Highcharts Accessibility module](/foundations/data-visualization#adding-highcharts-accessibility-module) to ensure that your charts are accessible to all users.

The design systems team maintains a Highcharts license for Twilio Console, SendGrid, Flex, Segment, and internal tools. If you are a Twilio customer building with Highcharts, you'll need [your own license](https://shop.highcharts.com/).

<LivePreview
scope={{
Highcharts,
Expand All @@ -84,13 +85,13 @@ Be sure to include the [Highcharts Accessibility module](/foundations/data-visua

### For designers

To get started incorporating our data visualization design tools into your own Twilio customer experiences and prototypes, please visit our [Design Guidelines for Paste](/introduction/for-designers/design-guidelines).
To start using data visualization in your own Twilio customer experiences and prototypes, you can use the [Highcharts Core Figma plugin](https://www.figma.com/community/plugin/1369795683946720598/highcharts-core).

The [color palette](#color-palettes) used for data visualizations is available as variables in all themes. However to use the Highcharts Figma plugin, you'll have to copy the colors into the local variables in your file according to the Highcharts plugin's theme.

The [color palette](#color-palettes) used for data visualizations are available as color styles in both the [Default Theme](https://www.figma.com/file/OZKRQFOkOAl413m5JVIYE6/Paste-Default-Theme) and [Dark Theme](https://www.figma.com/file/TZMBaCxXkX8u5aVRVYboid/Paste-Dark-Theme?node-id=0%3A1) libraries.
Not every part of a chart is themeable through the plugin, so you still won't get an exact match of charts built in production. Use the plugin for ideation purposes rather than for exact specs.

<Box maxWidth="size30" paddingBottom="space110" marginX="auto">
<Image src={FigmaColors} placeholder="blur" style={{ width: "100%", height: "100%" }} />
</Box>
Alternatively, you could use [Highcharts GPT](https://www.highcharts.com/chat/gpt/) to generate charts and SVG images to copy into Figma.

## Color palettes

Expand Down

0 comments on commit 5da344e

Please sign in to comment.