Глубокий и всесторонний курс о дизайн-токенах: от концепций и переменных в Figma до кода, процессов, лучших практик и многого другого.
Преподаватели: Брэд Фрост (создатель методологии Atomic Design) и Иэн Фрост - признанные эксперты в области дизайн-систем. Они делятся всем, что вам нужно знать для создания эффективной системы дизайн-токенов, которая поможет вашей организации масштабировать дизайн и разработку.
Что входит в курс:
Более 10 часов подробных видеоуроков
Образцы архитектуры в Figma и коде
Рабочие процессы по неймингу и управлению
PDF с примерами и полезными материалами
"Дизайн-системы делают всё одинаковым." Знакомо?
Если ваша организация поддерживает множество продуктов, платформ, брендов и режимов, вы знаете, как сложно найти баланс между единообразием и гибкостью.
Ответ - дизайн-токены.
Мы более десяти лет помогали десяткам организаций - включая многих из списка Fortune 500 - выстраивать системы дизайн-токенов, позволяющие одновременно обеспечивать согласованность и поддерживать индивидуальность. Это сложно. Именно поэтому мы собрали все наши знания в этом курсе - чтобы вы могли избежать наших ошибок и построить надёжную, масштабируемую токен-систему.
Структура курса (8 глав):
Основы дизайн-токенов
Зачем они нужны, где применяются, как устроены, и как связаны с современными дизайн-системами и инструментами.
Архитектура токенов
Трёхуровневая система токенов, цветовые и типографические системы, отступы, границы, анимации и прочее.
Нейминг и структуры
Принципы и шаблоны нейминга, рекомендации по структуре и синхронизации между дизайном и кодом.
Построение токен-системы
Переменные в Figma, Style Dictionary, процессы автоматизации и синхронизации.
Публикация токенов
Распространение через Figma-библиотеки, npm-пакеты и внутренние процессы релизов.
Адаптация токенов в работе
Как дизайнеры и разработчики используют токены в реальной практике.
Поддержка и развитие
Ветвление, версионирование, расширение, управление и долгосрочная эволюция систем.
Продвинутые темы
Тёмные темы, суббренды, white-label, многопродуктовые и мультиплатформенные решения, будущее токенов и AI.
Курс сопровождается шаблонами архитектур в Figma и коде, схемами процессов в FigJam и насыщенными слайдами с множеством дополнительных ресурсов.
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Ограничение времени просмотра
Вы можете просматривать пробный урок только 10 минут. Получите полный доступ, чтобы смотреть без ограничений.
Привет! Меня зовут Брэд Фрост - я консультант по дизайн-системам, фронтенд-разработчик, преподаватель, спикер, писатель, музыкант и художник. Я безумно увлечён вебом, творчеством и тем, как люди могут объединяться, чтобы вместе создавать потрясающие цифровые продукты.За свою карьеру я помог множеству команд выстроить и развить дизайн-системы, сочетая прочную архитектуру с более открытыми процессами и культурой совместной работы. Я автор методолог
Привет! Меня зовут Иэн Фрост, я младший брат Брэда. Я фронтенд-архитектор, технический лидер и консультант, увлечённый тем, чтобы помогать разработчикам расти и развиваться.С 2015 года я работаю над дизайн-системами вместе с Брэдом. За это время мне довелось строить дизайн-системы с использованием самых разных технологий: Web Components, React, Angular, Vue и не только. Я сотрудничал с техническими лидерами, разработчиками и дизайнерами из множес
Во-первых, огромная благодарность команде и тем, кто собрал средства на приобретение этого курса и возможность с ним ознакомиться.
Во-вторых, уже к середине курса я начал понимать что он вызывает одну единственную эмоцию - разочарование. Основные причины:
- Неудобство. Я не видел как он структирирован на оригинальном ресурсе, но 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.
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!