01Current
NPКвест
Миссия 1
Миссия 1: Design tokens: цвета и отступы. Прочитай briefing, реши практику и забери XP.
+40 XP
Мир 4 / Зона новичка
UI Components
Практический курс по созданию UI-компонентов и дизайн-системы для React Native: buttons, badges, cards, progress, states и финальный UI Kit. Пройди уроки, чтобы открыть следующую зону. Финальный босс-проект ждет в конце мира.
NP
Вход в мирUI ForestБиом: Forest
Лес интерфейсов учит строить читаемые экраны, навигацию и аккуратные reusable components.
Проводник: Layout Scout
Навык-награда: UI pathfinding
Задача: Проходи уроки, решай задачи, забирай XP и открывай следующий участок карты.
Прогресс маршрута0%
UI Forest
Собрать маршрут экранов, который не разваливается на мобильных размерах.
Route progress0%
Бесплатный квест
0 / 12 уроков
Мир 1Зона новичкаФинальный босс-проект
Маршрут мира
Что ты соберёшь
Создавай аккуратные адаптивные экраны и переиспользуемые компоненты.
Что нужно знать
Мир 3: Expo Start
Рекомендуемый предыдущий мир
Мир 3: Expo StartСледующий мир
Мир 5: Forms and ValidationСтатус
Бесплатно
Мир
Мир 1
Время
10 ч 25 мин
Карта
4 зон / 12 уроков
Уроки
0 / 12 уроков
Войдите, чтобы сохранять прогресс и XP.
Карта квестовUI Forest0/12
Navigation Treant
02Locked
Квест
Миссия 2
Миссия 2: Button variants: primary и secondary. Прочитай briefing, реши практику и забери XP.
+50 XP
03Locked
Испытание
Миссия 3
Миссия 3: Badge component: FREE, PRO, NEW. Прочитай briefing, реши практику и забери XP.
+40 XP
04Locked
Квест
Миссия 4
Миссия 4: StatCard: карточка метрики. Прочитай briefing, реши практику и забери XP.
+45 XP
05Locked
Квест
Миссия 5
Миссия 5: ProgressBar: прогресс курса. Прочитай briefing, реши практику и забери XP.
+50 XP
06Locked
Награда
Миссия 6
Миссия 6: CourseCard UI: карточка курса. Прочитай briefing, реши практику и забери XP.
+60 XP
07Locked
Квест
Миссия 7
Миссия 7: EmptyState: пустое состояние. Прочитай briefing, реши практику и забери XP.
+45 XP
08Locked
Квест
Миссия 8
Миссия 8: Loading и Error states. Прочитай briefing, реши практику и забери XP.
+55 XP
09Locked
Испытание
Миссия 9
Миссия 9: Skeleton card. Прочитай briefing, реши практику и забери XP.
+50 XP
10Locked
Квест
Миссия 10
Миссия 10: NoticeCard: info/warning/error. Прочитай briefing, реши практику и забери XP.
+50 XP
11Locked
Босс
Босс-миссия
Босс-миссия: SegmentedControl: tabs-переключатель. Собери все паттерны зоны в один финальный результат. Собрать маршрут экранов, который не разваливается на мобильных размерах.
+60 XP
12Locked
Босс
Босс-миссия
Босс-миссия: Финальный проект: UI Kit screen. Собери все паттерны зоны в один финальный результат. Собрать маршрут экранов, который не разваливается на мобильных размерах.
+90 XP
Миссия 1
Миссия 1: Design tokens: цвета и отступы. Прочитай briefing, реши практику и забери XP.
Собираемый навыкUI pathfinding
Финальная цельUI Forest
Navigation Treant
Цель мира: Собрать маршрут экранов, который не разваливается на мобильных размерах.
Собираемый навык: UI pathfinding
/course-assets/lessons/ui-components/design-tokens.svg
Уровень 1
Tokens, buttons и badges
Практические уроки по UI-компонентам без шаблонных заглушек.
Зона 1
Зона 1: Tokens, buttons и badges. Закрой миссии внутри зоны, чтобы зарядить путь к следующему региону.
Уровень 1СЛЕДУЮЩИЙ УРОВЕНЬ+40 XP
Design tokens: цвета и отступы
Миссия 1: Design tokens: цвета и отступы. Прочитай briefing, реши практику и забери XP.
40 мин
Уровень 2ЗАКРЫТО+50 XP
Button variants: primary и secondary
Миссия 2: Button variants: primary и secondary. Прочитай briefing, реши практику и забери XP.
50 минЗавершите предыдущий уровень
Уровень 3ЗАКРЫТО+40 XP
Badge component: FREE, PRO, NEW
Миссия 3: Badge component: FREE, PRO, NEW. Прочитай briefing, реши практику и забери XP.
40 минЗавершите предыдущий уровень
/course-assets/lessons/ui-components/stat-card.svg
Уровень 2
Карточки и progress
Практические уроки по UI-компонентам без шаблонных заглушек.
Зона 2
Зона 2: Карточки и progress. Закрой миссии внутри зоны, чтобы зарядить путь к следующему региону.
Уровень 1ЗАКРЫТО+45 XP
StatCard: карточка метрики
Миссия 4: StatCard: карточка метрики. Прочитай briefing, реши практику и забери XP.
45 минЗавершите предыдущий уровень
Уровень 2ЗАКРЫТО+50 XP
ProgressBar: прогресс курса
Миссия 5: ProgressBar: прогресс курса. Прочитай briefing, реши практику и забери XP.
50 минЗавершите предыдущий уровень
Уровень 3ЗАКРЫТО+60 XP
CourseCard UI: карточка курса
Миссия 6: CourseCard UI: карточка курса. Прочитай briefing, реши практику и забери XP.
1 чЗавершите предыдущий уровень
/course-assets/lessons/ui-components/empty-state-component.svg
Уровень 3
Состояния интерфейса
Практические уроки по UI-компонентам без шаблонных заглушек.
Зона 3
Зона 3: Состояния интерфейса. Закрой миссии внутри зоны, чтобы зарядить путь к следующему региону.
Уровень 1ЗАКРЫТО+45 XP
EmptyState: пустое состояние
Миссия 7: EmptyState: пустое состояние. Прочитай briefing, реши практику и забери XP.
45 минЗавершите предыдущий уровень
Уровень 2ЗАКРЫТО+55 XP
Loading и Error states
Миссия 8: Loading и Error states. Прочитай briefing, реши практику и забери XP.
55 минЗавершите предыдущий уровень
Уровень 3ЗАКРЫТО+50 XP
Skeleton card
Миссия 9: Skeleton card. Прочитай briefing, реши практику и забери XP.
50 минЗавершите предыдущий уровень
Уровень 4ЗАКРЫТО+50 XP
NoticeCard: info/warning/error
Миссия 10: NoticeCard: info/warning/error. Прочитай briefing, реши практику и забери XP.
50 минЗавершите предыдущий уровень
Босс-уровень
Босс-уровеньФинальный босс-проект
Композиция и финальный UI Kit
Практические уроки по UI-компонентам без шаблонных заглушек.
Босс-зона
Босс-зона: Композиция и финальный UI Kit. Здесь знания собираются в финальный квест и портфолио-доказательство. Финальный босс-проект.
Уровень 1Босс-уровеньЗАКРЫТО+60 XP
SegmentedControl: tabs-переключатель
Босс-миссия: SegmentedControl: tabs-переключатель. Собери все паттерны зоны в один финальный результат. Собрать маршрут экранов, который не разваливается на мобильных размерах.
1 чФинальный квестЗавершите предыдущий уровень
Уровень 2Босс-уровеньЗАКРЫТО+90 XP
Финальный проект: UI Kit screen
Босс-миссия: Финальный проект: UI Kit screen. Собери все паттерны зоны в один финальный результат. Собрать маршрут экранов, который не разваливается на мобильных размерах.
1 ч 20 минФинальный квестЗавершите предыдущий уровень
Есть вопрос или нашли ошибку?
Сообщение сразу получит контекст этого курса.
XP PRACTICE
Закрепи знания на практике
Устал от уроков? Пройди короткую мини-игру по коду или проверь скорость на арене.