Статья об автоматизации дизайн-системы — с практическими советами, инструментами и примерами

Джос Памбу рассказал, как создавать и синхронизировать токены и компоненты, поддерживать единообразие в документации, одновременно вносить изменения в дизайн и код, а также автоматизировать этот процесс. Главное из статьи:

— В первую очередь нужно автоматизировать токены, к которым, например, относятся цвета, типографика и отступы. Их изменения в Figma должны сразу отражаться в коде. Создавать токены и управлять ими помогут такие инструменты, как Token Studio, Specify и Design-tokens. dev. Для генерации токенов с корректными наименованиями используйте NamedDesignTokens. guide

— UXPin Merge позволяет дизайнерам создавать интерактивные прототипы с реальными React-компонентами

— Supernova автоматически генерирует код по дизайну в Figma, обновляет код после изменений и поддерживает единую документацию в актуальном состоянии

— Zeroheight превращает компоненты Figma в документированную систему

— Собственные скрипты на основе Figma API помогут отслеживать изменения в компонентах, работать с метаданными и извлекать значения токенов из Figma

— Следите за обновлениями API и инструментов

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

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

Также в статье Automating Design Systems: Tips And Resources For Getting Started Джос даёт пошаговую инструкцию по автоматизации процессов на примере Figma и Supernova

smashingmagazine.com/2025/08/automating-design-systems-tips-resources/

#awd_article

Raster — сервис для хранения и редактирования фотографий и референсов

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

Работает как веб-приложение и плагин для Figma. Бесплатен для некоммерческих целей, но есть ограничения, например по объёму памяти в 10 Гб. Стоимость командной версии — от 9 $ в месяц за пользователя

raster.app

#awd_tool

Mov Variable — декоративный вариативный шрифт, созданный для анимации

Каждая буква трансформируется по-своему, при этом движение некоторых можно зациклить и сделать бесконечным. Есть отдельный набор Stylistic Set 15: в нём у букв одинаковая ширина штриха, которая не меняется при анимации

Шрифт поддерживает английский язык и содержит 657 уникальных глифов: у каждого знака минимум восемь вариантов

Скачать бесплатную пробную версию: fonts.studiofeixen.ch/mov

#awd_font

Серия плакатов Баухаус для рекламы Веймарской выставки (1923)

Больше плакатов: awdee.ru/series-of-bauhaus-posters-for-the-weimar-exhibition-1923

#awd_poster via vk.com/wall-52242903_22852