Что здесь происходит
Figma — бесплатный инструмент для графических и продуктовых дизайнеров. С его помощью можно собрать презентацию, макет сайта или мобильного приложения, настроить интерактивные прототипы для тестирования гипотез или организовать работу команды проекта.
Дизайнер продуктовой студии Crauch Дарья Третьяк расскажет об основах Figma, объяснит, как пользоваться сервисом и настроить его под свои задачи. Преподавательница вместе с вами поэтапно соберет макет и создаст кликабельный прототип.
Программа
1. База
- интерфейс Figma: как создать файл и что с ним можно делать (как переименовать, задать обложку, добавить новые страницы)
- простейшие элементы: рабочее пространство (фрейм), векторная фигура (шейп), текст
- свойства элементов: размер, заливка, обводка, скругления, эффекты
- стили, гайд по их семантическому названию
- маски
- типы объединения фигур: объединение (union), вычитание (subtract), пересечение (intersect), исключение (exclude), уплощение (flatten)
- Auto Layout: зачем используют и как настроить
- компоненты и варианты: зачем используют и как настроить так, чтобы работа была в удовольствие
- Figma-сообщество
- плагины
В прямом эфире Даша соберет макет в Figma и предложит участникам и участницам перерисовать готовый сайт.
Посмотрим работы участников и участниц вебинара.
Дарья Третьяк
Продуктовый дизайнер в студии Crauch
Больше трех лет делает интернет красивым и удобным. Выросла под крылом небольшой тамбовской студии и приняла предложение одной из лучших студий страны. За четыре месяца в Crauch поменяла прошлые установки и пересобрала образ мышления. Работает с компанией Positive Technologies, познала дзен в сборке макетов и наборов готовых компонентов (UI-китов).
Преподаватель
Чему вы научитесь
Ориентироваться в интерфейсе Figma и настраивать его под свои задачи
Использовать инструмент Auto Layout для адаптивных макетов
Создавать и переиспользовать компоненты
Собирать готовый макет сайта или экрана приложения с нуля
Делать интерактивный кликабельный прототип для теста гипотез
Ускорять работу с помощью плагинов
Заполните форму, чтобы начать обучение
Уроки
Уроки
Теория: Auto Layout, компоненты, плагины
Шпаргалка после курса: как создать макет в Figma
1
Cоздайте новый файл и настройте рабочее пространство (фрейм) под нужное устройство
2
Задайте сетку, отступы и базовую типографику
3
Соберите повторяемые элементы
4
Скомпонуйте экран с помощью инструмента Auto Layout
5
Свяжите экраны в режиме Prototype и проверьте кликабельный сценарий
Продолжить обучение
Профессии
4
Освоить инструменты, сформировать портфолио и войти в профессию под руководством лучших экспертов-практиков.
Курсы
2
Онлайн-курсы обучают необходимым навыкам и методам, которых требует современный культурный контекст и дизайн-профессии
Ответы на частые вопросы
Да, курс рассчитан на старт с нуля. Вы начнете с интерфейса и базовых функций Figma — и дойдете до готового макета и прототипа.
Длительность курса — 12 часов в записи. Вы можете проходить его в своем темпе.
Собирать макеты сайтов и приложений, создавать наборы компонентов (UI-киты) и интерактивные прототипы в Figma.
Нет, для прохождения курса достаточно бесплатных возможностей онлайн-редактора.
Дарья Третьяк, продуктовый дизайнер студии Crauch. Опыт работы в профессии — больше трех лет.
Нет, мы собрали курс из записанных вебинаров. Но в программе есть разбор работ тех, кто слушал и практиковался онлайн.
Вы получите базовый навык работы в Figma, добавите в портфолио первый макет и прототип.