Czas czytania: ok. 8 min
Data publikacji: 28.07.2022
Projektowanie to kluczowy element ostatecznego rezultatu danego produktu. To dzięki niemu jesteśmy w stanie opracować najlepsze rozwiązanie oraz przewidzieć możliwe niedociągnięcia i zanim wprowadzimy je na produkcje, mamy szansę znaleźć rozwiązanie zastępcze. Jednym z narzędzi, wykorzystywanym w projektowaniu i polecanym przez specjalistów w dziedzinie UX i UI Design jest Figma. Czym jest? Do czego dokładnie służy, jak można ją wykorzystać i przede wszystkim jakie triki warto znać w momencie, gdy zaczniemy jej używać? Sprawdźmy to!
Figma jest narzędziem wykorzystywanym to projektowania i prototypownia stron internetowych oraz aplikacji. Jest to na ten moment jedno z najpopularniejszych rozwiązań na rynku. Pozwala na prace zarówno w trybie online jak i offline, a same zmiany, które są wprowadzane, są zapisywane automatycznie, dzięki czemu nie musimy obawiać się utraty swojej pracy. Dodatkowo w Figmie możemy pracować grupowo. W końcu czasem, w większych projektach zaangażowanych jest więcej osób.
Na temat zastosowania Figmy powiedzieliśmy już sobie trochę w samej definicji, ale warto wymienić jeszcze więcej wariantów. Narzędzie to jest bowiem wykorzystywane do:
Znajomość niektóry "sztuczek" nie tylko pozwoli nam zabłysnąć umiejętnościami, ale wręcz przede wszystkim ułatwi i przyspieszy nam pracę. Przygotowaliśmy więc kilka metod, które warto wprowadzić do swojej rutyny. Pamiętajmy też, że z wielu takich trików mogą korzystać zarówno osoby pracujące na Figmie na co dzień, ale też Ci, którzy dopiero zaczynają swoją przygodę.
To, że jedna funkcja będzie mniej zaawansowana, a druga bardziej nie zmienia faktu, że prędzej czy później mogą nam się przydać.
W Figmie istnieje coś takiego jak auto-layout. Aby z niego korzystać, należy zaktualizować obecną lub dodać nową funkcję - daje nam to wtedy możliwość dynamicznej zmiany rozmiaru swoich projektów. Taki automatyczny układ znacznie usprawnia proces tworzenia elementów z wieloma marginesami. Mowa tutaj m.in. o przyciskach, listach oraz innych modelach. Ta funkcja pozwala nam pomieścić bardziej skomplikowane elementy i wyeliminować potrzebę żmudnej edycji odstępów.
Jednostka 8px jest uznawana za tą bazową, dlatego też wykorzystywana jest w projektach tak często. Ważna jest jednak konsekwencja, aby odstępy oraz rozmiary obiektów były spójne. Pracując na Figmie możemy wykorzystać jeden prosty trik, który ułatwi nam pracę. Jest to nudge amount - zmieniamy w nim wartość np. z 10px na 8px. Dzięki temu w momencie, gdy będziemy przesuwać bądź też zmieniać rozmiar danego elementu, będzie to następowało w przyrostach co 8.
Aby uruchomić tę funkcję, należy najpierw przejść do menu, następnie preferencje i tam trafiamy na Nudge amount i wpisujemy 8 px. Teraz wartość ta obowiązuje w naszych projektach. Jeśli jednak chcemy wykorzystać ją w bieżącej pracy należy przycisnąć klawisz Shift oraz strzałkę.
Figma posiada narzędzie o nazwie Bar Graph, które służy do tworzenia łuków na wykresie słupkowym. Efekt jest minimalistyczny, ale dla większości twórców powinien to być plus.
Przydatnym trikiem, który pozwoli na uspójnienie projektów jest skorzystanie w Figmie z tworzenia komponentów bazowych. W takim wypadku każdy wariant będzie posiadał swój indywidualny "zagnieżdżony" komponent bazowy w celu stworzenia nowego stanu. Poza spójnością usprawni to również wykonywanie aktualizacji masowych.
W niektórkych przypadkach przydatnym patentem, może okazać się reguła -> "true/false lub on/off. Ta funkcjonalność pozwala na przełączanie się między dwoma różnymi właściwościami, co ostatecznie będzie skutkowało szybszym i ściśle dopasowanym do tego, jak różne komponenty działają w kodzie.
Aby nie musieć ręcznie dostosowywać rozmiaru (szerokości oraz wysokości) warstwy tekstowej do zawartości, możemy skorzystać ze skróconej ścieżki. - aby zobaczyć efekt, musimy dwukrotnie kliknąć prawą krawędź warstwy.
Aby uruchomić ten tryb należy wcisnąć CTRL +Y. Ten trik pozwala on na lepszą analizę projektu, widok jest bardziej precyzyjny, dzięki czemu możemy dopracować całą strukturę ramki lub też elementu.
Zazwyczaj działamy na kolorach RGB, CMYK oraz HEX. W przypadku tego ostatniego Figma udostępniła możliwość zmiany nazwy kolorów. Zamiast #HEX 280195 możemy nazwać ten granatowy odcień np. ,,serce oceanu”.
Nie jest to może jeden z najbardziej istotnych trików, ale z pewnością okaże się pomocny przy selekcjonowaniu i rozpoznawaniu kolorów (szczególnie tych przybliżonych). Poza tym może też być pewną formą rozrywki - np. jeśli nazwiemy swoją paletę postaciami z filmów.
Detale takie jak wyrównywanie obiektów oraz samo dostosowywanie odstępów w projekcie może wydawać się prostym zadaniem. - często jest jednak bardzo precyzyjne i czasochłonne. Przydatnym trikiem będą tutaj funkcje "inteligentnego zaznaczania", a następnie "porządkowania", ponieważ dzięki nim jesteśmy w stanie zrobić to hurtowo.
Dołącz do ponad 513 tysięcy ludzi, którzy tworzą strony za darmo i bez kodowania
Używając skrótu cmd+ L możemy skopiować link konkretnej strony lub ramki (nie musi to być całość)i umieścić go tam gdzie chcemy go “osadzić”.
Tym razem nie jest to żadna funkcji, którą proponuje narzędzie, a raczej rada. Jeśli pracujemy dużo na Figmie i tworzymy bardziej złożone projekty, to dla samej wygody warto postarać się o przygotowanie współgrających z tym narzędziem wtyczek. Zazwyczaj są one darmowe, więc nie powinniśmy obawiać się dodatkowych kosztów. W zamian otrzymujemy wygodę, ponieważ nie musimy non stop opuszczać projektu w celu pogrania potrzebnej nam grafiki, ikon etc. Wystarczy, że będziemy posiadali wgrane wtyczki, które nam to zapewniają (z tych podstawowych można wymienić, chociażby Unsplash).
Kilka propozycji wtyczek oferowanych dla użytkowników Figmy:
Ostatnia rada nie jest może niczym odkrywczym, ale z pewnością praktycznym. Używanie skrótów klawiszowych pozwala usprawnić pracę - jako twórcy nie musimy non stop przeklikiwać się myszką w określone okienka.
Oto kilka najpopularniejszych:
Figma dla wielu jest niezastąpionym narzędziem do tworzenia projektów. Co prawda w przypadku budowania strony w kreatorze stron www WebWave, nie będzie aż tak konieczna, ale z pewnością można ją polecić jeśli podczas tworzenia koncepcji i zaawansowanych już szkiców wolimy wykorzystywać narzędzia cyfrowe. Bardzo praktyczne jest tutaj przybliżanie i oddalanie obiektów, więc nawet w przypadku bardziej zaawansowanych przedsięwzięć oraz po prostu w momencie, gdy mamy więcej pomysłów na budowę jednego z elementów, wciąż możemy mieć wgląd do całości jednocześnie.
Triki, które warto zastosować, działając na tym narzędziu, będą zarówno mniej, jak i bardziej skomplikowane. Może nie wszystkie z nich przydadzą się każdemu, ale warto je znać, aby nie ograniczyć swoich możliwości tworzenia, a wręcz je poszerzać.
Autor: Kaja Rowicka
Kreator stron www WebWave umożliwia tworzenie stron www z pełną swobodą. Strony internetowe możesz tworzyć zaczynając od czystej karty lub wykorzystując szablony www. Strona www bez kodowania? To łatwe - zacznij już teraz.
contact@webwavecms.com
+48 731 395 898
Porozmawiaj z nami na czacie
Od godziny 08:00 do 24:00
Ta strona została stworzona w kreatorze WebWave.
Znajdziesz nas na: