Работа с текстом в 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.
Параметры текста в Figma
Когда мы создаем текстовые поля в Фигме, им присваиваются некоторые стандартные параметры, которые могут быть не очень удобны при дальнейшей работе. На скриншоте снизу мы видим, например, что реальный текст вылезает за границы поля, а соответственно, нам как минимум будет неудобно позиционировать другие элементы в документе.
Стрелкой на изображении ниже отмечено подменю, в котором находятся некоторые полезные поля, позволяющие нам нормально позиционировать и декорировать текст.
Как изменить межстрочное расстояние
Чтобы изменить расстояние (отступ по вертикали) между строками, измените параметр Line Heigh.
Значение по умолчанию — Auto. Оно будет рассчитываться исходя из размера шрифта.
Допустимые значения: от нуля и до бесконечности (ну или почти бесконечности).
Если захотите снова установить значение Auto, просто оставьте это поле пустым.
Как изменить расстояние между абзацами
Чтобы увеличить или уменьшить расстояние между параграфами (иными словами там, где в тексте присутствует перенос), измените параметр Paragraph Spacing.
Значения Auto для этого параметра не предусмотрено, по умолчанию Figma ставит его равным 20.
Как изменить отступ у абзаца
Для того, чтобы сделать у абзаца отступ (там, где есть перенос текста), измените параметр Paragraph Identation.
Значение по умолчанию — 0.
Обратите внимание, что если вы выставите значение этого параметра больше ширины текстового поля, Фигма просто сдвинет целиком первую строчку на следующую, оставив первую строку пустой.
Как изменить расстояние между символами (кернинг)
Чтобы изменить расстояние между символами, измените параметр Letter Spacing. Этот параметр измеряется в процентах и по умолчанию равен нулю.
Выравнивание текста в Figma
Figma позволяет выравнивать текст внутри контейнера по вертикали и горизонтали:
Для изменения выравнивание переключите тумблеры параметров Text Align и.Align
Ресайзинг текста или как растянуть текст в Фигме
Один из наиболее важных параметров при работе с макетами. От него зависит то, как будет вести себя контейнер в зависимости от содержания — размера и количества текста.
Этот параметр скрыт в дополнительном меню и содержит три предустановки: Grow Horizontally, Grow Vertically, Fixed size.
Grow Horizontally
При выборе данного параметра Фигма будет растягивать каждый параграф в одну строчку, иными словами, его ширина будет определена количеством текста до переноса.
Учтите, что при смене параметра Resizing формат текста вы сможете вернуть назад только сочетанием ctrl+z / cmnd+z, а не выставлением прежнего параметра.
Также важно отметить, что если вы измените ширину текста после выставления Grow Horizontally, ресайзинг автоматически переключится на Grow Vertically.
Grow Vertically
Наиболее универсальное значение, которое выставляет автоматическую высоту контейнера при заданной вручную ширине.
При этом важно понимать, что нижняя часть контейнера будет заканчиваться строго там же, где и текст.
Fixed size
При этом значении текстовое поле регулирует ширину текста, но текст может выходить за пределы поля по вертикали.
Продолжение во второй части.
Текст в Фигма. Работа с текстом в Figma
В Фигме есть хорошие возможности для работы с текстом через специальный тип слоёв. Чтобы создать текстовый слой, нажимаем T и кликаем в нужное место, либо растягиваем блок как прямоугольник или фрейм и в нем уже можно писать.
Шрифты из Google Web Fonts
Круто: в Фигме по умолчанию доступна вся библиотека шрифтов Google Fonts,
Не круто: нельзя динамически просматривать как будут выглядеть эти шрифты. Чтобы увидеть, как будет выглядеть шрифт в проекте его обязательно нужно применить. не удобно — факт. Лично я просматриваю шрифты на самом сайте гуглфонтс, копирую название подходящего и применяю его в Figma.
Если ты используешь десктопную версию, то все шрифты с твоего компьютера подтянуться автоматически в фигму. подробно о загрузке локальных шрифтов в браузерную версию программы описано в отдельной статье http://figmaweb.ru/kak-zagruzit-v-figma-shrifty/
Режимы текстового слоя в Figma
• Horizontally — Текстовый блок обволакивает текст по горизонтали( если нет перехода на новую строку — текст выстроится в линию)
• Vertical — обводка текста по вертикали
• Fixed -фиксированный размер текстового блока вне зависимости от количества текста.
Так же ты можешь всегда уменьшить размер текстового блока до размера самого текста дважды кликнув по обводке
Основные настройки текста
Если выделен текстовый слой, справа мы увидим панель работы с текстом.
Справа вверху блока иконка Text Styles — всплывающее меню стилей текста. Подробнее о создании стилей для текста читай в отдельной статье.
Далее идут поля:
• Typeface — само название шрифта
• Weight – выбор начертания
• Size не знаю что это такое))
• Line Height – межстрочное расстояние. В мае 2019 пофиксили баги этой настройки и теперь она работает, как нужно.
• Letter Spacing — трекинг, межбуквенное расстояние или разрядка.
• Paragraph Spacing — отступ между параграфами, разделёнными обрывом строки, Enter
• Paragraph Indentation — красная строка, абзац.
Заходи на телеграмм канал — там еще больше полезного
Нравится Figma? — подпишись на нас в вк и инстаграме
Так же тут у нас есть возможность выравнивать текст по левому краю, центру и по правому краю. Но что более примечательно — есть настройки по вертикальному выравниваю, что просто невероятно круто и полезно.
В доп меню за тремя точками скрывается более подробная настройка выравнивания текста внутри блока по вертикали и горизонтали
Красным выделен блок в котором можно настроить все буквы заглавные, строчные, каждое слово с большой буквы, подчеркнутый и зачеркнутый текст.
Блок Font Features Содержит дополнительные возможности шрифта для…. блин, я не знаю для кого)) Это супер редко используемые фишки. Discretionary and historical ligatures — использовать ли дискретные и исторические лигатуры. Fractions – дроби. Соединять ли такие значения как 1/2 в один глиф с дробью. Выставление степеней и числовых подписей Numbers Тут можно выбрать размеры ячейки для каждой буквы. Например, сделать так, чтобы каждая буква занимала определенную ширину или чтобы занимала ширину равную своему размеру. полезно для табличек и перфекционистов, имхо.
Как создать стиль текста в фигме
В начале тебе нужно выставить все настройки текста(выбрать шрифт, его размер, начертание и тд). После этого кликаешь на вот эту иконку (выделена красным) после кликаешь на плюсик и даешь название своему стилю текста в Figma.
Полезные статьи по типографике для новичков Термины в типографике Основа типографики
Горячие клавиши в работе с текстом в Фигма
В начале ответы на популярные вопросы: Как вставить текст в Фигма? — CTRL+v (удивительно)
Как растянуть текст в Фигме? — выбирай scale tool (K) и растягивай текст, как нужно. Он будет растягиваться пропорционально.
ctrl+с копировать
ctrl+v вставить
ctrl+d сделать дубль (дубль появляется мгновенно поверх копируемого элемента)
ctrl+alt+c копировать свойства текста(цвет, тени, обводку, для шрифта — размер, начертание, керлинг и тд.)
ctrl+alt+v вставить свойства
ctrl+shift+v вставить текст со свойствами текстового блока, в который ты вставляешь сам текст
ctrl+b текст станет жирным
ctrl+i текст станет наклонным
ctrl+u текст станет подчеркнутым
Принципы использования межбуквенного интервала (letter spacing)
Один из моих любимых аспектов дизайна – это типографика. Почему? Все очень просто. Мы получаем достаточно большую часть информации, читая книги, блоги, статьи, рекламу и многое другое, разве это не дает повод уделить в дизайне шрифтам немного больше внимания? В типографике много разных аспектов, достойных внимания, но одной из вещей, которые помогли значительно улучшить качество моего дизайна, было осознание того, что расстояние между буквами играет большую роль. Я уверен, что постоянная практика и наблюдение за работами других дизайнеров помогут изменить и ваше отношение к типографике в своей дальнейшей работе.
Что такое леттер-спейсинг
Использование этой техники сводится к тому, чтобы добавлять дополнительное пространство между буквами, или, наоборот, уменьшать стандартное расстояние для достижения необходимого в дизайне баланса. Часто, многие путают леттер-спейсинг с кернингом. Но есть одно важное отличие: леттер-спейсинг применяется ко всей строке или тексту, в то время как кернинг – это избирательное изменение расстояния, в зависимости от размера и формы отдельной буквы.
Зачем менять расстояние между буквами
Межбуквенный интервал оказывает большое влияние на разборчивость и читабельность текста. В зависимости от размера, цвета и окружающего фона слова могут восприниматься совершенно по-разному, поэтому приспосабливая межбуквенный интервал к окружающей текст среде, вы помогаете читателю проще воспринимать написанную информацию. Самое интересное, что не производя изменений, видимых для обычного пользователя, вы, тем не менее, делаете свой дизайн более удобным и гармоничным, а это самое главное в нашей работе. Использование межбуквенного интервала не ограничивается удобным чтением. Если вы хотите, чтобы часть вашего текста выделялась, вы можете использовать, например, эффект “разряженного текста”, который достигается путем увеличения расстояния между буквами. Хотя этот прием и редко применяется в наше время, он все еще заслуживает внимания. Кроме того, имейте в виду, что создатели шрифтов думают о межбуквенном интервале и кернинге при разработке каждого нового шрифта. То есть нет острой необходимости применять эти приемы в каждом своем дизайне. Однако, чтобы понимать, когда это действительно нужно, важно усвоить базовые принципы, а также использовать качественные, хорошо продуманные шрифты (Google Fonts отличное место для поиска таковых).
Влияние межбуквенного интервала на читабельность текста
Удобство и простота восприятия текста, как я уже говорил, зависят от таких вещей как межстрочный интервал, длина абзаца, размер и тип выбранного шрифта, расстояния между буквами и многого другого. Что касается межбуквенного интервала, если вы только начинаете заниматься типографикой, то лучшее, что вы можете сделать, это не переборщить. Я имею в виду, что не стоит делать это расстояние слишком большим или слишком маленьким только ради красоты и уникальности, помните, что в конечном счете любой текст пишется для того, чтобы его читали, соответственно, нужно быть уверенным, что изменения, которые вы делаете со шрифтом, не усложнят его прочтение пользователями.
Заглавные буквы
Заглавные буквы создаются с учетом того, что они будут появляться в начале предложений или некоторых отдельных слов в сочетании со строчными буквами, поэтому, когда заглавные буквы находятся рядом (составляют одно слово или даже предложение), расстояние между ними, как правило, слишком мало. Таким образом, чтобы добиться лучшей читабельности, необходимо увеличить это пространство. Подобное правило относится как к большим, так и к маленьким размерам шрифтов.
Заголовки
- H1 — 96px — -1.5%
- H2 — 60px — -0.5%
- H3 — 48px — 0%
- H4 — 34px — 0.25%
- H5 — 24px — 0%
- H6 — 20px — 0.15%
- Subtitle — 16px — 0.15%
Если вы сейчас занимаетесь дизайном приложений или планируете делать это в будущем, то вот вам мой совет: что сэкономило мне много времени во время работы в “Messapps”, так это использование стандартных шрифтовых гайдов “Material Design” и “Apple”.
Основной текст
Если вы когда-нибудь что-нибудь читали о межбуквенном интервале, вы, вероятно, видели эту популярную фразу типографа Фредерика Гуди: «Любой, кто будет менять межбуквенный интервал у строчных букв, будет воровать овец» (ориг. «Anyone who would letter-space lowercase would steal sheep»). Однако есть мнение, что речь шла о готических шрифтах. Некоторые дизайнеры взяли его слова за правило и теперь никогда не корректируют строчные буквы. Основываясь на собственном опыте, и на опыте многих других шрифтовых дизайнеров, я не могу согласится с известными словами, потому что иногда незначительные изменения могут очень сильно повлиять на внешний вид всего текста. Давайте возьмем, к примеру, сжатые (Condensed) шрифты. При маленьком размере буквы расположены слишком близко друг к другу, так что текст становится очень сложным для восприятия. Увеличив расстояние между буквами всего лишь на 1,5%, вы увидите, что текст становится значительно легче для прочтения.
Также есть распространенное мнение, что не стоит использовать леттер-спейсинг в основном тексте. Одним из аргументов является то, что хорошие шрифты должны иметь разные варианты заголовков, основного текста и подписей. Хотя это и верно в теории, на практике это редко работает.
Возвращаясь к предыдущему примеру, в гайдах для шрифтов Roboto и San Francisco в основном тексте применяется дополнительный межбуквенный интервал. Стоит отметить, что San Francisco имеет модификации «SF Pro Display» для заголовков и «SF Pro Text» для основного текста, но для них также можно использовать изменения межбуквенного интервала, чтобы получить более гармоничный вид.
Поскольку существует большое количество разных шрифтов и для них нет единого правила в леттер-спейсинге, вы можете экспериментировать и делать именно то, что покажется вам красивым, удобным и правильным. Вам может помочь знание простых правил, которые укажут вам верное направление:
Межстрочный интервал
Если у вас межстрочный интервал более 120%, скорее всего отрицательное значение леттер-спейсинга приведет к разбалансировке всего текста. Чтобы этого избежать, нужно либо оставить значение без изменений, либо немного увеличить.
Белый текст на темном фоне
На темном фоне белый текст создаёт небольшую иллюзию того, что буквы расположены ближе друг-к-другу, чем они есть на самом деле. Чтобы сделать текст более понятным, я бы посоветовал вам немного увеличить расстояние между ними.
Главные значения для основного текста
Для основного текста вы можете следовать правилам, приведенным ниже, я протестировал их на разных типах шрифтов и могу сказать, что они работают в большинстве случаев:
- Body 1 — 16px — 0.5%
- Body 2 — 14px — 0.25%
Подписи
В отличие от заголовков и основного текста, шрифты меньшего размера не имеют большого количества вариантов межбуквенного интервала. Это обычная практика, когда для размеров шрифта, который меньше 13px, делают увеличенное пространство между буквами, чтобы сделать его более разборчивым. Но всегда есть исключения (гайд «SF Pro Text» предлагает использовать положительный межбуквенный интервал только для размеров в 11px и меньше), поэтому обязательно экспериментируйте с настройками, а не просто копируйте и вставляйте предоставленные значения.
Я предлагаю вам использовать параметры ниже как отправную точку для себя, а затем менять их в зависимости от того какой-шрифт, его размер, цвет и тп вы используете:
- Caption — 12px — 0.5%
- Overline — 10px — 1.5%
Финальный совет
Одна из вещей, которые помогли мне улучшить мои навыки в типографике, – это наблюдение за работой других дизайнеров и типографов. Рассматривая и расшифровывая их работы, вы сможете заметить некоторые нюансы того, что они делают, и как они относятся к шрифтам и своему дизайну, и это может сильно помочь вам в будущих проектах.
Об Авторе
Денис работает главным дизайнером в Messapps, компании, которая занимается UI/UX дизайном и разработкой приложений и сайтов. До того как Денис стал заниматься веб-дизайном, он учился звукорежиссуре в Нью-Йорке, Лос-Анджелесе и Москве. Сейчас он занимается дизайном мобильных приложений и сайтов для одной из топовых компаний в Нью-Йорке. Помимо этого он любит экспериментировать с типографикой и 3D в свое свободное время.