Ś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 Figma. 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 od Adobe przejęło Figmę w 2022 roku, mogą nastąpić pewne zmiany, które spowodują przetasowanie tabeli liderów.
Tam są wiele zastosowań dla Figmy. 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żyj wtyczek do makiet Figma aby pomóc pokazać swoje projekty, konwertuj prawdziwe strony internetowe na projekty Figma za pomocą wtyczek, a nawet tworzyć wzorcowe szablony projektów Figma aby zaoszczędzić czas w powtarzalnych typach projektów.
Ile kosztuje Figa?
Możesz założyć konto Figma za darmo na stronie Witryna Figmy lub pobierając plik Aplikacja Figma. Darmowe konto zapewnia funkcjonalność dla wszystkich aspektów projektowania aplikacji. Możesz projektować z Figmą i FigJam — narzędzie 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 na to zapraszaj członków zespołu, pracuj z bibliotek zespołu, miej dostęp do nieograniczonej liczby plików Figma i historii wersji i nie tylko za 12 USD miesięcznie na redaktor. 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ć.
Kiedy otworzysz Figma, zobaczysz 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 również swoje poprzednie projekty Figma, które możesz otworzyć i pracować nad nimi.
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 Menu główne ikona — logo Figmy. Wybór Menu główne, możesz przejść do innych plików, szybkich akcji Figmy, typowych opcji plików oraz uzyskać dostęp do wtyczek, widżetów i bibliotek.
Następnie znajdziesz Przenosić narzędzie (V) z Skala narzędzie (k) zagnieździł się pod nim. 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, Rama (F), Sekcja, I Plasterek, przytulone do siebie.
W programie Figma ramka jest tym, co inne programy mogą nazywać obszarem roboczym lub płótnem. Wybierać Rama 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.
Powrót do lewego górnego menu, po prawej stronie narzędzi Region są Kształt narzędzia, Długopis narzędzia i Tekst narzędzie. Następnie zasoby —składniki, Wtyczki, I Widżety— i Ręka narzędzie do poruszania się po pliku. I wreszcie, Uwagi narzędzie, 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 pokazuje tytuły dla Projekt, Prototyp, I Sprawdzać. Jak sama nazwa wskazuje, opcja Projekt to menu, którego użyjesz do zaprojektowania elementów na ramie.
Chociaż początkowe menu Projekt jest nieco uproszczone, w miarę dodawania kolejnych elementów do projektu opcje menu ewoluują. Na początku menu przebiega od góry do dołu z narzędziami do wyrównywania, narzędziami do zmiany rozmiaru, Układ automatyczny, Siatka układu, Warstwa, Wypełnić, Udar, Efekty, I Eksport. Niektóre z nich są domyślnie zminimalizowane, ale po kliknięciu przycisku + znak, możesz otworzyć dowolne menu lub nacisnąć – aby to zminimalizować.
Po narysowaniu głównej ramki projektu możesz użyć narzędzi Kształt lub narzędzi Pióro do rysowania kształtów lub dodaj symbole zastępcze obrazu i możesz dodać tekst za pomocą narzędzia Tekst w sposób, który prawdopodobnie robiłeś w innych oprogramowanie.
Po umieszczeniu kształtów lub tekstu w ramce użyj różnych opcji menu po prawej stronie, aby edytować i projektować te elementy. The Warstwa menu oferuje tryby krycia i mieszania; z Wypełnić możesz dodawać kolory lub wstawiać obrazy za pomocą niektórych funkcji edycji, takich jak Narażenie, Kontrast, Temperatura, i więcej.
W miarę tworzenia większej liczby elementów w projekcie warstwy będą tworzyć się po lewej stronie Warstwy menu obok Aktywa patka. 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
Na prawo od Projekt opcja menu to Prototyp menu. 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.
The Prototyp menu 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.
To działa świetnie, jeśli jesteś przygotowanie prezentacji Figmy które animuje od jednego slajdu do drugiego, ale narzędzie to umożliwia również fachową wizualizację animacji 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ć swoją Figmę zaprojektuj swojemu zespołowi programistów, który może odtworzyć interakcje prototypów jako rzeczywiste projekty animacji dla Ciebie strona internetowa. 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żesz stworzyć.