Как создать токен в фигме

hsl(,71,55)

А после обработки, вот так:

hsl(313,71,55)

Создаем такие же токены для hover, active. Только не забываем покрутить saturation и lightness.

На примере ниже, переменные сделаны именно таким образом. Если нам необходимо перекрасить основной цвет и его оттенки для разных состояний, нам будет достаточно поменять базовое число в button.base.

Обновление документации

Плагин позволяет линковать к слоям Figma параметры стилей. Например, для цвета можно линковать заливку, границы, имя токена, значение токена и его описание.

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

Загрузка токенов

Как уже упоминалось выше, JSON можно не только выгружать, но и загружать. Если по какой-то причине разработчик изменил значения в JSON файле и сменил несколько параметров, то достаточно скопировать содержимое всего JSON-файла и просто вставить в плагин.

Выгрузка

У плагина есть несколько способов выгрузки JSON-файла, которые прячутся на вкладке Settings:

• локальный файл;
• на сервер по URL;
• в GitHub или GitLab

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

Преобразование из JSON

Мы разобрались, что дизайн-токены хранятся в JSON, что их можно или выгрузить через плагин или написать ручками, но как получить из JSON преобразованные переменные в SCSS-файле?

• сервис для документации zeroheight (только цвет и текст);
• продукт Specify, для хранения документации проекта и токенов;
• библиотека Theo от Salesforce;
• библиотека из npm «JSON to SCSS» (только SCSS);
• библиотека Amazon Style Dictionary.

Сегодня посмотрим на сервис и библиотеку.

Zeroheight

Этот сервис очень похож на популярный у разработчиков storybook – программное обеспечение для документации кода.

Но zeroheight более дружественный по отношению к дизайнеру и обладает приятным бонусом: все стили и компоненты можно грузить непосредственно из Figma в пару кликов.

Zeroheight поддерживает дизайн-токены, но в ограниченном виде: только типографика и цвет. Никаких танцев с кодом и установкой дополнительных библиотек. Если вам этого хватает, то смело используйте его.

С чего начать?

Необходимо зарегистрироваться в сервисе, подключить свой Figma-файл и добавить стили на страницу. Я подробно рассказывал о сервисе zeroheight в своем обзоре.

Загрузка дизайна

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

Дизайн-токены

У сервиса есть блоки форматирования и вставки. Вы можете добавлять текст, элементы из Figma, сниппеты, живой код, таблицы и дизайн-токены. Разметка токенов делится на 2 версии.

Первая версия сразу собирает необходимые форматы:

Необходимо только добавить префиксы к токенам, если это необходимо. Файл с преобразованными переменными можно или скачать, или подключить в свой проект по адресу, который предлагает zeroheight.

Вторая версия отдает JSON файл и предлагает подключить его в свой проект, где компилятором выступает библиотека Amazon Style Dictionary.

Таким образом возникает процесс изменения стилей для приложения минуя разработчика. Дизайнер меняет что-то в Figma, загружает по кнопке в zeroheight и на проекте в реальном времени применяются изменения.

Будьте осторожны. Данный способ на бесплатных тарифах не подразумевает какую-то историю изменений или версионность. Если дизайнер что-то поменял в макете и обновил это в сервисе — изменения применятся в проекте.

Amazon Style Dictionary

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

Команда Amazon в 2017 году представила собственную библиотеку, которая помогает преобразовать JSON-файл в переменные для web (css, scss, less), iOS и Android-форматы.

У сервиса есть «песочница», в которой можно поиграться и посмотреть на изменения в демо-карточке.

Сейчас постараюсь простыми словами объяснить, как установить и настроить данный компилятор.

Установка

Дальше мы будем действовать в интерфейсе CLI (command line interface), проще говоря из командной строки.

Для MacOS это встроенное приложение «Терминал», для Windows это «Командная строка» (cmd). Но можно и в любом редакторе кода, который поддерживает данный интерфейс.

Шаг 1. Установка программной платформы npm

Нам необходимо установить глобальную программную платформу npm (Node Package Manager) (что это?) и node.js. Это репозиторий для различных пакетов с приложениями. Если говорить на обывательском языке — магазин, где можно скачать приложение.

Чтобы проверить, установлены ли у вас node.js и npm можно воспользоваться следующими командами в CLI:

Когда мы убедились, что платформа установлена, переходим к установке Style Dictionary.

Шаг 2. Установка Style Dictionary

Введите в командной строке:

npm install -g style-dictionary

После этого дождитесь завершения установки.

Шаг 3. Создание проекта

Нам необходимо перейти в нужную папку, где у вас лежит проект и где будет дополнительно развернут Style Dictionary (как указать путь к папке в CLI?).

cd путь к папке

Теперь инициируем базовый проект, он создаст все необходимые директории и файлы:

style-dictionary init basic

После этой команды вы должны увидеть такое:

Copying starter files.

Source style dictionary starter files created!

Running `style-dictionary build` for the first time to generate build artifacts.

Это сообщение говорит о том, что созданы файлы для SCSS, Android, compose, iOS, iOS-swift.

В структуре вы обнаружите папки и файлы:

• tokens — в ней содержатся JSON с демо-токенами;
• build — все артефакты, скомпилированные из JSON
• config.json — файл с настройками.

Шаг 4. Проверка

Вы можете пробежаться по файлам и посмотреть, как они сгенерированы и соответствуют ли они данным в JSON. Предлагаю здесь зайти в файл JSON и в ручную поменять несколько значений.

После того как измените, необходимо пересобрать проект командой:

Это главная команда, которую необходимо вызывать после того, как вносите изменения в JSON.

Шаг 5. Настройка

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

• source — отвечает за то, из каких папок и какие файлы необходимо конвертировать;
• platforms — массив настроек, отвечающий за платформу, в которую компилируем;
• scss (ios, android, css) — название платформы и внутри неё локальные настройки этой платформы;
• transforms — дополнительные настройки преобразования величин и значений;
• transformGroup — в какой формат файла преобразовываем;
• buildPath — папка, куда будут складываться преобразованные файлы;
• destinations — название файла;
• format — формат, в который будет преобразован JSON.

const StyleDictionary = require('style-dictionary').extend(< source: ['tokens/**/*.json'], platforms: < scss: < transforms: ["attribute/cti", "name/cti/kebab", "color/hex", "size/rem"], transformGroup: 'scss', buildPath: 'build/', files: [< destination: 'variables.scss', format: 'scss/variables' >] > // . > >); StyleDictionary.buildAllPlatforms();

В этом файле настройки объединяются по платформам и гибко настраиваются форматы и пути. Также есть ряд дополнительных настроек.

Из дополнительных настроек, на которые стоит обратить внимание, это transforms. В этой строчке можно задать конвертацию значений из px в sp/dp/pt/rem, из hex в rgb/hsl, и форматы названия переменных kebab-case и camelCase.

По сути, вся базовая настройка сделана. Нам остается только подкладывать JSON файлы в нужную папку и собирать проект.

Токены для компонентов

В основном токены хранят в себе базовые стили, такие как цвет, типографика, тени и некоторые значения типа размеров и скруглений.

Но токены имеют гибкую конструкцию, и их можно использовать в описании конкретных компонентов. Подробную историю рассказал Кристиано Растелли, который делал дизайн-систему Cosmos для Badoo.

При таком подходе мы можем гибко управлять не только глобальными стилями, но и конкретными компонентами.

Но запомните, что чем больше переменных — тем сложнее их поддерживать. Будьте аккуратнее и разумны.

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

Немного советов

При выгрузке токенов, я выгружаю всегда базовые значения и стили, редко пользуюсь размерами, отступами в самой Figma, а пишу JSON руками.

Делюсь несколькими советами, надеюсь, они будут ценны.

Размеры

Я видел несколько неймингов по размерной сетке: и в градации сотых чисел, и в так называемых «майках».

$size-100: 4px; $size-200: 8px; . $size-s: 4px; $size-m: 8px;

Но на мой взгляд, такой нейминг неудобен с точки зрения логического понимая и коммуникации. Представим, что разработчик отложил проект на неделю. Вернувшись к нему, необходимо заново вспомнить, какие переменные используются в размерной сетке и какие значения несут. Ещё хуже, если на проект пришел новенький и заучивать все переменные — это плохая история.

Я предлагаю вводить базовую величину, которая будет умножаться на определённое число, а в нейминге так и указать, на какое число мы множим.

$size-base: 4px; $size-x1: $size-base; $size-x2: $size-base*2; . $size-x10: $size-base*10;

Таким образом участникам команды не придётся держать в голове всю размерную сетку, а всего лишь её базовое значение в 4px, а глядя на название переменной можно понять, какое значение будет на выходе. Если мы захотим поставить отступы в 16px, то необходимо использовать переменную $size-x4.

К тому же, если вы захотите изменить базовый шаг, скажем на 2px, то размерная сетка автоматически пересчитается.

Цвет

Цвет можно считать автоматически, подставляя необходимые переменные и используя усилители цвета в SCSS.

Цвет можно считать в HEX, забивая в переменную базовый цвет, осветлять (lighten) или затемнять (darken) его. Как только базовый цвет изменится — палитра автоматически пересчитается. Важно то, что непрозрачность остается 100%, меняется само цветовое значение.

$color-base: #ffcc00; $color-base-primary: $color-base; $color-base-hover: darken($color-base,10%); $color-base-active: lighten($color-base,10%);

Или можно посчитать в HSL, взяв за основу оттенок (hue), изменяя только насыщение (saturation) и яркость (lightness):

$color-accent: 72; $color-accent-default: hsla($color-accent, 100%, 36%, 1); $color-accent-hover: hsla($color-accent, 100%, 29%, 1); $color-accent-active: hsla($color-accent, 53%, 44%, 1);

«A» — в модели hsla это альфа-канал непрозрачности.

Итоги

Как я уже говорил, если вы делаете сайтики и лендинги — вам не нужны дизайн токены.

Но они нужны, если:

1. Вы делаете несколько приложений и сервисов, которые должны быть консистентны, иметь единый вид;
2. Если вы планируете темезацию, будь – то светлая и темная тема одного приложения;
3. Проектируете какое-то white label решение, которое кастомизируется под каждого заказчика.

Подстелить себе соломку — лишним уж точно не будет.

Решение использовать дизайн-токены — не панацея от проблем, и я не призываю вас бежать и внедрять их прямо сейчас, это такой же долгий и порой непростой путь.

Но если вы понимаете, что вам это необходимо сделать и это точно закроет ваши проблемы, то следуйте простым правилам:

• Заручитесь поддержкой разработки и узнайте, насколько они готовы вкладываться в это;
• Проведите инвентаризацию текущих макетов в Figma;
• Определитесь с категориями, что вы будете подвергать токенизации;
• Разложите по смысловым группам стили и приведите в порядок семантические названия. И здесь важно договориться с разработкой о том, как будет понятнее всем;
• Выберите необходимый инструмент — простой сервис zeroheight или выгрузка через плагины;
• Если через плагины, то определитесь, какая библиотека будет компилировать ваши файлы;
• Выстройте максимально прозрачный путь с разработкой, чтобы вы говорили на одном языке;
• И последний, немаловажный пункт — наслаждайтесь!

Полезные материалы

Видео

• Токены в дизайн-системах / Юрий Ветров (Mail.Ru Group)
• Friends of Figma: Design Tokens
• Design Tokens in Figma: How to get started, today. Jan Six — Live & Q&A- Into Design Systems

Статьи

• Что такое дизайн-токены? Давайте разбираться вместе
• Дизайн-токены способны на большее: создаем единый источник информации о компонентах UI
• Как использовать дизайн-токены в React — опыт команды Bit
• Что такое Design токены?

Что такое токен в Figma?

Маркер — это элемент дизайна в Figma, который можно использовать для быстрого изменения внешнего вида всего компонента. Например, с помощью маркера можно изменить размер шрифта или цвет всего текста в кнопке сразу.

Токены невероятно полезны для поддержания единообразия дизайна и позволяют сэкономить много времени при внесении изменений. Чтобы создать маркер, выберите элемент дизайна, затем нажмите кнопку «Создать маркер» в правой боковой панели.

СОВЕТ: Эта статья посвящена токенам в Figma, но не объясняет, что такое токен. Токен — это цифровой актив, который может быть использован для представления активов реального мира. Они часто используются в онлайн-играх и виртуальных мирах.

Вы также можете создавать токены сразу из нескольких элементов, выбирая их и нажимая кнопку «Создать токен». После создания токена он появится в разделе «Токены» на боковой панели.

Чтобы применить маркер к элементу, выберите его, затем нажмите кнопку «Применить маркер» в правой боковой панели. Вы также можете применить маркеры сразу к нескольким элементам, выделив их и нажав кнопку «Применить маркер».

Что такое маркер в Figma?
Токен — это элемент дизайна в Figma, который можно использовать для быстрого изменения внешнего вида всего компонента.

Импорт из Figma

Во вкладке Account перейдите к блоку Personal access tokens и введите название токена, например, Tilda.

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

Импорт макета в Zero Block
Нажмите на меню с тремя точками внутри Zero Block и нажмите на пункт Import.

Перейдите в Figma. Откройте макет (Layout), выберите нужный Frame, в адресной строке скопируйте ссылку на Frame.

Чтобы импорт происходил корректно, необходимо добавлять в один Zero блок один Frame из Figma
В открывшемся окне добавьте ссылку на Frame и API токен, полученный в настройках Figma.

Подождите, пока макет импортируется.

Если вы добавили правильную ссылку и со стороны API Figma не происходили ошибки, то макет импортируется в Zero Block.

Обратите внимание, что по умолчанию изображения грузятся с серверов Figma, поэтому для загрузки их в Тильду нужно зайти в настройки элементов с изображениями и нажать на кнопку Upload to Tilda.

Требования к макету и особенности импорта
Макет (Layout)

Макет необходимо создавать на фрейме с шириной в 1200 px.

Импортировать макет лучше блоками, а не добавлять весь макет в один блок.

Группы элементов

Любую группу можно импортировать картинкой, для этого в названии нужно указать image. Если указать svg, то будет svg формат.

Доступен импорт групп, если внутри есть другие группы, то все элементы будут в группе первого уровня

Кнопки и шейпы

Для импорта кнопки необходимо объединить шейп и текст в группу и добавить в название button, учитывается выравнивание текста, так что текст лучше делать шириной как шейп

Если на шейпе есть эффект, который нельзя воспроизвести в Zero, то он импортируется с изображением эффекта на фоне.

Разделы «Справочного центра»:

• Как устроена Тильда
• Настройки сайта
• Редактирование страницы
• Продвижение сайта

• Домен и сертификат
• Интернет-магазин
• Формы приёма данных
• Статистика сайта

• Zero Block
• Конструктор писем
• Тарифы и платежи

• Потоки и новости
• Личный кабинет
• Разработчикам

Сообщить о нарушении прав

Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму

Как связаться с поддержкой

Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на team@tilda.cc

Дизайн-токены: практическое руководство для начинающих

Дизайн-токены — строительные блоки дизайн-систем. Их внедрение помогает сделать дизайн-системы унифицированными, гибкими и готовыми к масштабированию.

Общая информация

Дизайн-токены хранят повторяющиеся дизайн-решения в независимом от платформы виде. Они выступают единым источником достоверных данных для дизайн-системы.

Понятие «Единый источник достоверных данных» (Single source of truth — SSOT) означает централизованное хранилище, которое действует как единая точка отсчёта для различных артефактов.

Дизайн-решение — выбор, который дизайнер делает из имеющихся вариантов. Например, он выбирает фирменный цвет, шрифт или определяет интервал между заголовком и абзацем.

Дизайн-токены не зависят от конкретной платформы или технических возможностей, что делает их независимыми от платформы. Это упрощает внедрение дизайн-токенов на разных платформах и для разных веб- технологий.

Дизайн-токены обычно реализуют в удобном для восприятия формате, например, YAML или JSON, или используют их прямо внутри инструментов проектирования.

Такие инструменты преобразования дизайн-токенов, как Style Dictionary, Theo и другие, переводят независимые от платформы дизайн-токены в формат, соответствующий определённой платформе.

Например, для обозначения цветов в дизайн-токенах дизайнер может использовать формат HEX, в то время как в iOS будет использоваться RGBA, а Android — 8-значный HEX-код.

Преимущественно дизайн-токены хранят в себе такие решения визуального дизайна, как цвет, типографика, тени, значения отступов и другие. Но с их помощью можно также реализовать решения, которые не относятся к визуальному дизайну, например, анимации и ассеты.

Использование дизайн-токенов вместо жёстко закодированных значений помогает сделать дизайн-систему гибкой, что упрощает её создание, поддержку и масштабирование.

Упрощение дизайн-токенов

Чтобы упростить концепцию дизайн-токенов, давайте начнём с аналогии.

Аналогия с телефонным контактом

Когда человек сохраняет номер телефона в списке контактов, он по большому счёту создаёт токен, который представляет собой контактную информацию. Токен содержит такие данные, как имя и номер телефона.

Он позволяет совершать телефонные и видеозвонки, отправлять сообщения или даже делиться самим токеном как контактом с другими людьми.

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

Аналогия с кофейными стаканами

Другая простая аналогия — 3 кофейных стакана разного размера, на каждом из которых есть этикетка с указанием его объёма в миллилитрах.

Однако в случае, если нам когда-нибудь понадобится изменить количество кофе в них, стаканы с указанными значениями объёма перестанут правильно выполнять свою функцию.

Применение токенов, чтобы обозначить размеры кофейных стаканов как маленьких, средних и больших, позволяет легко менять количество кофе в них, когда это необходимо. Такой подход — более гибкий и масштабируемый.

Роль дизайн-токенов в дизайн-системах

Дизайн-токены — удобные для восприятия крошечные модульные блоки, которые дизайнеры собирают вместе, чтобы создать гибкую, настраиваемую и готовую к масштабированию дизайн-систему.

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

Допустим, вы выбрали определённый цвет в качестве основного или доминирующего и используете его в различных компонентах — кнопках, радиобаттонах, чекбоксах, переключателях, слайдерах, степперах и других.

Теперь если вы решите выбрать более тёмный оттенок для основного цвета, вам придётся вручную искать соответствующие значения в инструменте проектирования и базе цветовых кодов для его замены.

Использование стилей в Figma или других инструментах проектирования и переменных в коде поможет справиться с этой задачей и в некоторой степени оптимизировать процесс.

Но применение одних только стилей или переменных не решит другие сложные задачи. Например, с их помощью невозможно изменить основной цвет только в тех компонентах, где он используется в качестве фона. Именно здесь в игру вступают дизайн-токены.

Дизайн-токены не ограничиваются только цветовой системой, они могут хранить всё: от системы шрифтов или отступов до ассетов.

Типы дизайн-токенов

Есть три основных типа дизайн-токенов

Глобальные токены

Глобальные токены — элементарные значения. Их применяют к полному списку всех доступных вариантов в дизайн-системе. Глобальные токены также известны как базовые, опции (options), варианты (choice) или эталонные токены (reference tokens).

Глобальные токены представляют собой такие статические значения, как hex-код цвета, размер шрифта, интервала и другие. Глобальные токены не зависят от контекста и они не связаны с каким-либо явным значением или по смыслу.

Глобальные токены могут либо использоваться напрямую, либо ссылаться на другие типы токенов (семантические или токены для компонентов) в дизайн-системе.

Семантические дизайн-токены

Дизайн-токены, которые зависят от контекста и ссылаются на глобальные токены, называются alias. Они также известны как семантические токены.

У каждого семантического дизайн-токена есть определённое назначение, значение и функция, связанная с ним. В отличие от глобальных токенов, они появляются в заранее определённых контекстах или инстансах.

В семантических дизайн-токенах применяют разные обозначения для разных категорий токенов, таких как цвета, шрифты, интервалы, анимации и других.

Обозначение должно быть достаточно общим, чтобы адаптировать различные значения, но при этом достаточно содержательным, чтобы объяснить замысел или цель использования.

Применение семантических дизайн-токенов обеспечивает эффективное, гибкое и простое функционирование, поскольку при необходимости их значения можно изменить.

Токены для компонентов

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

В идеале токены для компонентов указывают на семантические или глобальные дизайн-токены.

Многоуровневая иерархия дизайн-токенов

Глобальные, семантические токены и токены для компонентов могут представлять различные уровни дизайн-токенов. Многоуровневая иерархия дизайн-токенов позволяет реализовать концепцию изоляции и контроля в дизайн-системе.

Изоляция означает то, насколько независим дизайн-токен. Уровень изоляции определяет влияние, которое каждое обновление дизайн-токена будет оказывать на всю дизайн-систему.

Глобальные токены хранят универсальные решения. Они представляют собой дизайн-решения более высокого уровня и поэтому не обладают никакой изоляцией. Любое изменение, внесённое в глобальные токены, будет отражаться на целом ряде дизайн-решений в дизайн-системе.

В примере выше обновление глобального токена green_400 повлияет на оба зависимых от него семантических токена color_background_primary и color_border_primary. Такие обновления оказывают большое влияние на дизайн-систему.

Семантические токены несут конкретный смысл и имеют определённое значение. Это дизайн-решения среднего уровня, и они обладают ограниченной степенью изоляции. Обновление семантического токена будет отражаться в определенных контекстах.

В примере выше обновление color_background_primary или color_border_primary повлияет только на зависящие от него дизайн-решения. Такие обновления имеют средний уровень влияния в дизайн-системе.

Токены для компонентов работают на уровне компонентов и максимально изолированы. Обновление токена для компонента отразится только в конкретном компоненте.

В примере выше обновление button_color_background или button_color_icon повлияет только на токены для каждого компонента. Такие обновления оказывают незначительное влияние на дизайн-систему.

Многоуровневые токены пригодятся для создания модульной и гибкой дизайн-системы. В примере ниже, используются многоуровневые токены для создания более гибкой и модульной системы отступов.

Многоуровневые токены дают больше возможностей для кастомизации.

В примере выше двухуровневый подход к токенам имеет ограниченную гибкость, поскольку обновление семантического токена space_md повлияет на внутренние отступы как в компонентах диалогового окна, так и компонентах поиска.

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

Заключение

Дизайн-токены — модульные, строительные блоки дизайн-системы, которые хранят повторяющиеся дизайн-решения и не зависят от платформы. Они выступают в качестве единого источника достоверных данных и делают дизайн-систему гибкой и масштабируемой.

Есть 3 типа дизайн-токенов, которые могут сформировать многоуровневую иерархию для создания более контролируемых и гибких дизайн-систем.

Использование дизайн-токенов вместо жёстко закодированных значений позволяет без труда создавать, поддерживать и масштабировать дизайн-системы.

Перевод статьи “Design Tokens: Beginner’s Guide” из блога Nitish Khagwal.

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement — подписывайтесь!