Subatomic — это практическое и глубокое руководство, которое помогает специалистам по продукту, дизайнерам и разработчикам овладеть дизайн-токенами — фундаментом современных дизайн-систем. Курс объясняет не только как создавать токены, но и как построить масштабируемую архитектуру, которую легко поддерживать и развивать в больших организациях.
Почему дизайн-токены — ключ к масштабируемым дизайн-системам
Чем больше продуктов и платформ поддерживает организация, тем труднее сохранять согласованность интерфейсов. Дизайн-токены решают эту проблему, создавая единый мост между дизайном и кодом. С их помощью команды могут быстрее обновлять UI, избегать дублирования и выстраивать гибкие темы — от светлой и тёмной до брендированных.
Курс Subatomic создан Брэдом и Иэном Фростами — экспертами мирового уровня, которые уже более десяти лет помогают компаниям Fortune 500 создавать эффективные токен-системы. Время сэкономлено, ошибки учтены — в курсе собраны лучшие практики и проверенные подходы.
Что вы получите в процессе обучения
Программа построена так, чтобы участник мог не просто изучить теорию, а сразу применить её на практике. Каждый модуль включает видео, схемы, примеры и инструменты.
Основные материалы курса
Более 10 часов подробных видеоуроков
Готовые архитектуры токенов для Figma и кода
Пошаговые процессы нейминга, организации и автоматизации
Подробные PDF с примерами и рабочими гайдами
Структура курса: 8 фундаментальных глав
Каждый раздел раскрывает один из ключевых аспектов построения токен-систем, от базовых понятий до продвинутых многоплатформенных решений.
1. Основы дизайн-токенов
Что такое токены, как они работают
Почему без них невозможны современные дизайн-системы
Роль токенов в Figma и в коде
2. Архитектура токенов
Трёхуровневая структура
Цвета, типографика, отступы, анимации
Моделирование крупных UI-систем через токены
3. Нейминг и структуры
Принципы логичного и масштабируемого нейминга
Как обеспечить синхронизацию дизайна и кода
Типовые шаблоны структуры токенов
4. Построение токен-системы
Работа с переменными в Figma
Использование Style Dictionary
Автоматизация экспорта и синхронизации
5. Публикация токенов
Распространение через Figma-библиотеки
Создание npm‑пакетов
Настройка внутренних релиз-процессов
6. Адаптация токенов в команде
Как дизайнеры внедряют токены в макеты
Как разработчики используют их в кодовой базе
Реальные сценарии и типовые ошибки
7. Поддержка и развитие
Версионирование и ветвление
Расширение токен-систем
Долгосрочная эволюция и управление
8. Продвинутые темы
Тёмные темы и режимы
Суббренды и white-label решения
Многопродуктовые и мультиплатформенные системы
Будущее дизайн-токенов и AI‑подходы
Практика, шаблоны и процессы
Курс усиливает теорию готовыми материалами: архитектурными шаблонами, схемами процессов в FigJam и насыщенными презентациями. Вы сможете не просто изучить материал, но и применить его к своей команде или дизайн-системе уже во время обучения.
Итог: этот курс — лучший старт или апгрейд для вашей токен-системы
Subatomic подойдёт как новичкам в дизайн-токенах, так и специалистам, которые уже работают с дизайн-системами и хотят вывести их на новый уровень. Курс закрывает пробелы, устраняет хаос в структурах и помогает внедрить единые принципы, которые работают в больших командах.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Ограничение времени просмотра
Вы можете просматривать пробный урок только 10 минут. Получите полный доступ, чтобы смотреть без ограничений.
Привет! Меня зовут Брэд Фрост - я консультант по дизайн-системам, фронтенд-разработчик, преподаватель, спикер, писатель, музыкант и художник. Я безумно увлечён вебом, творчеством и тем, как люди могут объединяться, чтобы вместе создавать потрясающие цифровые продукты.За свою карьеру я помог множеству команд выстроить и развить дизайн-системы, сочетая прочную архитектуру с более открытыми процессами и культурой совместной работы. Я автор методолог
Привет! Меня зовут Иэн Фрост, я младший брат Брэда. Я фронтенд-архитектор, технический лидер и консультант, увлечённый тем, чтобы помогать разработчикам расти и развиваться.С 2015 года я работаю над дизайн-системами вместе с Брэдом. За это время мне довелось строить дизайн-системы с использованием самых разных технологий: Web Components, React, Angular, Vue и не только. Я сотрудничал с техническими лидерами, разработчиками и дизайнерами из множес
This course could be made in like 3h. Those 2 guys made it explicitly long because they started from, ok let's sell this for 1000 USD, and then went from there.
It's full of mistakes, hard to follow and generally overly verbose shit. I'm so happy I didn't pay full price for this money grabbing product.
Во-первых, огромная благодарность команде и тем, кто собрал средства на приобретение этого курса и возможность с ним ознакомиться.
Во-вторых, уже к середине курса я начал понимать что он вызывает одну единственную эмоцию - разочарование. Основные причины:
- Неудобство. Я не видел как он структирирован на оригинальном ресурсе, но 359 лекций, большая часть из которых длится около минуты…Зачем? - Слишком много болтовни ни о чем. “В этом разделе мы расскажем…”, “В этом разделе мы рассказали…”, размусоливание любых тем по-максимуму, старательно забивая эфирное время. Отдельно хочу выделить множество несмешных шуток над которыми постоянно смеется Brad Frost и я уверен - он единственные кому они кажутся смешными - Много ненужных и скомканных тем. Вот так делаем в фигма, а вот видите - это сторибук, а вот Style Dictionary, мы теперь будем много-много времени тратить на ручное копирование переменных из Figma в наш JSON, а по итогу наш JSON нам даст переменные (которые можно просто в фигме выгрузить одним плагином). А еще мы вам покажем Storybook, но не расскажем что это, а просто будем вставлять какой-то туда код. А ну и еще упомянем про Git, так сверху, просто показать что мы его знаем. - Ну и самое главное - безмерно раздуто. Весь курс можно было бы эффективно вместить в один час (и есть на Youtube бесплатные блоггеры, которые делают по этой теме курсы не хуже, а то и лучше, объясняя быстрее и понятнее в разы). Слишком много повторений, ненужных допущений, сама даже организация проекта вызывает достаточно много вопросов.
В целом, сложилось впечатление, что ребятам просто перестали давать заказы, а деньги очень нужны и они сляпали это все на скорую руку. Если вы прочтете пару статей по атомарному дизайну, то этого будет достаточно для покрытия 95% всего материала поданного в данном курсе.
Designer extstudio
Спасибо за развернутую рецензию курса! В целом смотреть на скорости 1.25 вполне смотрибельный, но курс дико и без надобности подробили, уроки по 18 секунд — это явно перебор 😅 Полностью согласен: тоже ощущение, что курс в спешке подготовили на коленке с единственной целью — по-быстрому срубить бабла. Жаль, что автор выбрал такой путь. В свое время его книга понравилась, а здесь еще и брата пристроил)
Woo6phoo
Hello. Thank you for sharing this course. But I couldn't find the figma files in course materials. Am I looking to wrong place or are they missing? If you can check I'll be happy. Thank you again.
CourseHunter Team Woo6phoo
You are right. We added two new files inside course materials zip.
- links NEW with all useful links; - README NEW - instructions for Figma access.
Please re-download course materials. Thank you!
CourseHunter Team
А вот и курс. Спасибо всем за участие в кампании. Желаем продуктивного обучения! Here’s the course. Thank you all for participating in the campaign. Wishing you a productive learning experience!
CourseHunter Team
Тот самый комментарий / the exact comment from the admin
CourseHunter Team
Уважаемые участники, Основываясь на опыте предыдущих краудфандингов, ожидаемый вклад составляет от 10 до 20 долларов. Если вы не готовы внести такую сумму в итоге, пожалуйста, воздержитесь от участия.
Dear participants, Based on previous crowdfunding experiences, the expected contribution ranges from $10 to $20. If you are not ready to contribute this amount, please refrain from joining.
Thank you!
kojo CourseHunter Team
How do we send the money to this?
CourseHunter Team kojo
Tomorrow we will launch the crowdfunding process. A "Pay" button will appear on this page.
It's full of mistakes, hard to follow and generally overly verbose shit. I'm so happy I didn't pay full price for this money grabbing product.
http://cedar.rei.com/tokens
http://design.gitlab.com/product-foundations/design-tokens-reading
http://primer.style/doundations/primitives/token-names
http://spectrum.adobe.com/page/design-tokens
https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676
Во-первых, огромная благодарность команде и тем, кто собрал средства на приобретение этого курса и возможность с ним ознакомиться.
Во-вторых, уже к середине курса я начал понимать что он вызывает одну единственную эмоцию - разочарование. Основные причины:
- Неудобство. Я не видел как он структирирован на оригинальном ресурсе, но 359 лекций, большая часть из которых длится около минуты…Зачем?
- Слишком много болтовни ни о чем. “В этом разделе мы расскажем…”, “В этом разделе мы рассказали…”, размусоливание любых тем по-максимуму, старательно забивая эфирное время. Отдельно хочу выделить множество несмешных шуток над которыми постоянно смеется Brad Frost и я уверен - он единственные кому они кажутся смешными
- Много ненужных и скомканных тем. Вот так делаем в фигма, а вот видите - это сторибук, а вот Style Dictionary, мы теперь будем много-много времени тратить на ручное копирование переменных из Figma в наш JSON, а по итогу наш JSON нам даст переменные (которые можно просто в фигме выгрузить одним плагином). А еще мы вам покажем Storybook, но не расскажем что это, а просто будем вставлять какой-то туда код. А ну и еще упомянем про Git, так сверху, просто показать что мы его знаем.
- Ну и самое главное - безмерно раздуто. Весь курс можно было бы эффективно вместить в один час (и есть на Youtube бесплатные блоггеры, которые делают по этой теме курсы не хуже, а то и лучше, объясняя быстрее и понятнее в разы). Слишком много повторений, ненужных допущений, сама даже организация проекта вызывает достаточно много вопросов.
В целом, сложилось впечатление, что ребятам просто перестали давать заказы, а деньги очень нужны и они сляпали это все на скорую руку. Если вы прочтете пару статей по атомарному дизайну, то этого будет достаточно для покрытия 95% всего материала поданного в данном курсе.
В целом смотреть на скорости 1.25 вполне смотрибельный, но курс дико и без надобности подробили, уроки по 18 секунд — это явно перебор 😅
Полностью согласен: тоже ощущение, что курс в спешке подготовили на коленке с единственной целью — по-быстрому срубить бабла. Жаль, что автор выбрал такой путь. В свое время его книга понравилась, а здесь еще и брата пристроил)
- links NEW with all useful links;
- README NEW - instructions for Figma access.
Please re-download course materials. Thank you!
Here’s the course. Thank you all for participating in the campaign. Wishing you a productive learning experience!
Основываясь на опыте предыдущих краудфандингов, ожидаемый вклад составляет от 10 до 20 долларов.
Если вы не готовы внести такую сумму в итоге, пожалуйста, воздержитесь от участия.
Dear participants,
Based on previous crowdfunding experiences, the expected contribution ranges from $10 to $20.
If you are not ready to contribute this amount, please refrain from joining.
Thank you!