Для кого статья?
Для дизайнеров
Если вы хотите понять, что такое токены и зачем нужны переменные в дизайне, то эта статья для вас. На токенах строятся сложные дизайн системы.
Для разработчиков интерфейса
Ускорить процесс верстки проекта и добиться синхронизации с дизайном, работая на одной системе переменных.
Что же такое дизайн токены?
Дизайн токены — это набор базовых переменных визуального языка, таких как отступы, цвета, типографика, стили объектов и анимация, представленный в виде данных.
Каждый токен хранит часть информации, например: цвет, размер, интервал, шрифт, анимацию и т. д. Чтобы к ним было легче обращаться, каждый токен также получает имя.
Таким образом мы получаем уровни токенизации, из которых строится система:
1 Уровень – это само значение переменной (rgb код, либо числовое значение для представления интервалов, радиусов и т.д)
2 Уровень – Глобальные токены – Примитивный вид токенов,которые хранят необработанные значения, и их название не зависит от контекста.
В figma мы можем хранить: цвет, шрифт, радиус и внутренние расстояния, как значения глобальных маркеров.
3 Уровень – Алиас токены – псевдонимы, которые добавляют семантический смысл к хранимым значениям в глобальных токенах. Их именование отражает контекст, в котором они используются.
Например: Передний план, фон, обводка. Обводка имеет внутренние значения - Primary, Secondary, Tertiary....
Зачем это нужно?
Суть дизайн-токенов заключается в сокращении времени на разработку и обеспечении консистентности визуального стиля одного или нескольких приложений, что оптимизирует затраты и временные ресурсы на внесение изменений. Дизайн токены способствуют взаимодействию между дизайнерами и разработчиками, создавая единый язык общения.
В контексте атомарного дизайна, токены служат базовыми единицами, обеспечивающими стандартизацию и гибкость. После создания дизайн токенов, разработчик может без труда экспортировать полную библиотеку стилей и интегрировать её в проект, что способствует быстрому и эффективному применению единого визуального языка.
Конструкция токенов
Для названий токенов мы можем использовать следующую конструкцию: [Category]-[Type]-[Item]-[SubItem]-[State]. Такая структура легко интегрируется в переменные в Фигме и обеспечивает четкую организацию.
• Category – категория токена (например, color, font)
• Type – тип токена (например, text, background, border)
• Item – элемент (например, button, table, input)
• SubItem – тип элемента (например, primary, secondary)
• State – состояние элемента (например, default, hover, active)
На первый взгляд может показаться, что верстка дизайна без использования токенов не занимает много времени. Однако, на больших проектах токены ускоряют процесс разработки в несколько раз, обеспечивая экспоненциальный рост полезности. Чем сложнее проект, тем более очевидны преимущества использования токенов.
1. Ускорение разработки: Токены значительно сокращают время на разработку, особенно на крупных проектах, за счет стандартизации и удобства использования.
2. Понятность и поддержка: Налаженный дизайн и код, основанный на токенах, понятен любому дизайнеру и разработчику на любом этапе разработки. Это облегчает вхождение в проект новых участников и поддержание высокого уровня консистентности.
3. Упрощение изменений и развития: Поддержка, изменение и развитие проекта требуют гораздо меньше усилий и вложений благодаря централизованному управлению токенами. Обновив один токен, изменения автоматически распространяются по всему проекту.
Итог
Использование дизайн токенов — это инвестиция в структурированность, масштабируемость и гибкость проекта, которая окупается многократно за счет сэкономленного времени и ресурсов.
Дизайн токены с использованием переменных в Figma представляют собой эффективный способ упростить и ускорить разработку веб-сайтов и приложений. Переменные позволяют разработчикам централизованно хранить и управлять всеми элементами дизайна, такими как цвета, шрифты, изображения и другие параметры. Это обеспечивает быстрое и легкое внесение изменений в дизайн и поддерживает согласованность во всех элементах приложения.
Практическое использование дизайн токенов с переменными в Figma приносит следующие преимущества:
1. Улучшенное управление дизайном: Централизованное хранение всех элементов дизайна с помощью переменных облегчает их поиск и управление, что особенно полезно для крупных проектов с большим количеством дизайнерских компонентов.
2. Повышенная согласованность дизайна: Переменные способствуют поддержанию единообразия во всех элементах приложения, что важно для создания цельного и качественного пользовательского опыта.
3. Ускоренная разработка: Благодаря переменным можно быстро и легко вносить изменения в дизайн, что экономит значительное количество времени и усилий разработчиков.
Таким образом, использование дизайн токенов в Figma не только ускоряет процесс разработки, но и существенно упрощает поддержку и развитие проектов, обеспечивая высокое качество и согласованность пользовательского интерфейса.
