Pandify - porady jak projektować strony internetowe, darmowe materiały, liczne inspiracje web design.

Figma – dlaczego warto z niej korzystać?

Artykuł pojawił się 05.01.2018, autorem jest Agressiva i wpadł do kategorii Design Workflow

Niecały rok temu rozpoczęłam naukę projektowania w programie Figma. To program w stylu Sketcha lub Adobe XD, który służy do tworzenia projektów stron internetowych oraz aplikacji mobilnych.

Pierwsze wrażenie

Na co dzień korzystałam z Adobe Photoshop i generalnie był dla mnie wystarczający dla każdego typu projektów jakie tworzę. Więc po co mi Figma? Otóż ten programik to połączenie tego co daje mi Photoshop, choć w bardziej uproszczonym stylu, dodatkowo z narzędziami do edycji elementów wektorowych, szczególnie SVG. Dzięki temu nie muszę otwierać dwóch dużych programów jednocześnie, które na zapleczu pochłaniają po cichu wszystkie zasoby mojego komputera 🙂 Interface Figmy bardzo przypomina ten, który spotkamy w programach konkurencyjnych. Dla mnie pierwsze spotkanie nie było idealne, ta prostota wręcz mnie troszkę zniechęciła i spowodowała, że bardzo niepoprawnie pomyślałam, że ten program niewiele może. Bardzo się myliłam.

Otóż pod tymi kilkoma buttonami i paskami z opcjami kryje się to co do projektowania designów dla webu czy appek jest najważniejsze. Tak naprawdę moje potrzeby w Photoshopie są bardzo niewielkie. Linie pomocnicze, kształty, teksty, gradienty, pakiety styli, maskowanie tła z fotką i może jeszcze kilka innych rzeczy… Jest tego mało w porównaniu do wielkości całego programu. I te najważniejsze rzeczy są w Figmie.

Z każdym update’em Figma dodaje dodatkowe bardzo praktyczne rzeczy.
Dużym plusem dla Figmy jest możliwość pracy jako team w kilka osób nad jednym tworem. Na samym początku kiedy Figmie dopiero rosły skrzydła, ta usługa była darmowa. Teraz już musimy za to zapłacić, ale nie są to tak kosmiczne pieniądze jak w przypadku pakietów Adobe.

Do wyboru na obecną chwilę mamy 3 plany:

  • Darmowy – gdzie aktywne mogą być tylko 3 projekty. Czy jest to problemowe? Nie aż tak jakby się wydawało. Wystarczy tym nadprogramowym projektom zmienić status na Draft. I już. Poza tym możemy dodać tyle userów do projektów ile potrzebujemy, prowadzić wymianę komentarzy, etc. Historia zmian będzie dostępna tylko sprzed 30 dni. Cóż jak nie płacimy to nie wymagajmy za dużo, a i tak już dostajemy sporo! Pomimo darmowego planu – otrzymujemy wszystkie narzędzia i funkcjonalność programu. Nasze projekty nie będą gorsze od tych z płatnych planów 🙂
  • Pakiet Team za $12 / program / miesiąc przy planie rocznym – tutaj mamy nielimitową historię i listę aktywnych projektów. Z userami jest podobnie jak wyżej, dodatkowo dostajemy integrację ze Slackiem i Library dla teamowych componentów. Biblioteka jest o tyle fajna, że nie mamy zbiór wspólnych stałych elementów jakie stosujemy w kreacjach i mamy do nich dostęp w dowolnej chwili.
  • Ostatni plan to Enterprise, który jeszcze nie posiada większych szczegółów, ale aby dostosować go do swoich indywidualnych potrzeb wystarczy skontaktować się z Supportem.

Figma - plany abonamentowe

Jak zacząć?

Jeżeli już jesteś zalogowany, masz dwie opcje korzystania z programu. Możesz używać go w postaci przeglądarkowej – po zalogowaniu otworzy się panel z interfacem Figmy i wszystkimi narzędziami do projektowania. Jeżeli nie czujesz potrzeby używania do tego przeglądarki jest również edycja desktopowa, wystarczy wejść na stronę z downloadem i pobrać wersje odpowiadającą Twojemu systemu operacyjnemu.

Po otworzeniu Figmy dostępny jest główny dashboard, gdzie możemy zarządzać teamem i projektami. Z tego poziomu również tworzymy nowe projekty i importujemy projekty, które trzymamy w postaci plików źródłowych Figmy. Od razu muszę powiedzieć, że każdy projekt warto wyeksportować do formatu .fig, ponieważ Figma działa idealnie dopóki mamy płynny dostęp do internetu (wszystkie nasze zasoby są magazynowane w chmurze). Zapisanie projektu lokalnie daje możliwość pracy bez połączenia z internetem.

 

U mnie w tej chwili “centrum dowodzenia” wygląda tak:

Na start dostajemy kilka gotowych materiałów w postaci UI Kitów z najpopularniejszych mobilnych systemów operacyjnych. Są one bardzo przydatne gdy projektujemy interface pod Android OS lub iOS. Nie musimy szukać jakiej wielkości są elementy stanowiące standardowe, integralne części UX tych systemów. Ja zostawiłam sobie Google Material Design – z niego najczęściej zdarza mi się korzystać.

Z Figmy bardzo aktywnie korzystam od sierpnia. Od tamtej chwili jest moim głównym programem do projektowania i tworzenia prototypów. Sprawdza się genialnie. Korzystając ze swojej dotychczasowej wiedzy pokażę jak korzystać z Figmy podczas pracy nad projektem.

Figma – tworzymy nowy projekt

Aby rozpocząć tworzenie nowego designu, należy wybrać “plus” z górnego paska narzędzi. Od razu otworzy nam się dokument gdzie możemy tworzyć widoki naszego projektu. W jednym dokumencie może znaleźć się nawet cały projekt – wszystkie widoki zależne od siebie i niezależne. Co tylko potrzebujecie. Jeden z ostatnich update’ów wniósł do programu tworzenia stron, na których możemy rozdzielać widoki projektów – póki mam projekt składający się z max 10 widoków nie jest mi to aż tak potrzebne.
Do utworzenia Widoku lub jak to nazywa Figma – “Frame” należy wybrać Frame tool. Figma od razu nam podpowiada kilka gotowych urządzeń, pod które projektujemy. Ogromną zaletą wszystkich typów jest to, że otrzymujemy projekt wektorowy. Możemy go później wyeksportować w dowolnej wielkości bez straty jakości. Co jest strasznie istotne gdy zależy nam na uzyskaniu materiałów do Case Study najwyższej jakości.

Jako, że chcę tutaj pokazać jak rozpocząć projektowanie pod web – wybieram “Desktop HD”. Otrzymuję dzięki temu “płótno” o wielkości 1440 x 1024 px. Oczywiście nie jest to wymiar ostateczny. W razie potrzeby (a taka w przypadku weba nadejdzie bardzo szybko) możemy zmienić wysokość i szerokość za pomocą pól, które znajdziemy we właściwościach danego “frame”. Każdy Widok może mieć indywidualne wymiary. Tutaj jest zupełna dowolność.

Warto na tym etapie zapoznać się z ustawieniami Widoku, ponieważ jest tu kilka ważnych rzeczy. Te ustawienia zawsze można zobaczyć klikając na nazwę Widoku w lewym panelu programu gdzie poza listą Widoków znajdą się za chwilę poszczególne warstwy tekstowe, fotograficzne i wektorowe – wszystko co tylko użyjemy w projekcie.

To co bardzo Ci się przyda spośród ustawień to wspomniane wymiary oraz Export i Layout Grid.

Export jak sama nazwa wskazuje pozwoli zapisać projekt jako PNG, JPG lub SVG. Tym pierwszym formatom można podać mnożnik powiększenia. Możemy zapisać projekt w skali 1:1, ale nie tylko:

Potrzebujesz projekt w postaci PNG o wymiarach 2 lub 3 razy większych niż wymiary robocze? Żaden problem. Dzięki tym opcjom uzyskasz taki plik w kilka chwil bez straty na jakości projektu. Wszystkie teksty, buttony, tła, etc które będziesz tworzyć domyślnie będą wektorowe.

Layout Grid to proste, ale bardzo pomocne narzędzie do tworzenia siatki gridowej dla poszczególnego Widoku. Dzięki tej siatce wszystkie elementy na designie będą równomiernie rozmieszczone. Podobną funkcjonalność ma także Photoshop, choć nieco inaczej skonstruowaną. Zarówno grid w PS jak i Figmie ma swoje wady i zalety. Najlepiej gdyby połączono obydwie wersje 🙂

W Figmie możemy utworzyć kilka gridów dla jednego Widoku. Możemy je dowolnie ukrywać i pokazywać. Może to być grid poziomy, lub popularniejszy – pionowy oraz siatka. Wszystko zależy od naszych potrzeb. Przykładowo w projekcie HotKitchen użyłam klasycznego 12 kolumnowego grida z gutterem 20px oraz poziomego, który tworzy bardzo gęsto ułożone paski o wysokości 20px. Grid może mieć dowolny kolor i krycie tła. Dzięki temu można je szybko wizualnie rozróżnić szczególnie gdy jest ich więcej. Brakuje mi tutaj możliwości ustawienia maksymalnej szerokości contentu, wycentrowania go względem Widoku i dopasowania automatycznej szerokości kolumn grida właśnie do niego. Tak jak jest w PS. Muszę natomiast w przypadku weba (Type: Center) podać konkretną szerokość kolumny. W przypadku aplikacji mobilnych lub projektów stron www, gdzie content zajmuje 100% szerokości viewport wystarczy użyć Type: Strech. Wtedy kolumny nabiorą automatycznej szerokości. To co jeszcze mnie tutaj troszkę boli: grid to paski wypełnione tłem. W Photoshopie są to linie pomocnicze, które jak nazwa wskazuje – są liniami. Dzięki temu nie mieszają się z kolorem tła i innych elementów w projekcie. Wiem, kwestia przyzwyczajenia. Ale troszkę mnie to jeszcze drażni.

Jest “frame” i grid – co dalej?

Jak w przypadku każdego nowego projektu musimy zacząć kombinować. Osobiście jestem samoukiem, z tutków filmowych lub pisanych korzystam w ostateczności kiedy już nie mogę samodzielnie znaleźć wyjścia z pojawiającego się problemu. I w Figmie póki co miałam tylko jedną taką sytuację – ale już opisałam ją wyżej (obsługa siatki gridowej).

Pokaże tutaj jak zaprojektować motyw do bloga. Podobny do Pandify.pl. Na wstępie ustawiłam grid pionowy (12 kolumn o szerokości 80px i 20 px gutter, type: center) i poziomy (wysokość 40px i 40 px gutter, type: top). Krawędzie grida podświetlają się na czerwono kiedy elementem designu do nich dotrzemy, plus posiadają “auto przyciąganie”.

 

Teraz fajnie byłoby zamieścić logo.  Możemy do Widoku bezpośrednio wrzucić wersję SVG, Figma od razu sobie z nim poradzi. Oczywiście dalej będzie to obiekt wektorowy, który możemy edytować w dowolnej chwili. Wystarczy po prostu przeciągnąć plik SVG do Widoku. Wszystkie elementy pliku SVG będą osadzone jako osobne warstwy.

Do zamieszczenia na designie menu posłuży narzędzie do tekstu. Wystarczy kursorem tekstu kliknąć w dowolnym miejscu aby utworzyć nową warstwę i zacząć pisać. Element z tekstem można ustawić, jak u mnie, jako element blokowy. Wystarczy rozszerzyć go za pomocą bocznych krawędzi i przeciągnąć. Figma z tekstem radzi sobie nieco lepiej niż Adobe PS. Robiąc taki manewr z polem tekstu nie zniekształcimy napisów i kroju fonta, jedynie zmienimy jego zakres pod względem zajmowanej przestrzeni. Bardzo lubię używać “blokowości” tekstu z wycentrowaniem contentu w poziomie. Mam wtedy pewność, że tekst znajdzie się dokładnie w tej samej linii co inne elementy w tej samej płaszczyźnie. Przydatne szczególnie przy buttonach i nawigacjach.

Mało wygodne jest jeszcze narzędzie do wyboru fonta. Niestety nie posiada podglądu ani wyboru krojów (serif, sans-serif, etc), także dobrze znać nazwy fontów i mniej więcej je kojarzyć. Poza tym posiada wszystkie niezbędne opcje do edycji tekstu.

Do utworzenia tła pod górną część layotu użyłam narzędzia do najprostszych kształtów, czyli kwadratów i prostokątów. Z białym wypełnieniem. Tło to jest oderwane od krawędzi viewport o 20px z każdej strony i posiada cień. Efekty takie jak cienie, cienie wewnętrzne, rozmycie warstwy lub rozmycie tła warstwy ustawiamy w polu Effects z prawej strony wszystkich opcji.

Za pomocą tych samych technik header “skóry” wzbogacił się o slogan oraz scenę SVG z biurkiem. Teraz przyszedł moment aby zwiększyć “płótno” na wysokość. Wystarczy w polu właściwości Widoku “H” zmienić wartość 1024 na dowolną lub chwytając kursorem za dolną krawędź Widoku rozciągnąć go do dołu.. Tutaj layout będzie dość wysoki, także u mnie ta wartość na tą chwilę zwiększyła się do 3500 px.

Plik źródłowy ze sceną biurka pochodzi z freepik.com

Mając przygotowany header layoutu warto teraz dodać siatkę z wpisami. Na samej górze mamy dwa ostatnie wpisy – nieco większe, zajmujące po 6 kolumn w siatce, niżej są 3 w rzędzie i zajmują po 4 kolumny. Schemat tworzenia w Firmie tych wpisów będzie identyczny zmieni się jedynie ich wielkość i font-size.

Do okładek wpisów użyję zdjęć z serwisu pexels.com. Wybraną fotkę kopiuję i po prostu wklejam do Widoku. Robię porządek w warstwach aby wszystko było jasno rozdzielone. Zdjęcie przez chwilę zajmuje prawie całą przestrzeń projektu. Ale to nic, chwytam za krawędź zdjęcia i ustawiam docelową szerokość na siatce i przesuwam w odpowiednie miejsce. Nie muszę przy tym trzymać Shift aby fotka nie straciła proporcji i nie została rozciągnięta. Figma w takich sytuacjach działa jak CSS bez kodu 🙂 Traktuje fotkę jak prostokąt wypełniony zdjęciem, wraz ze zmianą proporcji dostosowuje content zdjęcia do obszaru. Coś cudownego. W Adobe Photoshop już byśmy mieli rozjechane zdjęcie lub musieli używać maski i dodatkowych warstw do odpowiedniego “przycięcia” kadru. Tutaj nie musimy się o to martwić. Fotka trafiła w swoje miejsce. Zawartość dostosowała się do jej pola.

Pod zdjęciem dodaję tytuł wpisu i nazwę kategorii. Tą samą metodą co w przypadku górnej nawigacji.

Tworząc kopię tego schematu dużego wpisu pokażę jeszcze jedno magiczne narzędzie do wstawiania, a właściwie podmieniania zdjęć. Kopię wpisu tworzymy poprzez ctrl+c + crtl+v lub przeciąganie przy trzymanym shift+alt. Przesuwamy blok wpisu w wymagane miejsce. Czy chcąc wstawić inną fotkę musimy wklejać nową na nowo i ją dostosowywać do tych rozmiarów? Otóż nie. Jeżeli fotkę mamy zapisaną na dysku możemy kliknąć na warstwę ze zdjęciem, wybrać Fill czyli wypełnienie, kliknąć tym razem na miniaturkę obrazka wypełnienia. Otworzy nam się dodatkowy panel z właściwościami zdjęcia. Jak widać możemy zmienić wartości kolorystyczne zdjęcia, ale również samo zdjęcie które jest w tle naszego elementu. Po wybraniu “Change image” wybieramy inne zdjęcie z dysku. Zatwierdzamy i zostaje ono zaimportowane w to miejsce. Bez konieczności ponownego dostosowywania wielkości.

Kolejne elementy na designie są powtórzeniem tego co widać było wcześniej. Także kopiuję schematy, zmieniam zdjęcia. Dodaję jeszcze stopkę. I to w zasadzie koniec strony głównej Pandify Demo. Używając przedstawionych wyżej narzędzi jesteśmy w stanie stworzyć nowoczesne, estetyczne i spójne projekty. Dodam jeszcze, że dodatkową zaletą Figmy jest obsługa plików Sketch. Wystarczy za zaimportować. Kilka razy musiałam już z tego opcji skorzystać i nie było większych problemów. Figma bardzo ładnie zinterpretowała pliki Sketchowe. Bodajże tylko w jednym miejscu coś się rozjechało, ale nie był to problemowy błąd.

W następnej części o Figmie opiszę do czego służą komponenty, jak ich używać poprawnie i stworzyć Style Guide dla brandingu, który w przyszłości będzie wykorzystywany do tworzenia nowych elementów w layoutach.
Oraz jak przygotować prototyping projektu za pomocą Figmy, który pokaże klientowi jak powiązane są z sobą Widoki i da wyobrażenie o działaniu jego przyszłego serwisu.

Jestem ciekawa ile osób od teraz zacznie używać tego programu 😉 Ja już nie wyobrażam sobie powrotu do Adobe Photoshop w celu zaprojektowania całego layoutu. Adobe w tej chwili przydaje się jedynie do edycji zdjęć (bardziej zaawansowanej od Figmy). Bardzo, bardzo polecam Figmę!

Na podsumowanie zalety i wady Figmy, jakie wyłapałam podczas dotychczasowej pracy w tym programie.

Zalety:

  • Prostota
  • Zachowanie elementów oparte o CSS
  • Niezbędne narzędzia podczas projektowania web i mobile
  • Obsługa i edycja SVG
  • Export projektu w bardzo wysokiej jakości
  • Praca zespołowa
  • Komponenty ujednolicające styl i branding
  • Wydajność programu

Wady:

  • Mało wygodna praca z fontami (brak podglądu fontu, wyboru kategorii, etc)
  • Niewygodne pisanie słów zawierających znaki “ó” i “ć” – pod naszą kombinacją tych klawiszy kryją się w Figmie skróty do funkcji programu
  • Utrudniona praca w trybie offline

Agressiva

Od 10 lat pracuję w branży IT. Początkowo zajmowałam się tylko projektowaniem stron internetowych pod względem graficznym, ale bardzo szybko stałam się web designerem i web developerem w jednym. Poza pracą żyję też kolarstwem, street foodami i rysowaniem.

Bądź na bieżąco!

Jeżeli chcesz otrzymywać informacje o najnowszych wpisach na blogu Pandify.pl zapisz się do naszego newslettera za pomocą poniższego formularza. Obiecujemy nie wysyłać nic więcej.