Створення стилів у Figma

   Давайте розберемо які взагалі є стилі у Figma?

• Колір (стиль заливки елементів)
• Ефект (тінь, внутрішня тінь, розмиття тощо)
• Текст (різні стилі тексту)
• Сітка (якщо це фрейм або Layout grid, то можна додати сітку)

   Щоб застосувати стиль до елемента для початку його потрібно створити.

   Як створити стиль у Figma?

   Створюємо якийсь елемент, додаємо йому заливку кольором. Тепер потрібно зв'язати цей колір із якоюсь назвою стилю кольору.

   Для цього потрібно натиснути на панель "стилю" (піктограма з чотирма крапками) і натиснути на "+", потім дати йому назву.

   Тепер можна застосовувати цей стиль до будь-яких інших елементів, шейпів, заливки, фрейму, тексту.

   Щоб змінити колір стилю або його назву, потрібно знову зайти на панель стилів і натиснути на піктограму "Edit style".

   Так само можна стилі кольору структурувати за папками, якщо в панелі стилів у назві поставити "/"

   Наприклад: Dark colors/brown

   Буде папка під назвою "Dark colors", а в ній будуть всі відповідні кольори.

   Якщо змінити колір стилю, він відповідно зміниться у всіх елементах де був використаний.

   Така ж логіка роботи і з іншими стилями, з тими самими ефектами або текстом.

   До одного й того ж елемента ми можемо застосувати кілька стилів.

   Створені стилі можна передавати з однієї роботи до іншої. Для цього потрібно перейти в панель шарів (Assets) та натиснути на "книжку"  або ALT + 3.

   З'явиться віконце, в якому ми бачимо наші стилі, натискаємо "Publish".

   Тепер ці стилі потрібно витягнути із загальної бібліотеки, куди вони були додані.

   Для цього потрібно в новій роботі перейти на вкладку "Assets" ➡️ клікнути на "книжку" і вибрати той файл з якого будемо підтягувати дані стилі (просто ввімкнути повзунок).

   Ось так можна створити якийсь набір стилів і користуватися ними в різних проектах і файлах.

   Особливо хочеться розібрати стилі тексту.

   Давайте спробуємо  створити стиль тексту.

   Вибираємо інструмент "Т" (Текст) і створюємо текстовий блок на робочій області. Додаємо йому стиль "+" та назву стилю.

   Завжди пам'ятай, що всі налаштування шрифту (сам шрифт, його зображення, розмір шрифту, міжлітерна відстань, міжрядкова відстань тощо) підтягуються в стиль.

   Оперувати можна лише положенням тексту всередині текстового блоку.

   До тексту можна застосувати не тільки текстовий стиль, але й інші, які тільки можливо.