Figma has become one of the most widely used interface design tools because it runs in the browser, it runs on the desktop, and it keeps every collaborator on the same version of a file in real time. Getting started does not require much, but a few early decisions about the app, the account, the layout, and the grid will save hours of confusion later. A clean setup at the beginning makes the rest of the learning curve dramatically smoother.
- The Figma desktop app offers small but meaningful advantages over the browser version, including access to locally installed fonts and a cleaner multi file workflow.
- Frames in Figma act like artboards, and choosing presets for desktop, tablet, and phone is the quickest way to set up a responsive design file.
- A twelve column layout grid gives a flexible foundation for almost any design, because twelve divides evenly into one, two, three, four, and six column arrangements.
This lesson is a preview from our Figma Masterclass Online. Enroll in this course for detailed lessons, live instructor support, and project-based training.
This is a lesson preview only. For the full lesson, purchase the course here.
The sections below walk through everything needed to move from a blank Figma account to a file that is ready for real design work. The goal is not to cover every feature, but to set up habits that support a healthy workflow from the very first document.
Browser Versus Desktop App
Figma can run as a website or as a dedicated desktop application, and functionally the two are nearly identical because the desktop app is effectively a specialized browser window pointed at Figma. Both require an internet connection. Chrome is the recommended browser when using Figma on the web, because Safari and Firefox occasionally have small rendering glitches that Chrome does not. The desktop app still has two clear advantages, and the first is access to locally installed fonts. Without the desktop app, Figma can only use the Google fonts that come bundled with it. The second advantage is convenience, because multi file workflows, downloads, and home navigation all involve a click or two less than the browser version.
Teams, Drafts, and Files
Every Figma account belongs to at least one team, and teams can be free starter teams, pro teams, or part of a larger organization or enterprise plan. Shared team projects are where files get stored when multiple people work together, while drafts are the personal space that only the current user can see. For anyone just learning the tool, working out of drafts is the simplest approach, because nothing is shared until the file is explicitly moved into a team project. Creating a new design file is as simple as clicking the design button in the top toolbar, which opens a fresh document with the left layers panel, the right properties panel, and the bottom toolbar all in place.
Creating Frames for Devices
Frames are the containers that hold everything inside a Figma file, and they can be nested as many levels deep as the design requires. At the top level, frames typically represent pages, artboards, or device screens. Selecting the frame tool exposes a list of presets on the right, which include social media graphics, phones, tablets, and desktops. For a responsive website mockup, a common pattern is to create one desktop frame, one tablet frame, and one phone frame so the design can be reviewed at all three widths.
A few practical choices that keep device frames manageable:
- For phones, consider designing at a narrower width like 375 pixels so the layout holds up on most modern devices without special casing the smallest screens.
- Rename each frame something simple like Phone, Tablet, or Desktop, rather than leaving the default iPhone or iPad labels, because short names are easier to scan in the layers panel.
- Custom sizes can always be entered directly in the width and height fields if the presets do not match the target device.
- Double click the frame icon in the layers panel to navigate directly to that frame in the viewport, which is one of the fastest ways to move around a large file.
Navigating and Aligning Frames
The zoom controls sit in the top right corner of the viewport, and a Shift plus one keyboard shortcut zooms the entire document to fit the screen. Figma uses a mix of Mac command and Windows control shortcuts for zooming in and out, but Shift one is the same on both platforms, which makes it a useful anchor. Holding the spacebar while dragging turns any active tool into a temporary hand tool for panning around the document, and the spacebar shortcut works regardless of which tool is selected. Smart guides appear automatically as frames are moved, which keeps spacing and alignment consistent without manual measurement.
Setting Up a Twelve Column Layout Grid
Layout grids are optional but highly recommended for any interface work. Selecting a frame and clicking the plus button in the layout guide section adds a default grid, and switching from the basic graph paper grid to a columns grid opens up a more practical layout tool. Twelve columns is the standard choice because twelve is evenly divisible by one, two, three, four, and six, which covers nearly every layout pattern used in responsive design. Columns do not need to be filled individually, and a design might span two, three, or four columns at a time rather than using every column as a separate piece of content.
Stretch Versus Centered Column Behavior
The layout guide settings include both stretch and centered options for columns, and the difference between the two matters a lot for responsive design. With stretch, margins and gutters are fixed while the column widths flex as the frame resizes, which works well for mid sized screens. With centered, the column width and gutter are fixed while the outer margins flex, so the content stays locked at a set width and the space around it grows or shrinks with the screen. Real world sites often combine the two, using stretch on smaller breakpoints and centered on larger breakpoints so the reading area never becomes uncomfortably wide.
Naming, Saving, and Autosave
Every Figma file has a name in the top center of the window that can be clicked and edited. Once a name is set, there is nothing else to do to save the file, because Figma autosaves continuously in the background. Closing the file or navigating back to the home view preserves every change, and version history is always available if something needs to be reverted later. Autosave is built into the collaborative nature of Figma, because multiple people can be working in the same file at the same time, and a manual save step would get in the way of that experience.
