Плагин SBOL Typograph исправляет и форматирует текст на основе правил типографики со встроенным Ёфикатором.
Выберите текстовый слой, группу, фрейм или компонент в котором хотите проверить текст и запустите плагин SBOL Typograph. Если ничего не выбрано, проверка и замена происходит во всех элементах страницы.
Ёфикатор
Замена буквы е на ё в словах, где она должна употребляться
Кавычки
Замена «простых кавычек» на «ёлочки» и „лапки“ «„Как это скучно!“ — воскликнул я невольно»
Телефонные номера
Приведение российских телефонных номеров к правильному формату Федеральный номер: 8 (800) 555-55-50 Городской номер: +7 (495) 500-55-50, +7 (4212) 79-40-35
Тире
Разбивка длинных чисел по разрядам 2345123 $ ⟶ 2 345 123 $
Замена в числах точки на запятую 143.56 $ ⟶ 143,56 $
После тыс. должна быть точка, а после млн, млрд, трлн точки быть не должно 5 тыс., 2 млн, 1 млрд, 3 трлн
Валюта
Замена USD и EUR на $ и € 20usd ⟶ 20 $
Замена Р, р., руб., RUR, RUB на ₽ 789 руб. ⟶ 789 ₽
Перенос копеек в основную сумму 45 руб. 5 коп. ⟶ 45,05 ₽
Перенос знака валюты после цифр и отделение его неразрывным пробелом $ 109 ⟶ 109 $, 109$ ⟶ 109 $
Неразрывный пробел
Неразрывный пробел между инициалами и фамилией. Инициалы слитно, затем неразрывный пробел и фамилия. Или фамилия, неразрывный пробел и слитно инициалы. А.А. Иванов, Петров К.П.
Неразрывные пробелы между словом и и т.д., и т.п., и др.
Неразрывный пробел между числом и следующим словом
Неразрывный пробел перед б, бы, ж, же, ли, ль
Неразрывный пробел перед последним коротким словом в предложении или одиночной строке
Неразрывный пробел после короткого слова
Неразрывный пробел после г., обл., кр., ст., пос., с., д., ул., пер., пр., пр-т., просп., пл., бул., б-р., наб., ш., туп., оф., кв., комн., под., мкр., уч., вл., влад., стр., корп., литер, эт., пгт., стр., гл., рис., илл., ст., п., c., а, б, без, безо, будто, бы, в, во, ведь, вне, вот, всё, где, да, даже, для, до, если, есть, ещё, же, за, и, из, изо, из-за, из-под, или, иль, к, ко, как, ли, ли, либо, между, на, над, надо, не, ни, но, о, об, обо, около, оно, от, ото, перед, по, по-за, по-над, под, подо, после, при, про, ради, с, со, сквозь, так, также, там, тем, то, тогда, того, тоже, у, хоть, хотя, чего, через, что, чтобы, это, №, §, АО, ОАО, ЗАО, ООО, ПАО
Строчные буквы
Слова вы, банк, приложение, условия, сайт — со строчной буквы. С прописной буквы — если слово первое в предложении.
Разное
Правильное написание Mastercard, Visa, Мир, Google Pay, Apple Pay, Push-уведомления, ПИН-код, QR-код, сим-карта, СVV-код, СVС-код, СVV2-код, СVС2-код, CVV, CVC, СМС, Wi-Fi, email, офлайн, онлайн, мск
Разработчик: Mikhail Danilov
Плагины из той же категории
28 Авг 2022
0
Быстро подобрать шрифт и шрифтовые пары, исправить ошибки в тексте, создать систему шрифтов, нумерованные списки или текст по кругу, вставить глифы или перевести текст с одного языка на другой — все это, не покидая Figma
Font Preview — панель предпросмотра шрифтов в реальном времени, с поиском и возможностью добавлять в избранное
Typescale — мгновенно генерирует гармоничные модульные системы типографики на основании заданного соотношения
SBOL Typograph — типографит кириллические тексты: исправляет пробелы, кавычки, тире, написание телефонов и валют. В плагин также встроен ёфикатор
Retextifier — единовременное редактирование нескольких текстовых слоёв
Главред — помогает сделать текст для сайтов, блогов, профессиональной литературы, СМИ и рекламы коротким и понятным
Contento — «рыбный» контент для макетов, сгенерированный из открытых бесплатных источников
Accidently Great Font Pairings — генерирует шрифтовые пары от Google Fonts
Add numbers to texts — быстро создает нумерованные списки
autosizetext — автоматически увеличивает или уменьшает текст, чтобы он идеально «вписался» в границы текстового контейнера
Batch Styler — меняет несколько текстовых стилей одновременно (шрифт, начертание, высота строки, трекинг)
Circular Text — генерирует текст по кругу
Deepl translate — переводит тексты с одного языка на другой прямо в Figma (всю страницу или выделенную часть, поддерживает 26 языков)
Find and Replace — позволяет найти и пакетно заменить текст на странице (как в текстовом редакторе)
Perfecter — настраивает гармоничные соотношения размеров шрифтов, интервалов, элементов с применением математических расчетов
Font Explorer — помогает быстро «примерить» понравившиеся шрифты к проекту и одновременно сравнить все варианты
Glyphs — плагин включает 184 графических символа, в том числе глифы и лигатуры
Ещё 18 Figma-плагинов для работы с текстом
Количество плагинов для Figma постоянно растет. Давайте рассмотрим те из них, которые будут полезны большинству дизайнеров:
Unsplash — это просто потрясающая платформа стоковых фотографий, насчитывающих более 265 000 фотографов-участников. В ней генерируется более 16 миллиардов показов фотографий в месяц! С помощью данного плагина вы сможете найти любое стоковое изображение прямо в Фигме!
Не отходя далеко от темы фотографий переходим к следующим двум плагинам — Mapsicle и Map Maker. Они позволяет найти на карте мира любую точку, даже по координатам. Есть возможность настроить отображение объектов, как с названием улиц, так и без них.
15 сентября компания Adobe сообщила о покупке сервиса для дизайнеров Figma за $20 млрд.
Сделка считается крупнейшим в истории поглощением частного разработчика ПО. Благодаря этой покупке Adobe планирует расширить собственный инструментарий для профессионалов.
Если вы часто работаете с текстом, то этот плагин облегчит редактирование текста,
Blobs — очень простой плагин который может ввыручить, если вам неожиданно понадобятся органические blobs-формы. Вы можете контролировать, насколько уникальна форма, а также количество точек, которые она имеет.
Формы создаются с использованием SVG, так что вы получаете эти восхитительные кривые Безье.
Продолжаем тему работы над текстом. Плагин проверяет грамматику с помощью сервиса Яндекс.Спеллер. Теперь нет необходимости переключаться на сервис и копировать текст по несколько раз — всё можно делать сразу в Figma.
Генерирует аватарки рандомными людьми в выбранную область. Есть возможность сгенерировать сразу несколько объектов.
Плагины — это отличный вспомогательный инструмент для дизайнера, но не стоит забывать об основах.
Спасибо за просмотр! Я буду рад если эти плагины облегчат вам работу.
В данной статье мы НЕ будем разбирать теоретические основы типографики и правила манипулирования шрифтами. Все это мы уже обсуждали в статье о шрифтовых парах и типографике.
Текущий пост будет иметь прикладной характер и расскажет про инструменты, которые есть в Фигме для создания текстового контента. Мы разберем различные типы шрифтов, их комбинации, что и где лучше использовать. А так-же что обходить стороной.
Выбор шрифта для контента разного типа
Весь текстовый контент на сайтах условно можно разделить на заголовки и основной текст. Так например к основному тексту можно отнести описание в карточке с товарами или параграф в статье. В свою очередь к заголовкам можно отнести пункты меню или название товара, в той же карточке.
Заголовки и основной текст обычно являются компонентами одного текстового блока. Поэтому шрифты, используемые для них, должны сочетаться друг с другом. А значит мы должны использовать парные шрифты для этих двух групп контента.
Связь Figma и Google Fonts
Первое о чем нужно знать при выборе шрифта. Фигма использует в качестве умолчательных шрифтов коллекцию Google Fonts. Поэтому, процесс выбора лучше вести не в самом редакторе Фигмы, а искать напрямую на сайте Google. Банально из-за лучшего интерфейса и большего числа фильтров.
Здесь легко найти шрифт под любую задачу, будь это рукописный, кириллический или декоративный шрифт.
Как известно, 2 шрифта отличаются друг от друга многими параметрами: шириной и высотой символов (кеглем), отступом между буквами и т.д. И когда мы выбираем шрифты для нашего сайта, то должны так подобрать пару, чтобы шрифт с одним набором параметров, гармонично смотрелся с другим. И даже если в теории вы знаете, какое соотношение свойств вы ищете, найти 2 и более шрифта с таким свойствами довольно проблематично. Но здесь есть лазейка.
Одним из интересных типов шрифтов, которые предлагает нам Google Fonts, являются variable шрифты. Они интересны тем, что в рамках одного шрифта, мы можем сами менять параметры, тем самым точно подгоняя ширину, высоту и другие свойства. А значит в наших силах, взяв за основу некоторый шрифт, модифицировать его таким образом, чтобы он идеально подходил для нашей задачи.
Одним из представителей, такого шрифта является Roboto Flex.
В левой части изображения можно увидеть панель с настройками – это и есть параметры, которые мы можем модифицировать. После того как вы подобрали нужную конфигурацию для шрифта вы можете использовать эти настройки как в Фигме, так и подключить в css.
Как подобрать пару для шрифта
Представим, что у вас есть на примете шрифт, который вам нравится. И вы хотите с одной стороны иметь его в проекте, но с другой найти пару. Которая сочеталась бы с ним. Для этой цели можно использовать генератор шрифтов. В сети их довольно много, но в основном это генераторы, которые сразу предлагают вам готовую пару, но есть и исключение. С помощью Font Joy, можно подобрать пару к уже имеющемуся шрифту.
Для этого выберите нужный вам шрифт в панели слева и зафиксируйте его, нажав на замочек. После чего нажмите на “Generate”. Как пишут сами разработчики, сервис сгенерирует 2 парных шрифта, при помощи ИИ. И да, данный ресурс создает сразу 3 парных шрифта (Для заголовка, подзаголовка и текста). Но если для вас это избыточно, всегда можно отбросить один из них.
Кроме Font Joy также есть Designs AI. По функционалу очень похожи, хотя у второго на мой взгляд более симпатичный интерфейс.
Рукописные, декоративные (и не только) шрифты
Если в вашем проекте планируется использовать, в некоторой степени “необычные” шрифты, то вы опять же можете обратиться к Google Fonts и при помощи фильтров выбрать нужные шрифты, однако даже здесь число этих фильтров довольно скудное (язык, с засечкам/без, рукописные). В общем-то на этом практически все.
Однако, также существует ресурс, с большей вариацией различных типов шрифтов. Это Fonts Online.
Здесь можно выставить фильтр на декоративные, кириллические, английские, курсивные шрифты, шрифты для заголовков и множество других подвидов. К сожалению далеко не каждый шрифт, который вы найдете будет находиться в коллекции Google Fonts, а значит он не будет доступен вам из коробки в Фигме. Поэтому здесь у вас 2 выхода:
Как добавить шрифт, если не хватает стандартных
По большому счету при создании макета в фигме вы можете пользоваться шрифтами только из 2-х источников. Это Google Fonts, как уже было много раз озвучено, и шрифты, которые установлены у вас локально на компьютере. В случае с веб версией, гугловые шрифты доступны сразу, а вот установленные у вас на локальном пк фигма не видит, для этого нужно установить специальное дополнение Font installer.
Ссылка — на цикл статей по Фигме.
