Czas czytania: ok. 8 min
Data publikacji: 28.07.2022
Przydatne triki w Figmie
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 - co 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.
Zastosowanie
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:
- tworzenia projektów stron internetowych (szkic wizualny bez publikacji)
- projektowanie aplikacji mobilnych
- kreowanie koncepcji wizualnych prototypów
- opracowywanie projektu logo
- kreaowanie contentu graficznego na social media
Triki z Figmy, które warto znać
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ć.
Układ automatyczny i jego aktualizacja
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.
Wartość współczynnika nachylenia
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ę.
Narzędzia do tworzenia łuków
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.
Komponenty bazowe
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.
Stosowanie formuł prawda/fałsz
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.
Dostosowanie tekstu do obiektu
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.
Podgląd w trybie konspektu
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.
Zmiana nazw kolorów
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.
Grupowa edycja odstępó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
Szybki import poza Figmę
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ć”.
Wtyczki do Figmy
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:
- remove.bg - usuwanie tła w ilustracji
- Status Annotations - update dla zespołu na temat statusu projektu
- Contrast - test współczynnika kontrastu warstwy lub strony
- Roller Design Linter - pomoc w naprawie niespójności stylu w plikach
- Breakpoints - podgląd responsywnych układów wewnątrz ramek i udostępnianie prototypów.
- Content Reel - tworzenie i udostępnianie treści oraz dodawanie ikon, zdjęć oraz tekstów do projektu
- Icon Resizer - zmiana wszystkich ikon na ten sam rozmiar
- Design Lint - wykrywanie niespójności i niedopasowań w projektach
- Color Designer - szybkie wyszukiwanie odcieni, tintów, palet kolorystycznych
- Unsplash - dostęp do darmowego banku zdjęć
- Styler - kontrola styli poprzez zmianę właściwości warstw i ich aktualizacje (style tekstów, kolorów etc. i ich przenoszenie do innych projektów)
- SPELL - narzędzie do sprawdzania pisowni (ortografia i gramatyka)
- Mockuuups Studio - generator mockupów
- Clay Mockups 3D - mockupy w stylu 3D.
Skróty klawiszowe
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:
- Kopiuj -> CTRL C
- Wytnij -> CTRL X
- Wklej -> CTRL V
- Powiększ/pomniejsz -> +/-
- Pogrubienie -> CTRL B
- Kursywa -> CTRL I
- Wyrównanie tekstu do lewej/środka/prawej -> Alt CTRL L/Alt CTRL T/Alt CTRL R
- Kopiuj jako PNG -> ⇧ CTRL C
- Dodaj/usuń automatyczny układ -> ⇧ A/Alt ⇧ A
- Pokaż zasoby -> Alt 2
- Eksportuj -> ⇧ CTRL E
- Przerzuć w poziomie/pionie -> ⇧ H/⇧ V
- Kopiuj/wklej właściwości -> Alt CTRL C/Alt CTRL V
Triki dla użytkowników Figmy - podsumowanie
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ć.
Dowiedz się więcej o najlepszych praktykach tworzenia stron:
Autor: Kaja Rowicka
Popularne artykuły.
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:
