102.3K+Скачать
Перейти к руководству
Motion Systemавтор Owl-Listener

Motion System Skill.

Сделайте решения по анимации пригодными для повторного использования в компонентах и командах.

  • Дизайн-системы
  • Анимация
Скачать OpenDesignОткрыть руководство по использованию
Обзор источника · Motion SystemSKILL.md
Задача Дизайн-системы Результат • Именованные токены длительности и плавности с назначением. • Правила хореографии для групп, последовательного запуска (stagger) и направления. • Переопределения для уменьшенной анимации и требования к документации. Перед началом Требуется реализация токенов или аналог на платформе; источник не требует конкретного фреймворка анимации.
Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

01 Возможности

Создайте общий словарь анимации

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

Процесс на основе источникаНе тест производительности выполнения

Принцип работы

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

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

Ожидаемые результаты

  • Именованные токены длительности и плавности с назначением.
  • Правила хореографии для групп, последовательного запуска (stagger) и направления.
  • Переопределения для уменьшенной анимации и требования к документации.
Смотреть пример задания

От задания до проверки

  1. 01
    Составьте перечень ролей анимации

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

  2. 02
    Определите согласование

    Задайте общий тайминг внутри смысловых групп, пределы stagger и единые направления движения.

  3. 03
    Создайте доступный вариант

    Опишите, какая анимация исчезает, чем она заменяется и как сохраняется видимость важной информации о состоянии.

02 Когда использовать

Когда использовать

Требуется реализация токенов или аналог на платформе; источник не требует конкретного фреймворка анимации.

Хорошо подходит

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

Ограничения, которые стоит проверить

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

Подготовьте эти данные

  • Перечень компонентовПеречислите существующие анимации и то, что каждая из них передаёт.
  • Принципы анимацииОпишите желаемый характер продукта и взаимодействия, которые не должны анимироваться.
  • Платформа и доступностьУкажите целевые платформы реализации и ожидания по уменьшенной анимации.

03 Важные решения

Важные решения

  1. Небольшой словарь

    Меньше смысловых вариантов — проще заметить лишнее исключение, чем в большом каталоге произвольных таймингов.

  2. Глобальная доступность

    Системные переопределения снижают риск того, что один компонент проигнорирует настройку уменьшенной анимации.

04 Пример задания

Попробуйте целевое задание

Приведённое ниже задание не тестировалось. Перед использованием проверьте настройку навыка.

Проверьте настройку

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

Исходный файл в репозитории
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system/SKILL.md

Требуется реализация токенов или аналог на платформе; источник не требует конкретного фреймворка анимации.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

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

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

  • У каждого токена есть отдельная роль и конкретное значение.
  • Сгруппированные элементы следуют одним и тем же задокументированным правилам хореографии.
  • Поведение при уменьшенной анимации задано на уровне системы.

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

Скачать OpenDesignЧитать краткое руководство

05 Источник и лицензия

Источник и лицензия

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

Владелец источника
Owl-Listener
Репозиторий
Owl-Listener/designer-skills
Файл навыка
design-systems/skills/motion-system/SKILL.md
Лицензия
MIT
Проверенная версия
2026-10-07 · 9a6930cf84a8
Редакционное резюме источника
Определяет общие токены анимации, правила согласования и альтернативы для уменьшенной анимации во всём продукте.

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

06 Вопросы перед началом

Вопросы перед началом

Сколько должно быть токенов длительности?

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

Убирает ли уменьшенная анимация всю обратную связь?

Нет. Важная информация о состоянии должна сохраняться, а движение отключается или заменяется там, где это уместно.

На какую реализацию он ориентирован?

Он описывает пользовательские свойства CSS или аналогичные платформенные токены и включение в существующий конвейер экспорта токенов.

OpenDesign

Оставьте место для следующей итерации дизайна.

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

Скачать OpenDesignСмотреть навыки дизайна
Исходный файл в репозитории
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/design-systems/skills/motion-system/SKILL.md