W Figmie nie konwertujesz zewnętrznego pliku tekstowego do specjalnego formatu „text to figma”. Tekst dodajesz bezpośrednio za pomocą natywnego narzędzia Text Tool, a następnie ustawiasz jego rozmiar, font, odstępy i sposób wyrównania. Figma obsługuje także tekst na ścieżce, więc do podstawowej pracy nie potrzebujesz wtyczek.
Jak działa tekst w Figmie?
Wyszukiwana fraza „text to figma” najczęściej oznacza pracę z tekstem wewnątrz pliku Figma, a nie konwersję dokumentu. Najważniejszym narzędziem jest Text Tool, uruchamiane skrótem T. Po jego wybraniu możesz kliknąć na płótnie albo przeciągnąć obszar, w którym ma znaleźć się tekst.
Sposób utworzenia pola decyduje o jego zachowaniu. Kliknięcie tworzy pole, którego szerokość dopasowuje się do treści. Przeciągnięcie kursora tworzy pole o określonej szerokości, w którym tekst zawija się do kolejnych wierszy.
Jak dodać i skonfigurować tekst?
Aby wstawić podstawowy tekst do projektu, wykonaj następujące kroki:
- Wciśnij T albo wybierz Text Tool z paska narzędzi.
- Kliknij w wybranym miejscu na płótnie, jeśli tworzysz krótki nagłówek, etykietę lub tekst przycisku.
- Przeciągnij kursorem, jeśli chcesz utworzyć pole o stałej szerokości dla akapitu.
- Wpisz treść i zaznacz warstwę tekstową, aby edytować jej właściwości w prawym panelu.
- Ustaw font, grubość, rozmiar, interlinię, odstępy między literami i wyrównanie.
W Figmie spotkasz dwa główne typy pól tekstowych:
| Typ pola | Zachowanie | Zastosowanie |
|---|---|---|
| Auto-width | Szerokość rośnie wraz z wpisywaną treścią. | Krótkie nagłówki, etykiety, przyciski i pojedyncze linie tekstu. |
| Fixed-size | Szerokość pozostaje stała, a tekst zawija się do kolejnych wierszy. | Akapity, opisy produktów, formularze i większe bloki tekstu. |
| Auto-height | Szerokość możesz kontrolować, a wysokość dopasowuje się do liczby wierszy. | Tekst w kartach, sekcjach interfejsu i responsywnych układach. |
Jeśli tworzysz przycisk, zwykle wygodniejsze będzie pole Auto-width. Dzięki temu jego szerokość może dopasować się do etykiety. Dla dłuższego opisu wybierz stałą szerokość lub Auto-height, ponieważ łatwiej kontrolować wtedy szerokość kolumny tekstu.
Polecamy: Tailwind Figma – jak wykorzystać te narzędzia w projektowaniu?
Jak zrobić tekst na ścieżce?
Figma ma natywną funkcję Text on path. Pozwala umieścić tekst wzdłuż linii, okręgu albo innej krzywej wektorowej bez instalowania dodatkowej wtyczki.
- Narysuj ścieżkę za pomocą narzędzia Pen albo utwórz kształt, na przykład okrąg.
- Wybierz Text Tool skrótem T.
- Przesuń kursor nad krawędź ścieżki. Gdy wskaźnik zmieni wygląd i pojawi się oznaczenie zakrzywionej linii, Figma rozpozna tryb tekstu na ścieżce.
- Kliknij krawędź i wpisz treść.
- Zaznacz tekst, aby zmienić font, rozmiar, odstępy oraz położenie względem ścieżki.
Ta funkcja sprawdza się przy okrągłych etykietach, logotypach, ozdobnych nagłówkach i elementach dekoracyjnych. Przed użyciem sprawdź, czy ścieżka jest wektorowa i czy kursor znajduje się dokładnie nad jej krawędzią. Jeśli Figma nie aktywuje tekstu na ścieżce, wybierz ponownie Text Tool i najedź na obrys z innego miejsca.
Zobacz także: Najlepsze alternatywy dla Figma – zestawienie narzędzi
Na jakie właściwości tekstu zwrócić uwagę?
Po zaznaczeniu warstwy tekstowej ustawienia znajdziesz w prawym panelu. Najczęściej używane parametry to:
- Font i jego wariant – wybierz rodzinę kroju oraz grubość, na przykład Regular, Medium lub Bold.
- Text size – zmienia rozmiar znaków, a nie rozmiar samego pola tekstowego.
- Line height – określa odległość między wierszami.
- Letter spacing – reguluje odstęp między literami.
- Paragraph spacing – ustawia odstęp między akapitami.
- Wyrównanie – pozwala ustawić tekst do lewej, środka, prawej lub obustronnie, a także określić jego położenie w pionie.
Do podstawowej pracy przydadzą się także skróty Ctrl + B lub Cmd + B do pogrubienia, Ctrl + I lub Cmd + I do kursywy oraz Ctrl + U lub Cmd + U do podkreślenia. Na komputerze Mac używaj klawisza Cmd zamiast Ctrl.
W interfejsach tekst powinien tworzyć wyraźną hierarchię. Najważniejsze informacje, takie jak nazwa produktu, cena lub etykieta głównego przycisku, mogą mieć większy rozmiar albo większą grubość. Tekst na przycisku musi też wyraźnie odróżniać się od jego tła.
Zobacz także: Jak dodać link do innego slajdu w Figma Slides?
Ostrzeżenie: dekoracyjne fonty typu script mogą wyglądać atrakcyjnie w logo lub krótkim nagłówku, ale zwykle pogarszają czytelność dłuższych treści. Przy wyborze kroju sprawdź polskie znaki, dostępne warianty oraz wygląd tekstu w docelowym rozmiarze. Font systemowy lub niedostępny u innej osoby może zostać zastąpiony innym krojem, dlatego przed przekazaniem projektu upewnij się, że używane fonty są dostępne w zespole.
Jak wybrać metodę pracy?
Do zwykłego tekstu użyj Text Tool i dobierz typ pola do długości treści. Auto-width sprawdzi się w krótkich elementach, Fixed-size lub Auto-height w akapitach, a Text on path w kompozycjach opartych na krzywej. To natywne funkcje Figmy, więc nie musisz szukać zewnętrznego konwertera ani wtyczki, aby rozpocząć pracę.
