Гайд по работе с текстом и шрифтами в Фигме
В данной статье мы НЕ будем разбирать теоретические основы типографики и правила манипулирования шрифтами. Все это мы уже обсуждали в статье о шрифтовых парах и типографике.
Текущий пост будет иметь прикладной характер и расскажет про инструменты, которые есть в Фигме для создания текстового контента. Мы разберем различные типы шрифтов, их комбинации, что и где лучше использовать. А так-же что обходить стороной.
Выбор шрифта для контента разного типа
Весь текстовый контент на сайтах условно можно разделить на заголовки и основной текст. Так например к основному тексту можно отнести описание в карточке с товарами или параграф в статье. В свою очередь к заголовкам можно отнести пункты меню или название товара, в той же карточке.
Заголовки и основной текст обычно являются компонентами одного текстового блока. Поэтому шрифты, используемые для них, должны сочетаться друг с другом. А значит мы должны использовать парные шрифты для этих двух групп контента.
Связь Figma и Google Fonts
Первое о чем нужно знать при выборе шрифта. Фигма использует в качестве умолчательных шрифтов коллекцию Google Fonts. Поэтому, процесс выбора лучше вести не в самом редакторе Фигмы, а искать напрямую на сайте Google. Банально из-за лучшего интерфейса и большего числа фильтров.
Здесь легко найти шрифт под любую задачу, будь это рукописный, кириллический или декоративный шрифт.
Variable шрифты
Как известно, 2 шрифта отличаются друг от друга многими параметрами: шириной и высотой символов (кеглем), отступом между буквами и т.д. И когда мы выбираем шрифты для нашего сайта, то должны так подобрать пару, чтобы шрифт с одним набором параметров, гармонично смотрелся с другим. И даже если в теории вы знаете, какое соотношение свойств вы ищете, найти 2 и более шрифта с таким свойствами довольно проблематично. Но здесь есть лазейка.
Одним из интересных типов шрифтов, которые предлагает нам Google Fonts, являются variable шрифты. Они интересны тем, что в рамках одного шрифта, мы можем сами менять параметры, тем самым точно подгоняя ширину, высоту и другие свойства. А значит в наших силах, взяв за основу некоторый шрифт, модифицировать его таким образом, чтобы он идеально подходил для нашей задачи.
Одним из представителей, такого шрифта является Roboto Flex.
В левой части изображения можно увидеть панель с настройками – это и есть параметры, которые мы можем модифицировать. После того как вы подобрали нужную конфигурацию для шрифта вы можете использовать эти настройки как в Фигме, так и подключить в css.
В первом случае нам нужно перенести конфигурацию в панель настроек Figma. Для этого выберите нужный шрифт (В нашем случае Roboto Flex), нажмите на “. ” (три точки) и в открывшемся меню перейдите на вкладку “Variable”.
Для подключения в css нужно либо скачать шрифт с Google Fonts, либо воспользоваться ссылкой. Оба способа доступны в правом открывшемся sidebar-е.
Как подобрать пару для шрифта
Представим, что у вас есть на примете шрифт, который вам нравится. И вы хотите с одной стороны иметь его в проекте, но с другой найти пару. Которая сочеталась бы с ним. Для этой цели можно использовать генератор шрифтов. В сети их довольно много, но в основном это генераторы, которые сразу предлагают вам готовую пару, но есть и исключение. С помощью Font Joy, можно подобрать пару к уже имеющемуся шрифту.
Для этого выберите нужный вам шрифт в панели слева и зафиксируйте его, нажав на замочек. После чего нажмите на “Generate”. Как пишут сами разработчики, сервис сгенерирует 2 парных шрифта, при помощи ИИ. И да, данный ресурс создает сразу 3 парных шрифта (Для заголовка, подзаголовка и текста). Но если для вас это избыточно, всегда можно отбросить один из них.
Кроме Font Joy также есть Designs AI. По функционалу очень похожи, хотя у второго на мой взгляд более симпатичный интерфейс.
Рукописные, декоративные (и не только) шрифты
Если в вашем проекте планируется использовать, в некоторой степени “необычные” шрифты, то вы опять же можете обратиться к Google Fonts и при помощи фильтров выбрать нужные шрифты, однако даже здесь число этих фильтров довольно скудное (язык, с засечкам/без, рукописные). В общем-то на этом практически все.
Однако, также существует ресурс, с большей вариацией различных типов шрифтов. Это Fonts Online.
Здесь можно выставить фильтр на декоративные, кириллические, английские, курсивные шрифты, шрифты для заголовков и множество других подвидов. К сожалению далеко не каждый шрифт, который вы найдете будет находиться в коллекции Google Fonts, а значит он не будет доступен вам из коробки в Фигме. Поэтому здесь у вас 2 выхода:
- Брать выбранный шрифт и проверять, есть ли он у гугла
- Добавить этот шрифт дополнительно в Фигму.
Как добавить шрифт, если не хватает стандартных
По большому счету при создании макета в фигме вы можете пользоваться шрифтами только из 2-х источников. Это Google Fonts, как уже было много раз озвучено, и шрифты, которые установлены у вас локально на компьютере. В случае с веб версией, гугловые шрифты доступны сразу, а вот установленные у вас на локальном пк фигма не видит, для этого нужно установить специальное дополнение Font installer.
Устанавливаете его себе на пк и забываете про него. Оно работает в фоновом режиме и будет запускаться при старте системы. Теперь все что вам осталось, скачать нужный шрифт, кликнуть дважды по файлу и нажать кнопку “Install”, чтобы установить шрифт в систему. После этого перезагрузите окно браузера в Фигме и установленный шрифт будет доступен.
Ссылка — на цикл статей по Фигме.
7 распространенных проблем дизайна в Figma (и как их исправить)
С дизайном в Figma иногда возникают мелкие проблемы и неудобства, которые мы не умеем решать. Возникают они из-за автоматической компоновки, ограничений, групп, фреймов, компонентов или дубликатов. Здесь мы собрали практические способы преодоления 7 самых распространенных проблем дизайна в Figma, с которыми вы точно сталкивались.
Figma сделала дизайн доступным для миллионов, но даже самые опытные дизайнеры по-прежнему сталкиваются с проблемами. Независимо от того, новичок вы или ветеран дизайна, старая поговорка все еще актуальна: учитесь на своих ошибках. Вот описание проблем дизайна в Figma, причины их возникновения и способы устранения:
1: Выравнивание по неправильной стороне
Распространенные причины: автоматическая компоновка (Auto layout) или настройки ограничения (Constraint).
Если некоторые из слоев находятся не на той стороне или по центру после применения автоматического макета, вам стоит проверить две основные вещи.
Выравнивание текста
Для текстовых слоев стоит дважды проверить настройки выравнивания текста. Часто вы можете случайно дублировать другие текстовые слои с настройками, отличными от желаемых.
Автоматическая компоновка и изменение размера по горизонтали
Если это не сработает, вам нужно изменить настройки автоматического выравнивания макета (auto layout) и установить для всех дочерних слоев горизонтальное изменение размера с параметром «заполнить контейнер» (fill container).
Изменяйте настройки автоматического выравнивания макета, пока не будете довольны результатом. Настройки отображаются справа на панели «дизайн», когда выбран родительский фрейм.
Как только это будет сделано, убедитесь, что проблемные слои имеют поведение горизонтального изменения размера «заполнить контейнер». Как вы можете видеть выше, примеры с «фиксированной шириной» и «объем содержимого» не дают желаемых результатов с выравниванием по левому краю. Справа установка для них «заполнить контейнер» исправляет это.
Почему «заполнение контейнера» важнее всего
Заманчиво использовать выравнивание по левому краю и оставить слои с параметром «hug contents», но рассмотрим случай переноса текста. Выше левая сторона показывает использование подхода «hug», а правая сторона использует подход «fill». Обтекание текстом будет вести себя более естественно и не будет изменять размер родительского фрейма, если вы выберете подход «fill».
2: Не получается комбинировать различные варианты выравнивания или автоматического размещения (auto layout) вместе
Распространенные причины: настройки auto layout или неиспользование вложенных фреймов.
Поскольку автоматическая компоновка работает только с фреймами, необходимо использовать вложенные фреймы (создавать фреймы внутри фреймов). Это позволит вам смешивать слои с разным выравниванием и расположением. На изображении выше в первом примере используется один вид расположения слоев (вертикально сверху вниз). Во втором же примере благодаря «подфрейму», который включает надпись «Figma» и кнопку, стало возможным расставить слои как угодно.
После этого вам, вероятно, надо будет настроить параметры auto layout и параметры изменения размера по горизонтали, так как это часто влияет на ширину родительского фрейма. В составе горизонтальной строки большинство дочерних слоев у меня обычно используют параметр «hug», и один элемент — параметр «fill container». Таким образом, они всегда будут занимать все пространство родительского фрейма.
Не забывайте установить для ваших «строчных» элементов значение «заполнить контейнер» (fill container).
Когда я не уверен, я обычно выбираю в качестве слоя с параметром «fill» текстовый слой.
В качестве альтернативы, если вы не работаете с текстом и у вас есть несколько элементов фиксированной ширины для «заполнения» всей строки, попробуйте настройку режима интервалов. Обновление auto layout, выпущенное в мае 2022 года, позволяет вам установить поведение «space-between».
3: Изменение размера фрейма или артборда работает неправильно
Распространенные причины: использование групп вместо фреймов или настройки Constraint.
Обычно это происходит при использовании группы вместо фрейма. Группы будут масштабировать размеры слоев так же, как это работает в презентации Powerpoint. В то же время фреймы корректироваться в зависимости от настроек constraints (ограничений), как в браузере. Если вы не намеревались добиться эффекта искажения, лучше превратите свои слои во фреймы.
Если вы использовали фрейм, проблема может возникнуть именно с настройкой Constraint на дочернем слое. Отсутствие изменения размера можно исправить, обновив значения этих настроек. Отмените превращение во фрейм или измените размер родительского фрейма, чтобы он соответствовал содержимому внутри. Затем установите параметр «слева и справа» для Constraint, чтобы настроить ширину, и «сверху и снизу», чтобы настроить высоту.
Если это продолжает вас раздражать, стоит напомнить себе, когда использовать группу или фрейм.
Еще одна вещь, которую стоит упомянуть…
Если у вас в проекте есть дробные числа и значения после запятой, например 4,42, СТОП!
Если вы не уверены на все сто, что так и надо, старайтесь избегать этих дробных единиц. Хотя в CSS и есть функция, помогающая воспроизвести такие значения в браузере, она совместима только с 18,97% пользователей во всем мире. Не здорово, если мы пытаемся быть инклюзивными и доступными.
В общем, давайте без дробных чисел.
4: Растягивание слоев и компонентов при изменении размера
Распространенные причины: использование неправильного инструмента для ваших компонентов или слоев.
Если предыдущий совет не сработал, причина может быть в обычном использовании неправильного инструмента. Использование инструмента указателя (клавиша v ) лучше всего работает с компонентами, основанными на настройках ограничений (Constraint), чтобы сохранить размеры вашего контента (как если бы он был в интернете). Если вы не используете ограничения или это сложный объект, лучше использовать инструмент масштабирования (клавиша k ).
5: Отсутствие параметра «Hug contents» по горизонтали
Распространенные причины: не применяется auto layout.
Фрейм будет иметь поведение «hug contents», только если для него включена автоматическая компоновка (auto layout). В примере выше я не устанавливал автоматическую компоновку, потому что это был только один текстовый слой. Превращение его в компонент также конвертирует этот слой во фрейм, но вам все равно нужно добавить автоматическую компоновку, чтобы указать параметр «hug contents».
6: Дубликат или экземпляр компонента не работает или не выглядит так же
Распространенные причины: попытка редактирования экземпляра или неудачное дублирование.
Если это экземпляр главного компонента, вы можете проверить, в чем дело, сбросив все изменения в этом экземпляре. Выберите его, перейдите в меню «еще» справа от параметров экземпляра и выберите «reset all overrides».
Если это не работает или это не компонент, не волнуйтесь. Выполните следующие шаги:
- Используйте функцию «отменить» — работает, только если вы недавно редактировали элемент. Можно сделать копию своей работы с помощью Cmd + c ( Ctrl + c ) перед отменой, а затем вставить, как только вы найдете последнюю рабочую конфигурацию.
- Проверьте настройки изменения размера или ограничений — это займет немного времени, но часто они могут случайно измениться при двойном щелчке по слою или фрейму. Выберите проблемные слои и проверьте их настройки.
- Переделайте 🙁 — это может занять некоторое время, но если вы не можете найти проблемную конфигурацию, то может быть быстрее начать заново. Это отличная возможность создать компоненты, если вы еще этого не сделали.
7: Не могу редактировать свой компонент
Распространенные причины: попытка редактирования экземпляра.
Я сталкиваюсь с этим все время. Вечно забываю, что нельзя редактировать, добавлять или удалять слои в экземпляре. Главный компонент можно редактировать свободно, но в экземпляре можно изменить только содержимое слоев или скрыть слои с помощью переключателя видимости.
Существует 3 метода внесения необходимых изменений, а также краткая информация о том, когда использовать каждый из них:
- Создайте новый вариант — отлично, если вы будете использовать его несколько раз или хотите сохранить ход своих мыслей при дизайне. Сделайте дубликат главного компонента и «объедините их как варианты», если это еще не сделано.
- Разорвите связь с главным компонентом (Detach instance) — если у вас мало времени и, скорее всего, вы больше не вернетесь к этому, просто щелкните правой кнопкой мыши по элементу, разорвите связь экземпляра с главным компонентом (detach instance) и внесите изменения как обычно. Это не жульничество, а прагматичность.
- Замените связи — если ваш экземпляр использует вложенные подкомпоненты, вы можете выполнить для него замену экземпляра. Этот способ может быть неудобным и немного более запутанным, но он имеет место быть.
Заключение
Какой бы мощной ни была Figma, она все равно требует понимания того, как все различные инструменты и методы взаимодействуют друг с другом. После того, как вы сталкиваетесь с этими проблемами несколько раз, начинаете понимать, что все они сводятся к одной из следующих причин:
- Неправильная настройка автоматического макета или параметров изменения размера;
- Непонимание разницы между группами и фреймами;
- Просто пытаюсь отредактировать компонент ��
Сохраняйте спокойствие, ознакомьтесь с моими советами выше и продолжайте дизайнить будущее интернета.
Теги
Присоединяйтесь к нашему сообществу!
Получайте новости об обновлении программных продуктов, редизайнов, ребрендингов, а также множество полезных статей для начинающих дизайнеро раньше всех в нашем телеграм канале.
Почему не отображается текст в Figma?
Не видно текст в figma, не знаю, как исправить. Только начал работать с Figma. Такая проблема и в браузере, и в приложении. Скачиваю шаблон .sketch, загружаю, слева элемент текст виден, цвет текста и прозрачность правильная, но на самом шаблоне текста не видно, так происходит со всеми шаблонами
- Вопрос задан более двух лет назад
- 3251 просмотр
Комментировать
Решения вопроса 0
Ответы на вопрос 1
Скинь скрин экрана, что бы было видно слои и настройки этого текстового блока
Ответ написан более двух лет назад
Нравится 1 1 комментарий
Здравствуйте, можете мне тоже помочь с точно такой же проблемой? Не видно текст в figma, не знаю, как исправить. Только начал работать с Figma. Такая проблема и в браузере, и в приложении. Скачиваю шаблон .sketch, загружаю, слева элемент текст виден, цвет текста и прозрачность правильная, но на самом шаблоне текста не видно, так происходит со всеми шаблонами.
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- Figma
Почему завершенная Фигма занимает так много процессов в памяти?
- 1 подписчик
- 05 янв.
- 24 просмотра
Текст в Фигма. Работа с текстом в 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 текст станет подчеркнутым