Creating New Files & Designing on a Grid

Topics covered in this Figma tutorial:

Creating a new file, Setting up frames (other apps call these artboards), Adding text, Creating colored backgrounds for text columns

Exercise Overview

In this exercise, you’ll learn how to create new files as well as how to design on a grid (such as the popular Bootstrap).

NOTE: This book has been tested with with the version of Figma available at the time of this writing. Figma can release new features or change existing ones at any time, but most things should still work the same or similarly. To see what’s new in Figma, visit tinyurl.com/figma-new

Creating a Blank New File

1. If you don’t have a Figma account (free or paid), go to figma.com and create one.

2. Launch the Figma desktop app (recommended) or visit figma.com

   NOTE: Figma can be used in a web browser, or in the Figma desktop app. For more info about the differences refer to the Introduction at the beginning of this book.

3. Login to your Figma account (if you’re not already logged in).

4. At the top left click on Drafts.

   Drafts is where your personal files go, versus a Team project (a folder). Free accounts get unlimited files in Drafts, but only 3 files in a Team project (you only get one).

5. You should be on a welcome page showing Recent files. At the top there should be options to create new files or import files:

   

6. Click New design file.
7. We need to create a frame (other apps call these artboards) to put our design in. In the Toolbar at the top left of the window, click on the Frame tool .
8. In the Design panel on the right is a list of common sizes. Expand the Desktop category, and click on Desktop to choose it.
9. Let’s add frame for a different device size. In the Toolbar at the top left, select the Frame tool again.

10. In the Design panel on the right expand the Tablet category, and click on iPad mini.

    TIP: To duplicate a frame, hold Option (Mac) or Alt (Windows) while dragging the frame’s name (at the top left).

11. At the top left of the frame, double–click on the name iPad mini and change the name to Tablet.
12. Hit Return (Mac) or Enter (Windows) to apply the name change.
13. Click once on the Desktop - 1 frame name to select it.

14. In the Design panel on the right change the width (W) to 1280 and hit Return (Mac) or Enter (Windows) to apply.

    NOTE: All measurements in Figma are in pixels, which is what we use in web and UI design. 1280–1440 pixels is a common range for the width of desktops/laptops, but we wanted you to see how to change a frame size.

15. Deselect the frame by clicking on the gray area outside the frame.

Navigating Around a File

1. Zoom in by holding Cmd (Mac) or Ctrl (Windows) and pressing the Plus(+) key a couple times.
2. Hold the Spacebar (the cursor will change to a hand icon ) and drag anywhere in the canvas to scroll around.

3. Zoom out by holding Cmd (Mac) or Ctrl (Windows) and pressing the Minus(–) key a couple times.

   NOTE: You can Zoom by hitting Plus(+) or Minus(–) without holding Cmd (Mac) or Ctrl (Windows), but that does not work when typing text. Holding Cmd (Mac) or Ctrl (Windows) always works.

4. In the Layers panel on the left, you should see a list of frames.
5. Figma lets us quickly navigate between frames in this panel. Double–click on the frame icon to the left of Desktop – 1 to go that frame and zoom to fill your screen! Do not double–click on the name, because that is how you would rename it.

6. Double–click on the frame icon to the left of Tablet to go there.

7. To view all frames again, at the top right of the window click the Zoom percentage (such as 100%) and choose Zoom to fit (or hit Shift–1).

Designing on a Grid

Designers often use grids to align elements and create a consistent visual structure for the layout. Web developers can use a grid system to code the website. While grids are not required, they are especially helpful when designing responsive sites (sites that are optimized for phones, tablets, and desktops). Grids can streamline the workflow so the design is easier to create, and then easier to code.

1. The Layers panel, double–click on the frame icon to the left of Desktop - 1 go to that frame and zoom to fill your screen.
2. In the Design panel on the right, to the right of Layout grid click the Plus(+) button.
3. To the left of Grid click the Layout grid settings button

4. In the panel that opens:

   • At the top left of the panel, click on Grid and choose Columns.
   • Set Count to 12

   • Set Gutter to 30 and hit Return (Mac) or Enter (Windows) to apply it.

     Notice the space between columns increased a bit.

   • Change Type from Stretch to Center.

   • Set Width to 60.

Using the Bootstrap Grid

Grid systems typically used by web developers have specific gutter amounts and column widths for specific screen sizes. If the developer you’ll be working with is using a particular grid system, it’s best to use a matching grid. For our design we want to use the popular 12-column Bootstrap grid. You can learn more about Bootstrap and its grid at getbootstrap.com/docs/5.3/layout/grid/#grid-options

To save you time we’ve created a Bootstrap grid template you can use, so you won’t have to measure out all the layouts grids (and add some guides that Figma’s layout grid does not make).

1. Go to the file browser:

   • In the Desktop app: Click the Home tab (Mac users can also choose File > Open File Browser).
   • In the Web app: At the top left, click the Main menu button and choose Back to files.

2. To upload a local file, click Import file.

   

   If you don’t see Import file shown above, look for the button near the top right of the window.

3. Navigate into Desktop > Class Files > Figma Class.
4. Double–click on Bootstrap 5 Grid Template.fig to choose it.
5. Once the file has uploaded, click Done.
6. In the file list, Ctrl–click (Mac) or Right–click (Windows) on Bootstrap 5 Grid Template and choose Rename.
7. Name it About Page and hit Return (Mac) or Enter (Windows) to apply the name.
8. Double–click on About Page to open it.

9. Notice there are frames with pink columns for a layout grid sized to match Bootstrap’s specs for phone, tablet, and desktop.

10. In the Layers panel on the left, you should see a list of the 3 frames.

11. Double–click on the frame icon to the left of Desktop to make it fill the screen.

Adding Text

1. We need to create a heading at the top left of the page. In the Toolbar at the top, choose the Text tool .
2. Click anywhere on the frame to create some text. Don’t worry about being exact, we’ll position it in a moment.
3. Type New York City
4. Press Esc to select the text box.

5. In the Design panel on the right:

   • In the Text section, set the font to Arial Bold (if you don’t have Arial, choose any bold font you want, or just use the default font).
   • Set the font size (to the right of the font) to 60

   NOTE: The Figma Desktop app can access the fonts installed on your Mac or PC (local fonts) as well as Google Fonts. Figma.com can only access Google Fonts, unless you either install the Figma Desktop app or the Figma font service. To learn more about accessing local fonts from Figma visit tinyurl.com/figma-local-fonts

6. As shown below, drag the text into position so the left edge aligns with the first solid pink column. It won’t snap to the column, but you can line it up visually.

   

Changing the Frame’s Background Color

Let’s change the background color for all of the frames.

1. To zoom in/out so you can see everything, at the top right of the window click the Zoom percentage and choose Zoom to fit (or hit Shift–1).
2. Click on a blank area of the canvas to make sure nothing is selected.
3. In the Layers panel on the left, click once on the Phone frame to select it.
4. In the Layers panel, Shift–click on the Desktop frame to select all three frames.

5. In the Design panel on the right:

   • Click on the Fill color’s hex code (FFFFFF) to make it editable.
   • Type 77aadd and hit Return (Mac) or Enter (Windows) to apply it.

   The frame backgrounds should become blue.

6. Click on a blank area of the canvas to deselect the frames.
7. In the Layers panel, double–click on the frame icon to the left of Desktop to zoom into only that frame.
8. We’ll be adding colored backgrounds behind the columns of text, but not the page heading, so let’s lighten it. Click on the New York City text to select it.
9. In the Design panel, click on the Fill color swatch to open the color picker.

10. Choose white and hit Esc to close the pop-up.

Adding Colored Backgrounds for Text Columns

The desktop will have two columns: a main column on the left and a sidebar column on the right. Let’s create background colors for them, starting with the sidebar.

1. To show the rulers, hit Shift–R or at the top left click the Main menu and choose View > Rulers (Mac users can choose View > Show Rulers).

2. Text and image content typically align with the pink columns. Backgrounds (such as colors, borders, etc.) typically align with the midpoint between the columns (marked by guidelines in our template).

   The gutters (empty space between the grid’s 12 columns) are 48 pixels, so there’s 24px from the pink content column to the gutter midpoint line. This provides some padding around the content of each column.

3. Hit Control–G (Mac) or Ctrl–Shift–4 (Window) to hide the layout grid or at the top left click the Main menu and choose View > Layout grids (Mac users can choose View > Show Layout grids).

4. In the Toolbar, select the Rectangle tool .

5. As shown below, draw a rectangle over the 4 columns of sidebar text.

   

6. In the Design panel:

   • Click on the Fill color swatch to open the color picker.
   • Choose white and hit Esc to close the pop-up.
   • To the right of the Fill color, change Opacity from 100% to 50%.
7. In the Layers panel, double–click on Rectangle 1 and rename it to sidebar bg.
8. In the Toolbar, select the Rectangle tool .

9. As shown below, draw a rectangle over the remaining column for the main text.

   

10. In the Design panel:

    • Click on the Fill color swatch to open the color picker.
    • Choose white and hit Esc to close the pop-up.

11. In the Layers panel, double–click on Rectangle 1 and rename it to main col bg.

Importing & Styling Text

We want to make two columns of text (a main column and a sidebar). We’ve saved each column’s text as a plain text file (.txt) so you can copy and paste into Figma.

1. To show the rulers, hit Shift–R or at the top left click the Main menu and choose View > Rulers (Mac users can choose View > Show Rulers).
2. Hit Control–G (Mac) or Ctrl–Shift–4 (Window) to hide the layout grid or at the top left click the Main menu and choose View > Layout grids (Mac users can choose View > Show Layout grids).
3. Hide or minimize Figma, so you can see the Desktop.
4. On the Desktop, go into Class Files > Figma Class > NYC and open Text - main.txt.
5. Hit Cmd–A (Mac) or Ctrl–A (Windows) to select all the text.
6. Copy it by pressing Cmd–C (Mac) or Ctrl–C (Windows).
7. Close the text file and go back to your Figma file About Page.
8. In the Toolbar at the top left of the window, click on the Text tool .

9. As shown below, drag a text box over the pink columns in the main column.

   

10. Hit Cmd–V (Mac) or Ctrl–V to paste the text.

11. Press Esc to highlight the text box (instead of highlighting the text in the box).

12. With the text box selected, In the Design panel set the following:

    

    TIP: You can hold Option (Mac) or Alt (Windows) and drag left/right over a number like text size to adjust it!

13. Click in an empty area to deselect the text.

    NOTE: Line height is the same thing as leading in print design.

    TIP: To return to the default (Auto) line height , delete the value that’s there and hit Return (Mac) or Enter (Windows).

Optional Bonus: Making the Sidebar

1. Let’s get the sidebar text we prepared for you. Switch to the Desktop.
2. Open Text - sidebar.txt (in Class Files > Figma Class > NYC).
3. Hit Cmd–A (Mac) or Ctrl–A (Windows) to select all the text.
4. Copy it by pressing Cmd–C (Mac) or Ctrl–C (Windows).
5. Close the text file and go back to your Figma file About Page.
6. In the Toolbar, click on the Text tool .

7. As shown below, drag a text box over the pink columns in the sidebar column.

   

8. Hit Cmd–V (Mac) or Ctrl–V to paste the text.
9. Click on a blank area a couple times to deselect.

10. Let’s reuse the text settings from the main column on the sidebar. Click once on the main text column to select it.

    At the top left click the Main menu and choose Edit > Copy properties (Mac users can choose Edit > Copy Properties).

11. Click once on the sidebar text column to select it.

    At the top left click the Main menu and choose Edit > Paste properties (Mac users can choose Edit > Paste Properties).

12. Let’s see how this looks without the layout grid. Hit Control–G (Mac) or Ctrl–Shift–4 (Windows) or click the Main menu and choose View > Layout Grids (Mac users can choose View > Show Layout Grids).

13. To see the design at the size it will be in a web browser, at the top right of the window click the Zoom percentage and choose Zoom to 100% (or hit Shift–0).

14. That’s it for now. Figma Files are automatically saved. To close the file:

    • In the Desktop app: Close the tab for the file.
    • In the Web app: At the top left, click the Main menu button and choose Back to files.

    NOTE: Keep in mind that when designing on Bootstrap’s grid, your design will be easier to code when you stick to the grid. You can break off the grid and do something custom, but that will require custom coding by a developer. Don’t feel restricted by the grid. Use it when you can, and break from it if needed.