Figma с нуля: интерфейс и интерактивный прототип

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

Теория

• Как устроено взаимодействие с заказчиками на фрилансе и в студии?
• Плюсы и минусы работы на фрилансе и в студии и разница в стоимости проектов
• Введение понятий User и Interface с примерами
• Что такое UX и UI: понятное объяснение на примерах
• Кто такой UI/UX дизайнер и чем он занимается?
• В чем разница между веб-дизайнером и UI/UX дизайнером?
• Как себя позиционировать на фрилансе?
• Что такое графический интерфейс?
• Что такое кнопка в интерфейсе и основные правил ее использования
• Надпись на кнопке: правила формулировки и написания в интерфейсах
• Правила расстановки акцентов: первичная и вторичная кнопка
• Примеры кнопки со сплошной заливкой и контурной заливкой
• Примеры кнопок с надписью, с закругленными углами
• Как выбрать цвет на кнопке и цвета надписей
• Виды закруглений и правила использования теней
• Какие шрифты использовать на кнопках?
• Отступы по вертикали и горизонтали на кнопках
• Исследование про размер кнопок и вероятность точного нажатия на нее
• Свойства кнопок: состояния нажатия, наведения, нажатие и неактивная
• Демонстрация разных свойств кнопок на практике

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

• Что такое Figma и какие продукты можно в ней создавать?
• Как зарегистрироваться в Figma и создать первый проект?
• Инструмент Frame и создание рабочего пространства для iPhone
• Инструмент создания текста и способы создания текстового фрейма
• Установка шрифтов, размера шрифта и других свойств текста
• Создание кнопки в Figma: скругления углов, градиентная заливка
• Создание разных свойств кнопки: наведение, нажатия и т.д. с помощью группировки слоев
• Добавление картинок в файл Figma
• Создание модульной сетки стандартными средствами
• Настройка падающей тени к блокам в Figma
• Создание формы регистрации
• Как создать интерактивный прототип?
• 2 способа поделиться ссылкой на проект и на интерактивный прототип

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