Глубокий и всесторонний курс о дизайн-токенах: от концепций и переменных в Figma до кода, процессов, лучших практик и многого другого.
Преподаватели: Брэд Фрост (создатель методологии Atomic Design) и Иэн Фрост - признанные эксперты в области дизайн-систем. Они делятся всем, что вам нужно знать для создания эффективной системы дизайн-токенов, которая поможет вашей организации масштабировать дизайн и разработку.
Что входит в курс:
Более 10 часов подробных видеоуроков
Образцы архитектуры в Figma и коде
Рабочие процессы по неймингу и управлению
PDF с примерами и полезными материалами
"Дизайн-системы делают всё одинаковым." Знакомо?
Если ваша организация поддерживает множество продуктов, платформ, брендов и режимов, вы знаете, как сложно найти баланс между единообразием и гибкостью.
Ответ - дизайн-токены.
Мы более десяти лет помогали десяткам организаций - включая многих из списка Fortune 500 - выстраивать системы дизайн-токенов, позволяющие одновременно обеспечивать согласованность и поддерживать индивидуальность. Это сложно. Именно поэтому мы собрали все наши знания в этом курсе - чтобы вы могли избежать наших ошибок и построить надёжную, масштабируемую токен-систему.
Структура курса (8 глав):
Основы дизайн-токенов
Зачем они нужны, где применяются, как устроены, и как связаны с современными дизайн-системами и инструментами.
Архитектура токенов
Трёхуровневая система токенов, цветовые и типографические системы, отступы, границы, анимации и прочее.
Нейминг и структуры
Принципы и шаблоны нейминга, рекомендации по структуре и синхронизации между дизайном и кодом.
Построение токен-системы
Переменные в Figma, Style Dictionary, процессы автоматизации и синхронизации.
Публикация токенов
Распространение через Figma-библиотеки, npm-пакеты и внутренние процессы релизов.
Адаптация токенов в работе
Как дизайнеры и разработчики используют токены в реальной практике.
Поддержка и развитие
Ветвление, версионирование, расширение, управление и долгосрочная эволюция систем.
Продвинутые темы
Тёмные темы, суббренды, white-label, многопродуктовые и мультиплатформенные решения, будущее токенов и AI.
Курс сопровождается шаблонами архитектур в Figma и коде, схемами процессов в FigJam и насыщенными слайдами с множеством дополнительных ресурсов.
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Ограничение времени просмотра
Вы можете просматривать пробный урок только 10 минут. Получите полный доступ, чтобы смотреть без ограничений.
Quick Intro to Consuming a Tokens Library in Figma
Урок 207.
00:01:52
Publishing a Tokens Library in Code - Intro
Урок 208.
00:02:16
Publishing a Tokens Library in Code - Build Process
Урок 209.
00:01:09
Quick Intro to Consuming a Tokens Library in Code
Урок 210.
00:03:27
Chapter 5 Summary
Урок 211.
00:02:35
Chapter 6 Introduction
Урок 212.
00:01:43
Understanding Design Token Adoption
Урок 213.
00:03:51
Spectrum of Token Integration - Reference
Урок 214.
00:00:54
Spectrum of Token Integration - Importing Token Library
Урок 215.
00:03:08
Spectrum of Token Integration - Importing Component Library
Урок 216.
00:01:03
Design Token Users - You!
Урок 217.
00:01:00
Design Token Users - Other Product Teams
Урок 218.
00:01:21
Design Token Users - Devs Using Multiple Tech Stacks
Урок 219.
00:01:36
Design Token Users - Auxiliary Users
Урок 220.
00:00:48
Design Token Users - Stakeholders
Урок 221.
00:01:16
Users Don't Care About Design Tokens
Урок 222.
00:03:12
Adopting Tokens At Every Layer of the Design System Ecosystem
Урок 223.
00:01:41
Subscribing to the Token Figma Team Library
Урок 224.
00:03:15
Importing the Tokens Code Package
Урок 225.
00:02:51
Wiring Up Tokens To Existing Figma Components
Урок 226.
00:02:51
Wiring Up Tokens To Existing Code Components
Урок 227.
00:02:29
Best Practices for Adopting Design Tokens in Existing Components
Урок 228.
00:01:34
The Importance of Showing the Magic Trick
Урок 229.
00:04:00
Wiring Up Tokens To New Figma Components
Урок 230.
00:03:02
Wiring Up Tokens To New Code Components
Урок 231.
00:00:35
Showing The Magic Trick for New Components
Урок 232.
00:01:48
Best Practices for Adopting Design Tokens in New Components
Урок 233.
00:01:10
Applying Your Token Nomenclature
Урок 234.
00:01:11
Adopting Default Color Tokens In Figma
Урок 235.
00:00:43
Adopting Default Color Tokens In Code
Урок 236.
00:00:37
Adopting Brand Color Tokens In Figma
Урок 237.
00:00:53
Adopting Brand Color Tokens In Code
Урок 238.
00:01:30
Accent Color Tokens
Урок 239.
00:00:47
Adopting Disabled Color Tokens In Figma
Урок 240.
00:00:54
Adopting Disabled Color Tokens In Code
Урок 241.
00:01:15
Adopting Utility Color Tokens In Figma
Урок 242.
00:01:36
Adopting Utility Color Tokens In Code
Урок 243.
00:00:31
Color Token Variants
Урок 244.
00:01:23
Adopting Knockout Variant Color Tokens In Figma
Урок 245.
00:00:31
Adopting Knockout Variant Color Tokens In Code
Урок 246.
00:01:36
Subtle and Strong Color Token Variants
Урок 247.
00:01:19
Adopting Tier 3 Color Tokens In Figma
Урок 248.
00:02:22
Adopting Tier 3 Color Tokens In Code
Урок 249.
00:01:32
Adopting Display Typography Tokens In Figma
Урок 250.
00:00:31
Adopting Display Typography Tokens In Code
Урок 251.
00:00:55
Adopting Headline Typography Tokens In Figma
Урок 252.
00:00:21
Adopting Headline Typography Tokens In Code
Урок 253.
00:00:39
Adopting Title Typography Tokens In Figma
Урок 254.
00:00:32
Adopting Title Typography Tokens In Code
Урок 255.
00:01:12
Responsive Typography In Figma
Урок 256.
00:00:37
Responsive Typography In Code
Урок 257.
00:01:42
Adopting Body Typography Tokens In Figma
Урок 258.
00:01:40
Adopting Body Typography Tokens In Code
Урок 259.
00:02:05
Adopting Label Typography Tokens In Figma
Урок 260.
00:02:34
Adopting Label Typography Tokens In Code
Урок 261.
00:00:53
Adopting Tier 3 Typography Tokens In Figma
Урок 262.
00:00:37
Adopting Tier 3 Typography Tokens In Code
Урок 263.
00:01:39
Adopting Border, Shadow, and Animation Tokens In Code
Урок 264.
00:02:16
Using Token-Powered Components
Урок 265.
00:02:23
Tokens at the Technology-Specific Implementation Layer
Урок 266.
00:03:57
Tokens, CSS, and CSS Frameworks
Урок 267.
00:01:30
Adopting Design Tokens in Native Mobile Apps
Урок 268.
00:02:52
Adopting Design Tokens in iOS Apps
Урок 269.
00:02:33
Adopting Design Tokens in Android App
Урок 270.
00:03:12
Adopting Design Tokens in React Native
Урок 271.
00:02:05
Tokens and Other Technology Environments
Урок 272.
00:02:48
Technology-specific Considerations & Best Practices
Урок 273.
00:05:43
The Power of Recipes
Урок 274.
00:01:12
Recipes In Figma - Architecture
Урок 275.
00:00:51
Recipes In Figma - Publishing A Card Component
Урок 276.
00:03:48
Recipes In Figma - Creating Recipes
Урок 277.
00:02:39
Recipes In Code
Урок 278.
00:02:15
Recipes Best Practices & Considerations
Урок 279.
00:06:19
Smart Components and Design Tokens
Урок 280.
00:03:13
Design Tokens at the Product Layer
Урок 281.
00:02:58
Chapter 6 Summary
Урок 282.
00:01:39
Chapter 7 Introduction
Урок 283.
00:01:20
Chapter 7 Overview
Урок 284.
00:01:33
4 Phases of a Design Token System Product Lifecycle
Урок 285.
00:00:33
Phase 1 - Goals
Урок 286.
00:03:27
Phase 1 - Team
Урок 287.
00:00:54
Phase 1 - Establishing the Virtuous Cycle
Урок 288.
00:02:21
Atomic Design Connects Systems To Products
Урок 289.
00:01:07
Atomic Design + Design Tokens = love
Урок 290.
00:01:46
Pilot Projects For The (Quick) Win!
Урок 291.
00:03:04
Pilot Project Criteria
Урок 292.
00:03:28
Pilot Project Examples & The Importance of MVP
Урок 293.
00:03:15
Finding Pilot Projects
Урок 294.
00:02:44
Pilot Project Starting Point
Урок 295.
00:07:31
Pilot Project - Maker and User Collaboration
Урок 296.
00:06:58
Phase 1 - Vanilla, Considerations, and Best Practices
Урок 297.
00:04:15
Phase 2 - Semantic Versioning
Урок 298.
00:04:41
Phase 2 - Semantic Version Example and Branching Intro
Урок 299.
00:03:33
Phase 2 - Branching in Code
Урок 300.
00:02:05
Phase 2 - Branching in Figma
Урок 301.
00:03:02
Phase 2 - Branching Example and Changelog
Урок 302.
00:03:47
Phase 2 - Additional Pilots
Урок 303.
00:04:49
Phase 2 - Version 1.0 and Pilot Project Considerations
Урок 304.
00:01:51
Phase 2 - Considerations and Best Practices
Урок 305.
00:03:41
Phase 3 - Picking a Third Pilot Project
Урок 306.
00:05:08
Phase 3 - Shifting Maker and User Roles
Урок 307.
00:02:57
Phase 3 - Governance Workflow Intro
Урок 308.
00:16:02
Phase 3 - Governance Workflow Details
Урок 309.
00:01:33
Phase 3 - Governance Workflow Summary
Урок 310.
00:02:09
Phase 3 - Considerations and Best Practices
Урок 311.
00:04:37
Phase 4 - Self-Service
Урок 312.
00:03:04
Chapter 7 Summary
Урок 313.
00:04:12
Chapter 8 Introduction
Урок 314.
00:04:29
Dark Mode Introduction
Урок 315.
00:04:53
Dark Mode In Practice
Урок 316.
00:01:08
Dark Mode: User-selected
Урок 317.
00:01:29
Dark Mode: System Settings
Урок 318.
00:02:06
Dark Mode Summary
Урок 319.
00:03:51
Subbrands
Урок 320.
00:01:13
Subbrands Summary
Урок 321.
00:02:27
White Labeling and CMS Implementation Introduction
Урок 322.
00:06:00
White Labeling and CMS Implementation Details
Урок 323.
00:02:15
White Labeling and CMS Implementation Summary
Урок 324.
00:04:31
Multiple Product Families
Урок 325.
00:01:46
Multiple Product Families Summary
Урок 326.
00:02:53
Internationalization/Localization
Урок 327.
00:01:41
Internationalization/Localization Summary
Урок 328.
00:05:10
Redesigns, Refreshes, and Rebrands Introduction
Урок 329.
00:02:33
Adopting Redesign/Refresh/Rebrand
Урок 330.
00:04:20
Adopting Redesign/Refresh/Rebrand Scenarios
Урок 331.
00:01:37
Redesign/Refresh/Rebrand Summary
Урок 332.
00:03:24
Campaigns
Урок 333.
00:00:52
Campaigns Summary
Урок 334.
00:05:48
AI and Design Tokens Intro
Урок 335.
00:04:01
AI and Design Token Nomenclature
Урок 336.
00:02:20
AI and Design Token Naming Help
Урок 337.
00:01:19
Figma AI
Урок 338.
00:01:12
AI and Design Tools
Урок 339.
00:01:38
AI and Developer IDEs
Урок 340.
00:03:40
AI and Design-Code Sync Tools
Урок 341.
00:03:45
AI-Infused Design Token Environment Setup
Урок 342.
00:02:57
Using AI to Create an MVP Token System from Brand Guidelines
Урок 343.
00:02:07
Using AI to Create an MVP Token System From an Image
Урок 344.
00:08:43
Using AI to Create an MVP Token System from Existing Product
Урок 345.
00:03:27
Build Out A Theme's Color Tokens with AI
Урок 346.
00:01:23
Testing a Token System with AI
Урок 347.
00:02:31
Creating a New Token-Powered Component with AI
Урок 348.
00:02:33
Using AI to Adopt Tokens in Existing Application
Урок 349.
00:01:06
Translate to Additional Formats With AI
Урок 350.
00:01:42
Using AI to Help Create Dark Mode Theme
Урок 351.
00:02:13
AI and Design Systems Is A Potent Combination
Урок 352.
00:03:34
Principles for AI and Design Systems
Урок 353.
00:05:01
Our Role In This New, Weird AI-Infused World
Урок 354.
00:02:57
Chapter 8 Summary
Урок 355.
00:10:28
Course Recap
Урок 356.
00:01:28
Closing Thoughts
Урок 357.
00:01:32
Certificate, LinkedIn, & Survey
Урок 358.
00:02:29
Acknowledgements & Thank Yous
Урок 359.
00:01:24
Follow Us, Thanks, and See Ya Soon!
Авторы - Brad Frost, Ian Frost
Brad Frost
Привет! Меня зовут Брэд Фрост - я консультант по дизайн-системам, фронтенд-разработчик, преподаватель, спикер, писатель, музыкант и художник. Я безумно увлечён вебом, творчеством и тем, как люди могут объединяться, чтобы вместе создавать потрясающие цифровые продукты.За свою карьеру я помог множеству команд выстроить и развить дизайн-системы, сочетая прочную архитектуру с более открытыми процессами и культурой совместной работы. Я автор методолог
+1
Ian Frost
Привет! Меня зовут Иэн Фрост, я младший брат Брэда. Я фронтенд-архитектор, технический лидер и консультант, увлечённый тем, чтобы помогать разработчикам расти и развиваться.С 2015 года я работаю над дизайн-системами вместе с Брэдом. За это время мне довелось строить дизайн-системы с использованием самых разных технологий: Web Components, React, Angular, Vue и не только. Я сотрудничал с техническими лидерами, разработчиками и дизайнерами из множес
Во-первых, огромная благодарность команде и тем, кто собрал средства на приобретение этого курса и возможность с ним ознакомиться.
Во-вторых, уже к середине курса я начал понимать что он вызывает одну единственную эмоцию - разочарование. Основные причины:
- Неудобство. Я не видел как он структирирован на оригинальном ресурсе, но 359 лекций, большая часть из которых длится около минуты…Зачем?
- Слишком много болтовни ни о чем. “В этом разделе мы расскажем…”, “В этом разделе мы рассказали…”, размусоливание любых тем по-максимуму, старательно забивая эфирное время. Отдельно хочу выделить множество несмешных шуток над которыми постоянно смеется Brad Frost и я уверен - он единственные кому они кажутся смешными
- Много ненужных и скомканных тем. Вот так делаем в фигма, а вот видите - это сторибук, а вот Style Dictionary, мы теперь будем много-много времени тратить на ручное копирование переменных из Figma в наш JSON, а по итогу наш JSON нам даст переменные (которые можно просто в фигме выгрузить одним плагином). А еще мы вам покажем Storybook, но не расскажем что это, а просто будем вставлять какой-то туда код. А ну и еще упомянем про Git, так сверху, просто показать что мы его знаем.
- Ну и самое главное - безмерно раздуто. Весь курс можно было бы эффективно вместить в один час (и есть на Youtube бесплатные блоггеры, которые делают по этой теме курсы не хуже, а то и лучше, объясняя быстрее и понятнее в разы). Слишком много повторений, ненужных допущений, сама даже организация проекта вызывает достаточно много вопросов.
В целом, сложилось впечатление, что ребятам просто перестали давать заказы, а деньги очень нужны и они сляпали это все на скорую руку. Если вы прочтете пару статей по атомарному дизайну, то этого будет достаточно для покрытия 95% всего материала поданного в данном курсе.
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.
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Познакомьтесь с Ideogram - инструментом генерации изображений на базе искусственного интеллекта, который превращает ваши идеи в впечатляющие визуалы. Будь вы дизайнером, маркетологом или просто увлечённым визуальным творчеством, Ideogram упростит весь процесс. В этом курсе вы шаг за шагом научитесь создавать красивые логотипы, посты для соцсетей и многое другое.
«Дизайн и прототипирование для iOS 18» - это погружение в мир мобильного дизайна, где вы освоите создание стильных и удобных приложений. Курс охватывает работу в Figma, актуальные принципы дизайна iOS 18 и практику на реальных проектах. Вы создадите два полноценных прототипа: интерфейс управления автомобилем и умного AI-ассистента.
Освой Figma - идеальный курс для начинающих и сомневающихся дизайнеров
Figma Mastery - The ultimate Figma course for new and struggling designers
Курс «Figma Mastery» - это обширное руководство, которое обучает эффективному и продуктивному использованию Figma, охватывая все этапы работы: от настройки проекта до передачи дизайна разработчикам.
Практическая доступность: Руководство для веб-дизайнеров и разработчиков
Practical Accessibility - Practical Accessibility for web designers and developers
Этот курс - ваш проводник в мир веб-доступности. Он создан, чтобы развеять мифы, упростить сложные темы и дать вам практические навыки для разработки доступных веб-сайтов и приложений, которыми смогут пользоваться все, включая людей с ограниченными возможностями.
The Path to Senior Product Designer: A Growth Plan for a UX Design Career
Освойте навыки, которые помогают дизайнерам получать повышение. Знание всех трюков в Figma не гарантирует повышения. Изучите 12 навыков, которые действительно важны: наставничество, предоставление обратной связи, презентация дизайна, убеждение коллег и улучшение процессов. Подход к развитию, поддержанный индустрией. Основано на оценках дизайнеров и сотрудников более чем 50 компаний, включая Dropbox, Medium, Square, Figma, Zendesk, Intercom и Cour
designcode.io
(UI) Adrian (Adrian Kuleszo)
Sara Soueidan
Artiom Dashinsky
Во-первых, огромная благодарность команде и тем, кто собрал средства на приобретение этого курса и возможность с ним ознакомиться.
Во-вторых, уже к середине курса я начал понимать что он вызывает одну единственную эмоцию - разочарование. Основные причины:
- Неудобство. Я не видел как он структирирован на оригинальном ресурсе, но 359 лекций, большая часть из которых длится около минуты…Зачем?
- Слишком много болтовни ни о чем. “В этом разделе мы расскажем…”, “В этом разделе мы рассказали…”, размусоливание любых тем по-максимуму, старательно забивая эфирное время. Отдельно хочу выделить множество несмешных шуток над которыми постоянно смеется Brad Frost и я уверен - он единственные кому они кажутся смешными
- Много ненужных и скомканных тем. Вот так делаем в фигма, а вот видите - это сторибук, а вот Style Dictionary, мы теперь будем много-много времени тратить на ручное копирование переменных из Figma в наш JSON, а по итогу наш JSON нам даст переменные (которые можно просто в фигме выгрузить одним плагином). А еще мы вам покажем Storybook, но не расскажем что это, а просто будем вставлять какой-то туда код. А ну и еще упомянем про Git, так сверху, просто показать что мы его знаем.
- Ну и самое главное - безмерно раздуто. Весь курс можно было бы эффективно вместить в один час (и есть на Youtube бесплатные блоггеры, которые делают по этой теме курсы не хуже, а то и лучше, объясняя быстрее и понятнее в разы). Слишком много повторений, ненужных допущений, сама даже организация проекта вызывает достаточно много вопросов.
В целом, сложилось впечатление, что ребятам просто перестали давать заказы, а деньги очень нужны и они сляпали это все на скорую руку. Если вы прочтете пару статей по атомарному дизайну, то этого будет достаточно для покрытия 95% всего материала поданного в данном курсе.
- 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!