Дизайн токены. Что это, куда и зачем, а может и откуда. Дизайн система в Фигме

• Владислав объясняет, что такое токины и как они работают.  

• Обсуждается эволюционный подход к созданию дизайн-систем.  

• Рассматриваются токины цвета, размеров, шрифтов и компонентов.  

• Токины - это составляющие дизайна, которые можно передать на фронтенд.  

• Изменения в дизайне должны отражаться в коде.  

• Пример с кнопками и их состояниями.  

• Разработчик описывает состояния элементов в коде.  

• Пример с описанием кнопки и её состояний.  

• Токины объединяют параметры элементов.  

• Дизайн-системы нужны для крупных проектов с несколькими продуктами.  

• Глобальные переменные определяют стилистику.  

• Местные компоненты уникальны для каждого потока.  

• Важно понимать, когда нужна дизайн-система.  

• Использование UI-китов и автоматизация процесса.  

• Пример с использованием OOPs.  

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

• Глобальные и локальные параметры.  

• Пример с сайзингом и неймингом.  

• Обсуждение нейминга и материалов.  

• Пример с элементами и их свойствами.  

• Рекомендации по названию и структуре дизайн-системы.  

• Импорт переменных в дизайн-систему.  

• Создание хэнк-файлов и синхронизация данных.  

• Формирование JSON-файла для передачи данных.  

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

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

• Проблемы с импортом и необходимость исправления ошибок.  

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

• Привязка глобальных переменных к зависимым.  

• Проблемы с именованием и их решение.  

• Публикация токенов на GitHub.  

• Обновление токенов и их влияние на другие файлы.  

• Использование подписки на Token Studio для автоматического обновления.  

• Обновление глобальных переменных и их влияние на другие файлы.  

• Поддержка консистентности дизайна.  

• Проверка и исправление ошибок в дизайне.  

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

• Использование иконочного шрифта.  

• Структура файлов в больших компаниях.  

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

• Важно комментировать и документировать все глобальные переменные.  

• Разные элементы могут использовать одни и те же переменные, например, шрифты и размеры текста.  

• Разработчики создают отдельные стили для повторяющихся переменных.  

• Пример с логотипом и хедлайном, где используются разные стили и параметры.  

• Для чистоты кода глобальные состояния записываются в отдельный файл.  

• В файловой структуре может быть отдельный файл для глобальных токенов.  

• В другом файле могут быть компоненты для разных продуктов.  

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

• Количество файлов в дизайн-системе влияет на её производительность.  

• Важно вести документацию для синхронизации работы разных людей.  

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

• Предложение проводить стримы для обсуждения дизайн-систем.  

• Видео было структурировано для лучшего понимания.  

• Дизайн-системы экономят время на разработку и тестирование.  

• Подписывайтесь на канал и делитесь видео.  

• Практическая часть дизайн-системы важна для передачи мелких деталей.  

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