Software Engineering :: Web :: Development :: Design :: Software :: Figma :: Training :: Figma Handbook: The Figma Design Tool - Getting started with Figma as your design tool
⪼ Made with 💜 by Polyglot.
The collaborative interface design tool. In this era of design, there are a vast number of amazing tools available. This handbook focuses on Figma. It will walk you through the whole Figma interface, at the same time it provides step-by-step instructions on how you can utilize the features provided by Figma in the best way possible. If you're our Pro user you'll get access to the asset files that you can use as a reference.
With the availability of so many design tools, it's easy to get overwhelmed when it comes to select the best one that fulfills all our needs. Here, I'd like to mention that there's no such thing called "the best" design tool. Every tool has its own set of advantages and features that makes it stand out, but we can easily search for a tool that works best for us. Mentioned below are some of the amazing design tools available to us.
- Figma
- Sketch
- Adobe XD
- Framer
- InVision Studio
Figma is called the collaborative interface design tool. And it stands out for its collaboration feature. It gives users the ability to share a design file with multiple team members and get instant feedback from each other via comments. These days most of the other design tools have also implemented the collaboration feature but Figma is the one that first brought this to the table.
Figma also provides a lot of useful resources, plugins, and techniques that make your workflow smoother.
- stands out for its collaboration features
- gives users the ability to share a design file with multiple team members and get instant feedback from each other via comments
Only a few years ago, in 2016, Figma came out as the first design tool that utilized the power and accessibility of the Web while promising the same powerful features you’d expect from a native app. They surprised everyone with their real-time collaboration feature. Designers were ecstatic to finally be able to share their designs with their co-workers and clients with zero friction, and see multiple mouse pointers drawing shapes simultaneously. It was like magic.
We’ve come a long way since. Figma has set the bar to the highest level by continuously improving and implementing new features. Today, everything exists on the Web, and Figma makes full use of it by bringing everything together for designers and developers.
Let's take a look at some of the special features that make Figma stand out.
Figma introduced a powerful new way to design vectors. Instead of connecting paths one to one, you can create web-like connections, making the whole process of creating shapes more flexible.
In Figma, most of the foundation elements are set in the Styles, which contains Colors (including gradients and images), Text, and even Effects. You can make them readily available as a Library. As you design, you can set these styles in your Inspector, for things like Text, Fill, Stroke, and Effects.
Components are building blocks for any design project. Theses are collections of elements put together in a reusable way, such as buttons, forms, navigations, cards, cells, and overlays.
Component elements like text content, colors, and images can be customized in the Inspector. A button component can be duplicated many times, with different content and styles.
Additionally, you can have Components within Components, allowing you to customize even the most complex groups of elements, like icons, states, and complex themes. In Figma, it's very easy to add different design elements as Component and publish them as customizable design assets.
Variants work slightly differently from components as they have a different naming system to organize everything. It's very important to keep in mind that only use variants when necessary if not stick to components.
It's best to use variants when dealing with multiple versions of similar components that share the same properties, such as state, size, color, etc. Also, when having two distinct variations like a toggle on/off.
Imagine Abstract, Google Docs and Sketch in a single tool. Imagine a more cohesive and smoother experience. That’s Figma.
Team Libraries allow you to share your components, styles and assets across your whole team. You can enable and disable these libraries by clicking the ON/OFF toggle anytime you want.
When discussing top UI Kits and Design Systems for Figma, it's important to consider both their popularity and functionality. Each UI Kit and Design System offers unique features and caters to different needs in the design process.
- DesignCode UI: This is a comprehensive UI kit known for its clean and modern design. It offers a wide range of components and is especially popular for its ease of use and adaptability. It's well-suited for both web and mobile applications.
- Apple Design Resources – iOS 17 and macOS Sonoma: This set offers a comprehensive collection of components, including templates for Home Screen and Lock Screen widgets, tabbed apps, parent/child apps, split views, and sheets.
- Uber Base Gallery: The Uber Base Gallery in Figma is likely a comprehensive collection of foundational design elements that form the core of Uber's design language. It probably includes a wide range of basic UI components such as buttons, icons, color palettes, typography, and form elements.
- Microsoft Fluent 2 Web: This UI kit on the Figma Community is based on Microsoft's Fluent design system, tailored for web applications.
- Untitled UI — Figma UI Kit and Design System: Known as a highly advanced UI kit for Figma, Untitled UI is meticulously crafted with features like Auto Layout, variables, smart variants, and WCAG accessibility.
Auto layout is a feature that lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This makes it possible to adapt to the changing needs of your work and helps ensure that your designs are consistent across the various screen sizes they will appear on. It's important that you know about these!
- Parents are frames that contain elements and objects of your design
- Children are the elements and objects inside the Auto Layout frame
The parent has four properties. Understanding these properties is essential. It will help you understand how your layout works and help you implement Auto Layout in the best way!
- Direction: allows your design layout either to be in Columns (Horizontal) or Rows (Vertical)
- Padding: determines the whitespace around your objects (Children)
- Spacing: controls the spacing between your objects
- Resizing: Lets you have a dynamic or fixed width
The Child layout has very few and less complex properties compared to the parent! These properties are essentially alignment and positioning controls (based on the Parent direction).
- Alignment - align objects along one axis
- Absolute position - easily position items within auto layout frames using precise controls.
- Resizing - Lets you have a dynamic or fixed width
Constraints in Figma are the same as Sketch. They allow you to set distances from the parent container. It also enables you to scale or align elements.
Figma truly is the Google docs of design tools. Once you start collaborating with fellow designers, developers, and clients in real-time on a design project, you’ll never want to go back. You can share your design with anyone and they can watch your progress, comment, and even participate as you bring your pixels to life.
In Figma, everything you do is automatically saved in history for free. You can also manually commit (Command + Option + S) versions to keep things in a neat timeline. You don’t have to think about branches because real-time collaboration allows you to ensure that nobody is stepping on each other’s toes. It’s actually a relief to not compare this too much to Git because Figma has made the whole process way less complex than Git.
You can embed your Figma Frames in your Website by getting the iFrames HTML code. This allows you to get live access to your designs.
Prototyping is an important process of design. Creating a prototype helps your engineers understand how the interactions and animations should work in the final product. Figma makes it super simple to create prototypes using transitions without downloading a third-party app.
Prototype faster with Figma. Animate transitions with ease, add micro-interactions to your flow, and use smart-animate to quickly create interactions that look great on any device.
Any document in Figma can be shared with anyone. More importantly, developers can come in and inspect design elements to get the color properties, sizes, and distances. They can select any asset and export it to PNG, SVG, or in code using Swift, Java, or CSS.
More generally, invited people can be given permission to view or to edit. This means that you can include virtually anyone in your team, including product managers, clients, and any person via a link.
The shortcuts in Figma are very similar to Sketch. Some key differences that are quite important to know:
- Command + Option + G creates a Frame for selected elements. A Frame is like an Artboard.
- Control + G to enable / disable Grid.
- K for Scale, which allows you to scale elements on the fly.
- C for Commenting. Comments are embedded in Figma directly instead of having to go through a different space.
You can open the Figma Keyboard Shortcuts by clicking the Menu bar, then going to Help and Account > Keyboard Shortcuts or you can press a shortcut Ctrl+Shift+? on your keyboard.
Find more Keyboard shortcuts organized in a friendly format at shortcuts.design.
While most tools today focus on the hype train of new features, Figma simply focuses on a solid workflow with a performance that is unmatched by its peers. This is one of the main reasons why I switched from Photoshop in the first place. For me, Figma is as fast as you can go in a design tool.
When you work 8 hours a day on a tool, every second you save counts.
Every drag of a button and every text edit feels buttery smooth at 60 frames per second. Zooming in and out is without lag.
What sets Figma apart is its collaborative and always accessible nature. Barriers such as requiring a Mac or downloading a large app is a thing of the past. Thanks to this, anyone can design and anyone can view your design, while you design. As someone who has used this daily, I cannot overstate how game-changing this is. No longer is your team relying on a third-party tool, or an increasingly complex and fragmented set of plugins, Figma simply has everything from the start. Since a lot of developers work on Windows machines, this is truly essential to keeping your team in sync. Any developer can receive a link from you, inspect the design, and get the colors, fonts, and even CSS, Swift, and SVG Code.
Preview your designs on any device. Use the Figma iOS or Android app to prototype interactions that mirror how users might interact with your designs, then share those prototypes anywhere.
How to view your prototypes from the Figma mobile app:
- Sign in to the Figma mobile app.
- Use the Recent or Search tabs to find the file or prototype you want to view.
- Tap the file or prototype to open it. From the file, press to present the prototype.
Plugins are specialized tools designed to help you use Figma to its full potential. They're made by talented designers and developers who are eager to share their passion with the greater design community. From image assets to embedding maps into your designs, plugins make it easy to add life and personality to your designs.
- You can switch your account to the community by clicking on home.
Nowadays, design tools are not vastly different from each other. The layout is similar and you’ll find the same essential features such as components, libraries, and developer handoff.
While Sketch is rich in plugins like Craft, Abstract, and Zeplin, Figma has all those tools embedded into it at the start. On top of that, while Sketch requires macOS, Figma works seamlessly with Mac, Windows, and Linux devices. Also, you can run the Figma editor directly in your browser.
Figma treats your Sketch files as first-class citizens. It is so good at importing that even an intricate and massive Library file like Angle can be imported with 95% accuracy. All the layers and symbols are kept intact.
To get started, let's head over to figma.com and sign up for a free account.
You can either use Figma directly from your browser or you can download the desktop app from the Downloads page. A specialty of Figma that you already know is Cross-Platform. It works with Mac, Windows, and also Linux devices. Download the Figma app based on your OS.
Expressing your creativity and design skills doesn't require any fixed tool. You'd pick one tool for your work, some of your other friends will choose some other tools. But when you're in a team, and all of your team members can work on the same page, that is a nice addition overall. Figma would be a great choice for your team, even for your personal uses. It has tons of features, and resources that will help speed up your workflow.