Текст у Figma. Робота з текстом у Figma
Фігма має хороші можливості для роботи з текстом через спеціальний тип шарів. Щоб створити текстовий шар, натискаємо T і натискаємо на потрібне місце, або розтягуємо блок як прямокутник або кадр і в ньому вже можна писати.
Шрифти з Google Web Fonts
У Фігмі за промовчанням доступна вся бібліотека шрифтів Google Fonts,
Але нажаль не можна динамічно переглядати, як виглядатимуть ці шрифти. Щоб побачити, як виглядатиме шрифт у проекті, його обов'язково потрібно застосувати. Особисто я переглядаю шрифти на самому сайті гуглфонтс, копіюю назву відповідного і застосовую його у Figma.
Режими текстового шару у Figma
• Horizontally — Текстовий блок обволікає текст по горизонталі (якщо немає переходу на новий рядок — текст вишикується в лінію)
• Vertical — обведення тексту по вертикалі
• Fixed – фіксований розмір текстового блоку незалежно від кількості тексту.
Також ти можна завжди зменшити розмір текстового блоку до розміру самого тексту двічі клікнувши по обведенню (монтажній області)
Основні налаштування тексту
Праворуч у верхній частині блоку піктограма Text Styles — спливаюче меню стилів тексту. Докладніше про створення стилів для тексту читай в окремій статті.
• Typeface — сама назва шрифту
• Line Height – міжрядкова відстань. У травні 2019 року пофіксували баги цієї настройки і тепер вона працює, як потрібно.
• Letter Spacing — трекінг, міжлітерна відстань або розрядження.
• Paragraph Spacing — відступ між параграфами, розділеними урвищем рядка, Enter
• Paragraph Indentation – червоний рядок, абзац.
Також тут у нас є можливість вирівнювати текст по лівому краю, центру і правому краю. Але що примітніше — є налаштування по вертикальному вирівнюванню, що просто неймовірно круто та корисно.
У додатковому меню за трьома точками ховається більш докладна настройка вирівнювання тексту всередині блоку по вертикалі та горизонталі
Червоний виділений блок в якому можна налаштувати всі літери великі, малі, кожне слово з великої літери, підкреслений і закреслений текст.
Містить додаткові можливості для шрифту та для…. не знаю для кого)) Це фішки, що дуже рідко використовуються.
Discretionary and historical ligatures — чи використовувати дискретні та історичні лігатури.
Fractions – дроби. Чи з'єднувати такі значення як 1/2 один гліф з дробом.
Виставлення ступенів та числових підписів
Тут можна вибрати розміри комірки кожної літери. Наприклад, зробити так, щоб кожна буква займала певну ширину або щоб займала ширину, що дорівнює своєму розміру. Корисно для табличок та перфекціоністів.
Гарячі клавіші в роботі з текстом Фігма
На початку відповіді на популярні запитання:
Як вставити текст у Фігма? - CTRL + V
Як розтягнути текст у Фігмі? - Вибирай scale tool (K) і розтягуй текст, як потрібно. Він розтягуватиметься пропорційно.
- ctrl+C копіювати
- ctrl+V вставити
- ctrl+D зробити дубль (дубль з'являється миттєво поверх елемента, що копіюється)
- ctrl+alt+C копіювати властивості тексту (колір, тіні, обведення, для шрифту — розмір, зображення, керлінг тощо)
- ctrl+alt+V вставити властивості
- ctrl+shift+V вставити текст із властивостями текстового блоку, в який ти вставляєш сам текст
- ctrl+B текст стане жирним
- ctrl+I текст стане похилим
- ctrl+U текст буде підкреслено