Этот курс представляет собой исчерпывающее руководство по публикации вашей первой библиотеки компонентов и ресурсов дизайна с использованием React, TypeScript, Storybook, Tailwind CSS и Styled Dictionary. Вы создадите гибкую библиотеку дизайн-системы корпоративного уровня, которая действительно понравится вашим коллегам.
В этом курсе мы погрузимся в мир дизайн-систем. Мы узнаем, как они могут помочь разработчикам повысить свою производительность, обеспечить согласованность продуктов компании и, в конечном счете, ускорить процесс разработки.
Мы начнем с рассмотрения фундаментальных концепций систем проектирования, а затем перейдем к архитектуре кодовой базы монорепозитория. Мы настроим общие конфигурации для TypeScript, ESLint и Prettier, а также создадим базовый пакет для размещения и распространения токенов и ресурсов дизайна.
Далее мы создадим пакет React с демонстрационными компонентами, стилизованными с использованием токенов стиля нашей системы дизайна. Мы также создадим пакет Storybook и изучим лучшие практики разработки и документирования компонентов с помощью TypeScript. Мы сосредоточимся на стилизации наших компонентов двумя способами: с помощью CSS-in-JS со стилизованными компонентами и токенами дизайна JavaScript, а также с помощью классов CSS Tailwind.
Наконец, мы узнаем, как создавать тесты для наших компонентов React с помощью React Testing Library и AXE, а также управлять выпусками с помощью наборов изменений и настраивать конвейер CI с помощью GitHub Actions.
Этот курс призван стать всеобъемлющим руководством или поваренной книгой по созданию полной системы дизайна компании с нуля. К концу курса у вас будут знания и навыки для создания практичной и удобной в сопровождении дизайн-системы для любой организации.
Посмотреть больше
Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай
Build a Complete Company Design System,
а также все другие курсы, прямо сейчас!
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Дизайн-системы становятся настолько популярными, потому что они делают продукты более последовательными, улучшают их удобство использования и сокращают время принятия дизайнерских решений. Замечательно! Но знаете ли вы, как их построить? В этом курсе вы узнаете, что такое дизайн-система и почему она так важна, но, что наиболее важно, вы научитесь создавать ее с нуля в Figma.
Мы будем говорить о дизайн-системах в Figma, это не курс о началах работы в фигме. Поехали.Будет полезна новичкам, тем, кто еще сомневается, переходить ли в Figma, Sketch или XD и тому подобные программы из Photoshop, а также тем, что уже работает в Figma, но еще не освоил ее в достаточной степени, чтобы создать свою собственную дизайн-систему. Система конечно не претендует на глобальные системы для огромных проектов и порталов, но она может здор
Дизайн-система является горячей темой в мире разработки, и все крупные компании создают ее. Но что такое дизайн-система и как ее создать? На этом семинаре мы углубимся в основополагающую теорию дизайн-систем и создадим кусочки одной от начала до конца. Мы создадим дизайн-систему путем проектирования, разработки, документирования и развертывания нескольких компонентов.
gumroad
