Przewodnik po Figma dla początkujących

W programie Figma można projektować elementy interfejsu, tworzyć interaktywne strony internetowe i prototypy aplikacji, tworzyć ilustracje i pracować z grafiką wektorową. Wielu projektantów używa go również do tworzenia układów stron internetowych dla Tilda.

• Interfejs dla aplikacji mobilnych - FigmaiOS UI kit.
• Prototyp panelu sterowania Tesla Model 3 i jego elementy interfejsu.

Na przykład kierownicy projektów i przedsiębiorcy mogą korzystać z szablonów wykresów Gantta do planowania lub tworzyć reklamy w mediach społecznościowych przy użyciu gotowych ustawień dla Facebooka i innych platform.

• Cross-Platform

• Oparte na chmurze

• Wbudowana informacja zwrotna

Każdy, kto ma dostęp, może skomentować układ i uzyskać opinię bezpośrednio na temat projektu. Przyspiesza to proces zatwierdzania i gwarantuje, że ważne notatki nie zostaną zagubione w wątkach wiadomości e-mail.

Po zarejestrowaniu się zobaczysz dwa główne obszary robocze:

1. Menedżer plików, w którym można tworzyć projekty i dostosowywać ustawienia profilu.
2. Sam edytor graficzny.

Figma Community to stosunkowo nowa funkcja, która działa jak markowa platforma mediów społecznościowych w ramach głównego narzędzia. Umożliwia ona użytkownikom udostępnianie i odkrywanie zasobów projektowych, takich jak szablony, zestawy interfejsu użytkownika i wtyczki. Aby uzyskać do niej dostęp, kliknij ikonę kuli ziemskiej.

Wtyczki to zasadniczo narzędzia i rozszerzenia innych firm, które poszerzają funkcjonalność aplikacji Figma. Pomagają one przyspieszyć przepływ pracy, poprawić wydajność i zapewniają dodatkowe funkcje, takie jak biblioteki obrazów stockowych, ikony itp.

Na przykład, jeśli zainstalujesz wtyczkę Unsplash, będziesz mógł wstawiać obrazy stockowe bez opuszczania Figma, podczas gdy Iconify daje dostęp do ponad 40 000 ikon wektorowych.

Użytkownicy mogą samodzielnie opracowywać i dodawać wtyczki, dostosowując funkcjonalność Figmy do swoich konkretnych potrzeb.

Odkąd Figma wprowadziła Figma Community, wtyczki stały się częścią tego interfejsu. Można tam znaleźć i przeglądać wszystkie dostępne wtyczki.

Po podłączeniu żądanych wtyczek są one dostępne na dolnym pasku narzędzi, w zakładce Wtyczki i widżety.

Nowy ekran pliku zawiera trzy główne obszary: Kanwa, pasek narzędzi i dwa paski boczne. Lewy pasek boczny zawiera panel Warstwy. Oto kilka kluczowych elementów interfejsu:

Domyślnie wszystkie nowo dodane kształty mają kolor szary. Aby zmienić kolor, wybierz opcję "Wybierz kolor" z menu rozwijanego Edycja. Spowoduje to otwarcie selektora kolorów, który umożliwia wybranie nowego koloru poprzez zidentyfikowanie dowolnego koloru już używanego na kanwie.

"Zaznacz wszystko za pomocą..." zaznacza wszystkie elementy o tych samych właściwościach, wypełnieniach, czcionkach lub efektach, ułatwiając edycję wsadową.

To menu pomaga skonfigurować kanwę, ułatwiając nawigację po układzie. Można włączyć siatkę pikseli, wyświetlać linijki, powiększać lub pomniejszać itp.

Aby zmaksymalizować przestrzeń roboczą, można ukryć panel Warstwy i interfejs za pomocą odpowiednich opcji.

Obiekty umieszczone w ramce są wyświetlane jako "warstwy" po lewej stronie. Możesz także grupować obiekty (np. umieszczając numer telefonu i adres e-mail w stopce strony). Wyrównaj elementy wewnątrz ramki za pomocą panelu po prawej stronie lub zgrupuj je za pomocą opcji Obiekt → Grupuj zaznaczenie(Ctrl/Cmd + G).

Zdefiniuj liczbę kolumn, dostosuj ich przezroczystość kolorów i szerokość marginesów. Możesz także wybrać typ siatki - wyświetlając ją jako siatkę, kolumny lub wiersze.

• Do przesuwania i skalowania obiektów na osiach X i Y służą ustawienia znajdujące się w górnej części panelu właściwości.
• Użyj ustawienia Promień narożnika w sekcji Wygląd, aby zaokrąglić narożniki kształtu - na przykład, aby górne krawędzie prostokąta wyglądały jak zakładka. Domyślnie promień dotyczy wszystkich narożników. Aby zaokrąglić tylko określone narożniki, kliknij ustawienie Poszczególne narożniki obok pól wartości.

• Aby dostosować grubość obrysu, użyj ustawienia "Obrys" - wprowadź wartość lub przeciągnij suwak. Aby ukryć wypełnienie, kliknij ikonę oka lub minusa w sekcji "Wypełnienie".

• Aby prostokąt wyglądał jak flaga, wydłuż jego dolną krawędź. Kliknij dwukrotnie kształt, aby edytować jego punkty.

• "Narzędzie zginania" umożliwia wygładzanie narożników lub krzywych.
• "Wiadro z farbą" umożliwia wypełnienie zamkniętej ścieżki.

• Wypełnienie: obraz jest skalowany w celu całkowitego pokrycia ramki, dzięki czemu nie pozostaje pusta przestrzeń. Jeśli proporcje obrazu różnią się od proporcji ramki, fragmenty obrazu mogą zostać przycięte w celu zachowania pełnego pokrycia.

• Dopasuj: Wyświetla cały obraz w ramce, zachowując jego oryginalne proporcje. Może to skutkować pustą przestrzenią (wypełnieniem), jeśli obraz i ramka mają różne proporcje.

• Kadrowanie: Umożliwia ręczne dostosowanie części obrazu widocznej w ramce. Można zmienić położenie i rozmiar obrazu, aby skupić się na określonym obszarze, przycinając resztę. Przycięte obszary są ukrywane, ale nie usuwane, umożliwiając nieniszczącą edycję.

• Płytka: Powtarza obraz jako wzór.

Dostępne ustawienia pozwalają również na dokonywanie korekt zdjęcia - dostosowywanie jasności, kontrastu, nasycenia itp. lub nawet edytowanie określonej części zdjęcia.

1. Umieść warstwę kształtu pod warstwą zdjęcia.
2. Wybierz obie warstwy.
3. Przejdź do Obiekt → Użyj jako maski (skrót: Ctrl + Alt + M w systemie Windows lub Cmd + Opt + M w systemie macOS).

Figma obsługuje importowanie plików SVG. Można je przeciągać z komputera lub kopiować i wklejać bezpośrednio z programu Illustrator lub Fresco. Pliki te są często wyświetlane jako ramki. W panelu Warstwy można grupować obiekty wektorowe, naciskając klawisze Ctrl + G (Windows) lub Cmd + G (macOS) i przenosząc je nad warstwę ramki.

• Jednolite : domyślny typ wypełnienia, stosujący pojedynczy kolor do obiektu.
• Liniowy: Tworzy gradient wzdłuż linii prostej między dwoma punktami.
• Promieniowy: Generuje gradient kołowy rozchodzący się promieniście od punktu centralnego.
• Kątowy: Stosuje gradient, który obraca się wokół centralnego punktu, tworząc efekt plastra ciasta.
• Diament: Tworzy gradient w kształcie rombu, rozchodzący się promieniście od środka.
• Obraz: Wypełnia obiekt obrazem (lub wideo).

Modyfikując położenie punktów końcowych gradientu, można kontrolować kierunek i intensywność przejścia kolorów.

Aby uzyskać bardziej kreatywne opcje, spróbuj nakładać kształty warstwami i stosować wiele gradientów. Możesz użyć trybów mieszania, aby układać kształty lub obrazy w unikalny sposób.

Jeśli połączenie między komponentem nadrzędnym i podrzędnym zostanie zerwane, można je przywrócić, wybierając komponent podrzędny i klikając ikonę Resetuj lub Wróć. Ta czynność przywraca wszelkie ręcznie zmienione parametry, przywracając połączenie z komponentem nadrzędnym.

Zapisz wszystkie wariacje w dedykowanej ramce, a następnie zastosuj je do warstw tekstowych zgodnie z potrzebami.

• Odłącz instancję podrzędną od jej rodzica za pomocą opcji "Odłącz instancję".
• Zastosuj układ automatyczny.

• Stałe: Utrzymuje statyczną szerokość/wysokość zgodnie z ręcznie wprowadzonymi parametrami.
• Uścisk: Ramka automatycznie zmienia rozmiar, aby dopasować się do zawartości.
• Wypełnienie: Element wypełnia szerokość lub wysokość kontenera nadrzędnego.

• Zawijaj: Układa elementy w wielu wierszach lub kolumnach w ramce. Obiekty przepływają poziomo i zawijają się do następnego wiersza, gdy ilość miejsca jest ograniczona.
• Min/Max: Ustawia minimalne i maksymalne wymiary ramek i elementów podrzędnych, zapobiegając ich zbyt dużemu lub zbyt małemu rozmiarowi.

Ta wtyczka umożliwia przeglądanie ponad 40 000 ikon wektorowych z Iconify, w tym kolekcji takich jak Material Design, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji itp. i szybkie wstawianie ich do projektu.

• Windows: Ctrl + Shift + E
• macOS: Cmd + Shift + E

• SVG: Idealny do obiektów wektorowych, takich jak ikony i proste grafiki, ze względu na skalowalność i wyrazistość w dowolnym rozmiarze.
• JPEG: Najlepiej nadaje się do zdjęć i obrazów z gradientami, oferując dobrą kompresję i równowagę jakości.
• PNG: preferowany w przypadku obrazów wymagających przezroczystości lub obrazów z tekstem i ostrymi krawędziami, ponieważ obsługuje kompresję bezstratną.
• PDF: Przydatny w przypadku dokumentów i układów, które muszą zachować elementy wektorowe i być skalowalne bez utraty jakości.

• Omawianie projektów: Współpracuj w czasie rzeczywistym za pomocą czatów głosowych i komentarzy, a nawet osadzaj muzykę. FigJam oferuje funkcje sztucznej inteligencji (obecnie w wersji beta), takie jak "Sortuj", która automatycznie organizuje notatki samoprzylepne według tematu, oraz "Podsumuj", która zapewnia szybki przegląd wszystkich notatek.
• Rób notatki i analizuj wywiady z klientami: Projektanci mogą korzystać z wbudowanego szablonu do rejestrowania wywiadów z użytkownikami, a następnie tworzyć personę użytkownika na podstawie zebranych danych.
• Twórz mapy podróży klientów: Wizualizuj ścieżki użytkowników - opisuj podejmowane przez nich działania, ich oczekiwania, emocje i punkty bólu. Wzbogać każdy etap podróży użytkownika za pomocą narzędzi takich jak karteczki samoprzylepne, emotikony i inne widżety.

• Wymaga ponownego uruchomienia, aby dodać lokalne czcionki: Samo zainstalowanie czcionki na komputerze nie wystarczy. Aby ją załadować, konieczne będzie ponowne uruchomienie aplikacji Figma.
• Możliwe niedokładności eksportu: Czasami Figma losowo dodaje kilka pikseli obrysu lub zniekształca ilustracje liniowe podczas eksportowania plików PNG, JPG lub SVG.
• Brak wbudowanej ochrony praw autorskich: W bezpłatnym planie Starter nie ma sposobu, aby uniemożliwić komuś powielenie pliku i edycję własnej kopii.
• Wymaga stabilnego połączenia internetowego: Podobnie jak Dokumenty Google lub jakakolwiek inna usługa oparta na chmurze, Figma nie pozwala na edycję offline. Jeśli utracisz połączenie, zmiany nie zostaną zapisane, dopóki nie powrócisz do trybu online.
• Brak niestandardowych skrótów klawiaturowych: Skróty dostępne w aplikacji Figma są stałe, ale można użyć narzędzi innych firm, takich jak AutoHotkey, do zmiany mapowania klawiszy.
• Brak wersji wielojęzycznych: Figma jest obecnie dostępna tylko w języku angielskim i japońskim. Jeśli potrzebujesz jej w innym języku, jedynym sposobem jest skorzystanie z rozszerzenia Tłumacz Google dla Chrome. Jeśli masz doświadczenie z edytorami graficznymi, takimi jak Photoshop, lub postępowałeś zgodnie z tym przewodnikiem, łatwiej będzie ci poruszać się po Figma.

• Edytor graficzny online: cały zespół może pracować nad tym samym plikiem jednocześnie, a wszystkie aktualizacje są zapisywane w chmurze.
• Historia wersji: Figma przechowuje każdą zmianę wersji, dzięki czemu w razie potrzeby można ją łatwo cofnąć.
• Brak ograniczeń systemu operacyjnego: Figma działa bezpośrednio w przeglądarce, więc nie wymaga skomplikowanej konfiguracji i działa nawet na skromnych laptopach. Jeśli jednak wolisz, możesz również zainstalować aplikację komputerową.
• Model freemium: Bezpłatny plan Starter obsługuje do dwóch edytorów - idealny dla wielu freelancerów lub małych zespołów.
• Idealny dla prostych prototypów: Ogólna koncepcja i interfejs są przeznaczone do tworzenia interfejsów internetowych i aplikacji. Jednak w przypadku bardziej zaawansowanych ilustracji lub edycji zdjęć może być konieczne użycie innego narzędzia.
• Ekosystem wtyczek: Dzięki setkom dostępnych wtyczek (i możliwości tworzenia własnych) Figma może dostosować się do większości przepływów pracy.