Build a Complete Company Design System
Этот курс представляет собой исчерпывающее руководство по публикации вашей первой библиотеки компонентов и ресурсов дизайна с использованием 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.
Этот курс призван стать всеобъемлющим руководством или поваренной книгой по созданию полной системы дизайна компании с нуля. К концу курса у вас будут знания и навыки для создания практичной и удобной в сопровождении дизайн-системы для любой организации.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Newline - это образовательная платформа для разработчиков, ориентированная на будущих технических лидеров.Предлагает разнообразные курсы по фронтенду, бэкенду, современным языкам и технологиям, включая Rust, GraphQL и направления, связанные с искусственным интеллектом.Подписка newline Pro даёт доступ к десяткам курсов, видеоуроков, интерактивным проектам, исходному коду и закрытому сообществу.Бесплатный план включает базовые видео, библиотеку мат
gumroad
Виртуальная конференция по системам дизайна, призванная объединить сообщество вокруг систем дизайна и инструментов дизайна, организованная дизайнерским сообществом. Темы: Multibrand Design Systems, DesignOps, Design Tokens, Figma Tokens.
awwwards.com
Дизайн-системы становятся настолько популярными, потому что они делают продукты более последовательными, улучшают их удобство использования и сокращают время принятия дизайнерских решений. Замечательно! Но знаете ли вы, как их построить? В этом курсе вы узнаете, что такое дизайн-система и почему она так важна, но, что наиболее важно, вы научитесь создавать ее с нуля в Figma.
leveluptutorials
Мы будем говорить о дизайн-системах в Figma, это не курс о началах работы в фигме. Поехали.Будет полезна новичкам, тем, кто еще сомневается, переходить ли в Figma, Sketch или XD и тому подобные программы из Photoshop, а также тем, что уже работает в Figma, но еще не освоил ее в достаточной степени, чтобы создать свою собственную дизайн-систему. Система конечно не претендует на глобальные системы для огромных проектов и порталов, но она может здор
frontendmasters
Дизайн-система является горячей темой в мире разработки, и все крупные компании создают ее. Но что такое дизайн-система и как ее создать? На этом семинаре мы углубимся в основополагающую теорию дизайн-систем и создадим кусочки одной от начала до конца. Мы создадим дизайн-систему путем проектирования, разработки, документирования и развертывания нескольких компонентов.
