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.
Witaj w kolejnej lekcji, w której chciałbym pokazać Ci kolejną fantastyczną funkcję Figmy, która polega na współpracy
i współdziałaniu razem z inną osobą na jednym projekcie.
Prawdopodobnie jest to kolejna rzecz przełomowa, dla której będziesz chciał korzystać z Figmy w przypadku
właśnie pracy wielu osób na jednym pliku.
Możemy to robić w czasie rzeczywistym. A to, jak możemy zaprosić inne osoby do współpracy z naszym plikiem,
to tworzę nasz projekt na Apple Watch'a, projekt aplikacji "Home App", i mam, jestem zalogowany w tym oknie na
jedno konto, a w tym oknie jestem zalogowany po prostu na inne, któremu będę chciał udostępnić mój plik.
Mam tutaj informację o tym, że właśnie ja edytuję ten plik, natomiast mogę się nim podzielić, wybierając polecenie
"Share". I teraz, mamy tutaj do wyboru dwie opcje. Albo możemy podzielić się linkiem, czyli po prostu wygenerować
sobie link,
czyli klikam na tę małą opcję i będziemy mogli wygenerować sobie link do naszego dokumentu, który pozwoli
albo oglądać, albo edytować nasz plik.
Edycja jest możliwa zawsze wyłącznie tylko wtedy, kiedy ktoś ma założone konto na Figmie,
natomiast oglądanie jest dostępne z każdego poziomu, z poziomu każdej przeglądarki. Więc wybieramy opcję
"Copy shareable link to this file", i w tym momencie link został skopiowany.
Mogę wejść sobie na innej przeglądarce do nowej zakładki i po prostu kliknąć sobie na link do tego
pliku.
Jak widzisz, mam tutaj nowego użytkownika "Spam", to jestem ja właśnie w tej zakładce, który zalogował się
do mojego dokumentu. Widzę to od razu w tym miejscu i mam możliwość zmiany, ewentualnie, uprawnień
dla tej osoby. Czyli mogę np. przydzielić jej "ownera" tego pliku, czyli mogę sprawić, że będzie ona miała
prawa administracyjne i będzie mogła też share'ować ten plik.
Mam w tym momencie włączoną opcję tylko "Can view", w związku z tym, jak widzisz, na tym koncie mogę tylko przeglądać sobie
te rzeczy, a nie mam możliwości ich edycji, natomiast mogę zmienić te uprawnienia, w taki sposób, żeby wybrać
opcję "Can edit". I wtedy mam zmienione uprawnienia. Jak widzisz, automatycznie ten widok jest przeładowywany, i na
tym koncie mam też możliwość edycji tego pliku.
W związku z tym, jest to jeden sposób podzielenia się tą pracą,
czyli skopiowanie linku i wysłanie komuś np. w mailu.
Ale możemy też wysłać "invite'a".
I tutaj mogę wpisać np. adres, na który wysyłamy zaproszenie, i znów - z edycją, czy z możliwością oglądania,
wybieram polecenie "Invite", i wtedy ta osoba, ona już jest też dodana do naszego pliku, w związku z tym
nie pojawiła się jako kolejna, ale wtedy ta osoba dostanie zaproszenie na maila i będzie mogła w nie
kliknąć, po to, aby oglądać nasz plik,
albo, jeśli jest zarejestrowana na Figmie, również go edytować.
Sprowadza się też do tego, że możemy teraz wyjść z tego okienka i zauważ, że mam po lewej stronie kursor, który
jest zmapowany, jest zduplikowany, i mogę edytować mój plik w jednym oknie, a druga osoba widzi na bieżąco
te zmiany, które wykonuję. W związku z tym, jeśli będę chciał np. wybrać jakiś tryb mieszania - o trybach
mieszania jeszcze nie mówiłem w tym kursie, ale nie jest to chyba akurat w tym momencie najważniejsza
rzecz,
w każdym razie mogę pomieszać tę warstwę z warstwami, które znajdują się pod spodem, np. w jakimś trybie
typu, weźmy sobie "overlay", i w tym momencie jest to jakoś mieszane z tłem.
Jak widzisz, na bieżąco te zmiany są widoczne także u tej drugiej osoby. Mogę kliknąć sobie na tę osobę, która
jest zalogowana razem ze mną i włączyć opcję obserwatora. I w tym momencie, jeśli będę wykonywał jakieś,
jakiekolwiek działania tutaj, to, jak widzisz, mamy wszystko widoczne też na drugim oknie u osoby, u drugiej
osoby zalogowanej. Więc możemy równocześnie wykonywać tutaj zmiany w pliku i w real-time pracować sobie z nawet wieloma członkami
naszego zespołu, czy z naszymi klientami, którzy na bieżąco mogą dać nam jakiś feedback do projektu, który
tworzymy.
Jest to absolutnie genialna opcja w Figmie, a w kolejnej krótkiej lekcji pokażę ci jeszcze, jak możemy
wymieniać sobie feedback i dodawać różne komentarze do tych plików.
To wszystko na teraz,
do usłyszenia!