figma_charts_docs

Google sheets Data Source

In order to load data from Google Sheets you have to follow the following steps.

Step 1: Open Your Google Sheets Document

Go to Google Sheets.
Open the document you want to make public or create a new one.

In the top right corner of the page, click the Share button.

In the “Share with people and groups” window, look for the section titled General Access.
Under the General Access section, click the dropdown that may say Restricted.

Step 4: Change Link Access

Select Anyone with the link. This will allow anyone who has the link to view, comment, or edit the document, depending on the access level you choose.
Choose the type of access you want to provide as Viewer - Allows people to only view the document.

Step 5: Copy the Link

Once you’ve adjusted the settings, click Copy link to copy the link to your clipboard.

Step 6: Paste the link in the Figma plugin

In the plugin window select Google sheets from the upper-right menu. An URL input should appear beneath it
Paste the Google sheets copied URL in the input. The data from the sheet should successfully be loaded

Data formatting

Depending on the type of charts you selected the data you enter in the Google sheet should look different:

Bar / Line / Area & Radar charts

Here is an example for these types of charts

	Dataset 1	Dataset 2
Label 1	25	12
Label 2	30	22
Label 3	35	34

The first line with the headers will ignore the first cell and the next cells need to contain the names of the datasets (they will be displayed in the legend)

The first colum starting from the second line will contain the names of the lables which will be displayed alongside the X axis for bar, line and area charts and around the ends for radar chart.

All the other cells from the second line and second column should contain numeric values representing data points. Each column from column number 2 represents a dataset.

You can create as many columns as you wish, but you have to make sure you respect the above mentioned rules.

Pie / Doughnut / Polar area charts

Here is an example for these types of charts

	Data
Label 1	25
Label 2	30
Label 3	35

First column from second line represents the dataset labels represented in the legend

Second column from second line should contain numeric values representing the values of a pie.

Scatter chart

Here is an example for this type of chart.

Dataset 1		Dataset 2
12	25	12	34
33	30	34	45
44	35	22	36

First line should contain the dataset names separated by one empty cell.

Second line below should contain for each dataset x and y coordinates for the scatter points. The values are below the dataset name - for example 12 and 25 represent the x and y coordinates for a point from Dataset 1.

Bubble chart