Czas czytania: ok. 8 min
Data publikacji: 8 stycznia 2024
Figma: przydatne triki i porady w projektowaniu graficznym
Projektowanie graficzne. To dzięki niemu jesteś w stanie opracować najlepsze rozwiązanie oraz przewidzieć możliwe niedociągnięcia. Zanim wprowadzisz je na produkcje, masz szansę znaleźć rozwiązanie zastępcze.
Wielu projektantów UX i UI Designu jako swój program graficzny wybiera Figmę. Czym ona jest? Jakie dostępne w narzędziu triki warto wykorzystać? Sprawdź!
Figma: co to?
Figma jest narzędziem wykorzystywanym to projektowania graficznego i prototypownia stron internetowych oraz aplikacji. Na ten moment to jedno z najpopularniejszych rozwiązań na rynku. Pozwala na prace zarówno w trybie online jak i offline. Wprowadzane zmiany, są zapisywane automatycznie, dzięki czemu nie musisz obawiać się utraty swojej pracy. Dodatkowo w Figmie możesz pracować grupowo. W końcu czasem, w większych digital projektach zaangażowanych jest więcej osób.
Zastosowanie
Figma wykorzystywana jest 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" ułatwi i przyspieszy Ci pracę. Które metody warto wprowadzić do swojej rutyny?
Pamiętaj, że z wielu takich trików mogą korzystać zarówno osoby pracujące na Figmie na co dzień, jak i Ci, którzy dopiero zaczynają swoją przygodę.
To, że jedna funkcja będzie mniej zaawansowana, a druga bardziej nie zmienia faktu, że może Ci się przydać. Postaraj się więc zapoznać ze wszystkimi poradami z dziedziny web designu.
Układ automatyczny i jego aktualizacja
W Figmie istnieje coś takiego jak auto-layout. Aby z niego korzystać, zaktualizuj obecną lub dodaj nową funkcję – daje Ci to 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. Funkcja ta pozwala też pomieścić bardziej skomplikowane elementy i wyeliminować potrzebę żmudnej edycji odstępów.
Wartość współczynnika nachylenia
Jednostka 8px jest uznawana za tą bazową i wykorzystywana jest w projektach bardzo często. Ważna jest tu konsekwencja: odstępy oraz rozmiary obiektów muszą być spójne. Pracując na Figmie wypróbuj jeden prosty trik, który ułatwi Ci pracę – nudge amount. Zmieniasz w nim wartość np. z 10px na 8px. Dzięki temu w momencie, gdy zamierzasz przesuwać bądź też zmieniać rozmiar danego elementu, będzie to następowało w przyrostach co 8.
Aby uruchomić tę funkcję, przejdź do menu, następnie kliknij w preferencje. Tam trafisz na Nudge amount i wpisujesz 8 px. Teraz wartość ta obowiązuje w Twoich projektach. Jeśli jednak chcesz wykorzystać ją w bieżącej pracy, przyciśnij 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, co pozwoli stworzyć nowy stan. Poza spójnością usprawni to również wykonywanie aktualizacji masowych.
Stosowanie formuł prawda/fałsz
W niektórych 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 działaniem szybszym i ściślej 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, skorzystaj ze skróconej ścieżki. Chcesz zobaczyć efekt? Kliknij dwukrotnie prawą krawędź warstwy.
Podgląd w trybie konspektu
Aby uruchomić ten tryb należy wcisnąć CTRL +Y. Trik pozwala on na lepszą analizę projektu i bardziej precyzyjny widok. Dzięki temu możesz dopracować całą strukturę ramki lub 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 nazwij 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 nazwiesz swoją paletę postaciami z filmów.
Grupowa edycja odstępów
Wyrównywanie obiektów czy 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 zaznaczenia", a następnie "porządkowania". Dzięki nim jesteś w stanie zrobić to hurtowo.
Ponad 600 000 ludzi tworzy strony za darmo, bez kodowania i przy wsparciu AI. Zobacz, jakie to proste
Szybki import poza Figmę
Używając skrótu cmd+ L możesz skopiować link konkretnej strony lub ramki (nie musi to być całość)i umieścić go tam gdzie chcemy go “osadzić”.
Wtyczki do Figmy, które ułatwiają projektowanie grafiki
Pracujesz dużo na Figmie i tworzymy bardziej złożone projekty? Postaraj się o przygotowanie współgrających z tym narzędziem wtyczek. Zazwyczaj są one darmowe, więc nie obawiaj się dodatkowych kosztów. W zamian otrzymasz wygodę: nie musisz już non stop opuszczać projektu w celu pogrania potrzebnej nam grafiki, ikon etc. Wystarczy, że masz wgrane wtyczki, które Ci to zapewniają (z tych podstawowych można wymienić, chociażby Unsplash).
Zastanawiasz się: jak wyciąć coś z ekranu? Masz inne pytania? Wykorzystaj te triki w Figmie!
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
Używanie skrótów klawiszowych pozwala usprawnić pracę.
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. Jest godna polecenia, jeśli podczas tworzenia koncepcji i zaawansowanych już szkiców wolisz 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 masz więcej pomysłów na budowę jednego z elementów, wciąż możesz mieć wgląd do całości jednocześnie).
Warto je znać, aby nie ograniczać 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:
Kreator WebWave.
Oferta.