Программирование [udemy] Преобразование Дизайна Figma в Компоненты ReactJS с помощью Storybook (2021)

[𝕯𝖆𝖗𝖐🥰𝕬𝖓𝖌𝖊𝖑]

Автор: udemy​

Название: Преобразование Дизайна Figma в Компоненты ReactJS с помощью Storybook (2021)​

Продолжительность: 3 ч 10 мин Количество уроков: 33 Видео Язык: Английский Вес архива: 1,62 ГБ

Этот курс — практическое руководство по тому, как преобразовать дизайн-систему из 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‑компоненты, а также разрабатывать собственные библиотеки, применимые в реальных коммерческих проектах.

СКАЧАТЬ: