Figma vs. Developers - Everything you need to know about Figma

Figma vs. Developers

UX/UI Designers design, and developers programs, based on the design. And although the graphic part is on the side of designers, the programmer, willy-nilly, should also have basic knowledge of how to use graphic programs, so that cooperation on the project goes smoothly, without unnecessary questions and complications. The range of programs is large, but today we will look at one of the more popular tools these days, which is Figma.


What is Figma? - The introduction

Figma is a tool quickly conquering the giants in the field of graphic editors and it’s becoming more and more common. Unlike Adobe XD or Sketch, Figma is available in a browser-based version, so developers don't have to worry about installing the program. They also have free viewing from any device. The program resources needed for a developer to work freely do not require the purchase of a license. If you are a programmer, this article is for you! It will help you get the basic knowledge (enough) to work with Figma.


Ctrl + C isn't everything - A brief note on shortcuts

Figma on the subject of keyboard shortcuts is relatively trivial. It borrows many solutions known from other programs, such as Adobe. Most shortcuts are written for both Windows and Mac, where [Ctrl] on Windows corresponds to [Cmd] on Mac. For example, Zoom In and Zoom Out will have the shortcut Ctrl/Cmd + Scroll and copied Ctrl/Cmd + C. If you don't know a shortcut, just click on the Figma logo -> Help and account -> Keyboard shortcuts and you get a full list.

Figma keyboard shortcuts

Dark theme - the only right choice

Don't like to tire your eyes? Don't want your matrix to burn out too quickly? Nothing simpler - change the theme of Figma (and all other programs) to Dark Theme! And jokes aside, if you prefer a dark layout mode just click on Figma's logo -> Preferences->Theme->Dark and you're ready to enjoy an eye-pleasing dark layout!

Figma dark theme


First steps - the basics in Figma

Once you are added as a collaborator or "viewer" of a project in Figma, you can open it in a browser or download the applications to your computer. Don't let the desktop version fool you - it's not native! Both versions work and look almost identical. The only thing that makes them different is the browser interface aspect of the web version. If you do not display fonts in your project, and you have them installed then download the desktop version, the web version does not support system fonts.


Figma's interface is divided into 3 main groups. The top bar contains the cursor, comments, and handle(for moving around the canvas). In the panel on the left, you will find pages and layers. Each separate page is a new canvas with different file elements. The panel on the right is a collection of tools containing all the information we need in the file.

Figma panels

Project Styles

The styles in the right bar will be displayed when there is no selected element - if you don't see them, just click on the empty canvas. You can use this information to check the fonts, colors, shadows, etc. in the CSS. Just click on the settings icon next to the style to see all the information.

Figma project styles

Information about the elements

As you dig deeper into your project, there will surely come a time when you need to check the dimensions or styles of, for example, a Button or FlexBoxie (AutoLayout in Figma). Choosing the right layer in a well-ordered project is sometimes not easy, not to mention in projects where there is "disorder". The Select Layer [PPM] or layers function in the menu on the right helps in tracking down the item of interest. There is also an option to break through to a specific element by 2-clicking LPM on a layer.

Figma elements list

When we manage to reach the item we are interested in, we can "take out" information about it in the menu on the right.

Figma right menu

It should also be added that CSS is automatically generated and often has its shortcomings. I would recommend treating it as a cool form of hinting and not ready-made code to copy.


Where did I hide that measuring line? - Dimensions and measurements in Figma

You don't have to play with rectangle measurements and get angry with your designer "Because pixels are not equal" anymore. Figma leads us (designers) by the hand and hardly allows us to create distances or components that have something after the decimal point (e.g. 34.,76px).


When you want to measure the spacing between elements, just select the element to which you want to measure the distance, then hover the cursor over the other element with [ALT]/[Cmd] pressed. A common problem is with vector elements or groups - then the problem of inconsistent distances arises. If Figma doesn't let you click, for example, an entire icon, just click the element with [Alt] or [Cmd].

Figma pixels

Export, export, export!

You will probably need to export resources from Figma more than once during product development. Most often we export icons, any images, or illustrations. Before explaining "how to do it" it is worth mentioning the formats. In the case of icons or illustrations which are vector graphics(created on curves), the best choice will be SVG format. For photos, the choice will be JPG or PNG(for graphics without backgrounds).


To export an individual element or group of elements, we must first select them. Just click the element or group you are interested in and go to the export tab in the right-hand bar. For more elements, just select them with [Shift] pressed.

Communication is key - about comments in Figma

The days of taking dozens of screenshots and sending them to chat with a designer are gone. The times of pretending you didn't see the message too! Comments in Figma is a revolutionary product feedback system. Comments can be added anywhere on the design. Icona in the wrong place? - comment.

How about missing one screen? - comment. Your designer as well as the whole team will get a notification, and the comment will be visible in your Figma file. You can also tag the person to whom you are addressing your appeal, just use "@".


But how to add this comment? Just select the chat balloon icon from the top bar or press [C] and click on the appropriate place in the canvass - nothing difficult! In the sidebar, you can see a list of comments. If the task has been completed you can delete the comment or deselect it(if it has been completed).


I want to remind you that every comment is visible to those who have access to the file, so don't write silly things because the customer will see them too!

Figma cooperation

Figma is not so black as it is painted!

From now on you should be able to export items, add comments, and navigate the Figma interface seamlessly. If you need to learn more about the tool go to Figma Documentation/Figma Community or search for any content on YouTube. Also, check out our recent article UX Design - a guide for programmers.


Good luck!

Content

Got a project?

Let's talk!

__wf_zastrzeżone_dziedziczyć
Technologies
Technologies
HTML - co to?
arrow icon
3.20.2024
2 min czytania
Technologies
What is HTML?
arrow icon
3.21.2024
2 min read
Technologies
Technologies
TypeScript? - co to?
arrow icon
3.20.2024
3 min czytania
Technologies
What is TypeScript?
arrow icon
3.20.2024
3 min read
Technologies
Technologies
PHP - co to?
arrow icon
3.19.2024
1 min czytania
Technologies
What is PHP?
arrow icon
3.19.2024
1 min read
Technologies
Technologies
Swift - co to?
arrow icon
3.18.2024
5 min czytania
Technologies
What is Swift?
arrow icon
3.18.2024
5 min read
Technologies
Technologies
Kotlin - co to?
arrow icon
3.16.2024
4 min czytania
Technologies
What is Kotlin?
arrow icon
3.16.2024
4 min read
Technologies
Technologies
Vue.js - co to?
arrow icon
3.15.2024
3 min czytania
Technologies
Technologies
What is Vue.js?
arrow icon
3.15.2024
3 min read
Technologies
Technologies
JAVA - Co to?
arrow icon
3.14.2024
4 min czytania
Technologies
What is JAVA?
arrow icon
3.13.2024
2 min read
Technologies
Technologies
React Native - co to?
arrow icon
3.13.2024
3 min czytania
Technologies
What is React Native?
arrow icon
3.13.2024
3 min read
Technologies
Technologies
React.js - co to?
arrow icon
3.13.2024
2 min czytania
Technologies
What is React.js?
arrow icon
3.13.2024
2 min read
Technologies
Node.js - co to?
arrow icon
3.13.2024
1 min czytania
Technologies
What is Node.js?
arrow icon
3.13.2024
1 min read
Technologies
Technologies
JavaScript - co to?
arrow icon
3.13.2024
1 min czytania
Technologies
What is JavaScript?
arrow icon
3.13.2024
1 min read
Knowledge hub
Knowledge hub
Kim jest fullstack developer?
arrow icon
3.13.2024
1 min czytania
Knowledge hub
What is a fullstack developer?
arrow icon
3.13.2024
1 min read
Knowledge hub
Knowledge hub
Co to jest frontend?
arrow icon
3.13.2024
2 min czytania
Knowledge hub
What is frontend?
arrow icon
3.13.2024
2 min read
Knowledge hub
Knowledge hub
Co to jest backend?
arrow icon
3.13.2024
2 min czytania
Knowledge hub
What is backend?
arrow icon
3.13.2024
2 min read
Business
Business
Profesjonalna aplikacja dla firmy - 10 wskazówek
arrow icon
5.12.2023
7 min czytania
Business
Business
Doradztwo IT - korzyści dla Twojej firmy
arrow icon
3.21.2023
6 mi czytania
IT
How to get started in IT?
arrow icon
3.6.2023
7 min read
IT
WEB3 - What is it? Introduction
arrow icon
2.21.2023
4 min read
Code
Code
Czy MobX to dobra alternatywa dla Redux?
arrow icon
2.1.2023
3 min czytania
UX/UI
UX/UI
UX Design - przewodnik dla programistów
arrow icon
1.30.2023
4 min czytania
Code
Code
Podstawy React’a - stan i hook useState
arrow icon
1.26.2023
5 min czytania
Startup
Startup
Startup - z jaką firmą IT współpracować?
arrow icon
12.20.2022
11 min czytania
Business
Business
Najlepszy kraj do outsourcingu IT
arrow icon
12.12.2022
4 min czytania
Business
Business
Jak zmienić firmę programistyczną?
arrow icon
12.2.2022
4 min czytania
Business
Business
Outsourcing IT- kompletny PRZEWODNIK!
arrow icon
11.28.2022
3 min czytania
Business
Business
Team Augmentation - Korzyści!
arrow icon
11.23.2022
9 min czytania
Business
Business
W co inwestować pieniądze w 2021 roku?
arrow icon
11.21.2022
3 min czytania
Business
Business
Praca w różnych strefach czasowych. Jak to działa?
arrow icon
11.18.2022
7 min czytania
Startup
Startup
Co to jest startup? (Nowoczesne Przedsiębiorstwo)
arrow icon
11.17.2022
6 min czytania
Business
Business
Co to jest outsourcing pracowników IT i ILE kosztuje
arrow icon
11.14.2022
5 min czytania
IT
IT
Jak stworzyć aplikację mobilną?
arrow icon
11.11.2022
5 min czytania