Что такое дизайн токены?

Дизайн токены (design tokens) — это значения стилей элементов пользовательского интерфейса, таких как цвет, типографика, интервалы, тени и т. д. Они используются в разрабатываемом продукте и могут быть преобразованы в формат для любой платформы (веб, мобильная, десктоп). Токены — это строительные блоки системы дизайна, мельчайшие фрагменты стиля, которые позволяют дизайнерам создавать стили для продукта.

Переменные и дизайн токены

Обычные переменные хранят свойства визуального дизайна, например, цвет: $teal-100 = #B2DFDB; Подобные переменные структурируют варианты дизайна. Однако, имя этой переменной не дает информации о ее использовании. Дизайнеры должны знать, какие параметры они должны применять в конкретном контексте, и здесь будут полезны токены: $button-cta-background-color = $teal-100; Имя этого токена — $button-cta-background-color — ясно дает понять, что цвет $teal-100 служит фоновым цветом для кнопки призыва к действию (call to action). Дизайнер, проектируя дизайн систему может либо захардкодить значения свойств для всех элементов, либо использовать токены. Дизайн развивается, и дизайн токены помогают избежать рутины при ручном обновлении захардкоженных значений. Кроме того, можно легко забыть изменить конкретное значение для какого-то элемента и внести несоответствия в дизайн. Дизайнеры, работая с токенами, обновляют значение централизованно, и новое изменение автоматически применяется ко всем проектам на каждой платформе. Дизайн токены упрощают и процесс разработки. Разработчики смогут иметь доступ к самым свежим атрибутам дизайна, например, через npm пакет, и получать обновления дизайна без изменения кода.

Как упростить процесс создания токенов

Провести инвентаризацию интерфейсов

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

Определить когда опция становится токеном

Полезно иметь четкие критерии создания токенов. Критерий «использовано X раз» — это простой, но эффективный способ решить, какие варианты следует токенизировать. Если стиль используется только в одном месте, вам, вероятно, не нужно создавать токен.

Определить соглашения о нейминге

Важно убедиться, что правильный токен используется для правильного ресурса. Разные команды будут называть одни и те же вещи по-разному. Вот почему очень важно определить четкие соглашения об именовании, прежде чем вы начнете работать с токенами. Рекомендуемый подход к именованию: [Категория]-[Тип]-[Элемент]-[Состояние]. Если вы будете следовать этому подходу, у вас будет что-то вроде этого: color-background-ctabutton-active (цвет для активной кнопки призыва к действию).

Использовать понятные шкалы

Обычно используются шкалы по аналогии с размерами футболок (xs, sm, md, lg, xl, xxl) или числовые прогрессии (2, 4, 8, 16, 32).

Использовать JSON для переиспользования дизайн токенов

JSON — отличный формат для хранения пар ключ-значение. С дизайн-токенами в JSON можно настроить параметры для препроцессоров Sass, LESS или Stylus.

Проверять и апрувить токены

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

Обеспечить доступность

Создаваемые вами дизайны должны быть доступны для всех пользователей. Когда вы работаете с токенами, вы не должны забывать тестировать их на доступность. Контраст — один из основополагающих принципов дизайна. При выборе цветов необходимо проверить контраст в соответствии с рекомендациями WCAG 2.0. WCAG рекомендует пороговое соотношение 4:5:1 для стандартного или мелкого текста и 3:1 для крупного текста. a11y - инструмент, который поможет вам проводить аудит доступности.

Улучшайте дизайн-систему с помощью токенов

Когда поддерживаются дизайн токены, упрощается процесс создания унифицированного внешнего вида на разных платформах. Дизайн токены помогают продуктовым командам быстро и уверенно применять дизайнерские решения. Они становятся единым источником достоверной информации для дизайнеров и разработчиков, поэтому все могут полагаться на токены для достижения согласованности и масштабируемости в дизайне пользовательского интерфейса. По мотивам xd.adobe.com

В этой статье повнимательнее рассмотрим два новых хука: useTransition() и useDeferredValue(). Эти два хука дают возможность определять приоритет обновления состояния, или, скорее, указывать, является ли обновление менее важным, чем другие, и откладывать его в пользу более срочных.

Какое обновление можно считать срочным, а какое обычным?

• Срочные обновления: отражают прямое взаимодействие, такое как набор текста, клики, нажатия и т. д., т.е. то с чем взаимодействует пользователь. Когда вы вводите текст в поле ввода, вы хотите сразу увидеть введенный вами текст. В противном случае UI будет казаться медленным и подлагивать. Поэтому мы хотим сделать такие обновления приоритетным.
• Обычные обновления: переход пользовательского интерфейса из одного вида в другой. Пользователи знают, что представление должно измениться или обновиться (например, когда ожидается ответ на запрос данных). Даже если есть небольшая задержка, это можно рассматривать как ожидаемое поведение, и это не будет восприниматься как медлительность приложения.

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

Хук useTransition() и функция startTransition()

До React 18 все обновления состояния помечались как "срочные". Это означает, что все обновления состояния обрабатывались одинаково с одинаковым приоритетом. С помощью useTransition() теперь можно пометить некоторые обновления состояния как несрочные.

Когда использовать useTransition() ?

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

Как использовать useTransition() ?

function App() {
 const [isPending, startTransition] = useTransition();
 const [searchQuery, setSearchQuery] = useState('');
 
 // запрос данных, который занимает некоторое время
 const filteredResults = getProducts(searchQuery);
 
 function handleQueryChange(event) {
   startTransition(() => {
     // оборачивая setSearchQuery() в startTransition(),
     // мы помечаем эти обновления как менее важные
     setSearchQuery(event.target.value);
   });
 }
 
 return (
   <div>
     <input type="text" onChange={handleQueryChange} />
 
     {isPending && <span>Loading...</span>}
     <ProductsList results={filteredResults} />
   </div>
 );
}

Хук useDeferredValue()

useDeferredValue() очень похож на useTransition() в том, что он позволяет отложить несрочное обновление состояния, но применяется его к части дерева. Это похоже методы debounce и throttle, которые мы часто используем для отложенных обновлений. React будет работать с такими обновлениями, как только завершатся срочные обновления.

Когда использовать useDeferredValue()?

С помощью useTransition() вы сами решаете, когда конкретное обновление состояния может быть помечено как менее срочное. Но иногда такой возможности может и не быть, например, если фрагмент кода находится в сторонней библиотеке. В таких случаях можно воспользоваться хуком useDeferredValue(). С помощью useDeferredValue() вы можете обернуть значение и пометить его изменения как менее важные и, следовательно, отложить повторный рендеринг. useDeferredValue() будет возвращать предыдущее значение до тех пор, пока есть более срочные обновления для завершения и отображения дерева с обновленным значением.

Как использовать useDeferredValue() ?

function ProductsList({ results }) {
 // deferredResults получат обновленные данные
 // когда завершатся срочные обновления
 const deferredResults = useDeferredValue(results);
 
 return (
   <ul>
     {deferredResults.map((product) => (
       <li key={product.id}>{product.title}</li>
     ))}
   </ul>
 );
}

Итоги

Эти два новых хука позволяют сделать интерфейсы максимально отзывчивыми, даже в сложных приложениях с большим количеством повторных рендерингов, отдавая приоритет обновлениям, которые имеют решающее значение для взаимодействия с пользователем, и помечая некоторые другие как менее важные. Это не означает, что нужно оборачивать все состояния этими хуками. Их следует использовать в крайнем случае, если приложение или компоненты не могут быть оптимизированы другими способами (например, при помощи lazy loading’а, пагинации, веб-воркеров и т. д.).