В этой инструкции вы познакомитесь с инструментом «Кривые» в Figma (фигме). Узнаете как перевести текст или векторные фигуры в кривые.
Как перевести текст в кривые в figma
Чтобы перевести текст к кривые в фигме нажмите на комбинацию 2 горячих клавиш Ctrl + E. После этого сможете редактировать текст в формате кривых. При нажатии клавиши Enter у текста появятся опорные точки, которые можно передвигать. В формате кривых дописывать текст невозможно.
Отличие фигур в формате кривых в фигме
Давайте разберёмся в чём отличие в фигур, если они находятся в формате кривых.
Если вы создадите фигуры стандартными инструментами Figma, то сможете их редактировать с помощью точек на углах. Например в прямоугольнике с помощью этих точек сможете задавать скругление.
При редактировании круга можно вырезать часть круга или создавать круговые диаграммы. В многоугольнике будет возможность задавать количество углов. Когда редактируете звезду тоже есть возможность увеличивать или уменьшать количество углов.
При переводе элементов в кривые появятся опорные точки, которые можно двигать.
Для примера выделим 2 опорные точки в звезде.
Если нажать на клавиатуре на клавишу «Наверх», точки переместятся на 1 px наверх. Если дополнительно при этом зажать «Shift», то точки будут перемещаться на 10 px. Аналогично можно перемещать точки курсором мыши.
Заключение
Итак, вы этой инструкции вы узнали о том, как перевести текст или любые векторные элементы кривые в Figma.
5 полезных плагинов для Figma: работа с текстом и шрифтами
Как расположить текст вокруг фигуры, подобрать шрифтовые пары и быстро настроить стили шрифтов на макете.
Катя Павловская для Skillbox Media
В Figma есть много инструментов для работы с текстами, но некоторые задачи невозможно решить её стандартными инструментами. В этом случае вам помогут плагины, которые расширяют и упрощают функционал графического редактора.
Рассказываем, какие плагины для Figma помогут вам работать с текстом и шрифтами.
To Path
Плагин располагает выделенный текст на кривой или по краю любой стандартной фигуры:
- Скачайте плагин по ссылке.
- Зайдите в Figma, нарисуйте кривую с помощью пера и напишите любой текст.
- Выделите кривую и текстовый модуль.
- Нажмите правой кнопкой мыши выделенные предметы, в выпадающем меню перейдите в пункт Plugins и нажмите на To Path.
- В появившемся окне нажмите на кнопку Link.
Плагин разделит каждое слово на отдельные слои с буквами и разместит их по контуру фигуры или кривой:
Копирайтер, визуализатор, модель. Пишет статьи, стилизует съемки и участвует в них, изучает арт-критику в СПбГУ.
Better Font Picker
В Figma не очень удобно выбирать шрифты, так как они не отображаются на макете сразу. С помощью плагина Better Font Picker вы сможете в отдельном окне посмотреть, как выглядит каждый шрифт, и быстрее принять решение — использовать его или нет:
- Скачайте плагин по ссылке.
- Зайдите в Figma, создайте и выделите текстовый объект на макете.
- Нажмите правой кнопкой мыши на выделенный объект, в выпадающем меню перейдите в пункт Plugins и нажмите на Better Font Picker.
- Появится окно предварительного просмотра, которое покажет, как выглядят ваши установленные шрифты. Выберите любой, и он сразу применится к выделенному тексту.
Soroka
Чтобы не тратить время на подбор шрифтовых пар вручную, воспользуйтесь плагином Soroka. У него есть большая база из сочетаний бесплатных шрифтов Google Fonts, которые можно использовать в вашем макете:
- Скачайте плагин по ссылке.
- Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и нажмите на Soroka.
- В появившемся меню выберите подходящий шрифт и нажмите на него. Плагин предложит вам несколько подходящих к нему пар.
- Нажмите на любую пару — откроется статья, где использованы эти шрифты. Чтобы экспортировать статью в макет, нажмите Export to artboard.
Первый выбранный шрифт будет использоваться в заголовках, а дополнительный — в основном тексте:
Fontiger
Разработчики не любят, когда в макете остаются дробные значения кегля. Они отображаются не в каждом браузере, а доставать дизайнера вопросами о каких-то незначительных пикселях долго. Чтобы проект из-за этого не тормозил, перед передачей макета в разработку воспользуйтесь плагином Fontiger — он автоматически округляет дробное значение кегля до ближайшего целого:
- Скачайте плагин по ссылке.
- Откройте проект в Figma и выберите любой фрейм с текстом.
- Нажмите правой кнопкой мыши на выделенный фрейм, в выпадающем меню перейдите в пункт Plugins и нажмите на Fontiger. Плагин округлит все дробные кегли.
Плагин учитывает текстовые модули только внутри фреймов. Если текст не стоит внутри фрейма, его кегль не изменится.
Font Master
В Figma очень удобно следить за используемыми цветами — достаточно выделить все объекты на макете и посмотреть на панель справа. Но кегль, интерлиньяж, кернинг и шрифты таким образом не отображаются. Плагин Font Master решает эту проблему — он показывает все используемые настройки текста на макете и при необходимости создаёт из них полноценный стиль.
- Скачайте плагин по ссылке.
- Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и нажмите на Font Master.
Плагин покажет все сочетания шрифтов и кеглей и где они были использованы. Из любого сочетания можно сделать полноценный стиль:
Работа с текстом в Figma
Программа Фигма обладает хорошими возможностями работы с текстом. Сейчас мы их подробнее рассмотрим.
Итак, чтобы добавить текст в фрейме, необходимо воспользоваться вкладкой в виде буквы «Т» в верхней панели меню или использовать горячую клавишу «Т». После этого появится курсор и возможность вставить текст или набрать его вручную. Обратите внимание, что текст вставляется одной строкой.
Однако кликнув на область текста, в углах появятся точки, регулируя которые можно изменить область текста, например, вытянув вниз.
Вы также можете сразу нажать на вкладку текст, и сначала выделить область куда вы хотите его вставить, а также определить какие будут границы этого текста, после чего вставить текст или набрать его вручную.
После того как текст вставится вы также можете редактировать область при помощи выделенных точек по углам.
Дополнительные настройки текста можно найти в основных настройках программы. Рассмотрим эти возможности:
- ctrl+b текст станет жирным;
- ctrl+i текст станет наклонным;
- ctrl+u текст станет подчеркнутым;
- Функция «Strikethrough» без горячей клавиши, с ней текст станет перечеркнутым;
- «Uppercase» — не имеет горячей клавиши. Активируя ее, текст будет состоять только из заглавных букв;
- «Lowercase» — не имеет горячей клавиши. При данной функции текст состоит лишь из небольших букв.
Это основные и наиболее распространенные функции, предназначенные для настройки текста. Также в этом разделе вам будут доступны функции выставления размеров межстрочного расстояния, отступа между буквами, выравнивание, установка красной строки (абзаца) и т.д.
Вот еще некоторые горячие клавиши, которые могут понадобиться в работе с текстом:
- ctrl+с — копировать;
- ctrl+v — вставить;
- ctrl+d — сделать дубль (дубль появляется мгновенно поверх копируемого элемента);
- ctrl+alt+c — копировать свойства текста (цвет, тени, обводку, для шрифта — размер, начертание, керлинг и тд.);
- ctrl+alt+v — вставить свойства;
- ctrl+shift+v — вставить текст со свойствами текстового блока, в который вы вставляете сам текст.
Теперь обратим внимание на функции для редактирования текста, которые находятся в правом меню настроек. Здесь вам будет доступна смена шрифтов, которых Фигма предоставляет большое количество, благодаря библиотеке Google Fonts. Также можно менять размер текста. Данные размера вносятся вручную, или увеличиваются и уменьшаются при помощи клавиш Shift и Alt.
Далее у вас будут настройки, позволяющие менять расстояние между абзацами, сточками, буквами, а также добавление красной строки. Есть инструмент выравнивания текста по левой или правой стороне, а также по центру. В том случае, если вам необходимо сделать текст для кнопки, то специальная функция позволит вам сделать фрейм по размеру кнопки и выровнять его по центру внутри.
Если вы создали необходимые для вас параметры текста, которые будут использоваться во всем сайте, то чтобы сэкономить время, можно создать на основании этих параметров свой стиль. Для этого в правом меню нажмите на раздел «Text Styles» и рядом с ним нажмите на вкладку в виде «+». Таким образом, вы можете дать название своему стилю, например, «заглавный текст», или «основной текст», и в последствии использовать его в работе, чтобы каждый раз заново не вносить все параметры.
Еще одна возможность редактирования текста – изменение цвета, заливки, обводки, и добавление эффектов.
Если кликнуть на текст правой кнопкой мыши, то появится список функций. Выберите пункт «Flatten». Горячие клавиши «Ctrl+E». Это позволит вам сделать текст векторным.
Векторный текст можно сохранить в формате SVG, и в дальнейшем использовать в создании дизайна сайта. Чтобы удалить текстовый слой необходимо кликнуть на нем в монтажной области или в панели слоёв, а затем нажав клавишу «Delete».
Чтобы добавить комментарий во время работы с проектом, нажмите на соответствующую вкладку в верхнем меню программы. Далее кликните левой кнопкой мыши в ту область, где хотите разметить комментарий. Появится форма, в которой вы можете написать текст, и опубликовать. Этот комментарий можно использовать и для напоминания себе о том, чтобы вы хотели сделать. Это могут быть какие-то идеи. Кроме того, работая в команде над большими проектами, вы можете, используя опцию комментирования координировать работу, или обсуждать рабочие моменты удаленно.
Те, кто работает вместе с вами, увидит данный комментарий и сможет на него ответить. При нажатии на вкладку в виде галочки при открытии комментария пользователь сможет оповестить других членов команды о том, что ошибка исправлена, или о том, что он ознакомился с данным сообщением.
Итак, мы рассмотрели, как работать с текстом в программе Фигма. Тем не менее важным моментом является не только знание того как добавлять текст и редактировать его, но и то, как правильно подбирать эти шрифты, совмещать их с заголовками и т.д. Это важно чтобы текст не только красиво смотрелся, но и хорошо воспринимался зрительно при чтении. Для этого может понадобиться дополнительная информация.
Полезные ссылки:
- Бесплатный видеокурс по Figma от GeekBrains;
- Профессиональный курс Figma 2.0 для новичков от SkillBox;
- Полноценный онлайн курс по веб-дизайну с нуля от SkillBox.