Dzisiaj przyszedł czas na aplikację Figma, która nijak ma się do poprzednio omawianego narzędzia – Principle (tu możecie przeczytać o nim więcej: http://zebza.net/ui-tools-principle-i-10-znizki-na-kurs/). Przede wszystkim Figma jest narzędziem stricte projektowym, dającym duże możliwości i co najważniejsze – nieograniczonym do jednej platformy. Nie musicie nawet jej pobierać, bowiem jest aplikacją webową (choć ma również wersję desktopową. Jedyne czego potrzebujecie to przeglądarka i dostęp do Internetu.
Tylko online
No właśnie… Internet. Z jednej strony jest wszędzie, z drugiej zdarza mi się pracować w miejscach, które nie mają absolutnie żadnego zasięgu – i wtedy klapa. Aplikacja jest dla mnie bezużyteczna, ponieważ nawet wersja desktopowa potrzebuje połączenia z Internetem. Jest to dość skrajny przypadek i pewnie zdecydowana większość z Was pracuje w domach, w biurach, gdzie Internet stały jest i kropka. Warto jednak po prostu o tym pamiętać – nie macie połączenia = nie możecie pracować.
Pierwszy rzut oka
Na pierwszy rzut oka wszystko wygląda całkiem znajomo (zwłaszcza jeśli korzystaliście ze Sketcha lub Adobe XD). Interfejs dzieli się na cztery części – górny pasek podstawowych narzędzi, lewy pasek warstw, prawy właściwości obiektów i główny – roboczy. Jeżeli pracowaliście w jakimkolwiek programie graficznym, korzystanie z tej aplikacji nie powinno być problemem. Nie ma tu jakichś dziwnych, niezrozumiałych rozwiązań, więc poruszanie się po aplikacji jest po prostu intuicyjne.
Layout grid i RWD
Projektując aplikację czy stronę internetową musimy mieć z tyłu głowy, że będzie używana na różnych urządzeniach. W klasycznych programach graficznych projektowanie pod RWD trochę bolało. Kolejne narzędzia dedykowane UI Designerom zaczęły wdrażać narzędzia pomocnicze i również Figma w tym temacie nie zawodzi.
Bardzo wygodnie pracuje się z wbudowanym narzędziem gridów – możemy tworzyć siatki na całych widokach lub pojedynczych elementach, a nawet nakładać kilka z nich na siebie. Tworząc elastyczną siatkę, po zwiększeniu lub zmniejszeniu obiektu będzie dostosowywać się do szerokości projektu.
Druga sprawa to „constraints”, które przetłumaczyłabym na nasze ograniczniki. I jak sama nazwa wskazuje służą nam do ustalenia pewnych ograniczeń. W przypadku pracy w aplikacji będzie to sposób zachowania się obiektów po zmianie wielkości projektu – na przykład ustalamy, że zdjęcie na stronie głównej zawsze będzie się skalowało, a dolna belka nawigacji będzie zawsze przyczepiona do dołu
Wektory od nowa
Co jest szalenie ciekawe, to nowe podejście do wektorów stworzone przez twórców aplikacji. Odkąd wprowadzono narzędzie Pen Tool (które znamy choćby z produktów Adobe), sposób jego działa niewiele się zmienił. Tymczasem Figma, zamiast wykorzystać znane wszystkim tworzenie wektorów przez ścieżki, używa tzn. vector networks. Więcej o nich możecie poczytać tu: https://blog.figma.com/introducing-vector-networks-3b877d2b864f.
Ale jakie ma to znaczenie dla użytkownika? Podobno używa się ich zdecydowanie prościej. Ciężko mi to jednak ocenić jako osobie, która z programów do grafiki wektorowej korzystała wcześniej i przesiadka na nowy nie robi specjalnie wielkiej różnicy. Wektorowi wyjadacze powinni dać sobie zatem spokojnie radę, a nowi użytkownicy? Chętnie usłyszę Waszą opinię.
Fonty, dużo web fontów
Figma korzysta domyślnie z bazy Google Fonts – opcja świetna jednak rozwiązana dość biednie – na dropdownie dostajemy bowiem listę nazw ponad 800 fontów (plus naszych lokalnych jeśli zainstalujemy dodatek). Czekam z niecierpliwością na jakąś możliwość podglądu na liście, a kiedyś, kto wie, może nawet kategoryzacji zgodnej z Google Fonts? Niemniej jednak sama integracja bardzo na plus.
Oprócz ilości dostępnych fontów, mamy możliwość klasycznej edycji typografii – ustalenie interlinii, odległości między znakami, wcięcia akapitowego i wszelkiej maści wyrównania, co daje nam już sporą swobodę w tworzeniu projektu graficznego.
Pracuj z innymi
Niewątpliwą zaletą aplikacji jest również możliwość kolaboracji w czasie rzeczywistym. Do zespołu projektowego możesz dołączać innych użytkowników i nadawać pozwolenia na oglądanie lub edytowanie treści projektu. To okazja do wspólnego projektowania z członkami zespołu będąc poza biurem, czy ciekawej formy prezentacji lub warsztatów z klientem.
Możemy również komentować poszczególne elementy projektu, co może znacznie usprawnić proces oceny projektu (lub wręcz przeciwnie – zanadto zachęcić klientów do ingerencji ?).
Podsumowując
Figma bardzo pozytywnie mnie zaskoczyła i niespecjalnie myślałam o tej appce jak o czymś, co mogłoby służyć mi w codziennej pracy. Mnogość opcji i możliwość pracy również na PC to ogromny plus. Jeszcze większym plusem jest fakt, że możemy z aplikacji korzystać za darmo (z pewnymi ograniczeniami).
Dzięki appce Figma Mirror, podobnie jak w Sketch czy Principle, możemy na żywo podglądać nasz projekt na ekranie telefonu. Między poszczególnymi widokami stworzymy w szybki sposób przejścia, choć interakcje ograniczają się na razie jedynie do przejścia z ekranu na ekran. Zrobienie prostego prototypu jest więc możliwe.
Jedyne co mnie w tej chwili zastanawia to wydajność. Nie miałam okazji pracować na bardzo rozbudowanym projekcie, będąc jednocześnie w trybie kolaboracji, więc tu ciekawi mnie jak płynnie przebiega taka praca – może sami mogliście to już przetestować?
Eduweb.pl ma dla Was zniżkę na kurs!
Jeżeli Figma wydaje się Wam interesująca to zerknijcie również na kurs przygotowany przez Eduweb.pl, gdzie nie tylko nauczycie się obsługiwać aplikację, ale również zaprojektujecie interfejs na smart watcha. To taka figmowa wiedza w pigułce, dzięki, której szybko przyswoicie sobie działanie aplikacji. Robiąc zakupy na eduwebie skorzystajcie z Kodu Rabatowego „BYZEBZA”, a otrzymacie 10% zniżki na kurs! Zniżka będzie ważna do 5 października.
No to co – Figma wydaje Wam się być interesująca? A może już z niej korzystaliście lub macie do polecenia inne, może ciekawsze rozwiązania? Podzielcie się wrażeniami!
