Projektowanie Interfejsów
3 godz. 23 min · Figma · UI, UX i Webdesign
Grzegorz RógIdea ArchitectW trakcie Kursu poznasz wszystkie narzędzia i techniki pracy w aplikacji Figma. Choć sam interfejs jest niezwykle intuicyjny, warto korzystać ze sprawdzonych schematów oraz technik pracy, które zagwarantują Ci maksymalną wydajność pracy.
W trakcie Kursu skoncentrujemy się na stworzeniu z pomocą Figma kilku praktycznych przykładów interfejsów, odkrywając potencjał narzędzi wektorowych, artboardów i wiele więcej! Przygotujemy także uzupełnienie dla aplikacji inteligentnego domu, z którą pracowaliśmy w Kursie Sketch - osobną wersję aplikacji na Apple Watch!
Figma jest często porównywana do aplikacji Sketch, rozszerzonej o genialne opcje współpracy dla UI/UX Designerów. Dzięki opcji współpracy w czasie rzeczywistym możesz zaprosić do pracy nad projektem klienta lub inne osoby z Twojego zespołu. Wprowadzane zmiany są widoczne na żywo w przeglądarce! Jest to najlepszy sposób na dyskusję nad projektem i zdalny, konstruktywny feedback. Dodatkowo w pracy zespołowej możesz też wykorzystać Biblioteki, w których przygotujesz elementy, z których będzie mógł korzystać przy projektowaniu cały zespół! Zmiana elementu biblioteki, np. Style Guide'u skutkuje aktualizacją wszystkich projektów.
W Figma z dowolnego elementu możesz utworzyć Komponent, którego instancje mogą znaleźć się w innych miejscach w projekcie, a nawet w Bibliotekach. Zmiana oryginalnego komponentu skutkuje podmianą wszystkich jego instancji! To niezwykle skuteczny i wydajny sposób projektowania.
Z pomocą Figma łatwo wyeksportujesz grafiki dla aplikacji webowej czy urządzeń mobilnych. W Kursie dowiesz się jak zoptymalizować wektory i bitmapy, a następnie wyeksportować je w optymalnym formacie na potrzeby wykorzystania na stronie WWW czy w mobilnej aplikacji.
Kurs Figma jest przeznaczony dla wszystkich, którzy chcą efektywnie edytować grafikę czy tworzyć interfejsy w przyjaznym i darmowym środowisku przeglądarkowym. Figma nie wymaga subskrypcji ani mocnego komputera - wszystko działa po stronie przeglądarki, oferując komfort pracy zarówno osobom początkującym, jak również doświadczonym projektantom.
Jeszcze na moment zostaniemy w tym pliku, ponieważ chciałem pokazać Ci jedną z kolejnych, bardzo ciekawych
funkcji Figmy. Jest to funkcja, która pozwala nam wersjonować pliki, a w zasadzie te pliki są wersjonowane automatycznie,
co oznacza, że plik, nad którym pracujesz, ten jeden plik akurat "Constraints", z którym pracujemy, może mieć
zapamiętanych w historii, w przeglądarce, wiele różnych wersji, które ewentualnie możemy cofnąć i przywrócić.
To jak cofamy operacje w Figmie,
to jest oczywiście bardzo intuicyjne. Możemy wykonać jakąś zmianę, a następnie z pomocą Cmd+Z, albo Ctrl+Z na PC
ją po prostu cofnąć.
Jeżeli wciśnięty Cmd+Shift+Z, to przywrócimy tę operację. Więc z pomocą Cmd+Z czy Ctrl+Z możemy cofać się
w historii naszych kroków.
Samego jako takiego panelu z historią tutaj nie ma,
no i też mamy ograniczoną ilość kroków, która zostaje przez Figmę zapamiętana,
w związku z tym istnieje bardzo duża szansa, że, jeżeli pracowałeś dłużej niż kilka minut, to nie będziesz
mógł przywrócić tych poprzednich kroków, które wykonałeś na samym początku twojej pracy.
Więcej kroków nie ma zapamiętanych aż tak dużo, ale za to jest tworzona historia wersji dokumentu.
Domyślnie ta historia wersji jest tworzona co 30 minut, czyli co 30 minut zapisuje się taki snapshot
z tego co robisz i możesz do niego wrócić. Gdzie możesz to zrobić? Możesz zrobić to, klikając na opcję
"Show version history", która znajduje się obok nazwy Twojego pliku, po kliknięciu na strzałkę. I teraz, gdybyśmy
wykonali jakieś zmiany, czyli np. spróbowali zmienić tutaj tło dla tego górnego elementu, i spróbujmy zmienić
sobie ewentualnie też tło dla elementu na dole - na jakieś zielone... Albo włączmy niebieskie... No to wtedy możemy przenieść się
do historii wersji i pokazać ją. Mamy w tym momencie ostatnią
wersję, nad którą pracowaliśmy i dwie poprzednie - z 11:50 i z 11:32.
Zobacz, że w momencie, gdy przejdę do jednej z poprzednich wersji, czyli np. do 11:50 czy 11:32, to mamy te zmiany
przywrócone.
Czyli to, co ostatnio zrobiliśmy, zostaje... zostanie jak gdyby porzucone.
I mamy wersję poprzednią ze starymi kolorami.
Tak, jak wspomniałem, jest to tworzone co ok. 30 minut, albo - bo, jak widzisz, tutaj nie ma przestrzeni 30 minut,
więc jest to też tworzone w momencie, kiedy zamkniesz zakładkę z tym plikiem.
W związku z tym, jeżeli byśmy teraz wyszli z tego pliku... Wybierzmy polecenie... Wybierzmy ostatnią wersję
opcję "Back to Editing", a następnie przejdźmy sobie "Back to Files", z powrotem, i przechodzimy jeszcze raz do tego pliku,
dwukrotnie klikając, w tym momencie wchodzimy sobie w historię wersji, i już w tej historii wersji została zapisana godzina
11:51, to znaczy, że mamy właśnie możliwość przejścia do tej wersji. Jak widzisz już mamy te kolory
niebieski i czerwony, a w wersji poprzedniej mamy kolor zielony i żółty. Więc możemy wymusić również zapisywanie
kolejnych wersji tutaj poprzez zamknięcie tej zakładki i otworzenie pliku
jeszcze raz, jeżeli chcesz to zrobić krócej niż 30 minut.
Teraz, co możemy zrobić z taką poprzednią wersją.
Jeżeli nam się podoba właśnie poprzedni stan aplikacji, możemy wybrać opcję "Restore this version",
czyli przywrócić starą wersję aplikacji i wtedy zostanie ona, ta nowa, zastąpiona tą starszą wersją, którą sobie
wybraliśmy, albo możemy wybrać opcję "Duplicate", i w ten sposób zrobimy ze starej wersji kopię dokumentu, czyli
zachowamy sobie tę wersję obecną, natomiast zrobimy nowy dokument, który będzie kopią z jakiegoś poprzedniego
snapshota, z poprzedniego stanu.
Myślę że jest to świetna funkcja w Figmie i pamiętaj, że ona istnieje,
zwłaszcza, kiedy będziesz chciał wrócić o więcej niż kilka operacji
w tworzeniu twojego projektu. To wszystko co chciałem pokazać Ci w tej lekcji.
Dziękuję za uwagę i do usłyszenia!