Charts: Getting started

Before importing

Create Figma account

‍I assume that you are already a happy user of Figma but if you don't have an account go to www.figma.com and sign up. If you need help with signing up, you can learn how to do it here.

Import the file

‍There are many different ways to import design files into Figma. The easiest one is to drag and drop the file into your 'Drafts' folder. If you have problems opening the file in Figma, please follow these instructions from the official Figma's help page.

Getting Started

Before you start using the UI kit, make sure you have a proper font family installed.

Install Figma Font Helper

If you're using the Figma Desktop app, any locally stored fonts are already available to you. For the browser version of Figma, follow this guide.

Download and Install SF Pro Text font

This UI Kit uses SF Pro Text font, and you can get it from here (macOS) or here (Other OS - click on the green dropdown button "Code" and select "Download ZIP"). Then install SF Pro Text fonts on your PC and restart your computer.

Customize Charts

Here you will find information on how to customize charts. Read carefully to understand how they work.

Typography

This UI Kit uses SF Pro Text font.

Font Family

Ant Design defaults to using the system font, and in the Ant Design Charts for Figma, we've integrated the “SF Pro Text” font, which is specific to Mac systems. Ant Design of React uses system font family "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'". If you'd like to employ a different font family for your Figma project, you can find instructions below.

1. Open the Local Variables panel.
2. Open the Font collection.
3. Edit the fontFamily variable and change it for your chosen font.
4. Done! After a few minutes, the font family will update for all styles and components.

Style typography

If you need to customize typography by adjusting their size or weight, you can change these properties in the right sidebar. Please read the instructions below to learn how to do so.

To customize text styles:

1. Go to the right sidebar.
2. Click on "Edit style" next to the text style you want to customize.
3. Here, you can change its properties.

To add a new text style:

1. Click on the plus icon near Local styles.
2. Choose the style you want to add (e.g., "Text").
3. Name your new style. It's beneficial to maintain file organization by following the naming conventions used for other styles, such as "Text Big / Regular."
4. Choose the font you want to use for this style from the list or select a font family from variables (accessible by clicking the variable icon in the top bar of the font settings).
5. Adjust the weight to "Regular."
6. Set the desired size, for example, 16px.

These steps ensure a well-organized file where you can easily manage and customize text styles.

Colors

This file employs various colors for chart lines and labels, alongside specific color schemes designed for chart representation.

Base, Palette and Spectral group of colors

The Base group includes fundamental chart elements such as axes and labels.

Additionally, the Palette and Spectral groups are designated for specific chart representation purposes. These groups are organized into three distinct themes: Classic, Classic-Dark, and Academic.

Editing colors

If you need to customize colors, you can do so in the Local Variables panel. Please read the instructions below to learn how.

To customize color:

1. Open the Local Variables panel.
2. Navigate to the Color collection.
3. Right-click on the color you want to change.
4. Choose "Edit variable" or customize it directly in its row.

To add a new color:

1. Open the Local Variables panel.
2. Navigate to the Color collection.
3. Click on "Create variable" at the bottom.
4. Choose which variable you want to add. Click e.g. "Color" and customize your variable.

Charts

Charts are made up of Base Components and Canvases. Base components contain fundamental elements such as the X-Axis, two Y-Axes, Legend and a Header with a Title and Subtitle. In contrast, the Canvas is a space for different kinds of Charts, such as Line, Area, Bar, or Column Charts.

How to use Charts?

You can customize charts as needed by adjusting the number of columns and rows, choosing whether to include a Legend, or adding a second Y-Axis or color to background.

To choose type of chart:

1. Take an instance of the main component of the Chart. You can do this by holding "Alt" and dragging the element to the desired location.
2. Click on the instance.
3. Now you can choose the type of component on the right sidebar.

To change properties in base component:

1. Select the Chart you want to modify.
2. Double-click to see the settings of the Base Component on the right sidebar.
3. By clicking on toggles, you can hide or show Axis Items, Descriptions, Ruler Y, and the Header. You can also decide where the Legend should be placed or hide it by selecting the "Off" option, and align the X Axis to the center or left.

To edit Axis items:

1. Select the Chart you want to modify.
2. Go to the left sidebar and find the Axis you want to modify.
3. Open it.
4. Select one or more Axis Items by holding Shift.
5. Then, go to the right sidebar.
6. Depending on the Axis you want to modify:
   • For the X-Axis, you can show or hide Labels, Tick Lines, Grids, Rulers, rotate text by 180 degrees, and add text.
   • For the Y-Axis, you can show Labels, Grids, Tick Lines, choose between number and text label types, and add text labels.

Similarly, you can adjust properties of Radial Charts Base. However, Tiny Chart Base only accommodates canvases internally.

How to scale Charts?

Our charts are responsive, so you can resize them in any direction and adjust them to the dimensions you need.

An exception is made for charts like Pie, Venn, Radar, Radial, Gauge, and Polar Violin Plot, Basic Tiny Ring Progress which should be scaled differently due to Figma's limitations. Follow the instructions below:

To scale specific charts:

1. Select the chart you want to scale from the list above.
2. Hold the Shift key.
3. Grab a corner of the chart and, while holding Shift, resize the chart. It will scale proportionally.

How to customize Ant Design Charts for Figma so it matches the Ant Design System for Figma styling?

Ant Design Charts and Ant Design of React are two separate libraries in the Ant Design ecosystem. In Figma, both files are also separate libraries. To ensure consistency in color schemes, you need to customize them separately in both Figma and the code.

Follow these steps to customize them in Figma:

1. Open the Ant Design System for Figma.
2. Customize the colors according to your preferences.
3. Open the Ant Design Charts for Figma.
4. Customize the colors in the charts to match the ones set in the Ant Design System.

How to use Ant Design Charts for Figma and Ant Design System for Figma in one project?

1. Publish the Ant Design Charts for Figma file to your team workspace in Figma.
2. Publish the Ant Design System for Figma file to your team workspace in Figma.
3. Create the new file in your Figma workspace.
4. Open the new file.
5. Click the book icon to open the Libraries menu.
6. Search for Ant Design Charts for Figma and click Add to file.
7. Search for Ant Design System for Figma and click Add to file.
8. Navigate to the charts section in the library panel.
9. Drag and drop the chart component you need into your design canvas.