Адаптивный дизайн и плагины в Figma

Программа урока

Теория

• Что такое Ui-kit и его составляющие
• Для чего нужна дизайн система?
• Что такое Гайды/Гайдлайны?
• Разбор основных элементов UI на примере
• Ключевые цвета, как часть бренда компании
• Что такое TAG и ACCORDION?
• Какие виды кнопок могут быть в Ui-kit?
• Преимущества объемных дизайн систем
• Чекбоксы и радиокнопки в дизайн системе
• Что такое модальное окно, notification и switch в Figma?
• Примеры использования переключателя Switch в повседневности
• Чем отличается текстовая форма от поля ввода?
• Выпадающие списки,элементы выбора и переключатель TAB в Ui-kit
• Поля ввода: виды и возможные состояния
• Почему важно использовать Label над каждым полем ввода?
• Какие еще виды дизайн систем бывают?
• Где брать UI-kit в Figma?
• Инструмент для совместной работы: Fig.Jam.file
• Что такое плагины и как они помогают в создании сайта?
• Раздел с полезными материалами explore community
• Из каких элементов состоит интернет-магазин?
• Любимая пиктограмма начинающих дизайнеров: Бургер
• Что такое выкладка товара?
• Популярные фильтры товаров в интернет-магазинах
• Подробный разбор составляющих карточки товара
• Что такое пагинация на сайте интернет-магазина

Делаем вместе (по видео)

• Как переключать и создавать страницы в Figma?
• Пробуем инструменты для работы в Fig.Jam.file
• Как настроить доступ для других пользователей к Fig.Jam.file?
• Пошаговый процесс установки виджета в Figma
• Как скопировать файл к себе в аккаунт?
• Добавление иллюстраций в Figma при помощи плагина
• Как правильно выравнять элемент с помощью сетки?
• Работа с графическими элементами и слоями иллюстрации
• Создание текстового блока и выбор шрифта
• Адаптируем сайт: создание макетов для мобильной версии и планшета
• Как поделиться ссылкой на проект?

Практика после урока