Creating New Files & Designing on a Grid

Topics Covered in This Figma Tutorial:

Creating a New File, Setting up Frames (called Artboards in other design applications), Adding Text, Creating Colored Backgrounds for Text Columns

Exercise Overview

In this comprehensive exercise, you'll master the fundamentals of creating new files in Figma while learning to design using professional grid systems—specifically the widely-adopted Bootstrap framework. Grid-based design isn't just a theoretical concept; it's the backbone of how modern websites and applications maintain visual consistency across multiple screen sizes and devices.

NOTE: This tutorial has been tested with the current version of Figma available at the time of this writing (2026). While Figma regularly releases updates and new features, the core functionality covered here remains consistent. For the latest feature updates and changes, visit tinyurl.com/figma-new

Creating a Blank New File

1. If you don't have a Figma account (free or paid), navigate to figma.com and create one. The free tier provides robust functionality for individual designers and small projects.

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

   NOTE: Figma operates both as a web application and desktop app. The desktop version offers enhanced performance and access to local fonts, while the web version provides universal accessibility. For detailed comparisons, refer to the Introduction section of this book.

3. Log in to your Figma account (if you're not already authenticated).

4. At the top left, click on Drafts.

   Understanding Figma's file organization: Drafts serve as your personal workspace for individual projects, while Team projects function as shared folders. Free accounts receive unlimited files in Drafts but are limited to 3 files within a single Team project.

5. You should see a welcome page displaying your Recent files. At the top, you'll find options to create new files or import existing ones:

   

6. Click New design file.
7. Now we'll create a frame—Figma's equivalent to artboards in other design applications. In the Toolbar at the top left, click the Frame tool .
8. In the Design panel on the right, you'll see a comprehensive list of preset sizes for common devices. Expand the Desktop category and select Desktop.
9. Let's add a frame for a different device to practice responsive design principles. Select the Frame tool again from the toolbar.

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

    TIP: To duplicate any frame quickly, hold Option (Mac) or ALT (Windows) while dragging the frame's name from the top-left corner—a time-saving technique for creating multiple viewport sizes.

11. Double-click on the frame name iPad mini at the top left and change it to Tablet for clearer organization.
12. Press Return (Mac) or Enter (Windows) to confirm the name change.
13. Click once on the Desktop—1 frame name to select it.

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

    NOTE: Figma uses pixels as the standard unit of measurement, aligning with web and UI design conventions. Desktop widths typically range from 1280-1440 pixels, representing the most common laptop and desktop screen resolutions in 2026.

15. Deselect the frame by clicking on the gray canvas area outside any frame boundaries.

Now that you've established your basic workspace, let's explore how to navigate efficiently within your design file.

Navigating Around a File

1. Zoom in by holding Cmd (Mac) or CTRL (Windows) and pressing the Plus(+) key several times to get closer to your design details.
2. Hold the Spacebar (notice the cursor transforms into a hand icon ) and drag anywhere on the canvas to pan around your workspace—essential for navigating large design files.

3. Zoom out by holding Cmd (Mac) or CTRL (Windows) and pressing the Minus(–) key to return to a broader view.

   NOTE: While you can zoom using Plus(+) or Minus(–) alone, this method fails when editing text. Using Cmd (Mac) or CTRL (Windows) ensures consistent functionality regardless of your current tool or context.

4. Examine the Layers panel on the left side—this hierarchical view shows all frames and objects in your current file, functioning as your design's table of contents.
5. Figma provides quick frame navigation through the Layers panel. Double-click the frame icon next to Desktop – 1 to zoom directly to that frame and fill your screen. Avoid double-clicking the name itself, which triggers rename mode.

6. Similarly, double-click the frame icon next to Tablet to navigate there instantly.

7. To view all frames simultaneously, click the zoom percentage (such as 100%) at the top right and select Zoom to fit, or use the keyboard shortcut Shift–1—invaluable for getting the big picture of your design system.

With navigation mastered, we'll now explore grid-based design—a cornerstone of professional web and application design that ensures consistency and improves development workflow.

Designing on a Grid

Professional designers rely on grid systems to create visual hierarchy, maintain alignment, and establish consistent spacing throughout their designs. Web developers leverage these same grid systems during development, creating a seamless handoff between design and code. While grids aren't mandatory, they're particularly crucial for responsive design—websites and applications that adapt seamlessly across phones, tablets, and desktop computers. A well-implemented grid system accelerates both the design process and subsequent development work, reducing miscommunication and implementation time.

1. In the Layers panel, double-click the frame icon next to Desktop—1 to focus on that frame with screen-filling zoom.
2. In the Design panel on the right, locate Layout grid and click the Plus(+) button to add a grid system to your frame.
3. Click the Layout grid settings button to the left of Grid to access detailed configuration options.

4. Configure your grid settings in the panel that appears:

   • At the top left, click Grid and select Columns to create a columnar layout system.
   • Set Count to 12—the industry standard that provides maximum layout flexibility.

   • Set Gutter to 30 and press Return (Mac) or Enter (Windows). Notice how the spacing between columns increases, providing better visual separation.

   • Change Type from Stretch to Center to create a centered grid that doesn't extend to frame edges.

   • Set Width to 60 to define individual column width.

While custom grids work for many projects, using established frameworks like Bootstrap ensures your designs translate smoothly to development and follow industry best practices.

Using the Bootstrap Grid

Grid systems used by web developers feature specific measurements and breakpoints optimized for different screen sizes. Bootstrap, maintained by Twitter's original development team, remains the most widely adopted CSS framework in 2026, powering millions of websites globally. When collaborating with developers using Bootstrap or similar frameworks, aligning your design grid with their development grid eliminates guesswork and reduces implementation time. You can explore Bootstrap's complete grid specifications and responsive breakpoints at getbootstrap.com/docs/5.3/layout/grid/#grid-options

To streamline your workflow, we've prepared a Bootstrap-compliant grid template with precise measurements and additional guides that Figma's standard layout grid doesn't include.

1. Navigate to the file browser:

   • In the Desktop app: Click the Home tab (Mac users can also access this via File > Open File Browser).
   • In the Web app: Click the Main menu button at the top left and select Back to files.

2. To upload the template file, click Import file.

   

   If the Import file option isn't visible above, look for the button near the top right of your window.

3. Navigate to Desktop > Class Files > Figma Class.
4. Double-click Bootstrap 5 Grid Template.fig to select and import it.
5. Once the upload completes, click Done.
6. In your file list, CTRL–click (Mac) or Right–click (Windows) on Bootstrap 5 Grid Template and choose Rename.
7. Rename it to About Page and press Return (Mac) or Enter (Windows) to confirm.
8. Double-click About Page to open your new project file.

9. Examine the three frames, each featuring pink column guides precisely calibrated to Bootstrap's specifications for phone (mobile-first), tablet, and desktop breakpoints—the foundation of modern responsive design.

10. The Layers panel on the left displays all three responsive frames in your design system.

11. Double-click the frame icon next to Desktop to focus on the desktop layout and fill your screen with this frame.

Adding Text

1. We'll start by creating a prominent heading for the top left of our page. In the toolbar at the top, select the Text tool .
2. Click anywhere within the frame to create a text object. Don't worry about precise placement—we'll position it properly in the next step.
3. Type New York City
4. Press Esc to exit text editing mode and select the text container.

5. In the Design panel on the right, configure the typography:

   • In the Text section, set the font to Arial Bold. If Arial isn't available, choose any bold font or use Figma's default font.
   • Set the font size (the field to the right of the font name) to 60 to create a strong visual hierarchy.

   NOTE: The Figma Desktop app accesses both local fonts (installed on your computer) and Google Fonts, providing maximum typography flexibility. Figma.com (web version) can only access Google Fonts unless you install the desktop app or Figma font service. For comprehensive font access information, visit tinyurl.com/figma-local-fonts

6. Position the heading by dragging it so the left edge aligns with the first solid pink column, as shown below. Visual alignment is sufficient—precise pixel positioning isn't necessary at this stage.

   

With our primary heading in place, let's establish the visual foundation by customizing the background colors that will help define our content areas.

Changing the Frame's Background Color

Let's establish a cohesive color scheme by updating the background color across all frames in our responsive design system.

1. To view the complete design system, click the zoom percentage at the top right and choose Zoom to fit (or use the shortcut Shift–1).
2. Click on a blank area of the canvas to ensure no objects are currently selected.
3. In the Layers panel on the left, click once on the Phone frame to select it.
4. Hold Shift and click on the Desktop frame in the Layers panel to select all three frames simultaneously—a efficient way to apply consistent styling across multiple objects.

5. In the Design panel on the right:

   • Click on the Fill color's hex code (FFFFFF) to make it editable.
   • Enter 77aadd and press Return (Mac) or Enter (Windows) to apply this professional blue tone to all frame backgrounds.

   All frame backgrounds should now display a cohesive blue color, creating visual unity across your responsive design system.

6. Click on a blank canvas area to deselect all frames.
7. In the Layers panel, double-click the frame icon next to Desktop to focus solely on the desktop layout.
8. Since we'll be adding colored backgrounds behind content columns (but not the page heading), let's improve the heading's contrast and readability. 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 interface.

10. Choose white and press Esc to close the color picker, creating optimal contrast against the blue background.

Now we'll create distinct content areas using background colors—a technique that helps users scan and organize information while maintaining our grid-based structure.

Adding Colored Backgrounds for Text Columns

Our desktop layout will feature a two-column structure: a primary content area on the left and a complementary sidebar on the right. This layout pattern appears across countless websites because it balances comprehensive content with supplementary information. Let's create background colors to visually separate these content areas, starting with the sidebar.

1. Enable rulers for precise alignment by pressing Shift–R or clicking the Main menu at the top left and choosing View > Rulers (Mac users select View > Show Rulers).

2. Understanding grid alignment principles: Content (text and images) typically aligns with the pink column guides, while backgrounds, borders, and containers align with the midpoint between columns—marked by guidelines in our template.

   The gutters (empty space between our 12 columns) measure 48 pixels wide, creating 24 pixels of breathing room from each pink content column to the gutter midpoint. This padding prevents cramped layouts and improves readability.

3. Hide the layout grid to focus on content placement by pressing Control–G (Mac) or CTRL–Shift–4 (Windows), or click the Main menu and choose View > Layout grids (Mac users select View > Show Layout grids).

4. Select the Rectangle tool from the toolbar.

5. Draw a rectangle covering the rightmost 4 columns where sidebar content will appear, as demonstrated below:

   

6. Configure the sidebar background in the Design panel:

   • Click the Fill color swatch to open the color picker.
   • Select white and press Esc to close the picker.
   • Adjust the opacity from 100% to 50% to the right of the Fill color, creating a subtle overlay that doesn't overwhelm content.
7. In the Layers panel, double-click Rectangle 1 and rename it to sidebar bg for better organization.
8. Select the Rectangle tool again.

9. Create a rectangle covering the remaining 8 columns for the main content area, as shown below:

   

10. Style the main content background in the Design panel:

    • Click the Fill color swatch to open the color picker.
    • Choose white and press Esc to close the picker, maintaining full opacity for maximum content contrast.

11. In the Layers panel, double-click Rectangle 1 and rename it to main col bg to maintain clear layer organization.

With our background structure established, we're ready to add actual content that demonstrates how real text flows within our grid system.

Importing & Styling Text

We'll now populate our layout with realistic content using a two-column text structure: a comprehensive main column and a focused sidebar with supplementary information. To save time and demonstrate real-world workflow, we've prepared the text content as plain text files (.txt) that you can easily copy and paste into Figma—mimicking how content often arrives from clients, copywriters, or content management systems.

1. Ensure rulers are visible by pressing Shift–R or clicking the Main menu at the top left and selecting View > Rulers (Mac users choose View > Show Rulers).
2. Hide the layout grid to focus on text placement by pressing Control–G (Mac) or CTRL–Shift–4 (Windows), or access View > Layout grids from the main menu (Mac users select View > Show Layout grids).
3. Minimize or hide Figma to access your desktop files.
4. Navigate to Desktop > Class Files > Figma Class > NYC and open Text—main.txt.
5. Select all text using Cmd–A (Mac) or CTRL–A (Windows).
6. Copy the selected text with Cmd–C (Mac) or CTRL–C (Windows).
7. Close the text file and return to your About Page in Figma.
8. Select the Text tool from the toolbar at the top left.

9. Create a text box by dragging across the pink column guides in the main content area, as illustrated below:

   

10. Paste the copied text using Cmd–V