Figma для веб дизайнера с 0 до профессионала

Figma – это самая перспективная программа для веб дизайна в наше время. Она объединила в себе самые передовые инструменты разработки дизайна сайтов и уже на голову опережает конкурентов.

Одним из самых из самых важных плюсов фигмы является простота использования и легкость в освоении. Так же не стоит забывать, что такими продвинутым инструментом будущее. Все больше дизайнеров и компаний по всему миру переходят на Figma. Например, команды дизайнеров Twitter и Uber полностью работают в Figma. Она не требует места на твоем жестком диске, потому что работает в облаке и мгновенно сохраняет все изменения в макете. В Фигма есть контроль версий и ты всегда можешь откатиться до нужно момента.

Фигма не требует никакой установки, ты можешь ее открыть прямо в браузере и работать. Это значит, что ее можно использовать на любой платформе (Windows, Mac, Linux). Для первых двух, есть десктопная версия.

Обо всех этих инструментах максимально подробно идет речь в этом курсе. Но мало просто выучить инструменты, нужно научиться использовать их в комплексе друг с другом и ускорять рабочий процесс в разы.

В ходе курса на практике мы на практике будем использовать все инструменты программы и создадим твою собственную библиотеку компонентов и макет мобильного приложения. Так же мы сделаем кликабельный прототип этого приложения.

Чему вы научитесь

• Внутренний и внешний интерфейс программы
• Инструменты Figma
• Frame - очень важная часть. Фрейм - это основа программы.
• Компоненты
• Contsraints (Ограничения/привязки)
• Система сеток и направляющих в Figma
• Плагины
• Прототипирование
• Стили
• Ты заложишь основу своей библиотеки компонентов
• Практическая работа по созданию мобильного приложения с применением полученных знаний и своей библиотеки компонентов
• Изучение основ атомарного дизайна

Введение

• О курсе
• Скачать Figma и зарегистрироваться в программе
• В чем главные отличия Figma от других редакторов 
• Структура файлов
• Обзор интерфейса программы
• Сохранение и передача файла
• Файлы Sketch в Figma

Инструменты Figma

• Горячие клавиши
• Move tool, Scale tool
• Выравнивание объектов
• Прямоугольник + овал
• Полигон + Звезда
• Обводка
• Эффекты
• Заливка + градинет
• Изображения
• Маска
• Перо
• Инструмент "Текст"
• Группа
• Frame
• Булевы группы
• Комментарии
• Эффекты наложения
• Экспорт

Профессиональные инструменты Figma

• Плагины
• Скрытые инструменты Figma
• Стили
• Constraints (Ограничения/привязки) Часть 1
• Constraints (Ограничения/привязки) Часть 2
• Сетки. Часть 1
• Сетки. Часть 2
• Компоненты
• Мультикомпоненты
• Практика создания мультикомпонента

Создание своей библиотеки компонентов

• Основа атомарного дизайна
• Создание основы библиотеки компонентов
• Что должно быть в твоей библиотеке компонентов

Практика работы в Figma

• Практика. Создаем макет мобильного приложения. Часть 1
• Практика. Создаем макет мобильного приложения. Часть 2
• Практика. Создаем макет мобильного приложения. Часть 3

Прототипирование в Figma

• Создаем кликабельный прототип мобильного приложения. Часть 1
• Создаем кликабельный прототип мобильного приложения. Часть 2
• Создаем кликабельный прототип мобильного приложения. Часть 3
• Создаем кликабельный прототип мобильного приложения. Часть 4
• Создаем кликабельный прототип мобильного приложения. Часть 5
• Эффекты взаимодействия в прототипе
• Что делать дальше