5 подписчиков

Учимся работать в Figma. Урок 2: Работа с фигурами

11 октября 202211 окт 2022

151

1 мин

Оглавление

1. Создадим новую рабочую область
2. Создадим в ней прямоугольник "Rectangle"
3. Научимся работать с прямоугольником точечно

Всем привет! Меня зовут Женя, и я не умею рисовать. Но это ни капельки не помешало за два года работы дизайнером и иллюстратором поработать с такими брендами, как "Club 500" и "Союз Мультфильм", например, а также нарисовать и запустить 3 NFT-коллекции

И я научу вас "не уметь" так же! Собственно, для этого мы здесь и собрались - это миникурс в формате статей по дизайнерской программе Figma (она бесплатна и даже не требует скачивания, всё прямо в браузере)

Перед началом: Чтобы не нарушать хронологии прохождения бесплатного мини-курса, в котором мы с вами учимся дизайнить и рисовать, ознакомьтесь с первым уроком

1. Создадим новую рабочую область

2. Создадим в ней прямоугольник "Rectangle"

Чтобы научиться создавать, уменьшать, центровать, вращать и скруглять прямоугольник "Rectangle", переходи в галерею ниже, листай, внимательно читайте описание, а ещё внимательней смотрите на изображения.

Выбираем Rectangle или нажимаем "R" на клавиатуре. Далее - щёлкаем мышью по любому месту внутри рабочей области (листай дальше)

Переходим в меню настроек слева. Нажимаем на значок цепочки - она связывает все стороны нашей фигуры - теперь если мы уменьшим её длину, то прямо пропорционально уменьшится и длина. Вводим значение "40" (листай дальше)

Фигура уменьшилась. Теперь надо поместить её по центру рабочей области. Можно сделать это вручную, передвигая мышью, а можно... (листай дальше)

3. Научимся работать с прямоугольником точечно

Схема такая же - листайте галерею и не забывайте про описание под каждым изображением!

Нажимаем на значок, который похож на иконку перехода в полноэкранную версию видео на YouTube. Здесь нас ждут настройки скругления отдельно каждого из углов прямоугольника. Установим значение "8" для нижнего левого и верхнего правого углов (листай дальше)

Также мы можем редактировать скругление каждого угла за счёт перетягивания кружочков на самом Rectangle-прямоугольнике (листай дальше)

А если два раза щёлкнуть мышью по нашему прямоугольнику, то мы сможем не только редактировать каждый из углов, но и создавать новые и перетягивать их как угодно. (листай дальше)

Нажимаем на значок, который похож на иконку перехода в полноэкранную версию видео на YouTube. Здесь нас ждут настройки скругления отдельно каждого из углов прямоугольника. Установим значение "8" для нижнего левого и верхнего правого углов (листай дальше)

4. А что с кругом?

Удалите получившуюся фигуру, которую мы сделали с вами из прямоугольника. Давайте перейдём к эллипсу!

Выбираем Ellipse или нажимаем англ "O" на клавиатуре. Далее - щёлкаем мышью по любому месту внутри рабочей области (листай дальше)

Наведите мышь на получившийся эллипс, внутри него должна появиться точка. Потянем мышью за неё. Таким образом мы создали разрыв на эллипсе (листай дальше)

На противоположном конце разрыва появилась другая точка. Потянем за неё и перевернём наш разрыв (листай дальше)

5. Ну и напоследок - звезда!

Удалите получившуюся фигуру, которую мы сделали с вами из эллипса.

Выбираем Star и щёлкаем мышью в любом месте внутри рабочей области (листай дальше)

Первая специфическая настройка звезды - количество выступов/углов. Давайте установим значение "18" (листай дальше)

Вот и всё!

Интерфейс Figma очень прост и, как принято говорить, "user friendly". И, скажу вам по секрету, даже если вам лень учиться по чьим-то урокам (как это было у меня в своё время), вы можете просто сесть и нажимать на всё, что видите на экране. Со временем разберётесь - я же разобрался)

Был ли понятен вам материал в этом уроке? Поделитесь в комментариях!

А также не забывайте подписываться на меня, так как на очереди следующий урок, в котором мы с вами разберёмся с цветами и обводкой фигур!