Najlepszy przyjaciel projektanta ~ Przemysław Śmit
10 sierpnia 2020 2021-03-30 13:08Najlepszy przyjaciel projektanta ~ Przemysław Śmit
Poznaj podstawy działania prawdopodobnie najlepszej aplikacji do projektowania. Czym jest i jak działa Figma?
Figma to program, który już w planie darmowym prezentuje swoim użytkownikom bardzo wiele potrzebnych funkcji. Łatwo go nie docenić, bo aplikacje, które nic nie kosztują postrzegane są jako niewystarczająco dobre, bądź przeznaczone jedynie dla początkujących.
W przypadku Figmy to – jakże mylne – wrażenie może być dodatkowo pogłębione przez fakt, że jej interfejs zaprojektowano niezwykle prosto, a dzięki temu przejrzyście. Zdawać by się mogło, że zaawansowany program do projektowania stron internetowych lub aplikacji mobilnych powinien wręcz odpychać poziomem skomplikowania z racji na ogrom możliwości. Ponadto, program działa także w przeglądarce i już nie raz słyszałem od innych projektantów, że Sketch, Adobe XD są lepsze, bo mają dedykowane aplikacje. Jakież było ich zdziwienie, gdy okazało się, że Figma to również aplikacja natywna dostępna na każdy system operacyjny.
Figma – kompleksowe narzędzie do projektowania
Figma zaskakuje, oferując wszystko, czego designer może potrzebować oraz prezentuje to w bardzo przystępnej formie.
Na wstępie pragnę pokazać drobne, ale bardzo ważne udogodnienia oferowane przez Figmę. Nie są to sprawy imponujące rozmachem, ale w codziennej pracy projektowej okazują się nieprzeciętnie pomocne.
Przykładem takiego udogodnienia jest choćby możliwość importowania wielu obrazków jednocześnie w klarowny sposób. Wystarczy skorzystać ze skrótu klawiszowego Ctrl+Shift+K, aby przenieść wybrane zdjęcia na odpowiednią warstwę i tam je umieścić jedno po drugim. Co więcej cała operacja jest widoczna w czasie rzeczywistym a to niezwykle ułatwia utrzymywanie porządku.
Jeżeli przypominasz sobie każdą uciążliwą sesję uzupełniania projektu rzeczywistą zawartością, to wiesz jak koszmarną czynnością jest dodawanie mnóstwa obrazków czy tekstów. Na szczęście istnieją sensowne rozwiązania, które pozwalają uporać się z tym nieprzyjemnym zadaniem w ciągu nawet nie minut, a sekund.
Co wyróżnia Figmę?
“Przejrzystość” to słowo klucz, jeśli chodzi o zrozumienie, jak dobrą aplikacją jest Figma
Wyjątkowo łatwo zmienia się w niej nazwy oraz numery, jakie przyporządkowano warstwom, obiektom itp., dzięki czemu w razie jakiejkolwiek potrzeby można zmienić system nazewnictwa i klasyfikacji. To samo dotyczy dodawania opisów i imion do styli oraz reorganizowania elementów projektu.
Pracując w Figmie, można prowadzić sprawny system działania. Dodatkowym smaczkiem są emotikony, którymi można oznaczać stopień postępów w pracy, co szczególnie przydaje się w sporych zespołach.
Figma to przede wszystkim wygoda, szybkość i użyteczność
W wygodny sposób można także zmieniać instancje, dzięki możliwości przesunięcia jednego komponentu na drugi, bez zaburzenia całego układu. Praca z właściwościami obiektów to także czysta przyjemność – można kopiować i wklejać wszystkie lub wybrane oraz korzystać z nich, wyszukując podobne rzeczy.
Skalowanie obiektów wraz z ich cechami wymaga jedynie przytrzymania klawisza “K”, a w razie chęci zachowania proporcji także przycisku Shift. W ten sposób wszelkie właściwości oraz wymiary danego elementu zostaną odpowiednio zwiększone lub zmniejszone.
Sytuacja nie wygląda inaczej z ramkami – przycisk Ctrl (albo Cmd) pozwala na zmianę ich rozmiaru, bez naruszenia warstw oraz obiektów w środku. Przydaje się to przy projektowaniu dla różnych rozdzielczości.
Figma to nie Photoshop, jest lepsza i obsługuje różne formaty graficzne
Podczas projektowania strony internetowej lub aplikacji mobilnej nierzadko zachodzi potrzeba stworzenia jakiejś grafiki lub kształtu, a w szczególności łuku od nowa. W ten sposób tworzymy niezbędne elementy, takie jak np. ikony ładowania.
Oprócz możliwości kreowania elementów strony albo aplikacji na żywym organizmie projektu, mamy też opcję dodawania gifów. Możemy sprawdzić więc, jak przebiegnie interakcja potencjalnych użytkowników z naszym prototypem.
Gdy na dobre już rozkręcimy się w działaniu, zaczniemy rozbudowywać drafty i dodawać lub kreować kolejne ich elementy istnieje ryzyko, że gdzieś po drodze zagubimy się w akcji.
Zawsze istnieje szansa, że optymalny poziom rozwoju danej strony czy aplikacji osiągnęliśmy kilka warstw i kilkanaście opcji temu.
Jak zadbać o porządek w trakcie projektowania?
W tym miejscu Figma oferuje nam bardzo wygodne narzędzia czyszcząco-przywracające, nie mówiąc już o samej opcji grupowania elementów w folderze za pomocą zmieniania odstępów między plikami. Oferuje do tego opcję „Tidy Up”, sprawiając, że rearanżacja obiektów nie stanowi problemu.
Najbardziej użyteczny może okazać się jednak powrót do jednej z dawnych wersji projektu, co możemy zrobić, wybierając właściwy moment na osi czasu po prawej stronie ekranu. Korzystając z tego rozwiązania, nie jesteśmy zmuszeni cofać się w pracy, a po prostu wybieramy miejsce, do którego chcemy wrócić. I gotowe.
Możemy swobodnie poruszać się po osi czasu, a do tego kluczowe punkty w rozwoju projektu jesteśmy w stanie oznaczyć przy pomocy generatora linków.
Figma oferuje także unikalny sposób na porządkowanie pracy w sensie generalnym. Dzięki Figma Pages web designerzy mają ułatwione zadanie w zakresie tworzenia systemu działania w zależności od własnych preferencji.
Pages to nic innego jak elastyczne podstrony, które znajdują się lewej stronie ekranu. To jaką kategoryzację przyjmiemy, jest zależne już wyłącznie od nas.
Jeżeli projektujemy aplikację, która ma działać na różnych platformach, to bardzo sensownym rozwiązaniem będzie systematyzacja według rodzaju systemu lub rozmiaru wyświetlania. W ten sposób każdy z podprojektów będzie tworzony przystająco lecz z uwzględnieniem różnic. Dodatkowym ułatwieniem jest fakt, że w Figmie zawarte są gotowe ramy i limity.
Inną metodą na uporządkowanie pracy będzie podział według funkcji
Przyda się on szczególnie gdy dana aplikacja ma mieć różnorodne zadania i działa przy niej liczny zespół. Takie rozwiązanie gwarantuje przejrzystą pracę nad projektem całościowo oraz nad poszczególnymi jego częściami bez wprowadzania zbędnych barier. Kolejnym plusem jest tutaj możliwość testowania danych prototypów niezależnie od siebie.
Ciekawą funkcją wydaje się także systematyzacja molekularna. Tutaj nasz projekt traktujemy jako konstrukcję, składającą się z cząsteczek tworzonych przez pogrupowane atomy. Każda z Figma Pages stanowić może jeden taki atom, co w rezultacie da nam podstrony poświęcone typografii; ikonom; przyciskom; formularzom; logotypom itd.
Atomic Design – bo tak brzmi nazwa tej metody w oryginale – w znacznym uproszczeniu polega na budowaniu kolejnych coraz bardziej zaawansowanych układów z jednostek podstawowych czyli atomów. One tworzą cząsteczki (molekuły), takie jak np. okienka wyszukiwania.
Z molekuł powstają organizmy, czyli rozbudowane układy tworzące istotne elementy interfejsu. Przedostatnim stadium rozwoju naszego projektu jest szablon, czyli niemal gotowy projekt “zlepiony” z molekuł. Dodanie do niego rzeczywistej zawartości przeniesie nas do finalnego poziomu zaawansowania, znanego jako strona.
Atomic Design, czyli dlaczego warto wspomnieć o komponentach w Figmie?
Bardzo praktycznym rozwiązaniu, szczególnie sprzyjającemu Atomic Design. Figma Components umożliwia wprowadzenie do swojej biblioteki elementów, które będą automatycznie aktualizować swój wygląd, nawet jeżeli zostały już wcześniej rozmieszczone. To tak, jak gdyby wprowadzać zmiany na poziomie genetycznym. Wystarczy zmienić cechy wzorcowego komponentu, by także i pozostałe tak samo się prezentowały.
Pamiętajmy, że Figma to program, który został napisany i zaprojektowany z myślą o użytkowniku
Lekko tylko wyolbrzymiając, swobodnie można powiedzieć, że jedynym ograniczeniem w korzystaniu z Figmy jest nasza wyobraźnia. Widać to w każdej cesze tego narzędzia – od wygodnego importowania obiektów po opcję kreowania własnych. Całe Figma Pages to też doskonały tego przykład na to, że nikt nie broni wybrać jednej z sugerowanych powyżej metod i przerobić jej po swojemu, dodając choćby aspekt chronologiczny.
Co najważniejsze i co będę podkreślał przy każdej okazji, wszystko co oferuje Figma jest zaprojektowane bardzo przejrzyście. Kafelki Pages nie odstraszają, a wręcz proszą o bycie wykorzystanymi.
Projektowanie dla wielu rozdzielczości to w Figmie pestka.
Lista presetów z rozdzielczościami przygotowanymi pod konkretne urządzenia nie mogłaby prezentować się prościej, a przy tym bardziej czytelnie. Minimalistyczny wygląd stron z projektami i zespołami nie pozostawia żadnych wątpliwości, co do jakości Figmy w kontekście porządkowania zadań zespołowych – szczególnie w wersji premium, która umożliwia udostępnienie dowolnego projektu dowolnej osobie.
Dlatego właśnie, gdybym miał powiedzieć, co cenię w Figmie najbardziej, powiedziałbym, że – oczywiście – przejrzystość. Na drugim miejscu wśród zalet znalazłaby się szybkość, ponieważ działać w niej można naprawdę błyskawicznie.
Przykładem tego jest, choćby wspomniana na początku, funkcja importowania plików graficznych. Świadczy o tym wysoki poziom optymalizacji programu w zakresie podstawowej płynności działania. Przejawia się to faktem, że w Figmie pracujemy online – inaczej niż w np. w Sketchu.
Dzięki temu kopiowanie elementów między projektami nie wymaga mozolnego otwierania dużych plików stacjonarnych.
Aplikacja ta jest ciągle rozwijana i wzbogacana o nowe przydatne funkcje, a przy tym pozostaje przejrzysta, szybka i nienachalna. Sprawdzenie jej możliwości rekomendowałbym każdemu web designerowi, a szczególnie tym najbardziej sceptycznym, co do możliwości programu operującego w przeglądarce. Figma jest jednak tak naprawdę narzędziem dla każdego, kto szuka alternatywy wobec najpopularniejszych narzędzi. Można znaleźć tutaj wszystko, co oferują inne programy i jeszcze trochę więcej.
Przemysław Śmit – prawa ręka pająka, w grupie Spider’s Web odpowiedzialny za rozwój serwisów internetowych należących do grupy. Ma kilkanaście lat doświadczenia w marketingu cyfrowym. Zawodowo product designer, manager, przedsiębiorca, freelancer i ekspert SEO.
