Guide To Figma For Beginners

In Figma, you can design interface elements, build interactive websites and app prototypes, create illustrations, and work with vector graphics. Many designers also use it to build website layouts for Tilda.

• Interface for mobile applications—Figma iOS UI kit.
• Prototype of the Tesla Model 3 control panel and its interface elements.

For instance, project managers and entrepreneurs can use Gantt chart templates for planning, or create social media ads using presets for Facebook and other platforms.

• Cross-Platform

• Cloud-Based

• Built-In Feedback

Anyone with access can comment on a layout and get feedback right on the design. This speeds up the approval process and ensures important notes don't get buried in email threads.

After signing up, you'll see two primary workspaces:

1. The file manager, where you can create projects and adjust your profile settings.
2. The graphic editor itself.

Figma Community is a relatively new feature that functions like a branded social media platform within the main tool. It allows users to share and discover design resources such as templates, UI kits, and plugins. To access it, click on the globe icon.

Plugins are essentially third-party tools and extensions that broaden Figma's functionality. They help speed up workflows, improve efficiency, and provide additional features like stock image libraries, icons, etc.

For example, if you install the Unsplash plugin, you'll be able to insert stock images without leaving Figma, while Iconify gives you access to over 40 000 vector icons.

Users can develop and add plugins themselves, tailoring Figma's functionality to their specific needs.

Since Figma introduced Figma Community, plugins have become part of that interface. You can find and browse all the available plugins there.

Once you've connected the desired plugins, they're accessible through the bottom toolbar, in the Plugins and widgets tab.

A new file screen contains three main areas: The canvas, the toolbar, and two sidebars. The left sidebar contains the Layers panel. Here are some key interface items:

By default, all newly added shapes are colored gray. To change the color, select "Pick color" from the Edit dropdown menu. This will open the color picker, which lets you choose a new color by identifying any color already used on the canvas.

"Select all with…" highlights all elements sharing the same properties, fill, fonts, or effects—making batch edits easier.

This menu helps you set up the canvas, making it easier to navigate the layout. You can enable the pixel grid, show rulers, zoom in or out, etc.

To maximize the workspace, you can hide the Layers panel and interface using the corresponding options.

Objects placed on the frame are listed as "layers" on the left. You can also group objects (e.g., placing a phone number and email in the page's footer). Align elements inside the frame using the panel on the right, or group them with Object → Group Selection (Ctrl/Cmd + G).

Define the number of columns, adjust their color transparency, and customize the gutter width. You can also choose the grid type—displaying it as a grid, columns, or rows.

• Use the settings found at the top of the Properties panel to move and scale objects on the X and Y axes.
• Use the Corner radius setting under "Appearance" to round a shape's corners—for example, to make the top edges of a rectangle look like a bookmark. By default, the radius applies to all corners. To round only specific corners, click the Individual corners setting next to the value fields.

• To adjust stroke thickness, use the "Stroke" setting—enter a value or drag the slider. To hide the fill, click the eye or minus icon under "Fill."

• To make the rectangle look like a flag, extend its bottom edge. Double-click the shape to edit its points.

• "Bend tool" lets you smooth out corners or curves.
• "Paint bucket" allows to fill in a closed path.

• Fill: The image scales to completely cover the frame, ensuring no empty space remains. If the image's aspect ratio differs from the frame's, portions of the image may be cropped to maintain full coverage.

• Fit: Displays the entire image within the frame, preserving its original aspect ratio. This may result in empty space (padding) if the image and frame have different proportions.

• Crop: Allows you to manually adjust which part of the image is visible within the frame. You can reposition and resize the image to focus on a specific area, trimming away the rest. The cropped areas are hidden but not deleted, enabling non-destructive editing. ​

• Tile: Repeats the image as a pattern.

The available settings also allow you to perform photo corrections on the image—adjusting brightness, contrast, saturation, etc., or even editing a specific part of the photo.

1. Place a shape layer beneath the photo layer.
2. Select both layers.
3. Go to Object → Use as mask (shortcut: Ctrl + Alt + M on Windows, or Cmd + Opt + M on macOS).

Figma supports importing SVG files. You can drag them from your computer or copy and paste directly from Illustrator or Fresco. These files often display as frames. In the Layers panel, you can group vector objects by pressing Ctrl + G (Windows) or Cmd + G (macOS) and move them above the frame layer.

• Solid: The default fill type, applying a single color to the object.
• Linear: Creates a gradient along a straight line between two points.
• Radial: Generates a circular gradient radiating from a central point.
• Angular: Applies a gradient that rotates around a central point, creating a pie-slice effect.
• Diamond: Produces a gradient in a diamond-shaped pattern, radiating from the center.
• Image: Fills the object with an image (or video).

By modifying the positions of the gradient's endpoints, you can control the direction and intensity of the color transition.

For more creative options, try layering shapes and applying multiple gradients. You can use blending modes to stack shapes or images in unique ways.

​If the link between a parent and child component is broken, you can restore the connection by selecting the child component and clicking the Reset or Go Back icon. This action reverts any manually changed parameters, re-establishing the link to the parent component.

Save all variations in a dedicated frame, and then apply them to your text layers as needed.

• Detach the child instance from its parent using the "Detach instance" option.
• Apply Auto layout.

• Fixed: Keeps the width/height static according to manually entered parameters.
• Hug: The frame automatically resizes to fit the content.
• Fill: The element fills the parent container's width or height.​

• Wrap: Arranges items in multiple rows or columns within a frame. Objects flow horizontally and wrap to the next line when space is limited.
• Min/Max: Sets minimum and maximum dimensions for frames and child elements, preventing them from becoming too large or too small.

This plugin allows you to browse over 40 000 vector icons from Iconify, including collections like Material Design, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji, etc., and quickly insert them into your design.

• Windows: Ctrl + Shift + E
• macOS: Cmd + Shift + E

• SVG: Ideal for vector objects like icons and simple graphics due to its scalability and crispness at any size. ​
• JPEG: Best suited for photographs and images with gradients, offering good compression and quality balance.
• PNG: Preferred for images requiring transparency or images with text and sharp edges, as it supports lossless compression.
• PDF: Useful for documents and layouts that need to preserve vector elements and be scalable without loss of quality.

• Discuss projects: Collaborate in real time with voice chats and comments, and even embed music. FigJam offers AI features (currently in beta) like "Sort," which automatically organizes sticky notes by topic, and "Summarize," which provides a quick overview of all notes.
• Take notes and analyze client interviews: Designers can use a built-in template to log user interviews and then create user personas based on the collected data.
• Build customer journey maps: Visualize user paths—describe the actions they take, their expectations, emotions, and pain points. Enhance each stage of the user journey using tools like sticky notes, emojis, and other widgets.

• Requires restarting to add local fonts: Simply installing a font on your computer isn't enough. You'll need to restart Figma to load it.
• Possible export inaccuracies: Sometimes Figma randomly adds a few pixels of stroke or distorts linear illustrations when exporting PNG, JPG, or SVG files.
• No built-in copyright protection: On the free Starter plan, there's no way to prevent someone from duplicating your file and editing their own copy.
• Requires a stable internet connection: Like Google Docs or any other cloud-based service, Figma doesn't allow offline editing. If you lose your connection, changes won't be saved until you're back online.
• No custom keyboard shortcuts: The available shortcuts in Figma are fixed, but you can use third-party tools like AutoHotkey to remap keys.
• No multilingual versions: Figma is currently available only in English and Japanese. If you need it in another language, the only way is to use the Google Translate extension for Chrome. If you have experience with graphic editors like Photoshop or have followed this guide, it will be easier to get around Figma.

• Online Graphic Editor: Your whole team can work on the same file simultaneously, with all updates saved in the cloud.
• Version History: Figma stores every version change, so you can easily roll back if needed.
• No OS Constraints: Figma runs directly in a browser, so no complex setup is required and it works even on modest laptops. However, if preferred, you can also install the desktop app.
• Freemium Model: The free Starter plan supports up to two editors—perfect for many freelancers or small teams.
• Ideal for Simple Prototypes: The overall concept and interface are designed for building web and app interfaces. However, for more advanced illustration or photo editing, you might still need to use a different tool.
• Plugin Ecosystem: With hundreds of plugins available (and the ability to create your own), Figma can adapt to fit most workflows.