Jak korzystać z Figma: przewodnik dla początkujących

Świat oprogramowania do projektowania graficznego jest ogromny i ma dużą konkurencję. Figma to jedno narzędzie do projektowania, które zdobywa czołowe miejsca wśród projektantów UX/UI na całym świecie. Ale co wiesz o tym intuicyjnym narzędziu?

Chociaż jest to proste, istnieje również krzywa uczenia się, jeśli jesteś przyzwyczajony do innych narzędzi do projektowania. Spójrzmy na Figmę i jak z niej korzystać. Witamy w Figmie 101.

Co to jest Figma?

Jeśli pracowałeś jako grafik lub projektant stron internetowych w ciągu ostatnich kilku lat, prawdopodobnie słyszałeś o Figmie. Być może nawet go używałeś.

Figma to narzędzie do projektowania, które stale staje się ulubieńcem projektantów cyfrowych, szybując nad opcjami takimi jak Adobe XD, Adobe Photoshop i Sketch, do projektowania stron internetowych i nie tylko. Jednak odkąd Adobe przejęło Figmę w 2022 roku, mogą nastąpić pewne zmiany, które spowodują przetasowanie tabeli liderów.

Figma ma wiele zastosowań. Jest używany głównie do projektowania cyfrowego i nie można projektować w CMYK do druku. Niektóre z głównych zastosowań Figma obejmują:

• Prototypowanie
• Projekt UX/UI
• Projekt aplikacji
• projektowanie stron
• Projekt prezentacji

Możesz użyć wtyczek do makiet Figma, aby pokazać swoje projekty, konwertować prawdziwe strony internetowe do projektów Figma za pomocą wtyczek, a nawet tworzyć szablony główne dla projektów Figma, aby zaoszczędzić czas w powtarzalnych typach projektów.

Ile kosztuje Figa?

Możesz bezpłatnie założyć konto Figma na stronie Figma lub pobierając aplikację Figma . Darmowe konto zapewnia funkcjonalność dla wszystkich aspektów projektowania aplikacji. Możesz projektować za pomocą Figma i FigJam — narzędzia do współpracy firmy Figma.

Jeśli używasz Figma jako hobbysta lub jako wolny strzelec, wersja Free Forever jest prawie idealna. Nadal masz dostęp do wszystkich wtyczek, możesz zapraszać nieograniczoną liczbę współpracowników, korzystać z nieograniczonej liczby plików osobistych i korzystać z Figmy na wszystkich platformach.

Podczas gdy darmowa wersja Figma oferuje więcej niż wystarczająco dla każdego standardowego projektanta, subskrypcja Figma Professional pozwala zapraszać członków zespołu, pracować z bibliotek zespołu, mieć dostęp do nieograniczonej liczby plików Figma i historii wersji i więcej, za 12 USD miesięcznie na redaktora. Jeśli jesteś studentem lub nauczycielem, możesz otrzymać Figma Professional za darmo.

Jak korzystać z Figmy: podstawy

Niezależnie od tego, czy korzystasz z aplikacji Figma, czy z wersji przeglądarkowej, możesz łatwo śledzić.

Po otwarciu programu Figma zostaną wyświetlone opcje rozpoczęcia nowego pliku Figma, nowego pliku FigJam lub zaimportowania pliku utworzonego w innym programie, takim jak Sketch lub Adobe XD. Jeśli korzystałeś już z Figma, zobaczysz także swoje poprzednie projekty Figma, które możesz otworzyć i nad którymi możesz pracować.

Poruszanie się po przestrzeni roboczej Figma

Otwarcie nowego pliku początkowo wygląda mało inspirująco. W przeciwieństwie do wielu innych programów do projektowania, nie zaczynasz od obszaru roboczego lub płótna, ale od całkowicie pustej strony projektu. Ale z umysłem pełnym inspiracji nie pozostanie długo pustą przestrzenią.

Górne lewe poziome menu zaczyna się od ikony Menu głównego — logo Figma. Wybierając menu główne, możesz przejść do innych plików, szybkich akcji Figma, typowych opcji plików oraz uzyskać dostęp do wtyczek, widżetów i bibliotek.

Następnie znajdziesz narzędzie Przesuń ( V ) z zagnieżdżonym pod nim narzędziem Skala ( K ). Narzędzia te służą do przesuwania elementów lub skalowania części projektu w górę lub w dół. Po prawej stronie tych narzędzi zobaczysz narzędzia Region, Ramka ( F ), Sekcja i Plasterek , zagnieżdżone razem.

W programie Figma ramka jest tym, co inne programy mogą nazywać obszarem roboczym lub płótnem. Wybierz opcję Ramka , aby narysować płótno o niestandardowym rozmiarze. Po wybraniu menu po prawej stronie zostaną wyświetlone gotowe opcje ramek dla popularnych rozmiarów urządzeń: smartfonów, tabletów, komputerów stacjonarnych, inteligentnych zegarków, prezentacji i opcji mediów społecznościowych. Możesz także kliknąć i przeciągnąć ramkę bezpośrednio, aby nadać jej dowolny niestandardowy rozmiar.

Wróć do lewego górnego menu, po prawej stronie narzędzi Region znajdują się narzędzia Kształt , narzędzia Pióro i narzędzie Tekst . Potem następuje Zasoby — komponenty , wtyczki i widżety — oraz narzędzie Rączka do poruszania się po pliku. I wreszcie narzędzie Komentarze , które świetnie nadaje się do robienia notatek i współpracy z członkami zespołu.

Menu projektowe Figmy

Po narysowaniu ramki, wybranie jej tytułu aktywuje ramkę, gotową do projektowania. Menu po prawej stronie zawiera tytuły dla opcji Projekt , Prototyp i Kontrola . Jak sama nazwa wskazuje, opcja Projekt to menu, którego użyjesz do zaprojektowania elementów ramy.

Chociaż początkowe menu Projekt jest nieco uproszczone, w miarę dodawania kolejnych elementów do projektu opcje menu ewoluują. Na początku menu jest wyświetlane od góry do dołu z narzędziami wyrównywania, narzędziami do zmiany rozmiaru, Układem automatycznym , Siatką układu , Warstwami , Wypełnieniem , Obrysem , Efektami i Eksportem . Niektóre z nich są domyślnie zminimalizowane, ale klikając znak + , możesz otworzyć dowolne menu lub nacisnąć – , aby je zminimalizować.

Po narysowaniu głównej ramki projektu możesz użyć narzędzi Kształt lub Pióro, aby narysować kształty lub dodać symbole zastępcze obrazu, a także możesz dodać tekst za pomocą narzędzia Tekst w sposób, który prawdopodobnie robiłeś w innym oprogramowaniu.

Po umieszczeniu kształtów lub tekstu w ramce użyj różnych opcji menu po prawej stronie, aby edytować i projektować te elementy. Menu Warstwa oferuje tryby krycia i mieszania; za pomocą Wypełnienia możesz dodawać kolory lub wstawiać obrazy za pomocą niektórych funkcji edycyjnych, takich jak Ekspozycja , Kontrast , Temperatura i inne.

W miarę tworzenia kolejnych elementów w projekcie warstwy będą się pojawiać w menu Warstwy po lewej stronie obok karty Zasoby . Możesz dwukrotnie kliknąć tytuł warstwy, aby znaleźć element i odwrotnie; możesz dwukrotnie kliknąć element projektu, aby znaleźć podświetloną warstwę. Dwukrotne kliknięcie tytułów umożliwia zmianę ich nazw w celu uzyskania optymalnej organizacji.

Menu prototypu Figmy

Po prawej stronie opcji menu Projekt znajduje się menu Prototyp . Po sfinalizowaniu wizualnych aspektów projektu i ustawieniu ramek graficznych i tekstu tam, gdzie powinny się znaleźć, możesz użyć narzędzi prototypowych, aby dodać animacje i przejścia do swoich projektów.

Menu Prototyp umożliwia łączenie ramek lub komponentów razem jako przejścia. Możesz wybrać, w jakiej kolejności i jak każda klatka przechodzi do innej.

Działa to świetnie, jeśli tworzysz prezentację Figma, która animuje od jednego slajdu do drugiego, ale narzędzie pozwala również fachowo wizualizować animacje przycisków lub menu do projektowania aplikacji i stron internetowych. Możesz dodać wiele przejść na stronę dla różnych rzeczy, dzięki czemu możesz zobaczyć, jak użytkownicy będą wchodzić w interakcję z Twoją witryną, gdy będzie ona dostępna.

Podczas gdy używanie Figmy do projektowania strony internetowej to nie to samo, co tworzenie działającej strony internetowej, możesz przekazać swój projekt Figmy swojemu zespołowi programistów, który może odtworzyć twoje prototypowe interakcje jako rzeczywiste projekty animacji dla Twojej witryny. Oznacza to, że możesz przechodzić ze strony na stronę na podstawie kliknięć, czasu lub innych interakcji.

Rozpoczęcie pracy z Figma jest łatwe

Teraz wiesz, jak poruszać się po układzie Figma i jak działają podstawowe narzędzia do projektowania i tworzenia prototypów. Ponieważ Figma jest tak łatwo dostępna, czas zacząć majstrować przy tym narzędziu do projektowania i zobaczyć, co można stworzyć.