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 opcję komentarzy, która znajduje się w Figmie.
Cały czas jestem zalogowany w lewym oknie na S a w prawym oknie na G i jak widzisz mam tutaj wspólne
kursory, które mogę obserwować, w jednym i w drugim oknie. Mogę pokazać ci teraz opcję komentowania
tzn.
Jeśli przejdziemy do tej małej ikonki z dowolnego konta, możemy wstawić do pliku komentarz. Dodatkowo we
właściwościach komentarza, jak widzisz, mamy możliwość otrzymywania notyfikacji przez e-mail.
Jeśli ktoś odpowie na nasz komentarz, czy pojawi się nowy komentarz, dostaniemy powiadomienie mailowe i
będziemy mogli go zobaczyć.
I komentarze możemy dodawać w dowolnym miejscu,
czyli możemy kliknąć np. na canvasie i wpisać tutaj coś, np. "change color to blue"... a może zmieńmy na jakiś
inny kolor, bo "blue"
Mamy już tutaj zrobiony. Wybieram polecenie "Post"
i jk widzisz mamy nowy komentarz, który się tutaj pojawił.
Ja, przechodząc do tego drugiego konta mam małą notyfikację w sekcji komentarzy, czyli małą czerwoną kuleczkę,
i teraz wiem, że pojawił się nowy komentarz, a jeśli jestem zapisany na powiadomienia mailowe, też dostałem
maila. Mogę kliknąć sobie w komentarze i zobaczyć komentarz, który się pojawił. "Change color to red". Jeżeli kliknę na ten
komentarz, to jestem przenoszony dokładnie do tego miejsca, w którym został upuszczony komentarz i wiem
dokładnie, jaki kolor mogę... mam zmienić.
W związku z tym wybieramy... Mogę odpisać... Jeszcze raz, zróbmy to.
Wybieramy polecenie OK.
Na przykład wpisujemy tutaj, od razu, jak widzisz, to się pojawia, a w momencie, gdy wyjdziemy z widoku komentarzy,
czyli np. wybierzemy V na klawiaturze i przejdziemy do opcji wypełnienia i np. zmienimy sobie ten kolor
na kolor czerwony to możemy wrócić do tego komentarza.
Widzisz, tutaj wszystko jest widoczne na bieżąco, kliknąć sobie na niego i wybrać polecenie "Resolved", to znaczy
że ten Request na przykład naszego klienta czy project ownera został już zrealizowany i jak widzisz komentarz
zniknął, wszystko,
cały ten wątek jest załatwiony.
Ewentualnie można wrócić do niego w historii i jeżeli owner uzna, że jeszcze coś mu się nie podoba,
może wybrać polecenie "Unresolved" i jednak dopisać jakiś komentarz, że powinien to być np. inny odcień tego koloru.
Jak widzisz, wszystko działa w czasie rzeczywistym i tak właśnie możemy pracować z komentarzami w Figmie.
To wszystko co chciałem pokazać ci w tej lekcji, ale nie wszystko o kolaboracji, ponieważ w kolejnej lekcji
jeszcze jedna bardzo ciekawa funkcja w tym zakresie. Do usłyszenia!