В помощь дизайнеру: горячие клавиши в Figma

Горячие клавиши (hotkeys) — это комбинации клавиш, нажатие на которые позволяет выполнять различные действия в той или иной программе, не прибегая к её меню. Это быстро и просто.

В Figma горячие клавиши называются Keyboard Shortcuts, а посмотреть весь их список можно, нажав на знак вопроса в правом нижнем углу.

Или используйте для открытия списка сочетание горячих клавиш Ctrl + Shift + ?. Да, они могут пригодиться даже здесь.

Весь список горячих клавиш поделён на несколько групп. Расскажем о каждой по порядку.

Essential keyboard shortcuts

Essential keyboard shortcuts — это Основные клавиатурные сокращения.

Чтобы показать или скрыть Боковые панели, нажмите Ctrl + \ на Windows и ⌘ + \ на Mac.

Чтобы выбрать инструмент Пипетка, нажмите i на Windows и Ctrl + С на Mac.

Чтобы открыть Меню, нажмите Ctrl + / на Windows и ⌘ + / на Mac.

Tools

Tools — это Инструменты.

Чтобы выбрать стандартный инструмент выделения, нажмите V.

Чтобы выбрать инструмент для создания фреймов, нажмите F.

Чтобы выбрать Перо, нажмите P.

Чтобы выбрать Карандаш, нажмите Shift + P.

Чтобы выбрать Текст, нажмите T.

Чтобы выбрать Прямоугольник, нажмите R.

Чтобы выбрать Эллипс, нажмите O.

Чтобы выбрать Линию, нажмите L.

Чтобы выбрать Стрелку, нажмите Shift + L.

Чтобы добавить или показать комментарии, нажмите С.

Чтобы выбрать Пипетку, нажмите i на Windows и Ctrl + С на Mac.

Чтобы выбрать Нож, нажмите S.

View

View — это Вид.

Чтобы показать или скрыть Линейки, нажмите Shift + R.

Чтобы показать или скрыть Обводку всех элементов, нажмите Ctrl + Shift + 3 на Windows и ⌘ + Y на Mac.

Чтобы показать или скрыть Пиксельный просмотр, нажмите Ctrl + Alt + Y на Windows и Ctrl + P на Mac.

Чтобы показать или скрыть Сетку, нажмите Ctrl + Shift + 4 на Windows и Ctrl + G на Mac.

Чтобы показать или скрыть Пиксельную сетку, нажмите Ctrl + ‘ на Windows и ⌘ + ‘ на Mac.

Чтобы показать или скрыть Боковые панели, нажмите Ctrl + \ на Windows и ⌘ + \ на Mac.

Чтобы показать или скрыть Курсоры других пользователей, нажмите Ctrl + Alt + \ на Windows и Alt + ⌘ + \ на Mac.

Чтобы показать или скрыть Только слои, нажмите Alt + 1.

Чтобы показать или скрыть Только компоненты, нажмите Alt + 2.

Чтобы показать или скрыть Панель дизайна, нажмите Alt + 8.

Чтобы показать или скрыть Панель прототипа, нажмите Alt + 9.

Zoom

Zoom — это Приближение или Масштабирование.

Чтобы переместить Zoom по рабочему пространству, нажмите Space + drag.

Чтобы увеличить масштаб, нажмите +.

Чтобы уменьшить масштаб, нажмите —.

Чтобы включить отображение 1:1 к экрану, нажмите Shift + 0.

Чтобы масштабировать все рабочее пространство, нажмите Shift + 1.

Чтобы масштабировать выделенный элемент, нажмите Shift + 2.

Чтобы масштабировать предыдущий фрейм, нажмите Shift + N.

Чтобы масштабировать следующий фрейм, нажмите N.

Чтобы найти предыдущую страницу, нажмите Page Up.

Чтобы найти следующую страницу, нажмите Page Down.

Чтобы найти предыдущий фрейм, нажмите Home.

Чтобы найти следующий фрейм, нажмите End.

Text

Text — это Текст.

Чтобы выделить текст жирным, нажмите Ctrl + B на Windows и ⌘ + B на Mac.

Чтобы выделить текст курсивом, нажмите Ctrl + i и ⌘ + i на Mac.

Чтобы подчеркнуть текст, нажмите  Ctrl + U и ⌘ + U на Mac.

Чтобы вставить и сопоставить элемент, нажмите Ctrl + Shift + V.

Чтобы выровнять текст по левому краю, нажмите Ctrl + Alt + L на Windows и ⌘ + Alt + L на Mac.

Чтобы выровнять текст по центру, нажмите Ctrl + Alt + T на Windows и ⌘ + Alt + T на Mac.

Чтобы выровнять текст по правому краю, нажмите Ctrl + Alt + R на Windows и ⌘ + Alt + R на Mac.

Чтобы выровнять текст по ширине, нажмите Ctrl + Alt + J на Windows и ⌘ + Alt + J на Mac.

Чтобы изменить размера текста, нажмите Ctrl + Shift + < и > на Windows и ⌘ + Shift + < и > на Mac.

Чтобы изменить расстояние между символами, нажмите Alt + < и >.

Чтобы изменить расстояние между строками, нажмите Alt + Shift + < и >.

Shape

Shape — это Векторные изображения.

Чтобы выбрать Перо, нажмите P.

Чтобы выбрать Карандаш, нажмите Shift + P.

Чтобы выбрать Заливку, нажмите B.

Чтобы удалить заливку, нажмите Alt + /.

Чтобы удалить обводку, нажмите /.

Чтобы поменять местами обводку и заливку, нажмите Shift + X.

Чтобы преобразовать в кривые, нажмите Ctrl + Shift + O на Windows и ⌘ + Shift + O на Mac.

Чтобы работать с точками векторных изображений, нажмите Ctrl + E на Windows и ⌘ + E на Mac.

Selection

Selection — это Выделение.

Чтобы выделить всё, нажмите Ctrl + A на Windows и ⌘ + A на Mac.

Чтобы выделить всё, кроме чего-либо, нажмите Ctrl + Shift + A на Windows и ⌘ + Shift + A на Mac.

Чтобы отменить выделение, нажмите Esc.

Чтобы выделить слои, которые находятся под другими слоями, нажмите Ctrl + click Windows и ⌘ + click на Mac.

Чтобы выделить слой на боковой панели, нажмите Ctrl + right click Windows и ⌘ + right click на Mac.

Чтобы выделить дочерний элемент, нажмите Enter.

Чтобы выделить родительский элемент, нажмите Shift + Enter.

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

Чтобы выделить предыдущий по порядку элемент, нажмите Shift + Tab.

Чтобы сгруппировать элементы, нажмите Ctrl + G на Windows и ⌘ + G на Mac.

Чтобы разгруппировать элементы, нажмите Ctrl + Shift + G на Windows и ⌘ + Shift + G на Mac.

Чтобы преобразовать в фрейм, нажмите Ctrl + Alt + G на Windows и ⌘ + Alt + G на Mac.

Чтобы показать или скрыть элемент, нажмите Ctrl + Shift + H на Windows и ⌘ + Shift + H на Mac.

Чтобы заблокировать или разблокировать элемент, нажмите Ctrl + Shift + L на Windows и ⌘ + Shift + L на Mac.

Cursor

Cursor — это Курсор.

Чтобы выделить элемент при клике, нажмите Alt.

Чтобы копировать элемент при движении, нажмите Alt.

Чтобы выделить слои, которые находятся под другими слоями, нажмите Ctrl + click на Windows и ⌘ + click на Mac.

Чтобы показать иерархию выделенного элемента, нажмите Ctrl + right click на Windows и ⌘ + right click на Mac.

Чтобы изменить размер относительно центра элемента, нажмите Alt.

Чтобы изменить размер пропорционально, нажмите Shift.

Чтобы переместить во время изменения размеров элемента, нажмите Ctrl на Windows и ⌘ на Mac.

Edit

Edit — это Редактирование.

Чтобы копировать, нажмите Ctrl + C на Windows и ⌘ + C на Mac.

Чтобы вырезать, нажмите Ctrl + X на Windows и ⌘ + X на Mac.

Чтобы вставить, нажмите Ctrl + V на Windows и ⌘ + V на Mac.

Чтобы вставить поверх выделенного элемента, нажмите Ctrl + Shift + V на Windows и ⌘ + Shift + V на Mac.

Чтобы создать копию, нажмите Ctrl + D на Windows и ⌘ + D на Mac.

Чтобы переименовать, нажмите Ctrl + R на Windows и ⌘ + R на Mac.

Чтобы экспортировать элемент, нажмите Ctrl + Shift + E на Windows и ⌘ + Shift + E на Mac.

Чтобы копировать свойства элемента, нажмите Ctrl + Alt + C на Windows и ⌘ + Alt + C на Mac.

Чтобы вставить скопированные свойства, нажмите Ctrl + Alt + V на Windows и ⌘ + Alt + V на Mac.

Transform

Transform — это Трансформирование.

Чтобы отразить по горизонтали, нажмите Shift + H.

Чтобы отразить по вертикали, нажмите Shift + V.

Чтобы создать маску, нажмите Ctrl + Alt + M на Windows и ⌘ + Alt + M на Mac.

Чтобы включить редактирование векторных объектов или изображений, нажмите Enter.

Чтобы вставить изображение, нажмите Ctrl + Shift + K на Windows и ⌘ + Shift + K на Mac.

Чтобы обрезать изображение, нажмите Alt + dbl-click.

Чтобы задать прозрачность элементу 10%, нажмите 1.

Чтобы задать прозрачность элементу 50%, нажмите 5.

Чтобы задать прозрачность элементу 100%, нажмите 0.

Arrange

Arrange — это Выравнивание.

Чтобы переместить на уровень ближе к переднему плану, нажмите Ctrl + ] на Windows и ⌘ + ] на Mac.

Чтобы переместить на уровень дальше от переднего плана, нажмите Ctrl + [ на Windows и ⌘ + [ на Mac.

Чтобы переместить на передний план, нажмите Ctrl + Shift + ] на Windows и ⌘ + Shift + ] на Mac.

Чтобы переместить на задний план, нажмите Ctrl + Shift + [ на Windows и ⌘ + Shift + [ на Mac.

Чтобы выровнять по левой стороне, нажмите Alt + A.

Чтобы выровнять по правой стороне, нажмите Alt + D.

Чтобы выровнять по верхней стороне, нажмите Alt + W.

Чтобы выровнять по нижней стороне, нажмите Alt + S.

Чтобы выровнять согласно горизонтальной линии элементов, нажмите Alt + H.

Чтобы выровнять согласно вертикальной линии элементов, нажмите Alt + V.

Чтобы выровнять с распределением горизонтального пространства, нажмите Ctrl + Shift + Alt + H на Windows и ⌘ + Shift + Alt + H на Mac.

Чтобы выровнять с распределением вертикального пространства, нажмите Ctrl + Shift + Alt + V на Windows и ⌘ + Shift + Alt + V на Mac.

Components

Components — это Компоненты.

Чтобы показать все компоненты, нажмите Alt + 2

Чтобы создать компонент, нажмите Ctrl + Alt + K на Windows и ⌘ + Alt + K на Mac.

Чтобы преобразовать компонент во фрейм, нажмите Ctrl + Alt + B на Windows и ⌘ + Alt + B на Mac.

Чтобы открыть многопользовательскую библиотеку, нажмите Ctrl + Alt + O на Windows и ⌘+ Alt + O на Mac.

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

Подписывайтесь на ежемесячный дайджест Mailfit

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

Ваша электронная почта

Нажимая на кнопку, соглашаюсь с политикой обработки персональных данных

ПОЛУЧИЛОСЬ!
Скоро вы начнете получать нашу рассылку

Как использовать кривые и перо в Figma — инструкция и примеры

Для новичков инструмент перо может показаться сложным, так как он рисует не совсем логично на первый взгляд. Кроме того, чтобы его освоить необходимо немного потренироваться, и приобрести навык. Но для создания красивого современного дизайна без этого инструмента не обойтись. Итак, рассмотрим, как работает перо, и как создавать кривые линии в Фигме.

Для примера создадим два векторных объекта. Пусть это будут два круга разных размеров. Если выделить эти объекты, то вверху появится вкладка объединения группы. В ней есть несколько функций. «Union selection» — это объединение двух элементов.   

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

Функция «Intersect selection» оставляет только область пересечения двух объектов. 

«Exclude selection» — удаление области пересечения двух объектов.

Последняя функция в этом разделе – «Flatten selection». Горячие клавиши «Ctrl+E». Выбрав данный инструмент, ваши фигуры соединятся в один векторный объект. При перемещении вы уже не сможете их отделять. 

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

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

Кроме того, Фигма поддерживает редактирование SVG файлов. Например, если вы загрузите логотип, текст, или любую другую картинку в этом формате, то она добавится как векторный объект, который редактируется таким же образом.

Теперь рассмотрим, как использовать инструмент «Перо» (Pen). Горячая клавиша «P».

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

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

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

Далее при помощи «Shift» вы можете продолжить рисовать прямые линии тем же «Пером» по краям фрейма.

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

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

В последствии в такую фигуру можно вставить текст. По такому же принципу можно создавать кнопки, панель меню сайта или другие декоративные элементы. Данный объект можно сохранить, чтобы верстальщик мог использовать его в создании сайта. Такой фон сохраняется в виде картинки формата SVG.

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

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

Итак, из этого урока вы узнали, как создавать кривые линии, а также использовать инструмент «Перо», что позволит вам создавать привлекательные дизайнерские элементы.    

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

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

Использование инструмента «Перо» в Figma

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

Всем разработчикам рано или поздно понадобится какой-нибудь графический элемент, и с помощью инструмента «Перо» они смогут создать его самостоятельно и улучшить внешний вид своих веб-страниц; посмотрим как это делается!

Что такое перо и для чего оно нужно?

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

Есть несколько вещей, которые вы можете сделать с помощью инструмента пера Figma, и они включают в себя:

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

Почему вам следует использовать этот инструмент? Среди причин:

• Это удобно.
• Позволяет легко создавать сложные формы, которые полезны при проектировании, но не в инструменте формы.
• Всегда создает векторный путь всякий раз, когда вы его используете.
• Вы можете вносить точные изменения при объединении фигур, добавляя или удаляя заливку из каждого компонента.
• Вы можете рисовать больше вместо объединения или группировки 2D-фигур, что позволяет рисовать 3D-формы точно так же, как на бумаге.

Чтобы создать дизайн на Figma с помощью инструмента «Перо», вам нужно открыть свою учетную запись Figma, открыть файл дизайна и создать новую рамку для дизайна, который вы хотите создать. Существуют инструменты, которые вы можете использовать при использовании инструмента «Перо», и они включают в себя:

• Инструмент сгиба помогает создавать кривые, изменяя векторные точки и преобразовывая их в кривую на точке или создавая скорректированный путь кривой. Этот инструмент находится справа от инструмента «Перо», и вы также можете активировать его, нажав CTRL в векторном режиме.
• Инструмент «Ведро» помогает добавлять или удалять заливки в векторном режиме. Он находится на панели инструментов справа от инструмента сгиба, и вы также можете активировать его, нажав B в векторном режиме.
• Обязательно нажмите «Готово» на панели инструментов рядом с инструментом «Ведро», когда вы закончите рисовать с помощью инструмента «Перо». Вы также можете использовать клавишу Enter или клавишу Esc или дважды щелкнуть пробел на холсте, чтобы выйти из векторного режима.

Чтобы найти инструмент пера Figma, вы увидите его на панели инструментов или нажав P.

Как создать векторную сеть с помощью инструмента «Перо» на Figma

После создания кадра вы готовы приступить к созданию векторной сети в файле проекта. Как только вы активируете инструмент «Перо», найдя его на панели инструментов или нажав P, вы войдете в векторный режим. В векторном режиме вы можете создавать фигуры для своего предпочтительного дизайна и управлять векторными точками с помощью инструмента «Перо».
Мы рассмотрим несколько вещей, которые мы можем создать с помощью инструмента «Перо» в Figma.

Создание линий

Вы можете создавать линии на Figma с помощью инструмента «Перо» и соединять эти линии по своему усмотрению.

• Создайте рамку рабочего стола, нажав F и выбрав нужное устройство.
• Чтобы создать линию, нажмите P
• Начните с щелчка, чтобы создать точку A,
• Затем нарисуйте линию
• Завершите его, щелкнув в точке B, затем нажмите Готово

Давайте создадим коробку, соединив разные линии

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

Создание кривых

Вы можете создавать кривые с помощью инструмента «Перо». Ручка с двумя линиями появляется при перетаскивании точки. Ручка определяет степень изгиба. Верхняя линия на ручке контролирует кривую, а нижняя — предстоящую кривую.

• Чтобы создать кривую, щелкните точку A и переместитесь в точку B
• Если вы хотите плавную кривую, используйте две ручки.
• Чтобы переместить ручку, удерживайте клавишу Alt и перетащите
• Вы можете согнуть ручку, снять ручку, а также вернуть ручку с помощью клавиши Alt.
• Удерживая клавишу Shift во время движения, ваши точки будут привязаны к 45 градусам.

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

Создадим полукруг с помощью инструмента изгиба.

• Нарисуйте точки A и B, создав прямую линию
• Щелкните строку и нажмите Enter
• Выберите инструмент «Сгиб»
• Разрешить курсору перемещаться по области линии, которую вы собираетесь согнуть
• Затем перетащите его в том направлении, в котором хотите сформировать полукруг.

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

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

Вы можете настроить или изменить характеристики отдельных точек, линий или всей векторной сети в Figma.

• Чтобы войти в режим редактирования вектора, выберите область для редактирования, затем дважды щелкните или нажмите кнопку «Редактировать объект» и клавишу «Ввод» или «Возврат».
• Вы можете удалить точку или путь после их выбора, нажав Delete или Backspace.
• Если вы хотите сохранить базовый путь, но удалить точку, нажмите и удерживайте клавишу Shift + Delete или Backspace во время щелчка.
• Чтобы выйти из режима редактирования вектора, нажмите кнопку «Готово», клавишу «Ввод» или клавишу «Esc».

Объединение фигур

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

• Чтобы объединить коробку поверх полукруга,
• Нажмите на поле
• Затем перетащите коробку в полукруг
• Вы можете настроить форму, которая остается сверху, по вашему выбору.

Добавление заливки к векторному дизайну

Вы можете заполнить векторную сеть цветом. Сделать это;

• Выберите чертеж, щелкнув по нему.
• Затем нажмите B, чтобы активировать инструмент ведро.
• Заполните выбранную область желаемым цветом, выбрав параметр заливки на правой боковой панели.
• Или используйте параметр заливки на правой боковой панели, чтобы заполнить рисунок желаемым цветом.

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

Изменение цвета векторной линии

Вы можете изменить цвет векторных линий, если вас не устраивает черный цвет по умолчанию.

• Выберите линию или фигуру, щелкнув по ней.
• Используйте параметр обводки на правой боковой панели, чтобы изменить цвет по вашему выбору.
• Можно также настроить внешний вид обводки, увеличив толщину или положение обводки.

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

Масштабирование дизайна

Вы можете изменить размер своего рисунка, и вот как;

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

Повтор сеанса с открытым исходным кодом

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

Начните получать удовольствие от отладки — начните использовать OpenReplay бесплатно.

Давайте воспользуемся инструментом «Перо» и создадим дизайн, похожий на домашнюю страницу Dropbox для потребителей:

1. Посмотрите на дизайн и обратите внимание на области, требующие прямых и изогнутых линий.
2. Пройдите дальше, чтобы проверить расположение логотипа, значков и кнопок.
3. Обратите внимание на области, которые нужно объединить, заполнить цветами и штрихами.

Вы можете начать рисовать различные сегменты дизайна.

• Создайте рамку рабочего стола в файле дизайна Figma, нажав F

• Вверху давайте создадим навигацию и логотип.

• Вместо большего прямоугольника в левом верхнем углу нарисуем маленькие прямоугольники для Меню и О программе, соединив точки A, B, C и D.

• Используйте текст для ввода кнопок «Загрузить приложение» и «Войти».

• Нарисуйте логотип, создав ромбовидную форму с точками A, B, C и D в четырех местах, затем нарисуйте ромбовидную форму с расширениями сбоку.

• Нарисуйте линию, чтобы отделить верхнюю часть от остальной части дизайна

• Расположите верхнюю часть и сгруппируйте их.

• Теперь нарисуйте разных персонажей на главной странице.

• Нарисуйте поля входа и добавьте текст.

• Добавить текст слева.

• Залейте нужные области цветом.

• Добавьте штрихи, где это применимо.

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

Добавление дизайна на HTML-страницу

Дизайны сайтов на Figma являются прототипами и не работают, так как не содержат кода. Поскольку мы разработали домашнюю страницу веб-сайта, нам нужен HTML-код, чтобы она работала. Выполните следующие действия, чтобы преобразовать дизайн Figma в HTML.

• Войдите в свою учетную запись Figma

• Затем откройте файл проекта.

• Выберите элемент, который хотите преобразовать, и щелкните его правой кнопкой мыши.

• Теперь нажмите Копировать/Вставить как

• Затем нажмите «Копировать как SVG».

• SVG копирует

• Вы можете напрямую вставить код SVG в свой HTML-файл, чтобы просмотреть свой дизайн.

Вывод

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

СОВЕТ ОТ РЕДАКТОРА: Figma также можно использовать для планирования всего пользовательского интерфейса: для этого ознакомьтесь с разделом «Планирование пользовательского интерфейса с помощью Figma»!

css — обводка контура figma не создает путь для каждой буквы в svg

Я пытаюсь экспортировать слово в формате svg и получить отдельные пути для всех букв.

Но мой svg имеет только один путь для всего слова.

Я использую рабочий стол Windows Figma

мои шаги:

1. создать текстовое слово
2. обводка контура
3. удалить заполнить
4. экспортировать как svg

  1455ZM108.301 36.088V33.588h205.801H92.6974H90.1974V36.088V115V117.5H92.6974h205.801h208.301V115V36.088ZM200.549 60.8454C198.41 51.9819 193.933 44.9307 187.089 39.8464C180.321 34.7471 171.789 32.292 161.687 32.292C153.811 32.292 146.702 34.0633 140.427 37.6636L140.419 37.668L140.411 37.6725C134.234 41.2758 129.403 46.3751 125.931 52.9073C122.439 59.3812 120.739 66.9059 120.739 75.4C120.739 83.9888 122.438 91.6059 125.927 98.1729C129.399 104.709 134.232 109.811 140.411 113.415L140.419 113.42L140.427 113.424C146.702 117.025 153.811 118.796 161.687 118.796C171.626 118.796 180.106 116.279 186.957 111.089L186.966 111.082L186.976 111.074C193.767 105.826 198.292 98.8641 200.537 90.2894 L201.358 87.156h298.119h284.007h282.126L181.605 88.9631C180.305 93.4692 177.974 96.8035 174.653 99.1279C171.321 101.46 167.053 102.708 161.687 102.708C154.849 102.708 149.504 100.375 145.411 95.7711C141.34 91.1904 139.131 84.5196 139.131 75.4C139.131 66.3806 141.337 59.8156 145.396 55.3342L145.404 55.3256L145.411 55. 3169C149.504 50.7127 154.849 48.38 161.687 48.38C167.035 48.38 171.291 49.6668 174.619 52.08L174.631 52.0886L174.643 52.097C178.094 54.5375 180.405 57.8385 181.599 62.1061L182.111 63.932h284.007h298.119h301.294L200.549 60.8454ZM286.308 117.5h388.808V115V68.488C288.808 60.8863 287.358 54.2642 284.334 48.7285C281.428 43.235 277.337 39.0702 272.07 36.3269C266.877 33.5265 261.093 32.148 254.772 32.148C248.775 32.148 243.264 33.319238.283 35.7055L238.274 35.7099L238.265 35.7144C235.62 37.0088 233.264 38.6008 231.208 40.4892V8.43999V5.93999h328.708h315.604h313.104V8.43999V115V117.5h315.604h328.708h331.208V115V71.368C231.208 63.5002 233.126 57.9213 236.573 54.2207C240. 153 50.4796 244.976 48.524 251.316 48.524C257.574 48.524 262.237 50.4396 265.615 54.0643L265.624 54.0748L265.634 54.0852C268.981 57.5956 270.848 62.883 270.848 70.36V115V117.5h373.348h386.308ZM91.3616 22.4478C93.5696 24.6557 96.3222 25.772 99.4654 25.772C102. 534 25,772 105,201 24,639107.306 22.4225C109.498 20.2189 110.605 17.4752 110. 605 14.344C110.605 11.2128 109.498 8.46914 107.306 6.26546C105.201 4.04903 102.534 2.91599 99.4654 2.91599C96.3222 2.91599 93.5696 4.03226 91.3616 6.24022C89.1537 8.44817 88.0374 11.2008 88.0374 14.344C88.0374 17.4871 89.1537 20.2398 91.3616 22.4478 Z" штрих="#FFFDFD" штрих-ширина="5"/>

 

• css
• svg
• фигма

3

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

Итак, вот решение, если вы столкнетесь с этим случаем:

1. Выведите или сделайте его на Adobe Illustrator , обведите объект.
2. Скопируйте и вставьте его в Figma .
3. Разгруппируйте и создайте «союзы» по своему усмотрению.

Итак, вот код SVG с «отдельными путями для всех букв»:

  w3.org/2000/svg">

<путь д="M161.6 121.88C153.29121.88 145.74 119.97 139. 16 116.21L139.07 116.16C132.52 112.34 127.33 106.88 123.64 99.9301C120 93.0801 118.16 85.0301 118.16 75.9801C118.16 66.9301 120.01 59.0601 123.65 52.3001C127.33 45.3701 132.53 39.9101 139.07 36.0901L139.18 36.0301C145.76 32.2801 153.3 30.3701 161.61 30.3701C172.37 30.3701 181.42 33.0801 188.52 38.4301C195.77 43.8201 200.62 51.3601 202.91 60.8401L204.4 67.0101h280.15L179.13 63.3601C178.1 59.6801 176.15 56.8601 173.17 54.7401L173.09 54.6901C170.1 52.5201 166.35 51.4701 161.63 51.4701C155.61 51,4701 150,91 53.4501 147.27 57.5201L147.22 57.5801C143.47 61.7201 141.58 67.9101 141.58 75.9901C141.58 84.0701 143.48 90.4801 147.23 94.7001C150.88 98.8001 155.59 100.8 161.64 100.8C166.39 100.8 170.17 99.7801 173.17 97.6701C176.07 95.6401 178.03 92.7601 179.15 88.8601L180. 19 85.2501h304.54L202.9 91.5201C200.52 100.61 195.68 108.03 188.52 113.59L188.39 113.69C181.21 119.13 172.2 121.89 161.63 121.89L161.6 121.88ZM141.56 111.82L141.59 111.84C147.42 115.18 154.15 116.88 161.61 116.88C171. 05 116,88 179,04 114,47 185,34 109. 71L185.37 109.68C191.68 104.81 195.94 98.2701 198.04 90.2401h283.93C182.5 95.2101 179.83 99.0801 176.01 101.76C172.19 104.44 167.34 105.79 161.61 105.79C154.16 105.79 148.05 103.17 143.47 98.0101C138.88 92.8501 136.56 85.4401 136.56 75.9801C136.56 66.5201 138.87 59.3401 143.44 54.2801L143.47 54.2401C148.06 49.0801 154.16 46.4601 161.61 46.4601C167.31 46.4601 172.14 47.8501 175.95 50.5901L176.06 50.6701C179.93 53.4101 182.6 57.2401 183.94 62.0101h298.05C196.04 53.7001 191.83 47.1101 185.53 42.4301C179.31 37.7401 171.27 35.3701 161.62 35.3701C154.17 35.3701 147.43 37.0701 141.6 40.4101L141.55 40.4401C135.84 43.7801 131.31 48.5701 128.07 54.6601C124.82 60.6901 123.17 67.8601 123.17 75.9801C123.17 84.1001 124.82 91.4701 128.07 97.5801C131.31 103.68 135.86 108.48 141.58 111.82х241.56Z" заполнить="белый"/>
 4492 18.7202 85.4492 14.9202C85.4492 11.1202 86.8492 7.70023 89.5092 5.05023C92.1592 2.40023 95.5792 0.9 99.3792 0.9C103.179 0.9 106.469 2.42023 109.029 5.12023C111.619 7.73023 113.019 11.1302 113.019 14.9202C113.019 18.7102 111.629 22.1102 108.989 24.7602C106.469 27.4202 103.129 28.8502 99.3792 28.8502V28.8502ZM99.3792 5.99023C96.8992 5.99023 94.7592 6.86023 93.0392 8.58023C91.3192 10.3002 90.4492 12.4302 90.4492 14.9202C90.4492 17.4102 91.3192 19.5402 93.0392 21.2602C94.7592 22.9802 96.8892 23.8502 99.3792 23.8502C101.869 23.8502 103.789 22.9802 105.409 21.2802C107.159 19.5202 108.019 17.4002 108.019 14.9202C108.019 12.4402 107.149 10.3202 105.449 8.60023C103.789 6.85023 101.759 5.99023 99.3792 5.99023V5.99023Z" fill="white"/>
 95 74.2002 55.95 76.5002L82.37 120.59V120.58ZM57.85 115.58H73.55L48.42 73.6502L51.5 72.7302C57.87 70.8302 62.82 67.5702 66.2 63.0402C70.22 57.7702 72.26 51.6202 72.26 44.7402C72.26 39.1002 70.95 34.0202 68.37 29.6202C65 .79 25.2302 61.82 21.6902 56.57 19.1102C51.4 16.5302 44.96 15.2202 37.41 15.2202H5V115.58h28.1V74.5402h43.94L57.84 115.58H57.85ZM37.4 64.0302h28.1V26.0202h47.4C44.57 26.0202 49.94 27.6702 53.38 30.9202C56.91 34.1802 58.7 38.8302 58.7 44.7402C58.7 50.6502 56.91 55.3002 53.39 58.8402C49.83 62.3002 44.45 64.0402 37.39 64.0402L37.4 64.0302ZM23.1 59.0302h47.4C43.12 59.0302 47.32 57.7702 49.89 55.2702C52.45 52.7002 53.71 49.2402 53.71 44.7302C53.71 40.2202 52.51 36.9102 50.03 34.6202L49.91 34.5102C47.42 32.1902 43.21 31.0102 37.39 31.0102х33.09В59.0302х33.1Z" fill="белый"/>

 

Формат SVG поддерживает только штрих по центру. Поэтому, если вы экспортируете внешний штрих из figma, вы не получите отдельных путей.

Новый участник

Св.