Хотите быстрее научиться создавать сайты? Рекомендую эти видеокурсы!

х
Наверх

Работа с текстом в Figma

Программа Фигма обладает хорошими возможностями работы с текстом. Сейчас мы их подробнее рассмотрим.

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

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

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

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

редактирование области выделения при помощи точек в FigmaДополнительные настройки текста можно найти в основных настройках программы. Рассмотрим эти возможности:

  • ctrl+b текст станет жирным;
  • ctrl+i текст станет наклонным;
  • ctrl+u текст станет подчеркнутым;
  • Функция «Strikethrough» без горячей клавиши, с ней текст станет перечеркнутым;
  • «Upper case» - не имеет горячей клавиши. Активируя ее, текст будет состоять только из заглавных букв;
  • «Lower case» - не имеет горячей клавиши. При данной функции текст состоит лишь из небольших букв.

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

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

  • ctrl+с - копировать;
  • ctrl+v - вставить;
  • ctrl+d - сделать дубль (дубль появляется мгновенно поверх копируемого элемента);
  • ctrl+alt+c - копировать свойства текста (цвет, тени, обводку, для шрифта — размер, начертание, керлинг и тд.);
  • ctrl+alt+v - вставить свойства;
  • ctrl+shift+v - вставить текст со свойствами текстового блока, в который вы вставляете сам текст.

Теперь обратим внимание на функции для редактирования текста, которые находятся в правом меню настроек. Здесь вам будет доступна смена шрифтов, которых Фигма предоставляет большое количество, благодаря библиотеке Google Fonts. Также можно менять размер текста. Данные размера вносятся вручную, или увеличиваются и уменьшаются при помощи клавиш Shift и Alt.

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

смена расстояния между обзацами, строчками и буквами в FigmaЕсли вы создали необходимые для вас параметры текста, которые будут использоваться во всем сайте, то чтобы сэкономить время, можно создать на основании этих параметров свой стиль. Для этого в правом меню нажмите на раздел «Text Styles» и рядом с ним нажмите на вкладку в виде «+». Таким образом, вы можете дать название своему стилю, например, «заглавный текст», или «основной текст», и в последствии использовать его в работе, чтобы каждый раз заново не вносить все параметры.     

создание стилей текста в FigmaЕще одна возможность редактирования текста – изменение цвета, заливки, обводки, и добавление эффектов.  

изменение цвета, заливки, обводки, и эффектов текста в FigmaЕсли кликнуть на текст правой кнопкой мыши, то появится список функций. Выберите пункт «Flatten». Горячие клавиши «Ctrl+E». Это позволит вам сделать текст векторным.

векторный текст в Figma Векторный текст можно сохранить в формате SVG, и в дальнейшем использовать в создании дизайна сайта. Чтобы удалить текстовый слой необходимо кликнуть на нем в монтажной области или в панели слоёв, а затем нажав клавишу «Delete».

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

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

свойства комментариев в FigmaИтак, мы рассмотрели, как работать с текстом в программе Фигма. Тем не менее важным моментом является не только знание того как добавлять текст и редактировать его, но и то, как правильно подбирать эти шрифты, совмещать их с заголовками и т.д. Это важно чтобы текст не только красиво смотрелся, но и хорошо воспринимался зрительно при чтении. Для этого может понадобиться дополнительная информация.

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

Пройдите, пожалуйста, защиту от спама.