Jak rysować w Figma? Poradnik dla początkujących

W Figma możesz rysować gotowe kształty, szkicować odręcznie albo tworzyć precyzyjne ilustracje wektorowe. Najważniejsze narzędzia to Pióro, Ołówek i Kształty, a klawisz Enter otwiera tryb edycji wektorowej, w którym zmienisz punkty oraz krzywe Béziera.

Czym różni się rysowanie w Figma?

Figma nie służy wyłącznie do projektowania interfejsów. Pozwala także tworzyć ikony, ilustracje i niestandardowe kształty za pomocą sieci wektorowych. Są one zbudowane ze ścieżek, punktów i linii określających obrys oraz wypełnienie obiektu.

W tradycyjnych programach wektorowych ścieżka często biegnie w jednym kierunku. Sieć wektorowa w Figma może się rozwidlać i łączyć w wielu miejscach, bez konieczności tworzenia osobnych, zamkniętych ścieżek. Dzięki temu łatwiej budować złożone kształty i edytować ich fragmenty. W zależności od wersji interfejsu narzędzia znajdziesz w UI2 lub UI3. Przełącznik interfejsu znajduje się w lewym dolnym rogu aplikacji.

Przeczytaj też: Tailwind Figma – jak wykorzystać te narzędzia w projektowaniu?

Jakich narzędzi użyć do rysowania?

Wybierz narzędzie zależnie od tego, czy zależy Ci na precyzyjnej ikonie, szybkim szkicu czy bazowym obiekcie:

• Pióro – tworzy precyzyjne ścieżki i sieci wektorowe. Kliknięcia dodają punkty, a przeciąganie tworzy krzywe.
• Ołówek – służy do odręcznego rysowania i adnotacji. Figma stosuje podstawowe wygładzanie utworzonej ścieżki.
• Kształty – zawierają gotowe elementy, takie jak prostokąt, elipsa, linia, wielokąt i gwiazda. Możesz je później edytować jak obiekty wektorowe.

Podczas tworzenia kształtu przydatne są klawisze modyfikujące:

• Shift – blokuje proporcje, na przykład tworzy kwadrat zamiast prostokąta.
• Alt lub Option – skaluje obiekt względem jego środka.
• Spacja – pozwala przesunąć tworzony kształt przed zwolnieniem przycisku myszy.
• Command lub Control – pomaga wyświetlić uchwyty Béziera przy edycji punktu.

Jak narysować własny kształt za pomocą Pióra?

Najprostsze ćwiczenie polega na narysowaniu zamkniętego wielokąta, a następnie jego wygładzeniu.

1. Wybierz narzędzie Pióro albo naciśnij P.
2. Kliknij w kilku miejscach obszaru roboczego, aby utworzyć punkty. Każde kliknięcie połączy się z poprzednim linią.
3. Aby narysować krzywą, kliknij i przeciągnij podczas dodawania punktu. W ten sposób ustawisz uchwyty Béziera, które kontrolują kierunek i stopień wygięcia linii.
4. Przejdź kursorem na pierwszy punkt. Gdy zobaczysz oznaczenie zamknięcia ścieżki, kliknij, aby połączyć początek z końcem.
5. Naciśnij Enter lub Return, aby wejść w tryb edycji wektorowej i dopracować utworzony kształt.

Ścieżkę możesz także pozostawić otwartą. W takim przypadku Figma nie utworzy zamkniętego obszaru wypełnienia, ale pozwoli zastosować obrys oraz zakończenia linii.

Uwaga: zwykłe zaznaczenie obiektu nie oznacza jeszcze edycji jego punktów. Najpierw zaznacz ścieżkę, a potem naciśnij Enter lub kliknij opcję edycji obiektu na pasku narzędzi. Dopiero w trybie edycji wektorowej możesz wybierać pojedyncze węzły, przesuwać je i zmieniać ich właściwości. Aby wyjść z tego trybu, ponownie naciśnij Enter, Return albo Esc.

Polecamy: Najlepsze alternatywy dla Figma – zestawienie narzędzi

Jak dopracować narysowany kształt?

Po wejściu w tryb edycji możesz zaznaczyć cały obiekt, pojedynczy punkt albo odcinek między punktami. Ułatwia to poprawianie proporcji bez rysowania kształtu od początku.

Przy edycji punktów zwróć uwagę na następujące możliwości:

• Przesuwanie punktu – zmienia położenie narożnika lub fragmentu ścieżki.
• Uchwyty Béziera – przeciągaj je, aby kontrolować krzywiznę po obu stronach punktu.
• Zaokrąglenie narożnika – ustaw promień narożnika w prawym panelu lub nadaj różne wartości wybranym punktom.
• Operacje logiczne – łącz, wycinaj i przecinaj kształty za pomocą Union, Subtract, Intersect oraz Exclude.

Operacje logiczne działają na co najmniej dwóch zaznaczonych obiektach. Union łączy je w jeden kształt, Subtract wycina górny obiekt z dolnego, Intersect pozostawia część wspólną, a Exclude usuwa obszary nakładające się. Gdy chcesz otrzymać jedną zwykłą warstwę wektorową, możesz użyć także funkcji Flatten selection.

Polecamy: Figma akcje – jak tworzyć i wykorzystywać je w pracy?

Skróty klawiszowe do rysowania w Figma

Te skróty pozwalają szybko przełączać narzędzia i tryby pracy:

Na początek narysuj prosty kształt narzędziem Pióro, zamknij ścieżkę i wejdź do trybu edycji klawiszem Enter. Gdy opanujesz przesuwanie punktów oraz uchwyty Béziera, operacje logiczne pozwolą szybko budować bardziej złożone ikony i ilustracje.