Как сделать трапецию в фигме
Перейти к содержимому

Как сделать трапецию в фигме

  • автор:

Пять способов рисования трапеций.

В этом уроке вы узнаете пять различных способов, как быстро нарисовать трапецию, используя такие инструменты, как «Основные фигуры», «Форма», «Прямоугольник» а также освоите различные команды для преобразований в CorelDRAW.

Оказывается иногда и простая фигура может поставить начинающего пользователя в тупик. И вправду, как вот так, сразу, нарисовать трапецию.

Пять способов рисования трапеций.

Рис. 1. Примеры трапеций.

Способ первый. «Простейший».

Активируем инструмент «Основные фигуры». Выбираем подгруппу «Правильные фигуры». В мини–библиотеке, которая появилась на панели свойств, выбираем нужную фигуру и рисуем ее на рабочем листе документа.

Пять способов рисования трапеций.

Рис. 2. После активирования инструмента «Основные фигуры», на панели свойств появится список правильных фигур.

Пять способов рисования трапеций.

Рис. 3. Перемещение глифа (красного маркера) позволяет редактировать форму объекта.

В левом верхнем углу нарисованной трапеции появляется красный маркер в форме ромба. Этот маркер называется глифом. Вид трапеции или любой другой фигуры из группы основных фигур изменяется, путем перетаскивания глифа инструментом «Форма». При наведении инструмента на глиф, курсор изменится и глиф можно будет переместить.

Способ второй. «Перспективный».

Активируем инструмент «Прямоугольник» и рисуем произвольный прямоугольник. Выделяем его и в меню «Эффекты» выбираем пункт «Добавить перспективу».
Инструментом «Форма» перемещаем верхние маркеры на одной из сторон прямоугольника. Можно перемещать и точку схождения перспективы, добиваясь нужного наклона сторон трапеции.

Пять способов рисования трапеций.

Рис. 4. С помощью меню «Эффекты» можно добавить объекту перспективу.

Пять способов рисования трапеций.

Рис.5. Перемещая маркеры перспективы, или изменяя положение точки схода легко добиться нужного эффекта.

После применения эффекта перспективы, в статусной строке программы появится информация о том, что к объекту был применен эффект перспективы. Можно сразу же преобразовать объект с примененным эффектом в простую кривую командой меню «Объект» > «Преобразовать в кривую». Форма объекта будет сохранена.

Способ третий. «Конструктор».

Инструментом «Прямоугольник» рисуем основной объект — квадрат или прямоугольник.
Удерживаем во время рисования инструментом «Прямоугольник клавишу Сtrl – рисуем квадрат.
Удерживаем во время рисования клавишу «Shift» – рисуем прямоугольник не от угла, а от центра.
Удерживаем во время рисования обе клавиши Сtrl+Shift – рисуем квадрат от центра.

Выставляем по сторонам прямоугольника (квадрата) направляющие. Включаем «привязку к направляющим». Это можно сделать соответствующей командой меню «Вид» > «Привязать к» > «Направляющим».

Пять способов рисования трапеций.

Рис.6. В меню «Вид» можно включить нужный режим привязки объекта.

Пять способов рисования трапеций.

Рис.7. Привязка прямоугольников к направляющим.

Рисуем еще два одинаковых прямоугольника, с высотой, соответствующей высоте базового основного прямоугольника. Размещаем эти объекты слева и справа от основного, базового прямоугольника вплотную к нему. Поскольку включен режим привязки к направляющим, то не составит большого труда правильно расположить объекты.
Преобразуем левый и правый прямоугольники в кривые, командой «Объект» > «Преобразовать в кривую» или используя комбинацию клавиш «Ctrl+ Q».
Инструментом «Форма» удаляем по одному углу во вспомогательных прямоугольниках.

Пять способов рисования трапеций.

Рис.8. Удаление одного из узлов прямоугольника.

Выделяем инструментом выбора все три фигуры и применяем команду меню «Объект» > «Формирование» > « Объединение» или нажимаем на кнопку этой же команды на панели свойств.

Пять способов рисования трапеций.

Рис.9. Вызов команды объединения объектов.

Пять способов рисования трапеций.

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

Способ четвертый. «Рисование по сетке или направляющим».

Сначала включаем режим отображения сетки документа. Это можно сделать командой меню «Вид»> «Сетка»> «Сетка документа» либо включить на съемной панели быстрого вызова команд меню.

Пять способов рисования трапеций.

Рис.11. Включение отображения сетки документа.

На этой же панели находится и кнопка включения различных режимов привязки, включаем режим привязки «сетка документа»

Пять способов рисования трапеций.

Рис.12. Включение режима привязки объектов.

Теперь можно активировать инструмент «Прямая через две точки» и рисовать трапецию нужного размера. Узлы фигуры будут надежно привязаны к узлам сетки документа. Не забудьте проверить включен ли режим автоматического замыкания полученной кривой.

Пять способов рисования трапеций.

Рис.13. Работа с инструментом «Прямая через две точки».

Кстати если режим привязки к сетке включен, а сама сетка документа невидима, то во время рисования фигуры сохранится способность притяжения к сетке и фигура будет нарисована именно по сетке.

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

Пять способов рисования трапеций.

Рис.14. Рисование трапеции по направляющим.

Способ пятый. «Симметричные узелки».

Наверное, самый простой способ рисования трапеции – преобразовать в нее обычный прямоугольник. Сначала придется просто преобразовать прямоугольник в кривую (комбинация клавиш «Ctrl+Q») и, затем, поочередно инструментом «Форма» переместить два параллельных узла на нужное расстояние. Для точности удобно воспользоваться направляющими и включить соответствующий режим привязки.

Пять способов рисования трапеций.

Рис.15. Рисование трапеции из прямоугольника.

Таким способом легко рисовать самые разнообразные трапеции – остроугольные, тупоугольные, прямоугольные.

Пять способов рисования трапеций.

Рис.16. Примеры трапеций.

А вот если необходимо нарисовать равнобедренную трапецию, лучше применить способ симметричного перемещения узлов.
Рисуем прямоугольник, преобразуем его в кривую. Активируем инструмент «Форма», выделяем этим инструментом два параллельных узла. На панели свойств включаем режим «Отразить узлы по горизонтали» и начинаем передвигать выделенные ранее узлы. Оба узла будут перемещаться симметрично до нужного положения.

Пять способов рисования трапеций.

Рис.17. Симметричное перемещение узлов по горизонтали.

Аналогичным образом можно перемещать узлы, включая режим «отразить по вертикали».

Пять способов рисования трапеций.

Рис.18. Симметричное перемещение узлов по вертикали.

Работа в режиме отражения узлов по вертикали или горизонтали значительно упрощает работу при рисовании симметричных фигур.

На панели свойств инструмента «Форма» есть еще несколько очень интересных кнопок, позволяющих масштабировать и поворачивать отдельные узлы кривых.

Пять способов рисования трапеций.

Рис.19. Включение режима «Повернуть или наклонить узел» позволит переместить, наклонить, повернуть один или несколько узлов и создать новую фигуру.

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

Векторные объекты в Figma

Создание дизайна начинается с освоения стандартных фигур. Грамотное использование и владение этими элементами позволит вам в будущем создавать более сложные дизайны. Основные векторные объекты в Figma находятся в верхнем меню во вкладке «Rectangle». Рассмотрим, как добавлять и работать с этими фигурами.

основные фигуры в Figma

Первый в этом списке объектов – «прямоугольник» (горячая клавиша «R»). Это наиболее распространенный элемент, и в 75% случаев в работе используется именно он. Данный инструмент необходим для создания кнопок, панели, меню, и других элементов интерфейса сайта.

Выбрав прямоугольник кликните по рабочей области фрейма, в которой появится этот объект. Вы сразу сможете менять размер прямоугольника мышкой, или задавая его размеры вручную в правой части меню.

создание прямоугольника в Figma

Обратите внимание, что внутри прямоугольника будут круглые точки, при помощи которых вы можете закруглять все углы пропорционально. Это делается прямым перетаскиванием точки внутрь прямоугольника. Если вам необходимо закруглить углы по отдельности, то это делается при помощи клавиши «Alt». Можно задать градус закругления в специальной строке в правой части меню. Как вращать и трансформировать объекты, в том числе и векторные объекты, мы рассмотрели в первом уроке.

закругление углов прямоугольника в Figma

Что касается функций доступных в правой части меню, то здесь вам будет доступно выравнивание объектов относительно фрейма, или если у вас выделено несколько объектов, то выравнивание относительно друг друга.

выравнивание объектов в фрейме

Далее обратим внимание на размеры объектов. X и Y – это положение объекта внутри фрейма. Я рекомендую использовать дополнительную функцию линейки, которая находится в разделе «Yiew» в пункте «Rulers». Выбрав эту функцию в верхней части появится линейка, при помощи, которой удобно видеть размеры ваших объектов, которые выделены синим цветом, а также видеть какое расстояние составляет промежуток от края объекта до края фрейма. То же самое будет и в левой части – синим выделен размер объекта, а белым расстояние до краев фрейма. Эти же размеры будут повторяться и в правой части меню.

включение функции линейка в в Figma

W и H – это размер самого объекта. Вы тоже можете менять его при помощи мышки, или задавать более точные данные в этих строках.

В разделе Fill можно сразу задавать цвет добавленного вами объекта, а также его прозрачность. Более подробно о цветах мы поговорим в следующих уроках.

изменение цвета и прозрачности объекта в Figma

Кроме того, в правом меню, ниже находится функция «Stroke» — это обводка объекта. Здесь вы также можете выбрать цвет обводки и ее размер.

Добавление обводки векторным объектам в Figma

Нажав на вкладку «Advanced stroke settings» появятся дополнительные возможности для обводки. Таким образом, ее углы можно делать не только прямыми, но и полукруглыми, а также со стрелкой.

Выбор формата закругления обводки в Figma

Еще одна функция в правом меню интерфейса – «эффекты». Здесь вы сможете добавлять прозрачность, цвет, размытие, тени, и т.д.

Выбор эффектов для объектов в Figma

Свойства векторных объектов можно копировать. Например, для того чтобы скопировать все свойства объекта нажмите на него правой кнопкой мыши, и вберите «Copy properties». Затем выберите объект, в который вы хотите скопировать все свойства, нажмите на него правой кнопкой мыши, и выберите пункт «Paste properties». Таким образом, вы сможете быстро добавлять свойства в новые объекты.

копирование свойств векторных объектов в Figma

Далее в списке векторных объектов вы найдете Line (линия) и Arrow (линия со стрелочкой с одной стороны). Как видно при добавлении этих объектов их размер также можно регулировать вручную в правой части настроек или при помощи мышки. Если у вас включена функция линейки, то вы также увидите их расстояние до края фрейма. Горячая клавиша Line – «L», а Arrow — «Shift+L».

добавление линии в Figma

Следующий объект – круг или овал. Горячая клавиша – «O». Для создания ровного круга необходимо зажать «Shift», и затем выбрать его размер. Для выбора круга во все стороны, зажмите «Alt».

добавление круга в Figma

В правом меню настроек вы найдете те же функции, что и в прямоугольнике. Однако есть отличие в том, что у прямоугольника имеется дополнительная функция закругления углов. Ее нет у круга, так как у него нет углов. Однако в круге есть дополнительная функция делающая разрез в круге. Это может быть полезно для создания диаграмм.

Использование функции разреза в круге

Следующий векторный объект – «Polygon» (треугольник). Внутри него есть две точки, отвечающие за разные эффекты. Верхняя точка предназначена для закругления углов, а нижняя за добавление углов.

треугольник в Figma

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

создание многоугольника в Figma

Еще один векторный объект – «Star» (звезда). Используется он не часто, но в некоторых случаях, например, при создании логотипа, он может оказаться полезным.

создание звезды в Figma

Управление данным объектом происходит при помощи трех точек. Верхняя точка отвечает за закругление углов звезды. Зажимая левую кнопку мыши и двигая внутрь, вы сможете создавать закругление. Средняя точка отвечает за смену внутреннего радиуса вершины. И третья точка отвечает за добавление или удаление углов звезды при помощи зажатия левой кнопки мышки, и движения вверх или вниз.

добавление и удаление углов звезды в Figma

И последний элемент из списка векторных объектов – «Place image». Горячие клавиши – Ctrl+Shift+K. Например, вы можете создать несколько объектов – звезда, прямоугольник и круг. Если вам необходимо вставить картинку в данные объекты, то нажмите на «Place image», затем выберите из жесткого диска вашего устройства подходящую иллюстрацию, после чего кликните на элемент. Таким образом, ваша картинка вставится внутрь этого элемента.

функция Place image в Figma

Итак, теперь вы знаете как использовать примитивы, а также стандартные формы в фрейме. Это первый шаг к приобретению навыка создания сложного дизайна.

Полезные ссылки:

  • Бесплатный видеокурс по Figma от GeekBrains;
  • Профессиональный курс Figma 2.0 для новичков от SkillBox;
  • Полноценный онлайн курс по веб-дизайну с нуля от SkillBox.

Как сделать изогнутый текст в Figma

В современных дизайнах зачастую можно наблюдать изогнутые текста (например, в круге). Стандартные функции Фигмы не позволяют сделать этого, однако существует много плагинов, которые помогут преобразовать текст в нужный вид.
В данной статье будем использовать плагин “To Path”, который можно установить по ссылке.

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

2. Устанавливаем и запускаем плагин. Теперь необходимо выделить слои двух элементов: самого текста и фигуры и нажать кнопку Link.

3. Теперь остаётся настроить вид текста в плагине и выключить слои с фигурами.

Что касается параметров настроек в плагине, то тут всё просто:
Vertical Align позволяет сдвинуть текст выше или ниже относительно фигуры.
Offcet двигает текст вдоль фигуры. Справа от него можно выровнять текст слева, по середине, или справа относительно фигуры.
Revers direction of text отражает текст по горизонтали – меняет его направление.

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

Смотрите похожие статьи

Как сделать круговую диаграмму в Figma

Стили и направления веб-дизайна в 2024 году

Логотип SILVERWEB в стилистике известных компаний

Готовы предоставить полную консультацию по условиям и
всем интересующим вопросам работы с нашей компанией!

Получить консультацию

Весь спектр услуг маркетинга и рекламы: лидогенерация, SEO, контекстная реклама, таргетированная реклама, создание и правка сайтов, управление репутацией, внедрение crm-систем и многие другие услуги

  • г. Минск, пр-т Независимости 169, 805Ю, БЦ «XXI век»
  • +375 (29) 390-56-65
  • zakaz @ silverweb.by

Отвечаем
в мессенджерах:

  • Пн 9:00 — 17:00
  • Вт 9:00 — 17:00
  • Ср 9:00 — 17:00
  • Чт 9:00 — 17:00
  • Пт 9:00 — 17:00
  • Сб Выходной
  • Вс Выходной

Частное Предприятие «Сильвервеб ПРО» © 2017-2024

Yandex на основе 28 отзывов
Google SILVERWEB
5 на основе 131 отзыва

Заявка на обратный звонок

Частное Предприятие «Сильвервеб ПРО» с уважением относится к правам наших клиентов. Мы безоговорочно признаем важность конфиденциальности личной информации и соблюдаем правила защиты персональных данных от несанкционированного доступа третьих лиц (защита персональных данных).

Заполнение формы с контактными данными означает согласие с настоящей Политикой конфиденциальности и указанными в ней условиями обработки персональной информации.

Ниже приводится информация об обработке персональных данных.

1. Персональные данные. Цель сбора и обработки персональных данных.

1.1. Вы всегда можете посетить данную страницу, не раскрывая никакой персональной информации.

1.2. Под персональными данными понимается любая информация, относящаяся к определенному или определяемому на основании такой информации физическому лицу.

1.3. Наше агентство собирает и использует персональные данные, необходимые для выполнения Вашего запроса, это – имя, телефон и электронный адрес.

1.4. Наше агентство не проверяет достоверность персональных данных, предоставляемых физическими лицами, и не проверяет их дееспособность.

2. Условия обработки персональной информации покупателя и её передачи третьим лицам.

2.1. При обработке персональных данных наших клиентов мы руководствуемся законом РБ «Об информации, информатизации и защите информации».

2.2. В отношении персональной информации покупателя сохраняется ее конфиденциальность.

2.3. Наше агентство не передает персональные данные третьим лицам.

3. Меры, применяемые для защиты персональной информации пользователей.

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

Векторы в Figma (создание)

В Figma очень логичный и удобный редактор векторов, включающий достаточно обширный набор инструменов. Эта публикация будет полезна для вас, если вы начинаете знакомиться с векторами в Фигме.

Содержание скрыть

Итак, чтобы создать произвольный вектор, мы будем в большинстве случаев использовать перо (P).

Перо создает изогнутые линии, которые вы можете соединить между собой, формирую таким образом сложную фигуру.

Как создать линию пером

Внимание: если вы кликните пером на полотно, а затем отпустите и кликните пером еще раз в другое место и отпустите, Фигма будет считать, что вы хотите сделать прямую.

Прямая, созданная пером в Figma

Чтобы сделать кривую, вам надо в конечной точке не отпускать курсор, а протащить его от точки.

  1. Кликаете для создания первой точки
  2. Отпускаете
  3. Переносите курсор в конечную точку
  4. Зажимаете курсор и тащите в сторону

В итоге вы получаете изогнутую линию.

Выбираем ее и дважды кликаем по ней, чтобы перевести в режим редактирования вектора, либо нажимаем на иконку сверху.

Редактирование вектора

В режиме редактирования вектора фигма подсвечивает узлы вектора, если вы нажмете на один из них, то увидите управляющие элементы.

Узел вектора в FigmaНаправляющая в узле

Угол наклона направляющей показывает, под каким углом линия будет «входить» в узел, а длина направляющей регулирует радиус.

Если вы хотите превратить свою кривую в прямую, приведите направляющую к узлу, из которого она выходит.

Чтобы продолжить вектор, наведите перо на узел и создайте из него еще один вектор.

Сочленение векторов

Далее, если вы создали из узла еще один вектор, у вас будет уже две направляющие.

Для удобства Фигма предлагает использовать одну из трех настроек узла:

Настройки отражения

  1. No mirroring — направляющие будут управлять независимо друг от друга
  2. Mirror Angle — отражаться будет только угол наклона направляющей. Таким образом в узле не будет резкого перехода (излома) из одного вектора в другой
  3. Mirror Angle and Length — направляющие будут иметь отраженные углы и одинаковую длину. Таким образом вы добьетесь симметричного изгиба.

Из одного узла можно создать неограниченное количество векторов, но настройки отражения для таких количеств соединений уже не работают.

Параметры кривой

Для вектора вы можете применить стандартный набор параметров: эффекты (тени, размытие), обводку и заливку.

Просмотр расстояния от точки до кривой

При редактировании вектора в Figma с зажатым Alt (Windows) / Option (Mac) наведите на другой узел или кривую, чтобы просмотреть расстояния по осям X и Y.

Расстояние от точки до кривой

Вы можете добавить точку в нужное место, переведя курсор в режим пера с помощью горячей клавиши P и кликнув на редактируемый вектор.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *