Основные токены и переменные Figma: Полное руководство по расширенному именованию и настройке

• Настройка системы разработки единого бренда в Token Studio и синхронизация с переменными Figma.  

• Правила именования и структура коллекций.  

• Обзор коллекций брендов, псевдонимов и картографических коллекций.  

• Три основные коллекции: бренд, псевдоним и картографическая.  

• Бренд как главный источник правды с цветами, радиусами и интервалами.  

• Псевдоним включает только цвета для определения основных, второстепенных и нейтральных цветов.  

• Картографическая коллекция позволяет использовать цвета псевдонимов для различных категорий текста, поверхностей, границ и значков.  

• Дизайнеры выбирают цвета для различных элементов.  

• Диаграмма показывает взаимосвязь между коллекциями бренда, псевдонимов и картографической.  

• Бренд как основа, псевдоним как связующее звено, картографическая как применение цветов.  

• Определение основного цвета как фиолетового.  

• Категоризация цветов: красный как цвет воздуха, зеленый как цвет успеха.  

• Применение цветов в картографической коллекции для различных элементов.  

• Нет универсального подхода, каждый бренд и система дизайна уникальны.  

• Примеры именования для коллекции бренда: интервалы, цвета, радиусы, типографика.  

• Подходы к именованию цветов: без цифр и с цифрами.  

• Типографика: размеры шрифтов для тела и заголовка.  

• Семейство шрифтов: основные, второстепенные и подписи.  

• Линейка по высоте: размеры текста и заголовков.  

• Коллекция псевдонимов состоит только из цветов.  

• Основные, второстепенные, нейтральные, успех, предупреждение, ошибка и основные моменты.  

• Связывание коллекции псевдонимов с коллекцией бренда для заимствования цветов.  

• Основные цвета: фиолетовый и его оттенки.  

• Второстепенные цвета: розовый и его оттенки.  

• Нейтральные цвета: серый и его оттенки.  

• Информационные цвета: синий и его оттенки.  

• Успех: зеленый и его оттенки.  

• Предупреждение: оранжевый и его оттенки.  

• Ошибка: красный и его оттенки.  

• Подсветка: желтый и его оттенки.  

• Картографическая коллекция: начало для различных элементов.  

• Текст: заголовки, основной текст, действия с текстом.  

• Значок: основной значок, информационный значок, значок состояния.  

• Поверхность: основной цвет, дополнительный цвет, ошибка, предупреждение, информация.  

• Граница: основной цвет границы.  

• Синхронизация токенов с переменными Figma.  

• Создание цветовой гаммы: темно-фиолетовый, светло-фиолетовый.  

• Использование инструментов для создания цветовой гаммы.  

• Перенос цветовой гаммы в Token Studio для синхронизации с переменными Figma.  

• Открытие Token Studio и создание нового файла.  

• Переименование файла в brand.  

• Создание папки для маркеров бренда.  

• Создание псевдонима по умолчанию и отображаемого источника света.  

• Начинаем с бренда и не добавляем каждый символ.  

• Сосредоточимся на маркерах радиуса границы и цвета.  

• Устанавливаем радиус границы на ноль для квадратного края.  

• Токены уровня компонентов полезны для уникальных компонентов.  

• Создаем маркеры радиуса для входных данных.  

• Устанавливаем радиусы для маленьких и больших значений.  

• Копируем структуру и добавляем цвета.  

• Создаем несколько стандартных цветов и радиусов.  

• Группируем цвета по подпапкам.  

• Сопоставляем цвета с уровнем псевдонимов.  

• Привязываем цвета к основной теме и осветлению.  

• Объединяем коллекции для упрощения изменений.  

• Переводим псевдонимы в коллекцию карт.  

• Не усложняйте коллекцию карт, используйте минимально возможное количество цветов.  

• Создаем компонент кнопки с маркерами поверхности и наведения.  

• Настраиваем темы в Figma.  

• Создаем специальную тему для бренда по умолчанию.  

• Изменяем цвета и сохраняем тему.  

• Отключите все, установите значение включено и сохраните тему.  

• Включите подсветку карты для светлой темы.  

• Создайте новую группу с названием mapped-light.  

• Для синхронизации с переменными Figma требуется платная версия Token Studio.  

• Удалите старую коллекцию и создайте новую.  

• Восстановите бренд с маркерами radius и цветами.  

• Создайте компонент с использованием маркеров.  

• Добавьте текст и автоматическое расположение.  

• Определите область видимости переменных для упрощения настройки.  

• Отредактируйте переменные для бренда и псевдонима.  

• Добавьте текстовую переменную вручную.  

• Создайте компонент и синхронизируйте его с переменными.  

• Призыв подписаться на сообщество Slack в Uicollective.  

• Анонс плагина для отслеживания системы проектирования в Figma.  

• Плагин помогает идентифицировать компоненты, стили и переменные.  

• Бесплатная публичная бета-версия доступна для ознакомления.