От простого к сложному: эволюция дизайн-токенов в проекте

Привет, Хабр! Я Артём Бурунов, ведущий UI/UX-дизайнер в команде Platform V UI Kit в СберТехе. Наше решение позволяет легко создавать интерфейсы любого уровня сложности: от сайтов до корпоративных приложений. Мы развиваем библиотеку UI-компонентов, которые обеспечивают гибкость, доступность и масштабируемость сложных веб-интерфейсов. Один из главных элементов, с которым мы работаем, — это система дизайн-токенов. Сегодня я расскажу, что это такое, зачем нужно, и поделюсь примером, как может развиваться структура дизайн-токенов с ростом бизнеса. На примере вымышленного ИT-стартапа разберём, как организовать дизайн-токены для проектов разного масштаба. Выясним, как, начиная с простого набора, построить систему, которая будет развиваться и при этом останется понятной для команды. Материал будет полезен специалистам, которые используют систему дизайн-токенов в своих проектах и задумываются о её развитии.

https://habr.com/ru/companies/sberbank/articles/895306/

#дизайнтокены #дизайнсистема

Как мы строим дизайн-систему в ЮMoney

Всем привет! Мы — Полина и Степан, дизайнер интерфейсов и фронтенд-разработчик в ЮMoney. В этом тексте расскажем, как у нас в компании устроена дизайн-система, и посмотрим на неё с двух сторон: глазами команды дизайна и разработки .

https://habr.com/ru/companies/yoomoney/articles/890648/

#дизайнсистема #ui #ux #дизайн_интерфейсов #дизайн_система #дизайнтокены #консистентность #семантическое_версионирование #автоматизация #ux_design

Токены цвета для приложения: Как создать, использовать и передать в разработку

Практическое руководство для дизайнеров про создание, использование и передачу в разработку токенов цвета (variables) для мобильного приложения в фигме. Новичкам будет полезна вся статья целиком, более опытным будет особо интересна последняя часть — про передачу в разработку. Вперёд, к токенизации!

https://habr.com/ru/articles/875098/

#Дизайн #дизайнтокены #figma #variables #Передача_в_разработку

Как я документацию для дизайн-токенов в Storybook генерировал

Привет, Хабр! Меня зовут Саша, я Full-Stack разработчик и последние 7 лет пишу фронтенд, 6 из которых я работаю в американском стартапе. Я думаю ни для кого не секрет, что бизнес процессы в стартапах, мягко сказать, хромают. Я же как оптимист вижу возможность в каждой трудности, поэтому всегда считал, что это отличная возможность проявить инициативу и попробовать что-то автоматизировать или улучшить процессы команды (ну или хотя бы попробовать). Сегодня хочу рассказать, как можно легко реализовать документацию для дизайн-токенов в Storybook, и заодно поделиться тем, как и почему я пытался это сделать, и что из этого вышло. Статья будет полезна для разработчиков, которые уже используют дизайн токены и ищут лёгкий способ их документации. Поехали!

https://habr.com/ru/articles/779524/

#дизайнтокены #storybook #reactjs #дизайнсистема #opensource #работа_в_команде #распределенная_команда

Как автоматизировать использование дизайн токенов с помощью Stylelint и PostCSS

Привет, Хабр! Меня зовут Саша и вот уже 7 лет я работаю фулстек разработчиком и пишу на C# и TypeScript/React. Сегодня я хотел бы поделиться своим небольшим успехом в автоматизации. В какой-то момент я понял, что во время код ревью я указываю разработчикам на одни и те же ошибки. Но, что ещё хуже, я сам время от времени допускаю эти ошибки. Сегодня хочу рассказать об одной из таких проблем, которую я решил с помощью PostCSS + Stylelint, и о том, как я это сделал. Статья будет полезна для разработчиков, которые уже используют или собираются использовать дизайн токены. Начнём!

https://habr.com/ru/articles/779492/

#javascript #stylelint #postcss #дизайнтокены #автоматизация #cssпеременные #линтеры #typescript #плагины