Here is how to use Figma in short: sign up free at figma.com, create a design file, draw frames for your screens, then add shapes, text and images from the toolbar at the bottom of the canvas. Turn repeated elements into components, link frames in the Prototype tab, and share the file so your team can comment. Figma runs in the browser and in desktop apps for macOS and Windows.
Welcome to the field of design, where the scope of your imagination is limitless and the opportunities are boundless. As a designer, you’ve probably seen the number of graphic design software solutions that are fighting for the attention of UX/UI designers everywhere. In the midst of fierce competition, one user-friendly tool, Figma, has been steadily surging to the front.
Figma has become the design tool of choice for both beginners and seasoned pros alike. Designers all over the world have been charmed by its intuitive interface and collaborative tools.
Figma provides a friendly and capable platform for bringing your creative ideas to life, whether you are a graphic design amateur or a seasoned pro eager to expand your horizons.
However, there is a learning curve, as there is with any software, especially if you’re new to the scene. We’ll show you the ropes of Figma and help you get up and running with the tool in no time.
Key takeaways
- Figma is a cloud-based design tool that runs in the browser and in desktop apps for macOS and Windows.
- The free Starter plan includes unlimited drafts and up to 3 shared design files, enough to learn the basics.
- Frames, shapes, text, styles and components are the core building blocks of every Figma file.
- Prototypes are built by connecting frames in the Prototype tab and played with the Present button.
- Dev Mode replaced the old Inspect tab and gives developers specs, code snippets and assets.
- One Figma account now also covers FigJam, Slides, Draw, Make, Sites and Buzz.
What Is Figma?
Figma is a popular design tool that you may have heard of if you’re part of the designer community. You may even be using it. Web designers, product teams and developers use Figma to design, prototype and hand off work in one shared file. Its best-known rival for interface work, Adobe XD, has been in maintenance mode since 2023, and Adobe has said it has no plans to invest further in it.
Figma can be used for a variety of purposes. Designing in CMYK is difficult, hence this software is exclusive to digital design. Figma’s primary operations include
- UX/ UI Design Prototyping
- Designing Applications
- Websites
- Presentations
You can also show off your creativity with the help of Figma mockup plugins. These plugins transform real websites into Figma designs and save time on repeating design types by making master templates.
Why Should You Use Figma?
There are numerous features that set this tool apart, here are some of them:
- Cloud-hosted files, so your designs do not fill up your hard drive
- Fast and dependable performance across online and desktop app interfaces
- Real-time collaboration, with several people editing the same file at once
- The Figma mobile app lets you view prototypes and mirror frames on a phone or tablet
- A free Starter plan, with paid seats when your team grows
- Desktop apps for macOS and Windows, plus full access in the browser
- Sketch files can be imported (but not the other way round)
How Much Does Figma Cost?
Figma has a free Starter plan and three paid plans: Professional, Organization and Enterprise. The Starter plan gives you unlimited files in your personal drafts, up to 3 shared design files of 3 pages each, and 30 days of version history. That is enough to learn the tool and handle small personal projects.
Paid plans are billed per seat. A Full seat covers every Figma product, a Dev seat covers Dev Mode, FigJam and Figma Slides, and a Collab seat covers FigJam and Figma Slides. Anyone who only needs to view and comment can do so for free. Prices depend on the plan, the seat type and the billing period, so check the Figma pricing page for current rates before you budget.
Verified students and educators can apply for the free Education plan, which gives classroom access to Professional features.
What Can You Create With Figma?
Although Figma’s original adopters were product designers, the software’s usefulness extends far beyond the realm of consumer goods. You can use it to make business logos, social media posts, icons, collages, marketing materials and prototypes of user interfaces.
Which Figma Products Do You Need?
Figma is no longer a single app. One account now opens a family of tools that share the same files, comments and seats, so a team can move from a whiteboard session to a finished web design without switching software. Here is what each one does:
| Product | What it does | Best for |
|---|---|---|
| Figma Design | Interface design with frames, components, variables and prototypes | UI and product designers |
| FigJam | Online whiteboard for workshops, user flows and diagrams | Whole teams, including non-designers |
| Dev Mode | Inspect specs, copy code snippets and download assets from a design file | Developers |
| Figma Slides | Build and present slide decks inside Figma | Anyone presenting design work |
| Figma Draw | Illustration tools such as brushes, transforms and effects inside Figma Design | Illustrators and brand designers |
| Figma Make | AI prompt-to-code tool that turns ideas and designs into working prototypes and apps | Testing ideas quickly |
| Figma Sites | Design, prototype and publish responsive websites | Designers building simple marketing sites |
| Figma Buzz | Create on-brand marketing assets from shared templates | Marketing and brand teams |
Figma introduced Draw, Make, Sites and Buzz at Config 2025, with Sites and Buzz launched as open betas, so check their status before you rely on them for client work. If you are learning how to use Figma for the first time, start with Figma Design and FigJam. Both are included on the free Starter plan, within its file limits, and together they cover most of what a beginner needs.
How Do You Use Figma? Step by Step
1) Create Your Account
Go to figma.com and sign up for a free account. From the file browser, create a new Figma Design file.
2) Interface
Let’s take a brief peek at Figma’s user interface.
Tools Menu: The design tools you’ll be using sit in the toolbar at the bottom of the canvas, where Figma moved them in its UI3 redesign. Look around and see what you can find:
- Move tools: Move, Hand and Scale. Move selects and repositions objects, Hand pans around the canvas without selecting anything (handy when you are zoomed in on a small section), and Scale resizes a whole object or layer in proportion.
- Region tools: Frame, Section and Slice. Frames are containers for your screens and layouts, sections group related frames and mark work that is ready for handoff, and slices mark an area you want to export.
- Shape tools: Rectangle, Line, Arrow, Ellipse, Polygon and Star, plus Place image or video, because images are added as shape fills. Shapes are useful for backgrounds, buttons and dividing a layout into sections.
- Creation tools: the Pen for precise vector paths and curves, and the Pencil for freehand drawing, sketches and quick annotations.
- Text: The Text tool (T) lets you insert, edit and format text. Click once for text that grows as you type, or click and drag for a fixed-size text box.
- Comment tools: Leave comments on any part of a design so teammates can reply in context. Full seats also get annotation and measurement tools for handoff notes.
- Actions: A searchable menu for AI tools, library assets, plugins, widgets and common commands.
The left sidebar is where you’ll find your pages, layers and assets.
Properties panel: The right sidebar shows the properties of whatever you select. It has two tabs:
- Design: size, position, layout, fill, stroke, effects and export settings
- Prototype: connections, interactions and animations between frames
The old Inspect tab for developers has been replaced by Dev Mode, which you switch on from the toolbar or with Shift + D.
3) Canvas
When you open a new design file, you’ll see the canvas. In Figma, this represents your entire working area.
4) Frames
If you’re familiar with the artboards in Adobe’s Creative Cloud applications, then you’ll feel right at home with Figma’s Frames. Press F on the keyboard to make a frame, or select the Frame tool in the toolbar. Choose from several different available defaults:
- Phone
- Tablet
- Desktop
- Watch
- Presentation
- Paper
- Social media
- Figma Community
5) Vector Shapes and Colours
From the shape tools in the toolbar, you can pick one of the predefined shapes:
- Rectangle
- Line
- Arrow
- Ellipse
- Polygon
- Star
- Images
The Pen Tool
The pen tool (P) is useful when you need to express your imagination or draw a complicated shape.
Colours
From the Fill option on the right, choose the colour to fill the shape with.
6) Layers
Every element you create appears straight away as a layer. They are listed on the left side of the page.
7) Groups
To better manage your files, you can group layers by pressing Cmd + G (Ctrl + G on Windows).
8) Pages
You can use the left-hand navigation to access the many pages you can create for your project, such as wireframes and user interface designs.
9) Images
You can just drag and drop images into the canvas to use them. By selecting the picture icon in the properties panel, you can make changes to the image’s exposure, contrast, saturation, etc. in Figma.
10) Typography
To begin writing, either press T or look for the icon in the Tools menu. Google Fonts are built into Figma. To use fonts installed on your computer, work in the desktop app, which includes Figma’s font installer, or install the font installer if you work in the browser. The properties panel allows you to modify various aspects of the text, including its size, colour, letter spacing and line height.
11) Styles
Figma’s ability to store and reuse styles for things like colour schemes, typography, drop shadows and grids is one of the software’s greatest strengths. If you apply these saved styles as you work through your frames, you’ll save a ton of time and keep your design consistent.
To save a colour style, select a layer, go to the Fill section of the properties panel, click the style icon (four dots), then click + to name and save the colour.
To make your own text styles, select a text layer and create a style from the Typography section of the properties panel. You can save grids and effects like blurs and shadows in the same way. For values that switch between modes, such as light and dark themes, Figma also offers variables.
12) Components
Components keep repeated elements, such as buttons and cards, consistent across your projects. The main component sets the properties, and every copy of it is an instance. Any change you make to the main component updates all of its instances.
To create a component, select a group of layers and either right-click and choose “Create component” or press Opt + Cmd + K (Ctrl + Alt + K on Windows).
13) Constraints
Constraints decide how a layer behaves when its frame is resized. The default constraints are Left and Top, but you can change them in the Constraints section of the properties panel. Select the items in your frame and adjust the constraints on both the horizontal and vertical axes. For layouts that adapt to their content, such as a button that grows with its label, use auto layout.
14) Keyboard Shortcuts
To work faster, open the keyboard shortcuts panel: click the “Help and resources” button (the question mark) in the lower right corner and select “Keyboard shortcuts”, or press Ctrl + Shift + ?.
15) Prototyping
A prototype is the quickest way to see how users will move through your product before anything is built. Prototyping lets you set up connections, interactions and animations, then preview the result. Here is how it works:
Connections are formed between frames and items within the frames. Open the Prototype tab in the properties panel to make the connections.
To connect to another frame, click your element or frame, then drag the circle that appears onto the destination frame.
After establishing a connection, you can view the interaction details and choose from a range of triggers, animations and micro-interactions.
To play your prototype, click the ▶ Present button at the top right of your screen.
16) Collaborating in real time
Collaborating on a project with your team in real time is made easier with these helpful tools:
Comments: Sharing feedback with your team is made easier with comments. Pick the comment tool in the toolbar or simply press C.
View access: Before sharing your design, check what access you are giving. Click the Share button and choose “can view” or “can edit” from the drop-down menu. View access suits stakeholders and clients who only need to look and comment.
Edit access: To work on designs with your design team, give them “can edit” access so they can change the file.
Dev Mode: Developers with a Full or Dev seat can open the file in Dev Mode to inspect measurements, copy code snippets and download assets.
17) Exporting Files
Figma exports in four main formats:
SVG: for vector files
PNG: for images and graphics with a transparent background
JPG: for photos
PDF: for high-quality pages
When it comes to sizing, 1x represents the actual size. You can export assets at 2x (twice the original size), 3x, 4x or any other multiplier you choose.
18) Installing Figma Plugins
If you ever wish for a certain feature or functionality in Figma, try checking out the plugin library. It’s highly likely that someone has created a plugin that does what you need.
When working on a design, open Actions from the toolbar and click the Plugins & widgets tab to search for plugins and run them without leaving your file. You can also browse the Figma Community website for plugins, widgets and templates.
From plugins that help import pictures to those that create blob shapes (one is called Blobs, in case you were curious), there’s a plugin for almost everything.
Most plugins are built by independent developers, so stick to well-reviewed ones when you work on client files.
Conclusion
To sum up, this Figma guide covers the features you need first, whether you are new to design or moving across from another tool.
The entirety of this guide has been dedicated to examining the fundamental features and capabilities that Figma provides, all with the goal of enabling the reader to produce spectacular designs and to communicate effectively with colleagues.
Keep in mind that learning Figma requires lots of practice and exploration, so don’t be afraid to try new things and test the limits of your imagination. Seek out new design ideas on a regular basis, join online design communities, and keep up with the newest changes and improvements to Figma.
If you need help, you can always contact our design team. Our team of professionals at Itzfizz Digital are dedicated to solving all your design problems. We are a UI/UX design agency that focuses on providing solutions at affordable prices without compromising on the quality.
We hope that this guide has helped you understand Figma. Let your mind wander and your creativity flow as you explore all the ways this powerful design tool may be used. Wishing you much success with your creations!
