Как сделать спираль в фигме
7 лайфхаков в Figma, которые упростят вам работу
Рассказываем, как быстро выровнять файлы, переименовать пачку фреймов за раз и сделать прогресс-бар в несколько кликов.
Катя Павловская для Skillbox Media
В Figma есть множество скрытых функций и горячих клавиш, которые самостоятельно найти не так просто. Но если их освоить, вы сможете ускорить работу над макетом: быстрее искать фреймы или группы и подбирать цвет с помощью пипетки.
Рассказываем о семи простых лайфхаках, которые помогут вам быстрее работать в Figma.
Свернуть вложенные фреймы и группы
Если вы работаете над большим проектом, в документе становится сложно ориентироваться из-за большого количества фреймов, групп и компонентов, особенно когда они все развёрнуты.
Чтобы моментально свернуть все фреймы, группы и компоненты, нажмите сочетание клавиш Alt (⌥) + L.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Предпросмотр цвета
Выделите любой фрейм или фигуру, нажмите кнопку I, зажмите правую кнопку мыши и водите курсором по макету. Любой цвет под ним станет фоновым для выделенного элемента. Так вы сможете быстрее выбрать нужный оттенок для кнопки, текста или основного фона макета.
Переименование фреймов
По умолчанию Figma создаёт новые фреймы с названием Frame 1 — оно ничего не говорит о содержимом фрейма, особенно для тех, кто в ваш макет заходит впервые. Переименовать один такой фрейм — легко, но если их 10 или 20, то придётся потратить на это много времени.
Чтобы быстро систематизировать названия одинаковых по смыслу фреймов, выделите их, нажмите сочетание клавиш Сtrl (⌘) + R. Откроется меню, в котором вам будет предложено переименовать выделенные объекты:
Настройки переименования объектов:
Выравнивание с Tidy up
Два одинаковых объекта поставить ровно очень просто. Но если их 10 или 20, это превращается в большую и нудную задачу. Чтобы дизайнер не занимался подобной рутиной, в Figma есть функция Tidy up, с помощью которой можно автоматически расставить все объекты ровно, поменять их местами и изменить отступы.
Как пользоваться Tidy up
Горизонтальный прогресс-бар
Если вы занимаетесь интерфейсом технически сложного приложения, скорее всего, вам понадобится прогресс-бар. В Figma есть множество способов его нарисовать, но самый простой — с помощью текста!
Как создать горизонтальный прогресс-бар из текста
Теперь у вас есть регулируемый прогресс-бар. Чтобы изменить длину полосы загрузки, просто добавляйте в него текст:
Круглый прогресс-бар
Если вместо горизонтального прогресс-бара вам нужен круглый, его сделать так же легко.
Готово — получился круглый прогресс-бар. Чтобы изменить его длину, наведите курсор на фигуру, зажмите правой кнопкой мыши один из концов фигуры и тяните.
Кляксы стандартными инструментами
В Figma есть много плагинов для создания интересных форм, но их можно сделать и самостоятельно с помощью стандартных инструментов. Например — сферы и связки, похожие на кляксы.
Как сделать кляксу
Теперь вы можете двигать фигуры как угодно и они будут похожи на кляксы:
5 полезных плагинов для Figma: создание паттернов
Как быстро сгенерировать уникальный паттерн, изменить в нём цвета или выбрать готовый из бесплатной библиотеки.
Иллюстрация: Оля Ежак для Skillbox Media
В Figma есть встроенный векторный редактор, который может помочь вам нарисовать свой паттерн. Обычно это занимает много времени, и если у вас его нет, придётся искать готовое решение в бесплатных библиотеках. Упростить эту работу вам помогут плагины, которые расширяют функционал графического редактора.
Рассказываем, какие плагины для Figma помогут вам сделать собственный паттерн.
Pattern Hero
Этот плагин генерирует последовательности из выбранных объектов — ими могут быть фигуры, картинки, группы или фреймы.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Confetti
Генерирует узор, напоминающий конфетти. Работает только с геометрическими фигурами — треугольниками, кругами, квадратами.
Fizzy
Этот плагин делает паттерны только из кругов, но зато предварительно их рисовать не нужно. Пользователь может задать их размер, количество и цвета.
CoShuffler
Если в получившемся паттерне вам не нравится выбор цветов, это можно быстро исправить с помощью плагина CoShuffler. Он автоматически перекрашивает все выделенные объекты из созданной пользователем палитры.
Hero Patterns
Если у вас нет времени на создание собственного паттерна, попробуйте поискать подходящий в библиотеке Hero Patterns. Там собрано несколько десятков узоров, которые могут подойти в разных ситуациях.
Линии в фигме: как сделать пунктирные, волнистые и кривые
В этом уроке вы узнаете как делать разные линии в фигме. В результате вы научитесь делать пунктирные, волнистые, изогнутые, ломанные линии. Это простое руководство для начинающих пользователей программы Figma.
Как сделать линию в фигме
Чтобы сделать линию в Figma, в верхней панели (где расположены все инструменты) нажмите на стрелочку с векторными фигурами «Shape tools». Затем нарисуйте линию нужной длинны зажав левую клавишу мыши. Также для активации инструмента, можете нажать на горячую клавишу «L» на клавиатуре.
Изменение толщины и цвета линий
Цвет и толщину линий вы можете изменять стандартным образом используя правую панель и разделы «Color» и «Stroke».
Как сделать пунктирную линию в фигма
Чтобы в фигме сделать пунктирную линию, выделите созданную ранее линию. В правой панели, где написано «Stroke», нужно нажать на 3 точки. В выпадающем окне измените значение «Dashes». Можно указать 2 цифры (например 10, 20). Первая цифра — длинна пунктирной линии. Вторая цифра — длинна разрыва между линиями.
Как закруглить линию в фигме
Чтобы закруглить линию в фигме выберите нужную линию. В правой панели напротив надписи «Stroke» нажмите на пиктограмму с тремя точками. Затем вместо значения «None», выберите пункт «Round».
Как у линии в фигме сделать стрелки на концах
Чтобы превратить линию в стрелку, выделите необходимую линию. В панели справа, где надпись «Stroke», нажмите 3 точки. Вместо значения «None» поставьте «Line Arrow» —стрелка в виде линии или «Triangle Arrow» — линия в виде треугольника.
Если хотите сделать стрелку у линии с одной стороны, выберите линию и нажмите на клавишу Enter. Затем выделите точку с какого-то конца, нажав левую клавишу мыши. Нажмите на иконку с тремя точками напротив надписи «Stroke» в правой панели. С одной стороны поставьте значение «None», а с другой стороны поставьте «Line arrow» или «Triangle arrow».
Как сделать волнистые линии в фигме (изогнутые, кривые)
Чтобы сделать из простой линии волнистую, изогнутую или кривую в фигме сделайте следующую операцию.
Выделите линию и нажмите сверху на иконку «Edit object» или на клавишу Enter.
Поставьте новую точку по центру. Между отрезками в этой точке, поставьте ещё несколько. Например на скриншоте выше я создал 7 точек.
Зажмите клавишу Shift и выделите левой клавишей мыши точки, как показано на скриншоте выше. Нужно выбирать точки через одну.
Зажмите клавишу Shift, затем нажимайте на стрелку вверх или вниз на клавиатуре. Точки будут подниматься на 10 px, если будет зажата клавиша Shift и на 1 px без её зажатия. В итоге получается ломанная линия.
Чтобы задать скругление и сделать линию в форме волны, выберите её и в правой панели задайте скругление.
Аналогичную волнистую линию вы можете нарисовать, с помощью пера. Прежде всего активируйте инструмент «Pen Tool», зажмите клавишу Shift и поведите в сторону. Будет создаваться линии под углом 45 градусов. Поставьте нужное количество точек для вашей волнистой линии и при необходимости сделайте скругление.
Заключение
Вы прокачали свои навыки в фигме и теперь знаете как делать различные линии. Узнали как делать их волнистыми, пунктирными, ломанными, кривыми, со скруглением и т.д. Если вы не нашли ответ на свой вопрос, то напишите в чем у вас возникли сложности в комментариях ниже.
Геометрический дизайн: работа с кругами
Russian (Pусский) translation by Sergey Zhuk (you can also view the original English article)
Мы уже широко использовали круги для создания различных сеток для нескольких шаблонов. В этом уроке мы используем круги ради них, а именно в двух типах конструкций: спирали и вписанные круги.
Спирали
Обычная или архимедова спираль
Эта спираль определяется равным расстоянием между струнами, так что она имеет концентрический внешний вид. Она рисуется перемещением точки циркуля из одной точки в другую в базовой фигуре, которая может быть сегментом (двумя точками), треугольником, квадратом и т.д. Чем больше точек, тем плотнее и совершеннее спираль, но поскольку это также делает конструкцию более утомительной, шестиугольник является самым высоким, как правило.
Спираль, построенная по двум точкам
Шаг 1
На горизонтальной линии нарисуйте полукруг, маленький насколько это возможно. Это первый поворот спирали, и две точки, где он пересекает линию, являются точками построения.
Шаг 2
Поместите циркуль в одну из точек, откройте его, чтобы встретить другого, и нарисуйте полукруг на другой стороне линии. Две полуокружности образуют непрерывную кривую.
Шаг 3
Переместите циркуль назад к первой точке, откройте его, чтобы встретить конец кривой, и нарисуйте еще один полукруг.
Шаг 4
Продолжайте в этом ключе, перемещая циркуль из одной из точек построения в другую и каждый раз настраивая открытие, чтобы взять кривые, где вы остановились.
Продолжайте сколько угодно. Спираль будет выглядеть так:
Спираль, построенная на трех точках
Метод тот же, но мы начинаем с равностороннего треугольника, стороны которого расширены. Циркуль будет перемещаться из пункта 1 в 2 в 3, затем обратно в 1 и так далее. Если стороны вытянуты, как показано здесь, спираль поворачивается по часовой стрелке (и циркуль перемещается от точки к точке по часовой стрелке).
Шаг 1
Нарисуйте первую дугу.
Шаг 2
Переместитесь к следующей точке, отрегулируйте отверстие и нарисуйте следующую дугу.
Шаг 3
Переместитесь в третью точку и повторите.
После нескольких поворотов спираль выглядит так:
Спираль, построенная на четырех точках
Наша база теперь квадратная, и мы по-прежнему работаем по часовой стрелке. По мере того, как угол поворота уменьшается (сначала он составлял 180º для каждого, затем 120º, теперь для 90º), спираль становится более гладкой.
Шаг 1
Нарисуйте первый четверть круга.
Шаг 2
Перейдите ко второй точке, отрегулируйте раскрытие циркуля и нарисуйте следующий четверть круга.
Шаг 3
Повторите с третьей и четвертой точками.
Шаг 4
Как выглядит спираль за несколькими оборотами:
Спираль, построенная на шести точках
С шестиугольником в качестве основания, конструкция действительно такая же. Важнейшей составляющей является очень точное рисование оснований и расширение их сторон. Затем просто пробегите шесть пунктов:
Спираль через несколько оборотов:
Когда эти спирали располагаются бок о бок, мы можем оценить, насколько они более плавные и идеально круговые, когда база имеет большее количество точек.
Золотая спираль
Шаг 1
Построить квадрат. (Забыл как? См. Раздел Работа с 4 и 8.)
Шаг 2
Растяните стороны AB и DC.
Шаг 3
С точкой на E и циркулем, открытым для EC, нарисуйте дугу, которая разрезает расширенный AB на G.
Шаг 4
Переместите черновую точку на F и нарисуйте дугу, которая разрезает расширенный CD на H.
Шаг 5
Соедините к GH, чтобы закончить прямоугольник.
Это называется золотым прямоугольником, потому что AB/AG = BG/AB, другими словами отношение длинной стороны ко всему сегменту такое же, как отношение более короткой стороны к более длинной.
Бумага формата A4 (или любой другой размер в серии A) является золотым прямоугольником, поэтому вы можете использовать его общую поверхность в качестве внешнего прямоугольника и перейти сразу к шагу 6.
Шаг 6.
Теперь нам нужно разбить этот прямоугольник на квадраты. У нас уже есть первый квадрат. Следующий будет выведен из прямоугольника BGHC.
Поместите черновую точку на B и откройте ее на длину короткого сегмента. Отметьте I в BC.
Переместите черновую точку в G и отметьте J на GH.
Шаг 7.
Соедините IJ: теперь у нас есть квадрат BGJI, и новый прямоугольник остался.
Шаг 8
Повторите эту операцию в каждом последующем прямоугольнике, всегда создавая квадрат относительно внешнего края прямоугольника.
Когда у нас будет достаточно квадратов или они станут слишком маленькими для работы, мы можем нарисовать спираль.
Шаг 9
Поместите черновую точку на C, пусть отверстие будет равняться стороне первого квадрата, и нарисуйте четверть окружности DB.
Шаг 10
Переместите черновую точку на I, уменьшите отверстие в сторону второго квадрата и нарисуйте дугу BJ.
Чувство этой спирали сильно отличается от концентрического и даже статического появления регулярных спиралей: оно гораздо менее сложенное, с динамическим движением.
Вписанные круги
Круги могут быть вписаны, то есть втянуты внутрь фигуры таким образом, чтобы касаться ее сторон, под углами, многоугольниками или другими кругами. Это устройство является основой большей части декоративной геометрии Запада, например, в кельтском освещении или готических розовых окнах. Мы рассмотрим две базовые конструкции, которые мы можем использовать с любым многоугольником или любым количеством кругов внутри круга, а затем построить два полноценных окна с их узором.
Круг в секторе
Этот метод позволяет вам подбирать количество кругов по вашему выбору внутри круга. Начните с разделения круга равномерно на нужное количество разделов, затем для каждого сектора выполните следующее. Показанный здесь сектор состоит из круга, разделенного на шесть.
Шаг 1
Разделите сектор пополам. Биссектриса режет дугу в точке Q.
Шаг 2
Теперь нам нужно провести перпендикуляр к PQ в Q. С черновой точкой компаса на Q и любым отверстием нарисуйте дугу, которая разрезает биссектрису в точке A.
Шаг 3
Переместите сухую точку в A и нарисуйте еще одну дугу, разрезав первую на B.
Шаг 4
Соедините линию AB и немного растяните ее.
Шаг 5
При том же открытии циркуля и точке на B отметьте точку C.
Шаг 6.
Шаг 7.
Расширьте одну сторону сектора, чтобы разрезать CQ в точке E.
Шаг 8
Распределите пополам угол QEP.
Эта биссектриса разрезает QP в точке O.
Шаг 9
Вот некоторые возможности, в зависимости от количества секторов, в которые был разбит круг. Обратите внимание: круги, которые касаются, дуги между их точками контакта могут быть опущены для создания розетки.
Круг в воздушном змее
Сначала соедините центр каждой стороны с центром многоугольника, разделив полигон на змеи, а затем выполните следующие действия для каждого змея.
Шаг 1
Bisect ACB. Эта биссектриса разрезает AB на O.
Шаг 2
Когда черновая точка на A и циркуль открыты для AO, нарисуйте дугу.
Шаг 3
Переместите черновую точку в D и повторите, чтобы найти точку E.
Шаг 4
Соедините к OE, чтобы разрезать AD на F.
Шаг 5
Вписанная окружность теперь может быть нарисована с центром O и радиусом OF.
Как и в предыдущей конструкции, разные полигоны приведут к разным формам, а внутренние дуги могут быть стерты для создания розетки.
Окно Трискеле (три круга)
Такие церковные окна, выдающие кельтское влияние, могут быть замечены во многих местах вокруг Британских островов.
Шаг 1
Начните с круга. Разделите его на шесть и нарисуйте диаметры.
Шаг 2
Соедините три из этих точек, чтобы создать равносторонний треугольник.
Шаг 3
С открытием циркуля ниже нарисуйте круг, вписанный в треугольник.
Шаг 4
Нарисуйте еще один треугольник, вписанный в этот круг.
Шаг 5
С раскрытием компаса ниже, нарисуйте три окружности, центрированные в точках треугольника.
Шаг 6.
С раскрытием циркуля ниже нарисуйте круг, в который вписаны три меньших.
Если вам просто нужен линейный рендеринг, вы можете остановиться здесь и покрасить следующие дуги:
Шаг 7.
Поместите черновую точку, где находится одно из пересечений диаметра с последним кругом, который мы нарисовали, и установите отверстие на разницу между двумя большими кругами. Нарисуйте небольшой круг.
Шаг 8
Верните сухую точку в исходный центр и откройте ее, как показано. Нарисуйте третий, самый внутренний большой круг.
Шаг 9
Теперь для каждого из трех кругов нарисуйте внутренний круг, используя отверстие, показанное ниже.
Шаг 10
Теперь измените отверстие, как показано, и для каждого из трех, нарисуйте эту дугу:
Шаг 11
. и, наконец, центральные линии трискеле.
Окно Розетки (Восемь Кругов)
Это окно с западного фасада Шартрского собора и старейшее в здании.
Шаг 1
Начните с большого круга. Разделите его на восемь, выполнив шаги для рисования квадрата (нет необходимости рисовать сам квадрат, потому что нам нужны только его диагонали).
Шаг 2
Разделите половину секторов пополам, чтобы разделить круг на 16.
В настоящее время существует восемь диаметров. Число пунктов для ясности.
Шаг 3
Соедините точки с четными номерами, чтобы создать статический восьмиугольник.
Шаг 4
Стороны восьмиугольника разрезали диаметры в восьми точках. Соедините их, чтобы создать вписанный динамический восьмиугольник.
Шаг 5
Теперь нарисуйте еще один статический восьмиугольник, вписанный в предыдущий.
Шаг 6.
Теперь, возвращаясь к пронумерованным точкам, соедините следующие пары: 2-8 и 10-16, затем 4-14 и 6-12.
Шаг 7.
Соедините 2-12 и 4-10, и, наконец, 6-16 и 8-14.
Обратите внимание на следующие места, где пересекаются три линии: это центры восьми кругов, образующих розетку.
Шаг 8
С открытием циркуля ниже нарисуйте круг, центрированный по каждой из этих точек.
Покажите дуги, показанные здесь.
Шаг 9
Шаг 10
Измените отверстие циркуля еще раз и повторите, снова останавливаясь на диаметре.
Шаг 11
Соедините открытые концы дуг.
Шаг 12.
Чертим линии между дугами; Они являются частями диаметров.
Шаг 13.
С последней настройкой циркуля, нарисуйте и закрасьте круг ниже.
Шаг 14.
Наконец, чертим на внешнем круге.
В этой главе о кругах мы закончили основную часть этих уроков по геометрическим проектам. Со следующего месяца мы сосредоточимся на полных моделях и мотивах все более сложной с Востока и Запада.