ДЕЛАЕМ СВОЙ KASPI: Богдан Шматов
Автор: Wooppay
Загружено: 2025-09-25
Просмотров: 6
Описание:
Живой воркшоп от Богдана — iOS-разработчика из UP: от скриншота приложения «Каспи» до рабочего MVP на SwiftUI прямо в Xcode.
Богдан показывает, как разобрать интерфейс по блокам, отрисовать в Figma и перенести ресурсы в Xcode: баннеры, карточки, категории, сетки, scroll-вью и базовую структуру проекта. Подойдёт начинающим разработчикам и всем, кто хочет быстро понять путь от дизайна к коду.
Вы узнаете:
как разобрать экран на повторяющиеся компоненты (баннеры, карточки, категории);
какие приёмы использовать в Figma для быстрого прототипа;
как экспортировать изображения и подключить их в Assets Xcode;
основы сборки экранов в SwiftUI: HStack, VStack, ScrollView, Grid, модификаторы;
как организовать структуру проекта (resources, models, views);
идеи по адаптивности, масштабированию и экспорту @1x/2x/3x.
Таймкоды
28:02 — Вступление: анонс метапа/воркшопа и формат.
29:09 — Представление спикера: Богдан, iOS-разработчик.
30:01 — Что будем делать: клонируем интерфейс Каспи, отрисовываем в Figma и делаем SwiftUI-прототип.
32:30 — Подготовка: сбор скриншотов, проблема с защитой скриншотов и обходы (video replay на Mac).
34:32 — Рассылка шаблона Figma участникам и запуск работы по шаблону.
35:17 — Анализ скриншота: выделяем блоки интерфейса (поисковая строчка, акции, карточки).
38:34 — Отрисовка карточек: подбор размеров, радиусов, прозрачностей.
41:12 — Работа с типографикой и пипеткой (как подобрать точный цвет из скриншота).
43:08 — Создание и стилизация блоков акций и кнопок; группировка элементов.
49:16 — Экспорт макетов и иконок из Figma (приёмы для быстрой работы с иконками).
52:01 — Подход к иконкам: быстрые скриншоты и экспорт в проект.
56:00 — Разбор повторяющихся паттернов интерфейса и подготовка к вёрстке.
1:00:19 — Переход в Xcode: что нужно (Mac + Xcode) и обзор интерфейса Xcode.
1:05:56 — Создание нового проекта в Xcode: шаблон, SwiftUI, имя, организация.
1:08:21 — Структурирование проекта: resources, models, Home folder.
1:10:23 — Создание HomeScreen (SwiftUI View) и переход к реализации.
1:12:03 — Экспорт баннеров из Figma (1x/2x/3x) и добавление в Assets.xcassets.
1:16:20 — Создание компонента BannerView (Image + ScrollView + HStack).
1:20:27 — Горизонтальный ScrollView: показ и скрытие индикаторов, spacing, padding.
1:24:01 — Привязка отступов (leading/trailing) и точные значения из Figma.
1:26:45 — Вынос BannerView в главный экран и использование VStack/Spacer.
1:27:42 — Реализация сетки категорий: LazyVGrid / Grid (генерация элементов через ForEach).
1:32:03 — Применение system icons и кастомных цветов (добавление Color Set в Assets).
1:36:48 — Интеграция категории в HomeScreen и добавление Divider.
1:49:54 — Итоги по прототипу: что осталось сделать, адаптивность и масштабирование.
1:52:00 — Советы по масштабированию: вычисление scale-коэффициента для адаптивных высот.
1:53:05 — Ожидаемый результат: рабочий клон Каспи с навигацией и возможностью доработки.
1:55:29 — Вопросы про Android / кроссплатформенность (Jetpack Compose, Flutter, Kotlin).
1:56:31 — Правовые и этические моменты: риски копирования дизайна популярных приложений; портфолио-кейсы.
1:58:56 — Закрытие, контакты спикера (Telegram) и предложения о помощи/стажировках.
Следи за новостями @wooppayofficial
Официальный сайт - https://wooppay.group/
Instagram - / wooppay
Linkedin - / 2978. .
Telegram - https://t.me/wooppaykz
Facebook - / wooppay
Threads - https://www.threads.com/@wooppay
Vkontakte - https://vk.com/wooppay
Dzen - https://dzen.ru/wooppay
#iOS #SwiftUI #Xcode #Figma #прототипирование #вёрстка #KaspiClone #воркшоп #frontend #mobiledev #дизайнвёрстка
Повторяем попытку...

Доступные форматы для скачивания:
Скачать видео
-
Информация по загрузке: