Этот курс — практическое руководство по тому, как преобразовать дизайн-систему из Figma в полностью типизированные, изолированные и производительные компоненты ReactJS с использованием Storybook. Материал ориентирован на разработчиков, которые хотят научиться строить масштабируемые библиотеки компонентов и работать так же, как это делают профессиональные продуктовые команды.
Что вы изучите на курсе
Курс шаг за шагом проведёт вас через весь процесс создания дизайн-системы: от анализа макетов до реализации, документирования и оптимизации. Вы научитесь разрабатывать интерфейсные компоненты, которые одновременно удобны в использовании, легко поддерживаются и отвечают высоким стандартам качества.
Преобразование дизайнов из Figma в React-компоненты
Вы узнаете методы извлечения структурных и визуальных паттернов из Figma, чтобы затем грамотно перенести их в код. Особое внимание уделено стандартизации, унификации и сохранению консистентности дизайн-системы.
Работа со Storybook
Storybook станет вашей основной средой для изолированной разработки компонентов. В курсе вы научитесь:
- создавать документацию для каждого компонента;
- описывать состояния (hover, focus, disabled);
- реализовывать тёмную тему;
- настраивать окружение Storybook для команды и производства.
Практическое применение знаний
Вы создадите полностью адаптивное приложение на ReactJS с собственной библиотекой компонентов. Задания построены по принципу возрастающей сложности, что помогает формировать мышление настоящего инженер-программиста.
Компоненты, которые вы создадите
В ходе курса вы разработаете важнейшие элементы дизайн-системы:
- Типографика
- Кнопки и группы кнопок
- Пагинация
- Иконки
- Элемент Select
- Текстовые поля
- Навигационная панель и MobileNavbar
- RentalCard
Также предусмотрены бонусные компоненты, включая Checkbox, Toggle, Radio и Tooltip. Все элементы разрабатываются с упором на надёжность, переиспользуемость и масштабируемость.
Типизация с помощью TypeScript
Каждый компонент будет строго типизирован, что обеспечит корректное использование библиотеки и повысит её предсказуемость. Вы освоите ключевые возможности TypeScript:
- базовые и пользовательские типы;
- интерфейсы;
- дженерики;
- Record и другие полезные утилиты.
Оптимизация и подготовка к продакшену
В финальной части курса вы научитесь собирать и оптимизировать библиотеку компонентов. После сборки её размер будет уменьшен до всего 360 КБ, что обеспечивает молниеносную загрузку страниц и высокую производительность приложения.
Вы научитесь:
- настраивать сборщик;
- минимизировать код и удалять неиспользуемые части;
- подготавливать библиотеку для публикации и использования в других проектах;
- грамотно подключать UI-библиотеку в рабочий проект.
Кому подойдёт этот курс
Курс будет полезен:
- Frontend‑разработчикам, желающим освоить создание дизайн-систем;
- Junior/Middle‑разработчикам, которые хотят работать с современными стеком React + Storybook + TypeScript;
- Командам, стремящимся стандартизировать UI и ускорить разработку.
Итог
После прохождения курса вы сможете уверенно преобразовывать любые дизайн‑системы в мощные и удобные React‑компоненты, а также разрабатывать собственные библиотеки, применимые в реальных коммерческих проектах.
https://github.com/thijssmudde/tailwind-storybook-starter/tree/main