Как сделать из шрифта вектор в фигме

Обновлено: 08.07.2024

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

если клинуть на стрелочку, которая располагается в правой части поля, то откроется список со всеми доступными шрифтами.
давайте найдем шрифт с названием Ubuntu и выберем его.
как вы видите внешний вид текста изменился.
теперь давайте воспользуемся другим способом, которые используется наиболее часто для выбора шрифта.
кликните в поле прямо на название шрифта, таким образом он выделиться серым фоном, теперь можно начать вводить название нового шрифта, например Roboto. Мы еще не ввели название шрифта полностью, но программа автоматически дописала его остаток, это значит шрифт найден. Теперь можно нажать клавишу Ввод, чтобы шрифт применился.

Следующее поле, в котором сейчас написано Regular, что в переводе на русский значит Регулярный или Обычный – позволяет задать начертание шрифта.

Справа от поля с начертаниями находится поле, в котором можно задать размер шрифта, давайте введем в него значение 18. Отлично, наш текст увеличился.

Letter Spacing – это поле следующее за интерлиньяжем и называется полем трекинга или полем межбуквенного пространства. Оно позволяет равномерно увеличить пространство между буквами. Обычно это необходимо тогда, когда вы набираете текст заглавными знаками. Введите какое-нибудь значение, чтобы посмотреть как это работает, но потом сотрите его, чтобы оно нам не мешало.

Следующее поле назвается Paragraph Spacing, оно управляет размером отступа между параграфами. Параграфом в программе Figma считается тот участок текста, который отделен от других строк нажатием клавиши ввода. Давайте сделаем текстовый блок состоящий из двух параграфов, для этого:

зайдем в режим редактирования текста кликнув дважды по нему, он автоматически выделится;
теперь нажмем клавиши сommand + C для Mac или ctrl + C для Windows чтобы скопировать выделенный текст;
затем кликнем в пустом месте в конце последней строки, чтобы перевести корретку набора текста в этом место;
теперь создадим параграф нажатием клавиши ввод.
Как видите каретка набора текста перенеслась на другую строку, теперь нажмите ctrl + V для Windows или commant + V для Mac, чтобы вставить скопированный ранее текст.
сейчас текст выглядит как один параграф, но давайте введем значение 18 в поле Paragraph Spacing на панели свойств.
отлично, как вы можете заметить теперь оба параграфа разделяются строкой.

И последнее поле называется Paragraph Indent, что в переводе на русский означает Красная строка, если вы помните из школы, то красной строкой называется первая строка абзаца и она может набираться с отступом слева для повышения читабельности.

за полями следуют две группы переключателей, которые управляют выравниванием текста.

следующая группа переключателей позволяет управлять выравниванием текста по вертикали и указывать для этого один из трех вариантов: по верхнему или нижнему краю и по центру.

Хочу сразу отметить для новичков, пока вы не пройдете курс по типографике — набирайте весь текст с выключкой по левому краю, это значительно упростит вам жизнь.

Мы рассмотрели наиболее популярные свойства текста, остальные используются незначительную часть времени и являются не обязательными, поэтому мы их рассмотрим в отдельных уроках.

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

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

Виды и характеристики плагинов

Чтобы охватить больше возможностей Figma, мы классифицировали плагины по направлению работы.

Графические

Blobs и Get Waves. Формирует элементарные абстрактные фоны с возможностью генерирования различных волн, когда в оформлении используются графики.
Image Tracer. Эффективный плагин, позволяющий мгновенно перевести растровое изображение в векторное.
Color Kit. В данном случае у вас есть возможность выбрать оттенки любой насыщенности с небольшим шагом.
Webgradients и uiGradients. Открывает пользователю целый перечень красивых и разноплановых градиентов.
TinyImage Compressor. Плагин, предназначенный для сжатия файлов. Часто данную опцию разработчики используют для создания картинок для интернет-порталов. Однако после 15 применений система предложит пользователю покупку подписки.
Image Palette. Предназначен для создания цветовой палитры, основанной на загруженной картинке. Также отлично работает на логотипировании.
Stark и Contrast. Корректоры контрастности цветов и элементов по отношению друг к другу.
Remove BG. Отличная возможность практически моментально удалить фон у любого изображения. Однако для применения данной опции вам необходимо будет завести собственный аккаунт, на котором вам дается не более 50 бесплатных манипуляций в год.

Текстовые генераторы

Chart и Charts. Разработаны специально для работы с диаграммами. Автоматически выставляют параметры на изображениях в соответствии с указанными данными. В большинстве своем применяется на стадии прототипирования с тем, чтобы наглядно предоставить клиенту данные для лучшего их восприятия.
Figmoji. Идеален для мгновенной вставки эмоджи, исключает необходимость искать подходящий смайл в браузере.
Iconify. Оптимален для поиска и добавления пиктограмм непосредственно в программу. В плагине присутствуют пакеты, при помощи которых вы можете быстро найти разные пиктограммы в едином стиле.
Unsplash. Представляет собой обширную библиотеку фото, при помощи которой вы найдете любое изображение и вставите его сразу в проект.
Mapsicle и Map Maker. В данном случае плагин помогает определить точные координаты точки на карте и сразу указать их в проекте. Здесь предусмотрено непосредственное взаимодействие и подгон параметров под свои задачи.
Table Generator. Генератор стандартных таблиц с возможностью регулировки их параметров, в том числе размеров элементов.
Content Reel. Позволяет практически моментально заполнить страницу портала заданным контентом с указанием таких кажущихся мелочей, как время, номер телефона и т.д.
Chroma. Вставляйте цветовой спектр в один клик. Просто выберите элемент с понравившимся колором и запустите плагин. Цвет немедленно появится в библиотеке.
Wire Box. Преобразует выбранный дизайн в вайфремы. Найдите понравившийся макет и запустите программу. Отлично работает схема в том случае, когда у заказчика уже имеется готовый дизайн, и вам необходимо его доработать.

Анимационные

GiffyCanvas. Формирует моментальные гифы внутри программы. Просто найдите пару интересных макетов, поставьте период их смены и цикличность.
LottieFiles. Интересный инструмент в Figma. Позаоляет анимировать макеты, то есть, предложить заказчику проект анимации.

Упорядочение

LilGrid. Удобный для систематизации элементов на сайте плагин. С его помощью вы быстро упорядочите информацию в соответствии с вашими требованиями. Останется только указать расстояние между деталями и количество колонок.
Design System Organized. Предназначен для группировки или разгрупировки разных объектов, а также перемещения их в библиотеку.
Design Lint. Работает в качестве поисковика элементов в выбранном макете, для которых вы еще не применяли редактуру. Быстро находит разногласия и исправляет их.
Viewports. Визуально показывает макет на разных устройствах. Необходимо настроить ограничения элементов, рассчитав их размер в зависимости от параметров окна.
Product Planer. Включает массу шаблонов, по которым можно планировать непосредственно в программе.
Rename It. В данном случае появляется возможность быстрого переименования слоев для экспорта макетов в прототипы.
Autoflow. Быстро показывает переходы между макетами за свет визуализации связей.
Time Machine. Автоматически копирует вариант, который вам требуется сохранить на другую страницу с возможностью присвоения имени и даты.

Самые полезные для разработчика текстовые плагины

Как уже было сказано выше, сегодня в Фигма существует более 400 плагинов. Самыми полезными из них по мнению разработчиков считаются следующие.

Аdd number to text

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

создайте поля в том количестве, которое вам необходимо;
добавьте названия;
выделите все области при помощи таблицы выбора, выскакивающей при нажатии ПКМ;
выберите из списка плагин.

Далее появляется всплывающее окно, в которое при помощи специальных символов можно вносить изменения.

Change Text

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

Content Buddy

Равно как и в предыдущем варианте производит замену текста. Однако данное действие можно производить не только со словами, но и с целыми предложениями. Для этого ПКМ щелкните по слою, в котором находится текст, откройте контекстное меню, а затем ПКМ нажмите на плагин.

Затем в открывшееся окошко введите нужный для замены блок и завершите работу. Система автоматически заменит указанную информацию.

Text Counts

Высчитывает символы и вводит данные о количестве букв и пробелов. Для получения статистики необходимо выделить заданный текст и запустить программу.

Typograf

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

Немного подробностей о Фигма

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

В программе достаточно просто просматривать все версии файла, начиная от исходной, заканчивая последними изменениями. Они сохраняются автоматически. Однако Фигма является условно бесплатной платформой. Она дает пользователю возможность протестировать свои возможности и оценить преимущества, позволяя сделать три проекта, воспользоваться тремя редакторами бесплатно. После этого вам нужно будет оформить платную подписку.

Если вам интересна сфера IT-технологий, и у вас есть желание получить интересную и высокооплачиваемую профессию, обратите внимание на обучение, которое предлагается на наших курсах программирования DevEducation.

Если вы работаете в области web-разработки, то рано или поздно, вам суждено будет познакомиться с Figma. Смиритесь с этим фактом и начинайте изучать. Я же попробую описать данный продукт, с точки зрения повседневного пользователя.

Для начала стоит упомянуть о парочке приятных моментов, за которые дизайнеры любят использовать Figma. Что ж приступим:

Самый неоспоримый плюс – халява

В отличие от повседневных продуктов дизайна, будь то Adobe пакет (Photoshop, Illustrator, Adobe XD … ), или Bohemian Coding (Sketch) эта программа условно бесплатная для пользователей. Разумеется за определенные финансовые вливания Вы получите дополнительные плюшки, но и без оных, продукт выглядит вполне достойно. Будем надеяться, что данная политика не поменяется, и правообладатели не начнут закручивать гайки. Аминь.

Наличие Мультиплеера

Для тех кто не в теме – это способность одновременно работать над одним проектом нескольким людям. И когда я написал одновременно, то это действительно так, я как верстальщик, вижу, как дизайнер(или даже дизайнеры) правят проект realtime прям на своем мониторе. Выглядит этот эффект как teamViewer. Дизайнер больше не хранит свои макеты локально, теперь это всё живет в облаках. Не нужно больше обмениваться скриншотами с менеджером, процесс создания проекта стал публичным, необходим только браузер с нормальной скоростью Интернета.

Задействован принцип кроссплатформенности

Стала не важна операционная система (Windows, MacOS, Linux) верстальщика и дизайнера. Они смогут работать над одним проектом без проблемы несовместимости ОС.

Удобные быстрые клавиши

Если вы уже привыкли работать с графическими редакторами посредством hot key для вас не составит труда быстро освоиться с новым функционалом.

Программа имеет довольно толковое описание клавиш быстрого вызова, и к тому же они сильно повторяют функционал клавиш Photoshop или Sketch, за что авторам отдельное спасибо. Все ведь ленивые и не хотят опять обучаться, как вызвать элемент Pen.

Возможность работы с векторной графикой

В Figma можно работать не только с растровыми изображениями, но и с векторной графикой, экспортируя и импортируя готовые решения в формат SVG. Эта фишка очень полезна, особенно если вы беспокоитесь о производительности своего web проекта, который можно очень сильно ухудшить, если вставлять не тот формат, или не того размера.

Возможность создания компонентов

Да, для верстальщиков поясню, что в дизайне тоже есть компоненты. И им тоже даровано свойство Наследования (привет ООП). К примеру можно создать типовую кнопку, а потом “продублировать ” её по всем артбордам. И потом, когда от заказчика придёт желание перекрасить все кнопки в розовый горошек, это всё решается за пару кликов (разумеется, если дизайнер умеет данным свойством пользоваться)

Подключаемые плагины

В Фигме есть функционал настраиваемых плагинов, и их там довольно много.

Представлены как продукты частных компаний, так и реализации open source сообщества. Пока что, из-за частых обновлений софта можно увидеть забагованость функционала, но я уверен, что это поправят.

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

Проблема с определением фактических размеров элементов и расстояния между ними

К сожалению, в процессе верстки постоянно сталкиваюсь с проблемою узнать реальное расстояние между элементами. Особенно плохо обстоят дела, если дизайнер забыл очистить картинки от прозрачного фона (transparent background) или некорректно прописал межстрочный интервал для текста.

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

Перекрытие и заблокированные слои

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

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

Проблемы с текстом

Первое, что сразу бросится в глаза, получив новый проект — вы не узнаете какие шрифты там используются до того момента пока не проклацаете все слоя с текстами. Не понимаю, почему это пока не реализовали, к примеру, как в Avocode
Также сталкивался с забавными случаями, что во вкладке Code написано к примеру:

а если открыть данный шаблон уже в режиме дизайнера, то уже можно наблюдать, что там Roboto Bold задействовано.

Семейство шрифта вроде ж одно и то, а только в процессе верстки его всё равно через свойство @font-face отдельно подключать надо, иначе эффекта как на макете не получить. И пока не затяните на свой проект, вы этого не узнаете (и можно долго играться со свойством font-width).

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

Отдельные танцы с бубном начинаются, если ваш дизайнер очень любит градиентные шрифты с тенями и обводками.

Тут в код, предоставляемый Фигмой, можно вообще не смотреть. Как вариант решения проблемы вы можете сохранить данный текст в SVG (иногда это дешевле чем импортировать к странице новый шрифт), ну а если всё-таки будет необходимость заниматься решением данной проблемы на серьезном уровне, то опять забирайте макет на свой личный проект.

Тут правда у меня возникли вопросы, почему возле ползунков смены значения градиента разработчики поленились вывести хотя бы процент текущего значения, не говоря уже про угол направления градиента, и мне как верстальщику приходиться самому угадывать какое значение надо будет поставить в background: linear-gradient, а потом починить это через background-clip: text; Собственно свойство text-stroke в коде фигмы я пока тоже не встречал, хотя возможно это связано что оно ещё не во всех браузерах зеленое.

*Делитесь своими мнениями в комментариях, почему это может быть так сложно реализовать?

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

Работа в фигме расхолаживает дизайнера

Возможно, конечно, это лично моё субъективное мнение, но макеты, которые отдаются дизайнерами под верстку сайтов, ниже качеством по сравнению с макетами, выполненными в Photoshop или Sketch. (* я прям чувствую, что сейчас у кого-то подгорело)

Там дизайнер посчитал, что называть слои уже не имеет смысла. Пхх там ведь и так всё видно. Неважно, что при экспорте файлов у верстальщика будет Group1.jpg Group1(1).jpg….и т.д. Разберётся.
Там слои забыл объединять в группы, и что б нормально забрать картинку, как она выглядит, например, с наложенной маской, опять надо забирать на свой проект, и самостоятельно группировать.
Ещё классика, это вместо определенно цвета, использовать изменение свойства прозрачности (opacity) когда это целесообразно, и нет.

И ладно, если с текстом это ещё может нормально прокатить, ленивый верстальщик с шестнадцатеричного представления цвета

скорее всего перейдет к rgba представлению

А вот если дизайнер решит делать такую штуку к блоку элементов (там где про background-color, color, background: linear-gradient ….), при этом, половина элементов будет с прозрачностью, а вторая, нет, то тут можно во вкладку Code и не смотреть.

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

Это очень печально, но пока в Фигме нет возможности адекватно менять визуальное представление рабочего пространства под свои нужды. Особенно остро это стает когда пользуешься приложением, а не браузерной версией где можно извращается, ставя поверх браузера какие-то дополнения, плагины. Разуметься присутствуют плагины умельцев, но поскольку Фигма очень часто апдейтиться, то плагины за ней не успевают.

Лучше б конечно, чтоб за данный функционал отвечали те, кто пишет продукт

Личные попытки поставить Темную тему. (Windows 10, Chrome 76) были печальны.

*Возможно, у владельцев Mac-ов дела обстоят лучше. Делитесь в комментариях…

О том почему это важно и полезно можете посмотреть в презентации Тёмная сторона веба, Никиты Дубко Надеюсь что поправят. Всё-таки дизайнеры — тоже люди, и им тоже надо дать возможность комфортно работать 8 часов в сутки 5 дней в неделю.

Вот такой вот кратенький обзорчик Figma у меня вышел с пожеланиями и ворчанием.

Надеюсь, что мой пост прочитает кто-то из разработчиков данного продукта и сможет его улучшить. В любом случае за данным продуктом я вижу будущее, и желательно, чтоб он развивался в правильном направлении.

Здравствуйте! В этом уроке мы рассмотрим, как работать с текстом в редакторе Figma. По умолчанию вам доступна библиотека шрифтов Google Fonts, если вы хотите загружать свои шрифты в Фигму — скачайте десктопную версию Фигмы или установите Font Installers, чтобы загружать их в браузер.

Инструменты для работы с текстовым слоем стандартные: начертание, размер, выравнивание текста, высота строки, отступ между параграфами и красная строка.

Если будете переносить дизайн в Тильду, указывайте в процентах межстрочное расстояние (0-160%) и межбуквенное расстояние (0-30%).

В меню Advanced Type имеются 3 типа изменения размера текстового блока: 1) Width, где ширина подстраивается под контент, 2) Fixed, чтобы задать блок фиксированной ширины 3) Height, чтобы подстроить высоту текстового блока под его контент.

Всегда создавайте отдельные текстовые блоки для заголовка и основного текста. Так их удобнее редактировать.

В Фигме можно перевести шрифт в кривые и создать необычный объект вашего дизайна. Выберите текстовый слой, пункт Flatten и дважды кликнете на текст.
Изменённый шрифт можно сохранить как SVG-файл и вставить в дизайн.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Квадрокруг — особая форма значка, которая становится все более популярной в UI-дизайне. Часто используется в приложениях iOS.

В Figma создать такой элемент просто.

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

Совет 2: Использовать имя цвета вместо HEX

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

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

Совет 3: Как быстро переименовать фрейм

Как правило, для изменения имени фреймов используют горячие клавиши CTRL + R (для Windows) и CMD + R (для iOS). На самом деле достаточно дважды щелкнуть на текущее имя фрейма на холсте, и оно будет доступно для редактирования.

Совет 4: Как отрегулировать размер текстового слоя в соответствии с содержимым

Чтобы размер текстового слоя имел ту же ширину, что и его содержимое, достаточно двойного щелчка по правому краю слоя. Все произойдет автоматически.

Совет 5: Как обойти ограничения при изменении размера фрейма

В Figma при изменении размера родительского фрейма все остальные внутренние элементы автоматически расширяются или сворачиваются. Однако это не всегда уместно.

Чтобы обойти эту автоматическую настройку, необходимо перетаскивать край фрейма, удерживая клавишу CTRL (для Windows) или CMD (для iOS). Благодаря этому ограничения будут игнорироваться. Изменение ширины или высоты фрейма никак не отразится на элементах внутри.

Совет 6: Предварительный просмотр элементов в режиме контуров

Режим контуров (outline) полезен, если нужно убедиться, что структура компонента или фрейма выполнена правильно.

Нажмите клавиши CTRL + Y (для Windows) или CMD + Y (для iOS), чтобы активировать режим контуров. Нажмите ярлык еще раз, чтобы выключить его.

Совет 7: Как копировать и вставлять эффекты

Чтобы скопировать эффект или стиль в Figma, щелкните край строки с параметром. После этого скопируйте с помощью клавиш CTRL + С (для Windows) или CMD + С (для iOS), затем выберите целевой слой и нажмите CTRL + V (для Windows) или CMD + V (для iOS).

Такая функция существенно экономит время.

Совет 8: Как группировать с помощью фрейма

Используйте комбинацию клавиш CTRL + ALT + G (для Windows) или CMD + OPTION + G (для iOS) чтобы объединить элементы внутри фрейма, а не только стандартную группу.

Группировка фреймом предпочтительнее стандартной группы, так как впоследствии элементы можно быстро превратить в компоненты, использовать автоматический макет и так далее.

Совет 9: Как заменять компоненты функцией стрелок

Заменять компоненты и перемещаться по ним можно с помощью функции стрелок. Это удобнее, чем щелкать мышкой по каждой позиции меню.

Совет 10: Как настроить переключение между вариантами

Дополнительный совет: как перемещать компоненты между документами

До августа 2021 года в Figma не было простого способа перенести компоненты в другую библиотеку. Для этого необходимо было воссоздавать их.

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

Читайте также: