Делаю домашку курса Skillbox. Каталог товаров в Figma с Autolayout, Components, Variants
На примере домашнего задания курса Skillbox по веб-дизайну, рассказал что такое autolayout в Figma. Как использовать компоненты. Как с помощью автолейаутов и вариантов компонентов создать в макете удобную дизайн-систему. Быстро и легко редактировать в фигме дизайн карточек товаров. Адаптировать под любой размер экрана и быстро делать темный и светлый вариант оформления.
0:00 Привет!
2:40 Подгоняем концепт по сетке
4:05 Определяем размеры карточки
4:50 Рисуем дизайн карточки товара
6:09 Что такое autolayout
9:24 Вложенные autolayout в карточке
15:42 Вариации контента в компонентах
16:18 Как работают компоненты
17:02 Делаем страницу каталога
17:52 Добавление стиля цвета
20:38 Добавляем состояние при наведении
21:40 Добавление вариантов компонента
22:18 Настройка свойств в вариантах
22:53 Использование вариантов компонента в каталоге
23:45 Белая версия вариантов компонента
27:09 Замена версии каталога в 1 клик
27:31 Большая версия вариантов компонента
30:22 Версия каталога с большими карточками
30:42 Еще один размер карточек
31:35 Добавление свойства в правило
32:16 Использование вариантов в дизайн-системе
33:00 Мои новости
Инстаграмм с рабочими процессами / dsgnit
Портфолио https://www.behance.net/timofeew
Курсы Skillbox https://is.gd/aPFKAd