Figma Quick Start Guide

Figma is a collaborative interface design tool that runs in a browser. This guide introduces how to use Figma to design a diagram.

The Figma interface

For details, see the Figma tutorial.

Get started with Figma

Perform the following steps to get started with Figma.

Note:

The keyboard shortcuts demonstrated in this document are only for macOS users. For more keyboard shortcuts on macOS and Windows, see Figma keyboard shortcuts.

Step 1: Create an account

Go to https://www.figma.com/ and click Sign up to create an account.

Note:

If you have a Google account, you can click Sign up with Google to log in with the existing Google account.

Step 2: Open the tidb-sketch-book file

Click tidb-sketch-book to view the template.

Note:

• tidb-sketch-book is a Figma file that collects common shapes for diagram designs. When creating a diagram, you are recommended to use the objects and colors in this file to maintain a consistent style for diagrams.
• If you cannot open this file, contact Jingyi Chen for help.

Step 3: Create a Frame

1. Click Back to Files to see the files you can view or edit.

   

   

2. Right-click on the file and select Duplicate. You will get a new file named tidb-sketch-book (Copy).

   

   

3. Right-click on the tidb-sketch-book (Copy) file and select Rename to alter its name. In this example, the file is renamed as figma-test.

   

   

4. Double-click the file you renamed just now. Choose the Frame tool (F) and drag out an area of the screen to make a new Frame. In this example, Frame 19 is created.

   To delete a frame, choose the frame and then press Shift+Command+G.

   

   

Within this Frame, you can begin your designs.

Step 4: Design your diagram

You are recommended to copy and paste the existing objects within other Frames into the new Frame.

Note:

• To ensure a consistent style for diagrams, design a diagram based on shapes and the color scheme in the tidb-sketch-book file.
• Set text fonts to Ubuntu.

Pick a color

1. Select an object and click the Fill value in the properties panel to open the color picker.

   

2. Click the eyedropper tool icon (keyboard shortcuts: I or Ctrl+C) next to the slider to open the eyedropper tool.

   

3. Use the eyedropper to hover over the color in the Frame you want to sample. The magnifier window will show you both the color and hex code of the sampled pixel.

   

Copy and paste an object

1. Select the object you want to edit and press Command+C to copy it.

2. Select the target Frame and press Command+V to paste the object.

Copy and paste multiple objects

1. Select the layers you want to edit in the layers panel and press Command+C to copy these objects.

   

2. Select the target Frame and press Command+V to paste the objects into the current Frame.

Round corners

Select the object you want to edit and adjust the Corner Radius value in the properties panel.

Other operations

See the Figma user guide.

Step 5: Export a diagram

1. Select the Frame you want to export and click + next to the Export settings.

   Note:

   You can export a Frame (recommended), a layer, a group, or multiple layers.

   

2. Set the diagram format. You can export to PNG (recommended), JPG, SVG, or PDF.

   

3. Click the Export Frame X button below PNG to export your diagram.

   

4. Use a descriptive name for the diagram. You can use lowercase characters, numbers, and hyphens - in the name. Avoid using uppercase characters, spaces, and underscores.