0:00
Інструменти для роботи з текстом у Figma
0:02
не є надто складними,
0:04
якщо є кілька нюансів, про які
0:06
варто пам'ятати. Тому ми пройдемо
0:08
через усі інструменти, які пропонує Figma
0:10
і обговоримо їхні функції.
0:12
Сподіваюся, це буде для вас корисним.
0:14
Отже, давайте надрукуємо якийсь текст.
0:16
Для цього, звісно, можна натиснути
0:18
клавішу "Т" на клавіатурі,
0:20
яка активує інструмент текст,
0:22
а далі просто клацяємо в любому місті
0:24
та починаємо друкувати.
0:26
Натискаємо "Enter" і продовжуємо.
0:28
Якщо ми просто клацаємо і друкуємо,
0:30
то нас нічого ніколи не буде обмежувати.
0:32
Але якщо ми хочемо
0:34
задати обмеження іншими словами "Область для тексту",
0:36
то нам потрібно вибрати інструмент текст
0:38
і створити тексту в рамку.
0:40
І тепер, якщо ми будемо
0:42
друкувати в цій рамці, текст
0:44
автоматично переноситиметься це на наступний рядок.
0:46
Якщо вставити шматок тексту
0:48
з іншого місця, він теж вийде
0:50
за межі рамки, бо вона
0:52
має фізичні розміри. Тепер, розглянемо,
0:54
які типографічні можливості
0:56
пропонує нам Figma. Я підготувала
0:58
два тексти, заголовок і абзац
1:00
із двома частиними. Виділимо
1:02
перший текст. У меню справа
1:04
бачимо розіл Typography. Тут
1:06
знаходяться всі інструменти для роботи
1:08
з текстом. 4 крапки дозволяють
1:10
вибрати текстовий стиль, про який
1:12
поговоримо іншому уроці.
1:14
Якщо стиль не вибрано, ми створюємо його
1:16
з нуля. Тут можна вибрати
1:18
будь-який шриф. Наприклад,
1:20
можна вибрати один шрифтів Google.
1:22
Вони доступні у Figma за замовчуванням
1:24
і є безкоштовними. Наступне поле
1:26
дозволяє вибрати вагу шрифту, тобто його
1:28
товщину. Далі є цифра,
1:30
що вказує на розмір шрифту.
1:32
Можна вибрати розмір із запропонованого
1:34
списку, або ввести з клавіатури.
1:36
Жодних проблем.
1:38
Figma не використовує конкретні
1:40
одиниці виміру, оскільки все
1:42
базується на векторах. Наступна опція
1:44
це Line Height, Висота рядка.
1:46
Вона визначає відстань між рядками.
1:48
Наприклад, якщо розмір шрифту
1:50
32, Висота рядка 39.
1:52
Вводячи інше значення,
1:54
наприклад 48, ми бачимо, що
1:56
відстань між рядками змінюється
1:58
відповідно. Це поле приймає
2:00
не лише числа, а й відсотки.
2:02
Наприклад, якщо встановити 100 відсотків,
2:04
Висота рядка завжди відповідатиме
2:06
розміру шрифту.
2:08
Далі є Letter Spacing, інтервал між
2:10
літрами. Його значення задається
2:12
у відсотках. Я раджу
2:14
бути дуже обережними з цією
2:16
опцією, оскільки вона може значно
2:18
вплинути на сприйняття тексту. Якщо
2:20
вони не впевнені, краще залиште
2:22
значення 0. В наступній функції
2:24
стосується вирівнювання тексту -
2:26
ліворуч, по центру, або
2:28
проворуч. Є також класичні опції
2:30
вирівнювання тексту в текстовому полі -
2:32
до верхнії, середньої, або
2:34
нижньої частини. Також зверніть
2:36
увагу на додаткові налаштування
2:38
тексту. Вони знаходяться тут, де
2:40
значок налаштувань і включають в
2:42
вирівнювання по ширині, підкреслення та
2:44
перекреслення, зміна регістру тексту
2:46
і так далі. Наприклад, одним кліком
2:48
мишки ви можете перетворити весь
2:50
текст у верхній регістр, або навпаки
2:52
у нижній. Це може бути корисним
2:54
для створення кнопок. Також тут
2:56
є вертикальна обрізка.
2:58
Ща одна корисна функція Figma -
3:00
це створення списків.
3:02
Далі йде параграф
3:04
спейсін - відстань між абзацами.
3:06
Як ви мабуть здогадалися з назви,
3:08
ця функція дозволяє регулювати
3:10
відстань між кількома абзацами.
3:12
Якщо ви хочете зробити ефект
3:14
продовження тексту на наступній сторінці, а
3:16
на першій залишити три крапки, то необов'язково
3:18
друкувати ці три крапки. Вистачить
3:20
зменшити рамку до потрібних розмірів
3:22
і в додаткових налаштуваннях
3:24
вибрати опцію "Turuncade Text".
3:26
Figma також має різні функції
3:28
для форматування цифр. Є також
3:30
опція "Увімкнення" або "Вимкнення лігатури"
3:32
спеціальних з'єднань між літерами.
3:34
Про це та інші типографічні функції
3:36
можна дізнатись більше
3:38
у матеріалах присвячених типографії.
3:40
Додатково, поза розділом
3:42
Typography ви можете побачити функції,
3:44
які дозволяють змінювати ширину
3:46
текстового поля за допомогою трьох режимів.
3:48
Автоматична ширина,
3:50
автоматична висота
3:52
та фіксований розмір поля.
3:54
У фіксованому режимі висота
3:56
текстового поля залишатиметься сталою
3:58
незалежно від того, скільки тексту ви вводите.
4:00
Ну і на цьому все, що стосується
4:02
тексту у Figma.
4:04
Сподіваюся, цього буде більше, ніж
4:06
достатньо для початку. Якщо вам сподобалось,
4:08
ставте лайк, підписуйтесь на канал
4:10
і діліться цим уроком з друзями.
4:12
До зустрічі у наступних уроках!