Lekcje Figma dla początkujących

Wielofunkcyjny edytor graficzny Figma pojawił się stosunkowo niedawno, ale jego popularność szybko nabiera rozpędu. Łatwość korzystania z oprogramowania, możliwość wspólnej pracy nad projektem przez kilku użytkowników, automatyczne zapisywanie poprawek, dostęp z dowolnego urządzenia oraz dostępność wersji darmowej - to wszystko doceniają specjaliści.

Wybraliśmy najlepsze darmowe lekcje wideo Figma dla początkujących do nauki w domu. Filmy zawierają instrukcje i wskazówki różnych autorów, które pozwolą osiągnąć dodatkową produktywność w oprogramowaniu i pomogą zdobyć wiedzę o kolorach, makietach UX, animacjach oraz animowanych prezentacjach, przyciskach i mockup-ach.

Wprowadzenie

Autor wymienia zalety serwisu, demonstruje interfejs w programie i w przeglądarce oraz przedstawia krótki przegląd paneli i funkcji, co pozwala nowicjuszom na szybszą orientację.

Podstawy

Agata Sakowicz w tej lekcji pokaże, jak organizować menu i okna w aplikacji, zarządzać projektami, plikami i stronami, pracować z ramkami, kształtami i tekstem. Pokaże jak korzystać z interfejsu użytkownika, jak podłączać dodatkowe wtyczki, opowie o trybie siatki i tworzeniu siatek wektorowych za pomocą narzędzia Pióro.

Jak tworzyć pierwsze projekty

Jak szybko zacząć tworzyć projekty graficzne w Figmie? Autor pokaże proste techniki rozpoczęcia pracy, przedstawi narzędzia do tworzenia grafiki wektorowej oraz wyjaśni pojęcie komponentów.

30-minutowy kurs Figma

Darmowy 30-minutowy kurs dla początkujących pozwoli zdobyć zaawansowaną wiedzę na temat komponentów, Auto layoutu oraz animacji.

Strona internetowa od zera

Eksperci z kanału WebDesignerzy pokażą jak stworzyć stronę internetową od zera. Zostaną udzielone odpowiedzi na pytania: po co projektować i skąd czerpać inspiracje do projektowania? Wyjaśnione zostaną również podstawowe funkcje w Figmie oraz skuteczne techniki (czcionki, przyciski, kolory), które działają podczas tworzenia stron internetowych.

Panel Design

Tutorial wideo dotyczący Panel Design to świetna pomoc dla początkujących. Obejrzenie lekcji pozwoli zaoszczędzić czas i wysiłek w poszukiwaniu informacji rozrzuconych po całym Internecie.

System kolorów

Prowadząca podzieli się wskazówkami z własnego doświadczenia, jak stosować system kolorów.

Łączenie kształtów, maski, obrazki

Opanowanie nowego edytora graficznego ułatwi pracę każdemu profesjonaliście, co nie tylko pozwoli zaoszczędzić czas i wysiłek, lecz także stanie się impulsem do inspiracji i świeżych pomysłów.

Adaptacja

Opracowanie wizualnego komponentu platformy to dopiero połowa pracy - aby osiągnąć dobry efekt konieczne jest również zapewnienie płynnego i stabilnego funkcjonowania na każdym z dostępnych urządzeń. Automatyczna adaptacja nie zawsze jest możliwa, dlatego niektóre adaptacje muszą być wykonywane samodzielnie. Ze względu na dużą elastyczność i łatwość użycia aplikacji, proces ten jest stosunkowo łatwy do realizacji. Trzeba tylko pamiętać, gdzie wprowadzić poprawki do istniejących modeli.

Framy, komponenty i dziedziczenie

Typografia i tekst

Każdy interfejs zbudowany w oparciu o odpowiedni dobór typografii dla tekstów i elementów sterujących.

Grafika wektorowa

Wideo stanowi wprowadzenie do grafiki wektorowej w edytorze i pozwala na rozszerzenie możliwości tworzenia własnych obrazów. Opanowanie materiału odbywa się za pomocą praktycznych wskazówek.

Tworzenie formularza rejestracyjnego

Razem z Agatą Sakowicz dowiecie się krok po kroku jak stworzyć formularz rejestracyjny. Ustawicie wszystkie niezbędne elementy formularza: strzałkę powrotu, nagłówek, kilka inputów dla hasła i loginu, RODO oraz przycisk rejestracji. Następnie należy dodać animacje do bibliotek komponentów w Prototype.

Jak zrobić przyciski

Karol Stefański pokaże jak stworzyć zestaw z dwoma przyciskami (wypełniony, z obrysem) oraz trzema wariantami w ramach design system. Dzięki możliwościom Figmy wszystko robi się bardzo szybko: najpierw pracujemy z przyciskiem (definiujemy jego wygląd), potem tworzymy warianty i modyfikujemy je.

Efekt rozmytego szkła

Eksperymentowanie z designem, ciągłe poszukiwanie rozwiązań, które w sposób nowatorski przyciągają uwagę użytkowników do strony internetowej, doprowadziło do powstania ciekawych opcji designerskich. Jedną z takich innowacji stanowi efekt rozmytego szkła.

Metody dobierania kolorów

Krótki samouczek wideo natychmiast wprowadza najczęściej używane zakładki do wybierania, zmiany i dopasowywania kolorów wszystkich elementów układu strony. Kwestia kojarzenia kolorów jest rozwiązana dzięki aplikacji Coolors. Przyjazny interfejs Figmy pozwala na korzystanie z dużej liczby wtyczek, ułatwiając pracę i wspierając poszukiwanie inspiracji wśród użytkowników F-community.

Style

Każda strona internetowa zawiera dziesiątki różnych elementów, których wygląd można jednocześnie dostosowywać za pomocą zmiennych.

Tajniki projektowania

Godzinny webinar, prowadzony przez Witka Janiszewskiego i Łukasza Rybkowskiego, przyda się zarówno początkującym, jak i doświadczonym projektantom. Poruszane tematy to:

1. Jak szybko zacząć projektować;
2. Dlaczego i jak korzystać z design system;
3. Jak stworzyć prototyp aplikacji;
4. Jak zmieniać design system.

Tworzenie animacji

Animacja to interaktywny i przyciągający wzrok sposób prezentowania informacji. W Figmie można tworzyć ruchome elementy nawet ze statycznych obiektów, co pozytywnie wpływa na efektywność elementów witryny.

Makiety

Streaming prowadzony przez Wiktora Mańkowskiego wyświetla aspekty wprowadzenia w projektowanie makiet (do czego są przydatne, dlaczego warto je robić).

Komponenty

Nowe właściwości komponentów

Landing page

Nowoczesne kampanie marketingowe zakładają wykorzystanie Internetu jako głównego źródła pozyskiwania konsumentów. Aby w przystępny, szybki i łatwy sposób zaprezentować promowany produkt lub usługę, należy również przygotować specjalną stronę opisującą wszystkie korzyści wynikające ze współpracy oraz charakterystykę oferty — Landing page.

Prototypowanie

Wiedza o tym, jak wykorzystać nowoczesne oprogramowanie do realizacji projektu, otwiera nowe perspektywy i ułatwia proces roboczy.

Prototypowanie aplikacji

Izometryczny mockup

Wideo pokazuje, jak zrobić prostą aplikację bankową na iPhone'a.

Pluginy

Zarówno doświadczeni profesjonaliści, jak i początkujący projektanci potrzebują czasem więcej możliwości niż standardowa aplikacja może zaoferować. To żaden problem, bo w zakładce Community można znaleźć dziesiątki ciekawych wtyczek, które szybko i za darmo pomogą rozszerzyć funkcjonalność serwisu.

10 przydatnych wtyczek

Karol Stefański przygotował wideo przegląd 10 najlepszych wtyczek do Figmy, wyjaśniając ich funkcjonalność i sposób użycia.

Jak przekazywać projekty dla developerów

Jak szybko zrobić makietę UX

Animowane prezentacje

Prosty tutorial dotyczący tworzenia animowanych prezentacji w Figmie obejmuje następujące tematy:

• zakładka Community;
• ustalenie planu;
• praca z interfacem;
• instrumenty;
• funkcji i właściwości animowania elementów prezentacji.

Dostęp do Figmy można uzyskać z komputera z systemem Windows/MacOS lub z urządzenia mobilnego w dowolnej przeglądarce. Po zarejestrowaniu specjalista ma możliwość szczegółowego zapoznania się z funkcjonalnością, wzięcia udziału w szkoleniu, zrozumienia zalet i wad, a następnie podjęcia decyzji, czy płatna subskrypcja jest niezbędna do prowadzenia wspólnej działalności. Cała praca odbywa się w chmurze, co eliminuje konieczność wzajemnego przesyłania plików. Wystarczy wysłać link, który jest łatwy do wyświetlenia z każdego urządzenia, bez względu na to, gdzie się ono znajduje. Jedyne czego wymaga to stabilne połączenie z Internetem.