🔥 В рамках воркшопа за один час мы сделаем макет витрины интернет-магазина с продуктами и разберем как работают новинки Figma 2023. Вы узнаете:
— Как грамотно использовать wrap в адаптивном лейауте.
— Как работают variables для создания цветовых стилей светлой и темной темы.
— Как сделать базу товаров в variables, чтобы она была гибкой и универсальной.
— Как сделать считающий прототип, используя минимум фреймов.
— Как работают настроить действия и переходы с помощью conditional и set variable.
— Какие есть проблемы с новыми фичами, и какие есть лайфхаки, чтобы они не мешали.
🟣 Как правильно называть цвета в стилях: [ Ссылка ]
✂️ Почему truncate в UI плохо (или нет): [ Ссылка ]
🙋♂️ Подписывайтесь на канал!
Эпизоды:
00:00 Интро
01:46 Делаем интернет-магазин!
03:37 Нужно представиться
04:23 Начинаем работу. Создаем стили для светлой и темной темы
10:13 Лайфхак, как перенести цвета из Styles в Variables
11:50 Делаем лейаут витрины. Применяем man-width
14:15 Начинаем работу над карточками продуктов
18:02 Поговорим про truncate или обрезку текста
24:05 Делаем подвал карточки. Как разбивать текстовую строчку для переменных данных
30:44 Создаем коллекцию товаров в variables
36:36 Создаем карточку для добавленного в корзину товара
39:30 Проверяем микроанимацию перехода между карточками
40:46 Добавляем карточки на витрину с использованием wrap
42:40 Проблема wrap и лайфхак, чтобы ее пофиксить
43:33 Начинаем учить наш прототип считать
44:28 Как работает логика переходов при помощи set variable
48:53 Conditional или условный оператор
52:30 Про важность правильного порядка экшенов в переходах
53:32 Добавляем тень для карточек при наведении
55:22 Проверяем, работает ли темная тема
55:45 Заключение
