Інструменти для роботи з текстом у Figma не є надто складними, якщо є кілька нюансів, про які варто пам’ятати. Тому ми пройдемо через усі інструменти, які пропонує Figma, і обговоримо їхні функції. Сподіваюся, це буде для вас корисним.
Додавання тексту
Отже, давайте надрукуємо якийсь текст. Для цього, звісно, можна натиснути клавішу “Т” на клавіатурі, яка активує інструмент текст, а далі просто клацаємо в будь-якому місці та починаємо друкувати. Натискаємо “Enter” і продовжуємо. Якщо ми просто клацаємо і друкуємо, то нас нічого ніколи не буде обмежувати. Але якщо ми хочемо задати обмеження, іншими словами “Область для тексту”, то нам потрібно вибрати інструмент текст і створити текстову рамку. І тепер, якщо ми будемо друкувати в цій рамці, текст автоматично переноситиметься на наступний рядок. Якщо вставити шматок тексту з іншого місця, він теж вийде за межі рамки, бо вона має фізичні розміри.
Типографічні можливості
Тепер розглянемо, які типографічні можливості пропонує нам Figma. Я підготувала два тексти: заголовок і абзац із двома частинами. Виділимо перший текст. У меню справа бачимо розділ Typography. Тут знаходяться всі інструменти для роботи з текстом.
- Текстовий стиль: Чотири крапки дозволяють вибрати текстовий стиль, про який поговоримо в іншому уроці. Якщо стиль не вибрано, ми створюємо його з нуля.
- Шрифт: Тут можна вибрати будь-який шрифт. Наприклад, можна вибрати один із шрифтів Google. Вони доступні у Figma за замовчуванням і є безкоштовними.
- Вага шрифту: Наступне поле дозволяє вибрати вагу шрифту, тобто його товщину.
- Розмір шрифту: Далі є цифра, що вказує на розмір шрифту. Можна вибрати розмір із запропонованого списку або ввести з клавіатури.
- Висота рядка (Line Height): Вона визначає відстань між рядками. Наприклад, якщо розмір шрифту 32, висота рядка 39. Вводячи інше значення, наприклад 48, ми бачимо, що відстань між рядками змінюється відповідно. Це поле приймає не лише числа, а й відсотки. Наприклад, якщо встановити 100%, висота рядка завжди відповідатиме розміру шрифту.
- Інтервал між літерами (Letter Spacing): Його значення задається у відсотках. Я раджу бути дуже обережними з цією опцією, оскільки вона може значно вплинути на сприйняття тексту. Якщо ви не впевнені, краще залиште значення 0.
- Вирівнювання тексту: Ліворуч, по центру або праворуч. Є також класичні опції вирівнювання тексту в текстовому полі - до верхньої, середньої або нижньої частини.
- Додаткові налаштування тексту: Вони знаходяться тут, де значок налаштувань, і включають вирівнювання по ширині, підкреслення та перекреслення, зміна регістру тексту і так далі. Наприклад, одним кліком мишки ви можете перетворити весь текст у верхній регістр або навпаки у нижній. Це може бути корисним для створення кнопок. Також тут є вертикальна обрізка.
- Створення списків: Ще одна корисна функція Figma.
- Відстань між абзацами (Paragraph Spacing): Як ви мабуть здогадалися з назви, ця функція дозволяє регулювати відстань між кількома абзацами.
- Обрізка тексту (Truncate Text): Якщо ви хочете зробити ефект продовження тексту на наступній сторінці, а на першій залишити три крапки, то необов’язково друкувати ці три крапки. Вистачить зменшити рамку до потрібних розмірів і в додаткових налаштуваннях вибрати опцію “Truncate Text”.
- Форматування цифр: Figma також має різні функції для форматування цифр.
- Лігатури: Є також опція “Увімкнення” або “Вимкнення лігатур” - спеціальних з’єднань між літерами.
Зміна ширини текстового поля
Додатково, поза розділом Typography, ви можете побачити функції, які дозволяють змінювати ширину текстового поля за допомогою трьох режимів: автоматична ширина, автоматична висота та фіксований розмір поля. У фіксованому режимі висота текстового поля залишатиметься сталою незалежно від того, скільки тексту ви вводите.
На цьому все, що стосується тексту у Figma. Сподіваюся, цього буде більше, ніж достатньо для початку. Якщо вам сподобалось, ставте лайк, підписуйтесь на канал і діліться цим уроком з друзями. До зустрічі у наступних уроках!