У цьому відео я демонструю найшвидший спосіб створення текстових стилів у Figma.
Зазвичай це займає ❌
ГОДИНИ часу, але після цього відео займатиме лише ✅
кілька хвилин.
ПОКРОКОВА ІНСТРУКЦІЯ 👇
Етап 1. Генеруємо основу • Відкриваємо плагін Typescales
• Копіюємо типографіку із згенерованого шаблону
• Створюємо автолейаут, щоб організувати
• Додаємо відступи та фон у фрейм автолейауту
Етап 2. Перейменовуємо • Виділяємо 5 найбільших розмірів
• Натискаємо CMND / CTRL + R, щоб перейменувати шари
• Вводимо назву “H” (Heading) + формулу “$n” для нумерації хедінгів
• Виділяємо наступних 2
• Вводимо назву “Title” + формулу “$n” для нумерації тайтлів
• Перейменовуємо останні два на: Body та Captions
Етап 3. Редагуємо параметри • Обираємо фрейм, натискаємо “Enter” — щоб виділити весь текст
• Натискаємо CMND/CTRL + D, щоб задублювати
• Продубльований результат робимо жирним “Bold”
• Натискаємо CMND / CTRL + R, щоб перейменувати шари та додати в назву частинку “Bold”
• При перейменуванні обираємо “Current name” шарів та додаємо “Bold”
• Обираємо фрейм, натискаємо “Enter” — щоб виділити весь текст та змінити сім’ю шрифтів з Inter, наприклад, на Roboto
Етап 4. Створюємо стилі • Обираємо фрейм, та відкриваємо плагін Text Styles Generator
• Натискаємо “Generate Text Styles”
Бонус. Документація готова • Відкриваємо плагін “Typography Style guide”
• Документація створена
