A quick Guide to Figma

What is Figma?

Figma is a tool that allows for real-time collaboration and is widely used for designing user interfaces (UI) and user experiences (UX). It has gained immense popularity among designers, whether you're a beginner or a seasoned professional, Figma offers a range of features that can enhance your design workflow. It's a go-to tool for many designers due to its flexibility and ease of use.

Key Features of Figma

Collaborative design

One of Figma’s standout features is its real-time collaboration. Multiple designers can work on the same project simultaneously, making it easier to brainstorm, iterate, and refine designs with team members.

Cloud based platform

Figma is entirely cloud-based, meaning you can access your projects from any device with an internet connection. This eliminates the need for file transfers and ensures that you always have the latest version of your work.

Prototyping and design systems

Figma includes powerful tools for creating interactive prototypes and maintaining design consistency through design systems.

Plugins and integration

Figma can be extended with a wide range of plugins. Whether that be a tool for advanced animation, accessibility checks or design handoffs, there is most likely a plugin which can assist you in that. Figma also integrates seamlessly with other tools like Slack, JIRA, and Trello.

Figma vs other design tools

Design tools, like Adobe XD or Sketch, coexist with Figma in the market, and the choice between them depends on individual or team preferences and project needs.

Here is a short insight on the differences between Adobe XD and Figma:

Adobe XD offers seamless integration with other Adobe Creative Cloud apps and robust prototyping features. On the other hand, Figma is known for its collaborative capabilities, real-time cloud-based design, and platform-agnostic accessibility.

Both Figma and Adobe XD offer powerful design and prototyping capabilities. However, Figma’s collaboration features and browser-based platform provide more flexibility, especially for teams working remotely.

UX Tools - Design Tools Database

UX Tools keeps track of different design tools and gives you an insight on their features and functionalities. Click here to see full Design Tools Database.

Based on the 2023 Design Tools Survey, Figma was voted first in these categories:

• UI Design
• Basic Prototyping
• Advanced Prototyping
• Digital Whiteboarding (FigJam)
• Design Systems

Figma was also voted first in the “2024 Predictions” as the tool, designers are most excited to try in the following year.

Nonetheless, both design tools will continue to push each other to improve and step up their game. On a pretty frequent basis, you can see features that were exclusive to one appear in the other, making it harder for designers to decide which one to pick to create a top-quality product.

But if collaboration is important to you and your team, Figma is the best choice for you. It was designed with teamwork in mind, and as such, no other software will be able to compete against it any time soon.

Plugin Recommendation

Plugins are a great way to upgrade your Figma workflow, adding new functionalities and saving time on repetitive tasks.

Here are some of my favorites/most used Figma plugins:

StyleList - text and color styles

StyleList can create text and color styles very quickly, and it is easy to use. I mainly use it for text style generation. You can enter the base size, the scale you want your typography to be in, the rounding of the text size to integers and last but not least, you can choose a font.

Foundation: Color Generator

Foundation is a plugin that creates color palettes based on design systems like: Material, Atlassian, Orbit and Ant Design. I use this plugin to create my color styles, as it also displays the WCAG (Web Content Accessibility Guidelines) Levels of each generated color.

Unsplash

With the Unsplash plugin, you can insert beautiful images straight into your designs. With the plugin, you select the frame you want the image to be in, and with one click, the photo is already added.

Brandfetch

Brandfetch gives you access to almost any logo, icon, color, or front from a brand. It has saved me a lot of time, when I was creating a footer section for a design and it needed social icons.

Lorem Ipsum

With Lorem Ipsum you can generate placeholder text for your designs. There is also a feature to add images from the Unsplash archive. Using fake data, helps make your designs more realistic.

Content Reel

Content Reel is a plugin made by Microsoft, and it helps you make your designs even more realistic, using fake data which also makes sense. Whether that be a name, an e-mail, or a paragraph, they have it all. And if you are still having trouble finding what you need from existing content, you can simply add your own content, which you can then use in all your designs.

DesignDoc [Spectral]: Measures, Annotations, and Handoff

DesignDoc is a plugin that displays the measurements of your Figma designs. It helps to visualize the spacing, margins and paddings. As a developer, I find this plugin really helpful because it helps me write code more efficiently, since I don't have to click onto each Frame and check the measurements there. It is also great for developers who aren't familiar with Figma and wouldn't know where to check these measurements, that's why it's perfect for handoffs.

Keyboard Shortcuts

To navigate through Figma proficiently, you have to memorize a few keyboard shortcuts, because it saves you from any unnecessary clicking and scrolling and helps you work more quickly and efficiently.

To practice you can either make yourself a list with these or you can use this shortcut to open the shortcuts panel:

Mac: Control + Shift + ? Windows: Ctrl + Shift + ?

Here is a list of a few important keyboard shortcuts:

General

Tools

View

Of course there are many more, but these I find great for beginners, as I myself use these a lot. If you want to look into more of them, check out this Figma Shortcuts.

Community & Resources

Figma has a great community where designers share their resources, templates, and plugins. There are many places to find inspiration from and tools to enhance your workflow. Figma Elements for example.

There are also numerous tutorials and courses available, for those looking to deepen their Figma skills. Websites like Udemy, Coursera, and YouTube offer extensive lessons on mastering Figma.

I personally have completed the Figma Noob to Pro course by Asaad Mahmood. It was really beneficial, and it provided me with many realistic examples as well as exercises to practice my knowledge on. I really recommend the course to anyone who is interested in getting into UI/UX Design, especially if you want to use Figma.

My Project

To enhance my learning experience, I put all my gained knowledge to the test and I rebuilt the UI from LinkedIn.

I recreated the homepage of it, and it has a lot of interactions, like hovers and clickable items, for example an input field to click on, which opens an overlay to create a post.

I have also created the design in two modes, light and dark, using variables for the colors. You can switch between them on the top left of the prototype presentation site.

I will be looking into making a mobile version of it or adding more interactions, to make it more realistic.

But for now, take a look at the current prototype.
PS: I'd be more than happy to get feedback on the design, so leave a comment :)

Useful Links

• 📑 Figma Design - Docs
• 🎬 Figma Noob to Pro
• 🖇 Figma Shortcuts
• 🎨 Free Figma Resources, Tools and Templates