Программа Фигма обладает хорошими возможностями работы с текстом. Сейчас мы их подробнее рассмотрим.
Итак, чтобы добавить текст в фрейме, необходимо воспользоваться вкладкой в виде буквы «Т» в верхней панели меню или использовать горячую клавишу «Т». После этого появится курсор и возможность вставить текст или набрать его вручную. Обратите внимание, что текст вставляется одной строкой.
Однако кликнув на область текста, в углах появятся точки, регулируя которые можно изменить область текста, например, вытянув вниз.
Вы также можете сразу нажать на вкладку текст, и сначала выделить область куда вы хотите его вставить, а также определить какие будут границы этого текста, после чего вставить текст или набрать его вручную.
После того как текст вставится вы также можете редактировать область при помощи выделенных точек по углам.
Дополнительные настройки текста можно найти в основных настройках программы. Рассмотрим эти возможности:
- ctrl+b текст станет жирным;
- ctrl+i текст станет наклонным;
- ctrl+u текст станет подчеркнутым;
- Функция «Strikethrough» без горячей клавиши, с ней текст станет перечеркнутым;
- «Upper case» - не имеет горячей клавиши. Активируя ее, текст будет состоять только из заглавных букв;
- «Lower case» - не имеет горячей клавиши. При данной функции текст состоит лишь из небольших букв.
Это основные и наиболее распространенные функции, предназначенные для настройки текста. Также в этом разделе вам будут доступны функции выставления размеров межстрочного расстояния, отступа между буквами, выравнивание, установка красной строки (абзаца) и т.д.
Вот еще некоторые горячие клавиши, которые могут понадобиться в работе с текстом:
- 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.