ДЕЛАЕМ СВОЙ KASPI: Богдан Шматов
Живой воркшоп от Богдана — 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 - https://www.instagram.com/wooppay/ Linkedin - https://www.linkedin.com/company/2978... Telegram - https://t.me/wooppaykz Facebook - https://www.facebook.com/wooppay Threads - https://www.threads.com/@wooppay Vkontakte - https://vk.com/wooppay Dzen - https://dzen.ru/wooppay #iOS #SwiftUI #Xcode #Figma #прототипирование #вёрстка #KaspiClone #воркшоп #frontend #mobiledev #дизайнвёрстка
Живой воркшоп от Богдана — 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 - https://www.instagram.com/wooppay/ Linkedin - https://www.linkedin.com/company/2978... Telegram - https://t.me/wooppaykz Facebook - https://www.facebook.com/wooppay Threads - https://www.threads.com/@wooppay Vkontakte - https://vk.com/wooppay Dzen - https://dzen.ru/wooppay #iOS #SwiftUI #Xcode #Figma #прототипирование #вёрстка #KaspiClone #воркшоп #frontend #mobiledev #дизайнвёрстка