Основы работы в Figma, создаем простые фигуры.
В этом уроке мы рассмотрим с вами создание простых фигур в Figma, таких как овал, прямоугольник, треугольник, звезда и т.д.
Фигуры в векторной графике также называют еще и шейпами.
- Создание фигур в Figma
- Перемещение фигур
- Свойства фигур
- Как сделать прямоугольный треугольник
- Стрелки в фигме: инструкция как сделать стрелку в Figma
- Как сделать стрелку в фигме
- Как изменить цвет и размер стрелки в фигме?
- Как изменить конец стрелки в Figma (скруглить, сделать квадратной)
- Как сделать стреку в Figma изогнутой?
- Заключение
Создание фигур в Figma
Чтобы создать фигуру в Figma, нужно:
- Кликнуть по стрелке возле квадрата
- Выбрать нужную фигуру в панели инструментов, например звезду
- Поместить курсор мыши на рабочую область
- Зажать левую кнопку мыши и потянуть вправо и вниз
Зажав горячую клавишу Shift , можно создать фигуру с равной шириной и высотой, например квадрат вместо прямоугольника или круг вместо овала.
Перемещение фигур
Чтобы перемещать фигуры по рабочей области Figma, нужно:
- Выбрать инструмент Move V
- Кликнуть один раз по фигуре (выбрать её)
- Затем кликнуть второй раз по фигуре и не отпуская кнопку мыши, переместить фигуру в нужное место
Свойства фигур
Любую фигуру можно залить определённым цветом, создать обводку, добавить эффект тени и многое другое.
Всё это мы подробней изучим в следующих уроках, когда будем изучать каждый инструмент и его свойства в отдельности.
Как сделать прямоугольный треугольник
В Figma есть инструмент для создания треугольников «Polygon», но с его помощью нельзя сделать прямоугольный треугольник.
Однако задача легко решается с помощью инструмента Перо (горячая клавиша P).
- Выбираем перо
- Кликаем: ставим точку — это будет первый угол при гипотенузе
- Зажимаем Shift и смещаем курсор ровно вниз
- Кликаем: ставим вторую точку — это прямой угол
- Снова зажимаем Shift и смешаем курсор в сторон
- Кликаем: ставим третью точку — это будет второй угол при гипотенузе
- Отпускаем Shift, и кликаем в первую точку, замыкая треугольник
Видео
Тег video не поддерживается вашим браузером.
Скачайте видео.
Далее для этого вектора вам доступны все опции: заливка, обводка и так далее.
Как сделать так, чтобы контур стал частью фигуры, читайте здесь.
Зажимая Shift вы включаете режим привязок, в котором Фигма округляет угол наклона линии с кратностью 45 градусов: 0, 45, 90 и так далее.
Играй бесплатно в браузере!
Заполните форму, мы сделаем иконку
и добави ее в коллекцию
Стрелки в фигме: инструкция как сделать стрелку в Figma
Если вы интересуетесь тем, как сделать стрелки в фигме, то вот вам пошаговая инструкция. Поговорим об инструменте «Arrow». Как сделать стрелки прямыми, изогнутыми, пунктирными. Расскажу как стрелки на концах сделать в виде линии и треугольника. Ниже видео и статья в текстовом формате со скриншотами.
Как сделать стрелку в фигме
Чтобы сделать (нарисовать) стрелку в фигме, выберите сверху слева в панели инструментов «Line» или нажмите на комбинацию горячих клавиш «Shift + L». Затем с зажатой левой клавишей мыши нарисуйте стрелку нужной длинны.
Как изменить цвет и размер стрелки в фигме?
Чтобы изменить цвет стрелки в фигме, выберите нужную стрелку и в правой панели внизу надписи «Stroke» задайте другое значение цвета. В том же месте можно изменить толщину стрелки. Изначально создается стрелка толщиной в 1 px.
Как изменить конец стрелки в Figma (скруглить, сделать квадратной)
Чтобы появилась возможность отредактировать стрелку в Figma, выберите её, затем сверху по центру нажмите на иконку «Edit object». Также можно нажать на клавишу «Enter».
Если выберите какой-то конец стрелки, затем в правой панели нажмёте на иконку с тремя точками, то можно задавать различные значения для конца.
Если выберите значение «Round» из списка, то конец стрелки будет скругленным.
При выборе значения «Square», конец будет квадратным.
Если зададите значение «Line arrow», появится стрелка в виде линии.
Нужна стрелка в виде треугольника? Выберите значение «Triangle arrow».
Если хотите сделать стрелку с пунктирными линиями, то внизу напротив надписи «Dashes» укажите значение в цифрах. Например если зададите «10, 20», то появится пунктирная линия длинной в 10 px и разрывом между линиями 20 px.
Как сделать стреку в Figma изогнутой?
Чтобы сделать стрелку в Figma изогнутой, выберите её, затем сверху по центру активируйте иконку «Edit object».
Появится возможность добавлять точки по центру отрезка линии.
Если потяните созданную точку в сторону или вниз, то создадите изогнутую линию у стрелки.
Чтобы задать скругление созданного угла, выберите иконку «Bend tool» сверху, слева. Затем потягите точку в сторону.
Заключение
Итак, сегодня вы узнали, как делать стрелки в Figma.
















