Лучшие кириллические шрифты в Figma
За несколько лет работы веб-дизайнером, накопилась некоторая коллекция классных кириллических шрифтов, с которыми мы сейчас познакомимся.
Playfair Display
Бесплатный шрифт, который по умолчанию встроен в Фигму. Шрифт с засечками, который подойдет для дорогих ниш.
Gilroy
Платный шрифт. Я его применяю в деловых тематиках: сложные многостраничные сайты, сайты конференций, сайты крупных компаний. Обладает легкой структурой символа, что позволит пользователям не уставать во время чтения.
Gotham Pro
Бесплатный и универсальный шрифт, который я использую не только в вебе, но и в полиграфии. Его можно назвать «рабочей лошадкой», которая будет хорошо смотреться в большинстве композиций.
Stolzl
Платный, легкий шрифт. Подходит для молодежных тематик, а также для композиций, использующих много воздуха.
P22Underground
Тоже очень легкий шрифт, но один из самых строгих в категории «Без засечек». Его классно использовать в «дизайнерских» макетах, если композиция хаотичная. Это дает классный контраст в макете.
Это были основные шрифты, которыми я (автор figma.info) пользуюсь часто. Передо мной не стояла задача просто показать вам список шрифтов. Важно понимать: какие эмоции вы хотите передать с помощью текста, а затем уже проблематика выбора уходит, так как у вас есть мой вариант, на который можно ориентироваться; после этого просто находите похожие шрифты, или выбираете мой вариант.
Для того чтобы установить шрифт в Figma – я крайне рекомендую скачать десктопную версию, установить шрифт в систему и затем Фигма сама его загрузит к себе.
Не рекомендую использовать онлайн версию, но если вы хотите установить шрифт в браузерную версию Figma, то вам нужно скачать и установить Figma Font Helper.
5 полезных плагинов для Figma: работа с текстом и шрифтами
Как расположить текст вокруг фигуры, подобрать шрифтовые пары и быстро настроить стили шрифтов на макете.
В Figma есть много инструментов для работы с текстами, но некоторые задачи невозможно решить её стандартными инструментами. В этом случае вам помогут плагины, которые расширяют и упрощают функционал графического редактора.
Рассказываем, какие плагины для Figma помогут вам работать с текстом и шрифтами.
To Path
Плагин располагает выделенный текст на кривой или по краю любой стандартной фигуры:
Плагин разделит каждое слово на отдельные слои с буквами и разместит их по контуру фигуры или кривой:
Копирайтер, визуализатор, модель. Пишет статьи, стилизует съемки и участвует в них, изучает арт-критику в СПбГУ.
Better Font Picker
В Figma не очень удобно выбирать шрифты, так как они не отображаются на макете сразу. С помощью плагина Better Font Picker вы сможете в отдельном окне посмотреть, как выглядит каждый шрифт, и быстрее принять решение — использовать его или нет:
Soroka
Чтобы не тратить время на подбор шрифтовых пар вручную, воспользуйтесь плагином Soroka. У него есть большая база из сочетаний бесплатных шрифтов Google Fonts, которые можно использовать в вашем макете:
Первый выбранный шрифт будет использоваться в заголовках, а дополнительный — в основном тексте:
Fontiger
Разработчики не любят, когда в макете остаются дробные значения кегля. Они отображаются не в каждом браузере, а доставать дизайнера вопросами о каких-то незначительных пикселях долго. Чтобы проект из-за этого не тормозил, перед передачей макета в разработку воспользуйтесь плагином Fontiger — он автоматически округляет дробное значение кегля до ближайшего целого:
Плагин учитывает текстовые модули только внутри фреймов. Если текст не стоит внутри фрейма, его кегль не изменится.
Font Master
В Figma очень удобно следить за используемыми цветами — достаточно выделить все объекты на макете и посмотреть на панель справа. Но кегль, интерлиньяж, кернинг и шрифты таким образом не отображаются. Плагин Font Master решает эту проблему — он показывает все используемые настройки текста на макете и при необходимости создаёт из них полноценный стиль.
Плагин покажет все сочетания шрифтов и кеглей и где они были использованы. Из любого сочетания можно сделать полноценный стиль:
обложка: Катя Павловская для Skillbox Media
Шрифты в Figma: особенности, применение и выбор
Шрифты — одна из важных составляющих работы над проектом. Рассказываем, какие возможности для использования шрифтов есть в Figma.
Применение и выбор шрифтов
Figma — это инструмент для веб-дизайна, поэтому к нему подключены шрифты Google Fonts. Кроме того, можно локально установить другие шрифты и использовать их для своих проектов.
Разберемся, как работать со шрифтами в Figma и какие есть особенности в их использовании.
Шрифты в Figma можно применять ко всему текстовому объекту, нескольким объектам, словам или выделенным буквам внутри объекта. Рассмотрим на примере.
Выберите один или несколько текстовых объектов.
Шрифты отображаются на панели справа в блоке Text. В первом поле вы увидите текущий шрифт. У меня это Montserrat.
Чтобы изменить гарнитуру шрифта, нажмите стрелку «вниз» справа от шрифта. Откроется Font Picker (список шрифтов) — выберите нужный.
Если вы знаете правильное наименование шрифта, то можете выбрать гарнитуру, не открывая Font Picker. Для этого нажмите на поле выбора и введите с клавиатуры нужное вам название — вот так:
Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикует переводы на Хабре.
Курс «Графический дизайнер с нуля до PRO»
Попробуйте курс по графическому дизайну бесплатно
Использование локальных шрифтов
Если вы хотите использовать в Figma дополнительные шрифты, которые не включены в список веб-шрифтов Google, загрузите нужные на компьютер и берите их.
В этом случае браузерная версия отличается от десктопной.
Установка Figma Font Helper
Есть два способа установки. Первый — через свою учетную запись в браузерной версии Figma.
Нажмите на свой логин в верхнем левом углу и выберите Account Settings.
Прокрутите вниз до раздела Fonts и нажмите на кнопку Download Installer to enable local fonts, чтобы скачать инсталлятор для локальных шрифтов.
После того, как вы скачали Figma Font Helper, запустите установщик и следуйте инструкциям на экране. Устанавливается буквально в два клика. Чтобы проверить работу инсталлятора, зайдите в профиль браузерной версии. Вы увидите следующую картину:
Второй способ еще проще. Вам нужно скачать Figma Font Helper с официального сайта и установить.
Управление отсутствующими шрифтами
Очень полезная функция при работе со шрифтами в Figma.
Если в файле используется шрифт, недоступный вам через средство выбора шрифтов (через веб-шрифты Google или локальные источники), то появится такое предупреждение.
Такое предупреждение будет появляться каждый раз, когда вы попытаетесь редактировать текст, шрифта которого у вас нет.
Это случается, если над проектом работают два дизайнера и один из них использует локальный шрифт, которого нет у второго. Либо дизайнеры используют разные версии одного и того же шрифта.
Чтобы редактировать все текстовые объекты в проекте, нужно установить или обновить недостающие шрифты на вашем устройстве. Вы также можете выбрать другой подходящий шрифт из уже имеющихся, но при этом помните, что шрифт поменяется и для вашего коллеги.
Если вы хотите заменить весь текст в проекте, который использует недоступный шрифт, это можно сделать через модальное окно Missing Fonts. В нем будут перечислены все шрифты, которых вам не хватает. Вместе с гарнитурой шрифта вы увидите стиль, который тоже можно будет заменить.
Откройте выпадающий список и выберите нужный шрифт.
Figma автоматически сопоставит стиль выбранного шрифта со стилем отсутствующего, но вы можете сделать это сами.
После того, как вы выбрали шрифт, нажмите кнопку Apply для завершения замены.
Все ваши тексты в проекте обновлены.
Использование иконочного шрифта
Figma поддерживает популярный и простой в использовании набор иконок Font Awesome. Если вам не подходит этот набор и вы хотите использовать другие иконки, создайте свой иконочный шрифт любым удобным способом — например, с помощью сервиса IcoMoon, и установите локально на вашем устройстве. После установки он будет доступен в Figma вместе с другими шрифтами.
Остановимся подробнее на использовании иконочных шрифтов на примере Font Awesome.
Font Awesome — иконочный шрифт в Figma
Создайте текстовый объект в Figma.
В разделе Text на панели свойств в Font Picker выберите Font Awesome 5 Brands.
Перейдите по ссылке https://fontawesome.com/cheatsheet — вы попадете на страницу таблицы иконочного шрифта, который по умолчанию интегрирован в Figma.
Этот шрифт разделен на три большие категории:
Выберите подходящую иконку, выделите и скопируйте ее в буфер обмена — Ctrl+C.
Затем переключитесь в Figma и вставьте эту иконку в созданный ранее текстовый объект — Ctrl+V.
Теперь вы можете настраивать эту иконку по своему усмотрению как обычный шрифт.
Также в Font Awesome можно выбрать стиль иконок — Regular или Solid.
Regular — контурное начертание, Solid — заливка.
Заключение
Если вы используете для работы браузерную и десктопную версии Figma, то должны понимать, как они взаимодействуют со шрифтами в системе и какие существуют особенности использования локальных шрифтов. Но это еще не все: есть текстовые стили и компоненты, которые можно гибко использовать в работе. Как — узнайте на курсе Skillbox.
Figma
Полное руководство по cамому прогрессивному инструменту для дизайнеров: навыки быстрой работы с высоким качеством. На протяжении курса вы с нуля создадите проект, при создании которого задействуете все возможности Figma.
Новости
+7 (499) 444-90-36 Отдел заботы о пользователях
Москва, Ленинский проспект, дом 6, строение 20
Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪
Топ 30: Самые рейтинговые шрифты в 2020 году
Мы постарались собрать для вас самые лучшие шрифты в этом году. Благодаря нашей рейтинговой системе вы поймете какие шрифты выбирают люди для своих проектов. В данный момент самые популярные шрифты Sans Serif. Но несколько шрифтов есть и отсюда: Slab Serif. Это не означает, что другие типы шрифтов совсем не популярны. Благодаря рейтингу мы можем видеть, что в этом году тренды/рейтинги смотрят в сторону данных шрифтов. Н ничего не вечно и то, что было когда-то очень рейтинговым может в будущем стать трендом в дизайне. Может случится, что в следующем году мы увидим в топах шрифтов шрифты с засечками (Serif), или курсив.
Thin, Thin Italic, Light, Light Italic, Regular. (42)
Thin, Thin Italic, Ultra Light, Ultra Light Italic, Light. (16)
Text Light, Text Light Italic, Text Regular, Text Italic, Text Medium. (21)
Light, Light Italic, Regular, Regular Italic, Medium. (12)
Display Thin, Display Light, Display Regular, Display Italic, Display Bold. (11)
Light, Light Italic, Regular, Italic, Medium. (20)
Thin, Thin Italic, Extra Light, Extra Light Italic, Light. (16)
Light, Light Italic, Regular, Italic, Semibold. (40)
Thin, Extra Light, Light, Regular, Bold. (6)
Thin, Thin Italic, Extra Light, Extra Light Italic, Light. (16)
Thin, Light, Regular, Medium, Bold. (6)
Thin, Book, Light, Regular, Bold. (5)
Thin, Thin Italic, Ultra Light, Ultra Light Italic, Light. (16)
100 Thin, 100 Thin Italic, 300 Light, 300 Light Italic, 500 Medium. (10)
Thin, Thin Italic, Ultra Light, Ultra Light Italic, Light. (20)
Regular, Italic, Bold, Bold Italic (4)
Light, Medium, Demi, Bold (4)
Light, Regular, Italic, Semibold, Bold. (6)
Figma: 20 полезных плагинов
Плагин для Фигмы создан, чтобы улучшить функционал сервиса и сделать разработку шаблона более быстрым. Именно отсутствие расширения для системы было недостатком сервиса, которое неоднократно подвергалось критике дизайнеров. Но сейчас времена изменились.
Разработчики прислушались к мнению аудитории и в 2019 году показали новое обновление редактора в режиме бета-тестирования. Улучшенная версия имеет поддержку плагинов, а это значит, что каждый, кто владеет java script и знает html, способен разработать свое расширение. Все функции работают через API, то есть новую разработку можно легко установить и удалить. Каждый установленный модуль открывает дополнительные возможности сервиса Фигма. В этой статье мы перечислим способы улучшить функционал сервиса.
Полезные плагины
С момента обновления функции API, программисты стали добавлять новые расширения, которые помогают ускорять процесс разработки макета для сайта. На 2020 год в сервисе уже было добавлено 420 плагинов. Перечислим самые полезные из них.
№1. Аdd number to text – плагин Фигма текст
В сервисе присутствует расширение для оформления контентной части. Допустим, при заполнении карточки товара требуется перечислить характеристики продукта, в таком случае вам понадобится plugin “Аdd number to text”. Он способен легко создавать нумерованные или алфавитные списки.
Работает он следующим образом: для начала нужно создать определенное количество полей, число зависит от того, сколько характеристик в одной карточке. Добавим название, потом выделяем все области, нажимаем правой кнопкой мыши и в раскрывающемся списке выбираем “Add number to text”.
Появится всплывающее окно и, используя спецсимволы, туда можно вносить изменения.
Дополнительные команды, это арифметические формулы, при их использовании можно высчитать определенное значение. Существуют математические функции, такие как random и round.
С помощью кнопок, можно быстро вызвать нужную, команду. Пример ниже.
Параметры под кнопками, означают способ отображения. Установив флажок в разделе “Increase number” перечисление будет наоборот, начиная с максимальной позиции и заканчивая минимальной, например 5,4,3,2,1.
Start at – это стартовая позиция нашего списка, здесь мы указываем число, с него будет начинаться перечисление. Если присутствуют буквенные значения, то они также будут стартовать с указанной позиции. Укажем – 3, то отобразиться третья буква английского алфавита.
Формирование списка завершается кнопкой Apple. После того как список был сформирован, то рекомендуется его объединить в целый объект. Делается это с помощью TextCutter, у него присутствует подсписок, там два значения Join (присоединить) и Split (разбить на строки). Чтобы объединить все слои нужно их выделить, потом нажать правой кнопкой мыши и воспользоваться TextCutter, как показано ниже. Сначала убедитесь, что он установлен, взять его можно с официального источника.
Помимо нумерации, можно добавить и маркеры (точки), делается это с помощью Simple Bullets. В отличие от “Add number to text”, здесь можно разместить все в одном текстовом поле. Чтобы поставить точку следует создать несколько строк, потом выбрать из контекстного меню – Simple Bullets, никаких дополнительных параметров, он не содержит.
№2. Change Text – плагин Фигма текст
Находит и заменяет слова. При запуске открывается всплывающее окно с двумя полями. В первом задаем, слово которое нужно найти, во втором пишем новое значение, потом нажимаем Update и произойдет автоматическая замена, алгоритм обнаружит схожесть с первым запросом и поменяет его на второй. Если требуется произвести подмену в нескольких текстовых полях, тогда выбираем их мышкой и аналогично производим действия.
№3. Content Buddy
Как и предыдущий вариант заменяет text, но действие происходит не конкретно со словом, а с предложением целиком. Щелкаем по слою, где есть текст, нажимаем правую кнопку мыши, открываем контекстное меню и кликаем по Content Buddy.
Дальше нажимаем на текстовый блок и в строке “Replace To”, добавляем новой контент. После этого жмем Replace, замена завершена.
№4. Text Counts
Подсчитывает символы и выводит данные, сколько букв, слов и количество пробелов. Чтобы получить статистику нужно перейти внутрь слоя, выделить text и потом уже воспользоваться плагином.
№5. Typograf
Преобразует предложения в хороший типографический текст и заменяет некоторые символы. Например, если написать два минуса подряд, а потом использовать Typograf, то получится длинное тире. Вот еще несколько примеров.
“Типограф” работает в фоновом режиме, меню настроек нет, просто выберите описание которое хотите подвергнуть типографической правке и через контекстное меню вызовите “Typograf”, после этого некоторые знаки заменяться на спецсимволы.
Если требуется быстро подобрать описание в контейнерах, то можно воспользоваться Lorem, он умеет добавлять небольшие абзацы в слои. Данный plugin существует в двух видах “обычный” и “Generator”. В первом случае потребуется создать текстовые поля, чтобы туда сгенерировать content, а “Генератор” это делает в автоматическом режиме. Чтобы воспользоваться обоими инструментами, нужно перейти в меню и там их выбрать. На скриншоте они обозначены цифрами.
Два варианта Lorem Ipsum, подойдут дизайнерам для быстрого заполнения макета текстом и просмотра верстки.
№7. Nisa Text Splitter
Умеет разделять и объединять текстовые поля. Допустим, существует одна общая колонка, которая нужно разбить на две колонки и вторую расположить рядом.
С этой задачей справится Nisa. Чтобы сделать разделение потребуется создать разрыв в списке, как показано на скриншоте. Для этого установите курсор в строке и нажмите Enter.
Вызываем настройки с помощью пункта меню “Nisa Text Splitter”, и нажимаем Columns как показано ниже.
Остальные действия Join(Объединить два поля в одно), alignment (выровнять по горизонтали и вертикали). Также можно произвести разные манипуляции (сортировка, поменять местами выделенные столбцы “Reverse”).
№8. Morph
Предназначен для создания интересных эффектов, например: Skeuo, Neon, Glitch, Reflect, Glassy и Gradient. Преобразование происходит в несколько кликов. Выберите любой объект – квадрат, окружность, слой, содержащий text, и примените над ним следующие действия.
В итоге в панели Layers, создадутся слои с эффектами, и вы увидите результат. Всего несколько щелчков, чтобы получить красивую надпись.
Для быстрого вызова существует меню в списке. Но если требуется графически оценить, как будет выглядеть эффект, в этом случае следует нажать “Open morph”. При выборе эффекта откроется набор кнопок и ползунков, которые можно менять на свое усмотрение и сразу видеть изменения.
“Морф” подойдет для тех, кому нужно быстро украсить макет и подобрать необычное графическое оформление. Все эффекты 100 % бесплатные, регистрации тоже не требуется.
№9. Content Reel
Заполняет блоки разной информацией, это могут быть картинки, имена, телефоны, номера и иконки. Чтобы применить функцию Reel нужно выбрать один или несколько объектов, вызвать меню правой кнопкой мыши, и щелкнуть по Content Reel после этого появится окно, где нужно перейти в одну из четырех вкладок.
Здесь присутствует список графических и текстовых элементов, нажимаем на любой и примитивы автоматически заменяться изображениями, а инструмент text, можно заполнить адресом, именем, номером телефона или иконками. Когда нужно добавить данные сразу в несколько прямоугольных форм, в этом случае следует выделить их мышкой в Content Reel и нажать “Apple All”. На скриншоте показан пример заполнения нескольких блоков разной информацией, кроме того интерфейс переключен во вкладку Icons, которую тоже можно использовать для добавления иконок.
Набор постоянно пополняется новым графическим контентом, пользователь также может принять участия, для этого существует вкладка “Add”.
Данный плагин пригодится, если требуется быстро заполнить макет случайной информацией и посмотреть, как она будет отображаться в редакторе. Так же с помощью встроенного auto layout в фигме, можно произвести выравнивание по горизонтали и вертикали.
№10. Iconscout – плагин Фигма иконки
Позволяет вставлять миллионы высококачественных иконок как 2d, так и 3d, чтобы воспользоваться данным расширением нужно пройти регистрацию на официальном сайте и начать добавлять.
№11. Iconify
Предлагается более 50000 иконок, чтобы их добавить нужно перейти в редактор Iconify и перетащить на рабочую область иконку или нажать “Import Icon”. Присутствует также дополнительные настройки, где можно сменить цвета и увеличить размер.
№12. Icon resizer
Простой plugin позволяющий менять размер фрейма. Гораздо удобнее работать, если значки одинакового размера. Управление довольно простое – выделите один frame или несколько, потом воспользуйтесь Icon resizer, установите размеры и нажмите “Run”.
№13. Better Font Picker – плагин для Фигмы, шрифты
Показывает существующие шрифты с предварительным просмотром. Для этого нужно вызвать plugin и выбрать подходящий шрифт. Открытое окно программы показано на скриншоте.
№14. Figmotion – фигма плагин анимация
Создает эффект движения у объектов в проекте. Для перемещения используются настройки объектов. Чтобы передвинуть элемент по оси координат, нужно изменять параметры x,y, кроме того еще доступны свойства width, height, opacity (прозрачность), border radius (округлить края), rotation (поворот), fill color(залить цветом), stroke width и stroke color (поменять ширину и цвет обводки).
Рассмотрим несколько примеров, как работать с figmotion. Добавим в проект frame и примитивы, например Rectangle (прямоугольник), Star(звезда). Нажмем в левом углу логотип программы и откроем меню, где наведем курсором на figmotion, выдвинется подменю, кликаем на втором пункте.
Запуститься панель, здесь следует указать frame, где будет происходить анимация.
Сделаем три действия: плавное появление квадрата, вращение звезды и смещение текста из-за края на рабочую область.
1. Opacity (прозрачность) – параметр подойдет для rectangle, чтобы примитив плавно появился во фрейме. Рядом с параметром устанавливаем точку и делаем настройки как показано ниже.
Сверху есть временная шкала, с помощью неё перемещаемся на 1000ms, это одна секунда. Для удобства можно воспользоваться свойством, расположенным в левом углу, нажимаем “ромбик” opacity, чтобы шкала автоматически оказалась на нужной отметке, последовательность действий смотрите ниже.
2. Rotation – это свойство подойдет для вращения объекта. Допустим звезду нужно повернуть вокруг своей оси. Стартовые параметры такие же, как и с прямоугольником.
Задаем ms в левом углу, чтобы сразу попасть на точное время, к примеру, 2000 ms. Нажимаем “ромбик”, и отрезок автоматически переместиться в нужное место. Дальше в всплывающем окне настраиваем опции.
3. Выдвигающийся text из-за границы холста – здесь требуется изменять “x”. Следует установить отрицательное значение, чтобы наше сообщение оказалось за границей.
И последнее указать в timeline, точку конца анимации.
Дополнительные кнопки, расположенные верхней части инструмента:
№15. Map maker – фигма плагин карты
Когда нужно показать проезд в офис, то для этого существует данный plugin. Теперь необязательно заходить в google.maps, чтобы сгенерировать территорию вашего города. Map maker может сделать это вместо Гугла, достаточно ввести адрес, чтобы увидеть результат. Для начала следует запустить данное расширение.
Появится всплывающее окно, справа опции настройки, слева пустая область. Чтобы получить графическое местоположение, нужно ввести адрес.
После завершения всех настроек нажимаем Make Map, карта появится на фрейме. Опции интерфейса позволяют менять карту, например в Map Type можно поменять внешний вид на спутник, гибрид, схема.
Zoom Level – масштабирование.
Show Marker – показать отметку
Вторая вкладка MapBox также обладает дополнительными настройками.
Address, Style и Zoom Level – похожи на параметры гугла.
Bearing – поворачивает карту вокруг своего центра.
Pitch – наклоняет карту создавая эффект перспективы.
№16. Table creator – плагин Фигма таблицы
Простой инструмент для создания таблицы. Запуск осуществляется с помощью “create table”, как показано на скриншоте ниже.
Так же из списка доступны следующие пункты:
При нажатии кнопки “Создать таблицу”, откроется всплывающие окно. С помощью мышки следует указать количество Columns и Rows, в этом случае доступен визуальный редактор. Другой вариант прописать вручную, как показано ниже.
Параметр Width равен 100, это ширина нашей таблицы, если требуется изменить размер в большую сторону, то меняем это свойство.
Таблица полностью состоит из компонентов. Они вложены друг в друга, самый низкий уровень – это ячейка (Cell), именно она содержит текстовое поле. Подойдет для записи и заполнения таблицы в целом.
№17. Remove BG плагин Фигма
Удаляет background у фотографии, делая задний фон прозрачным. Удобное расширение, когда необходимо оставить только портрет человека, а задние BG убрать. Позже фото можно наложить поверх другой картинки. Итоговый результат показан ниже.
№18. Плагин Arc Фигма
Данное расширение способно придать тексту изогнутый вид. С помощью ползунков дизайнер может делать изгиб вверх и вниз. Чтобы применить эффект, нужно щелкнуть по тексту, потом выбрать arc и с помощью ползунков контролировать процесс изгиба. Apply завершает процесс редактирования и показывает итоговый результат.
№19. Плагин для Фигмы Unsplash
Когда существует задача разнообразить интерфейс картинками, то здесь поможет unsplash. Обладая полезной функцией генерировать изображения, он сможет изменить обычные серые квадраты и добавить иллюстрацию. Это существенно экономит время при разработке, в том случае если нужно создать галерею или сделать шапку. Независимо от размера рабочей области холста изображение полностью займет пространство.
Чтобы добавить image, выберете прямоугольник, нажмите на него правой кнопкой мыши и из контекстного меню щелкните по unsplash.
Появится всплывающее окно unsplash с категориями: животные, бизнес, технологии и т.д. Щелкаем по texture и видим, как добавляется, случайна текстура.
Заключительный plugin работает с html, позже разберем, как добавить плагин в фигме, так же опишем параметр auto layout и возможности платной подписки.
№20. Figma to html
После завершения разработки, можно конвертировать свой проект в html документ, для этого щелкните по соответствующему плагину, и появится всплывающее окно с настройками, где отображается код с несколькими кнопками. Перечислим основные.
Ниже подробно опишем инструкцию, как установить плагин в фигме, но сначала приведем пример авто слоев.
Как пользоваться auto layout в Фигме?
Объектам дали имена container-1 и container-2. Для них также следует задать Auto layout. При увеличении названия у первого контейнера, второй начнет сдвигаться.
Рассмотрим вариант вертикального расположения блоков, где будет название картинки и описание, как в интернет магазинах. Создаем frame, назовем card-1. Разместим туда необходимые элементы: наименование, картинку и краткое описание. Перейдем в design card-1 и нажмем “+”, auto layout,
У card-1 появится параметр Resizing, здесь следует по вертикали поставить “hug contents”, это нужно для того чтобы BG (фон) масштабировался вместе с редактируемой областью описания.
Убедитесь, что в текстовом поле стоят те же параметры. После добавления любого контента, контейнер будет автоматически растягиваться.
Как установить плагин в Фигме?
Каждый дополнительно установленный инструмент решает определенные задачи. Поэтому сначала следует поискать информацию в интернете, что способствует решению проблемы. Когда удалось получить ответ, то делаем запрос в поисковую систему. Предположим, требуется типограф. Задаем запрос в Гугле на английском языке и переходим по первой ссылке.
Как скачать плагин в Фигма? При переходе пользователь окажется на странице, где можно установить “Typograf”, ниже можно посмотреть описание и основные возможности плагина. Дальше щелкаем по Installed и появится сообщение, как на скриншоте.
После установки он станет доступным в системе.
Что дает платная подписка?
В системе figma присутствует несколько видов подписок, free, professional и organization.
Снимает ограничения на:
Снимаются ограничения на:
Доступно то же, что и в Профессионале, плюс:
Плагин для Фигмы позволяет уменьшить зависимости от других программ, а также облегчить работу при создании сложных проектов. Установка любого расширения делается с помощью пары кликов мышки. Графический редактор figma предоставляет достаточно функций для создания одиночного проекта, но если разрабатывать сложный дизайн в команде здесь желательно оформить платную подписку.