Figma vs. Programiści - Wszystko co musicie wiedzieć o Figmie

Figma vs. Programiści

UX/UI Designerzy projektują, a programiści na podstawie projektu - programują. I chociaż część graficzna jest po stronie designerów, to programista, chcąc nie chcąc, również powinien mieć podstawową wiedzę na temat obsługi programów graficznych, tak, aby współpraca nad projektem przebiegała płynnie, bez zbędnych pytań i komplikacji. Wachlarz programów jest duży, jednak dzisiaj zajmiemy się jednym z popularniejszych ostatnimi czasy narzędzi jakim jest Figma.

Czym jest Figma? - Wprowadzenie

Figma to narzędzie, które szybko “podgryza” gigantów w dziedzinie edytorów graficznych i staje się coraz powszechniejsze. W przeciwieństwie do Adobe XD czy Sketcha, Figma dostępna jest w wersji przeglądarkowej, dzięki czemu programiści nie muszą przejmować się instalowaniem programu. Mają też swobodny podgląd z każdego urządzenia. Zasoby programu potrzebne do swobodnej pracy developera nie wymagają kupna licencji. Jeśli jesteś programistą, ten artykuł jest dla Ciebie! Pomoże Ci w uzyskaniu podstawowej (wystarczającej) wiedzy, aby pracować z Figmą.

Ctrl + C to nie wszystko - Krótka uwaga na temat skrótów

Figma w temacie skrótów klawiaturowych jest dość trywialna. Zapożycza ona wiele rozwiązań znanych między innnymi z programów Adobe. Większość skrótów jest napisana zarówno dla systemu Windows, jak i Mac, gdzie [Ctrl] w Windowsie odpowiada [Cmd] na Mac’u. Przykładowo Zoom In i Zoom Out będzie mieć skrót Ctrl/Cmd + Scroll, a kopiowane Ctrl/Cmd + C. Jeśli nie znamy jakiegoś skrótu wystarczy kliknąć w logo Figmy -> Help and account -> Keyboard shortcuts i dostajemy pełen spis.

figma skróty

Dark theme - jedyny słuszny wybór

Nie lubisz męczyć swoich oczu? Nie chcesz, żeby twoja matryca przedwcześnie się wypaliła? Nic prostszego - zmień motyw Figmy (i wszystkich innych programów) na Dark Theme! A już odchodząc od żartów, jeśli preferujesz ciemny tryb layoutu wystarczy że klikniesz w logo Figmy -> Preferences->Theme->Dark i już możesz cieszyć się przyjemnym dla oka ciemnym layoutem!

figma tryb jasny i ciemny

Przedszkole - Czyli podstawy w Figmie

Gdy zostaniesz dodany jako współpracownik lub “widz” projektu w Figmie, możesz go otworzyć w przeglądarce lub pobrać aplikacje na komputer. Niech cię nie zmyli wersja desktopowa - nie jest natywna! Obie wersje działają i wyglądają niemal identycznie. Jedyne co je różni to aspekt interfejsu przeglądarki w wersji webowej. Jeśli nie wyświetlają ci się fonty w projekcie, a masz je zainstalowane, to pobierz wersję desktopową - wersja webowa nie wspiera systemowych czcionek.

Interfejs Figmy podzielony jest na 3 grupy główne. Pasek górny zawierający kursor, komentarze i rączkę (do przemieszczania się po canvie). W panelu po lewej, znajdziesz strony i warstwy. Każda osobna strona to nowy canvas z innymi elementami pliku. Panel z prawej storny to zbiór narzędzi zawierający wszystkie informacje, które potrzebujemy w pliku.

figma aplikacja webowa

Style Projektu

Style w prawej belce będa wyświetlane w momencie braku zaznaczonego elementu - jeśli ich nie widzisz wystarczy kliknąć w pusty canvas. Możesz użyć tych informacji aby sprawdzić czcionki, kolory, cienie etc. w CSS. Wystarczy kliknąć w ikone ustawień obok stylu, aby wyświetlić wszystkie informacje.

figma style

Informacje o elementach

Podczas zagłębiania się w projekt na pewno przyjdzie czas, w którym będziesz miał potrzebę sprawdzić wymiary lub style np. Przycisku lub FlexBoxie’a (AutoLayout w Figmie). Wybór odpowiedniej warstwy w dobrze uporządkowanym projekcie to czasem nie łatwa sprawa, nie mówiąc o projektach, w których panuje “nieład”. W namierzeniu interesującego nas elementu pomaga funkcja Select Layer [PPM] lub warstwy w menu po prawej stronie. Jest też opcja przebicia się do konkretnego elementu 2-klikiem LPM w daną warstwę.

figma select layer

Kiedy uda nam się dotrzeć do interesującego nas elementu możemy “wyjąć” informacje o nim w menu po prawej stronie.

figma css code

Należy również dodać, że CSS jest generowany automatycznie i często ma swoje mankamenty. Zalecałbym traktować to jako fajną formę podpowiedzi a nie gotowy kod do skopiowania.

Gdzie ja schowałem tą linijkę? - Wymiary i pomiary w Figmie

Nie musisz już bawić się w pomiary prostokątami i gniewać się na swojego designera “Bo piksele są nierówne”. Figma prowadzi nas (designerów) za rękę i mało kiedy pozwala nam tworzyć odległości lub komponenty, które mają coś po przecinku (np. 34.,76px).

Kiedy chcesz zmierzyć odstępy miedzy elementami, wystarczy wybrać element, do którego chcesz mierzyć odległość, a następnie najechać kursorem na drugi element z wciśniętym [ALT]/[Cmd]. Częstym problemem są elementy wektorowe lub grupy - wtedy pojawia się problem niespójnych odległości. Jeśli Figma nie pozwala ci kliknąć np. całej ikony, wystarczy że klikniesz element z [Alt] lub [Cmd].

figma pomiary i odstępy

Eksport, eksport, eksport!

Prawdopodobnie podczas developmentu produktu nie raz będziesz musiał/a wyeksportować zasoby z Figmy. Najczęściej eksportujemy ikony, wszelkie zdjęcia lub ilustracje. Przed wytłumaczeniem “jak to zrobić” warto wspomnieć o formatach. W przypadku ikon czy ilustracji które są grafikami vectorowymi (stworzonych na krzywych), najlepszym wyborem będzie format SVG. W przypadku zdjęć wybór padnie na JPG lub PNG (przy grafikach pozbawionych tła).

Aby wyeksportować poszczególny element lub grupę elementów musimy najpierw je zaznaczyć. Wystarczy kliknąć interesujący nas element lub grupę i przejść do zakładki eksportu w prawej belce. W przypadku wiekszej ilości elementów wystarczy zaznaczać je z wciśniętym [Shift].

figma export pliku

Komunikacja to podstawa - o komentarzach w Figmie

Czasy robienia dziesiątek screenów i wysyłania na chat z designerem minęły. Czasy udawania, że nie widziało się wiadomości też! Komentarze w Figmie to rewolucyjny system feedbacku o produkcie. Komentarze można dodać w dowolnym miejscu na projekcie. Icona w złym miejscu? - komentarz. A może brak jednego ekranu? - komentarz. Twój designer jak i cały team dostanie powiadomienie, a komentarz będzie widoczny w waszym pliku Figmy. Możesz też oznaczyć osobę do której kierujesz swój apel, wystarczy użyć “@”.

Ale jak dodać ten komentarz? Wystarczy, że wybierzesz z górnej belki ikonę dymku chatu lub naciśniesz [C] i klikniesz w odpowiednie miejsce w canvie - nic trudnego! W belce bocznej możesz zobaczyć listę komentarzy. Jeśli zadanie zostało wykonane, możesz usunąć komentarz lub odznaczyć (w przypadku wykonania go).

Przypominam że każdy komentarz jest widoczny dla osób, które mają dostęp do pliku, więc nie pisz głupot bo klient zobaczy!

figma dodawanie komentarzy

Nie taka Figma straszna jak z nią pracują!

Od tej pory powinieneś być w stanie bezproblemowo eksportować elementy, dodawać komentarze i nawigować po interfejsie Figmy. Jeśli miałbyś potrzebę dowiedzieć się więcej o narzędziu wejdź na Dokumentacje Figmy/Figma Community lub wyszukaj dowolne treści na YouTube. Sprawdź również nasz ostatni artykuł UX Design - przewodnik dla programistów.

Powodzenia!

Content

Got a project?

Let's talk!

__wf_zastrzeżone_dziedziczyć
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
IT
IT
Jak testują programiści?
arrow icon
11.10.2022
2 min czytania
Code
Code
Rust to przyszłość Server Side
arrow icon
11.8.2022
1 min czytania
Code
Code
Dlaczego nie jestem fanem TypeScript
arrow icon
11.7.2022
3 min czytania
Business
Business
Jak wybrać firmę programistyczną? Czym się kierować?
arrow icon
11.6.2022
7 min czytania
UX/UI
UX Design - a guide for programmers
arrow icon
1.18.2023
4 min read
Business
Team Augmentation- Benefits!
arrow icon
1.4.2023
11 min read
Business
How to choose a programming company?
arrow icon
12.22.2022
8 min read
IT
How do programmers test?
arrow icon
12.18.2022
2 min read
IT
How to find good programmers?
arrow icon
12.15.2022
4 min read
Startup
What is a startup?
arrow icon
12.7.2022
7 min read
Code
Rust is the future of Server Side
arrow icon
12.1.2022
1 min read
IT
How to make a mobile app?
arrow icon
11.30.2022
5 min read
Business
How to work in various time zones?
arrow icon
11.27.2022
7 min read
We use cookies. By continuing to browse the site you are agreeing to our privacy policy.