Урок 1 · 45 минут

ВЕКТОРНАЯ ГРАФИКА И ПЕРВЫЕ ШАГИ В FIGMA

Создаём изображения из простых фигур, пробуем инструменты Figma и собираем свою первую аккуратную иллюстрацию.

с нуляфигуры и контурыобщий пример + своё задание

Этапы урока

ОТ ПЕРВЫХ ФИГУР ДО СВОЕЙ ИЛЛЮСТРАЦИИ

Создаём аккаунт

Сначала входим в свою почту на компьютере, потом регистрируемся и открываем Figma.

Пробуем фигуры

Рисуем, двигаем, копируем и удаляем объекты на пустом файле.

Вектор и растр

Сравниваем изображение из фигур и растровую картинку.

Делаем вместе

Собираем геймпад из простых элементов.

Работаем сами

Выбираем образец и собираем картинку в шаблоне.

✉

Регистрация в FigmaПонадобятся электронная почта и новый пароль. Пароль никому не передаём и в шаблоне не записываем.

Сначала пробуем

ОТКРЫВАЕМ АРСЕНАЛ FIGMA

1Нарисуй три разные фигуры.

2Выбери цвет и добавь обводку.

3Сделай копию одной фигуры и поверни её.

4Удалить копию → вернуть её через Undo.

Пустой файл · проба инструментов

VMoveвыделить и передвинуть

RRectangleпрямоугольник и квадрат

OEllipseкруг или овал

LLineлиния

ShiftПропорциировный круг или квадрат

Ctrl+DDuplicateкопия объекта

Ctrl+ZUndoвернуть последнее действие

AltКопия мышьюAlt + перетаскивание

Короткая теория

РАСТР ИЛИ ВЕКТОР?

Фигуры в Figma

В Figma изображение собирается из фигур и линий.

Растр · PNG

Это сохранённая растровая картинка. Увеличь страницу: отдельные пиксели станут заметнее.

Делаем вместе

СОБИРАЕМ ГЕЙМПАД

1Rectangle - корпус со скруглёнными углами.

2Ellipse - два стика и одна круглая кнопка.

3Duplicate - ещё три кнопки справа.

4Два прямоугольника - крестовина слева.

5Fill, Stroke и цвет - завершаем изображение.

Один челлендж

«Клонирование»

Сделай одну кнопку, а затем получи ещё три одинаковые через Duplicate или Alt + перетаскивание. Не рисуй каждую заново.

Самостоятельное задание

ВЫБЕРИ ОДИН ОБРАЗЕЦ

Открыть шаблон Figma

Смартфон с уведомлением

Корпус → экран → камера и динамик → карточка уведомления → круглая иконка → линии текста → кнопка.

10 элементов

Ноутбук

Экран → внутренний экран → камера → трапециевидная нижняя часть → тачпад → три линии клавиатуры.

10 элементов

Цветок в горшке

Горшок-трапеция → край горшка → стебель → серединка → один лепесток → семь копий с поворотом → листья.

14 элементов · исключение

Дополнительное умение

КАК СДЕЛАТЬ ТРАПЕЦИЮ

1Нарисуй Rectangle.

2Нажми Enter, чтобы увидеть точки контура.

3Сдвинь две верхние точки к центру.

Проверка

ПЕРЕД ТЕМ КАК ПОКАЗАТЬ РАБОТУ

Все нужные фигуры на месте

Фигуры размещены аккуратно

Есть цвет и обводка Stroke

Для повторов использовано копирование