Figma-плагины для редакторов
Инструменты, которые сделают работу с текстом приятнее
Привет! Я Люда, UX-писатель. Каждый день я вместе с дизайнерами создаю и редактирую контент в Figma.
Порой в тексты закрадываются опечатки, иногда хочется как-то автоматически проверять их на соответствие стайлгайду, а в моменты затупов — поискать вдохновения в какой-нибудь базе готовых интерфейсных текстов или попросить помощи у AI-инструментов создания контента.
Большинство этих запросов могут решить плагины. Вместе с коллегами мы протестировали несколько плагинов для Figma, и сейчас я хочу поделиться с вами инструментами, которые показались нам наиболее полезными. О тех, что не очень понравились, тоже расскажу.
Дисклеймер: мы пишем контент на английском, поэтому все плагины актуальны для работы с английским текстом.
Эта же статья есть еще на английском.
Для проверки орфографии и грамматики
Хотя Figma в одном из недавних обновлений научилась проверять орфографию, у многих плагинов возможностей бывает больше. К тому же, они позволяют проверить сразу все тексты на экране или несколько экранов без выделения слоя с текстом.
Обычный спелл-чекер, проверяет на правописание и базовую грамматику. Активно дорабатывается и улучшается. Недавно по запросам аудитории разработчики добавили возможность добавлять слова в “словарь”, чтобы плагин не считал их ошибочными и не предлагал их исправлять.
Плюсы:
- есть добавление в словарь
- поддержка 10+ языков
- проверяет быстро — пара секунд на 1 экран
- нет ограничений по количеству экранов, которые проверяешь: можно прогнать сразу всю страницу с кучей фреймов
- можно увидеть списком все тексты экрана — может быть полезно для разработчиков и при проверке текстов
- можно использовать на FigJam файлах
Минусы:
- упускает некоторые грамматические ошибки
- никак не проверяет форматы данных: даты, валюты и т.д.
Стоимость: платный. Можно попробовать триал в течение 5 дней, но затем нужно платить от $10 в месяц за пользователя.
Неплохой бесплатный проверятель небольших объемов текста.
Что умеет Spelll:
- сохранять слова в словарь, чтобы плагин не считал их за ошибку
- проверять сразу всю страницу — не обязательно выбирать по одному слою
- проверять базовую грамматику, предлагать изменения в капитализации и пунктуации и улучшения в написании валют
- в FigJam тоже может)
Еще поддерживает 43 языка и обещает не проверять рыбный текст а-ля lorem ipsum, но это я, к сожалению, не проверяла.
Но:
- нельзя добавлять слова и фразы в стоп-список — есть только словарь разрешенных слов
- большие файлы может долго обрабатывать
Стоимость: бесплатно! Окей, условно бесплатно) После триала в 7 дней можно пользоваться бесплатно для проверки небольших файлов до 100 текстовых слоев. Если хочется большего, подписка начинается от $10 долларов в месяц.
Мой фаворит среди плагинов-спеллчекеров, в команде мы пользуемся именно им.
Здесь начну с планов подписки:
- базовый — бесплатно
- индивидуальный — $11/ мес
- командный — $18/ мес за человека
Любой план можно бесплатно протестировать в течение месяца.
Общий функционал для всех планов:
- проверка грамматики, орфографии и пунктуации
- в Figma за раз можно проверить один текстовый инпут, один фрейм целиком или несколько фреймов целиком.
Все, что выше базового, включает:
- оценку readability по выбранной вами шкале, предложения по стилю и инклюзивности, подсчет количества слов и примерного времени прочтения
- глоссарий терминов, управление предпочтительными и запрещенными вариантами
- добавление сниппетов — часто используемых повторяющихся кусков текста
- AI-инструменты для рерайтинга и генерирования текста с нуля
- отдельный от плагина личный кабинет, где можно управлять всеми правилами и настройками, проверять другие тексты просто в текстовом редакторе вне фигмы
- расширение для Chrome, которое проверяет тексты по тем же настроенным вами правилам
Но:
- Плагин проверяет по AmE, есть и другие варианты английского. А вот поддержки других языков нет(
Для управления текстами
Как недвусмысленно намекает название плагина, он позволяет искать текст и делать его автозамену — для одного инстанса или для всех сразу. Информации о том, сколько языков он поддерживает, я нигде не нашла, но с русским и английским проблем точно нет.
Как можно искать:
- по всей странице или отдельным выбранным фреймам
- в разных частях текста — в начале, в конце, во всем тексте
- с учетом регистра и без
Figma сейчас нативно встроила функционал этого плагина, и поиск работает по привычному сочетанию Cmd+F/Ctrl+F. Но плагин отметить все равно хочется, такие теплые с ним сложились отношения, еще когда он был нужен как стороннее решение)
Стоимость: бесплатно!
Претендует на то, чтобы закрыть несколько проблем с текстами и стать комплексным решением для управления “копирайтами”. Многие фичи помогают наладить связь с разработкой и помочь c передачей и обновлением текстов. Еще есть работа с текстовыми компонентами и библиотекой типичных текстов. Подобно Writer, у Frontitude есть отдельная веб-версия с расширенными настройками и плагины с более конкретным, но ограниченным функционалом.
Я глубоко не тестировала плагин. Кажется, что для него нужно перестраивать некоторые процессы в команде, потому что наибольшую пользу он принесет, если им будут пользоваться не только писатели, но и дизайнеры с разработчиками. Скорее всего, подойдет для изначальной настройки работы писателя в команде, особенно, если есть необходимость синхронизировать тексты и код.
Стоимость: бесплатно для 1–2 человек, для команд обойдется в $49+ в месяц.
Для замены рыбы и вдохновения
У плагина большой пулл разных текстов ошибок: платежных, системных, серверных, ошибок входа и т.д. Все ошибки есть в 3 вариантах голоса: plain, casual, playful. Можно подобрать ошибку и сразу вставить в нужный слой.
Я использую плагин, если хочется подсмотреть примеры голоса и от чего-то оттолкнуться при написании своих текстов ошибок.
Стоимость: бесплатно. Можно даже не регистрироваться, но если зайти, то станет доступна фича “сохрани текст в избранное и используй снова”.
Платный плагин, который может пригодиться для маркетинговых текстов — описаний продукта и его ценности, презентаций и всего такого.
Работает просто: указываете тип текста, описываете аудиторию и свой продукт, ждете, пока AI-машина покрутит шестеренками, и вуаля — ваш текст готов! Можно вставлять в макет и говорить всем, что этот шедевр — творение ваших пальчиков.
Ладно, шедевр получится не всегда и возможно, потребует редактуры, но попробовать триал в периоды творческого застоя вполне можно. В конце концов, если взять драфт, сгенерированный машиной, и доработать его, может получиться очень даже классный текст.
Стоимость: дорого. После триала $59 в месяц за индивидуальный план. Бизнес тоже есть, цена зависит от кол-ва пользователей.
Для отслеживания прогресса
Довольно камерный, маленький и простой плагин. Может помочь с ответами на вопросы “а это готово?”, “а эту формулировку согласовали?” и прочими уточнениями статусов текстов. Он добавляет в название слоя с текстом эмоджи статуса. Но несмотря на его простоту, работать с ним нужно только по устроенным процессам, чтобы все знали, куда смотреть. Иначе смысла не будет.
Ах, ну и для большого количества фреймов не подойдет. Это скорее для небольших задач, максимум пару экранов разметить, а то палец устанет кликать.
Стоимость: бесплатно без регистрации и СМС)
Прочие полезные интересности
Этот плагин сложно определить в какую-то категорию, но он необычный и интересный. Он измеряет объем текста на экране: мало ли, много ли, достаточно ли. Молжет быть полезен для лендингов, важных страниц с описанием продуктов и других экранов, которые видят много ваших пользователей.
Он рассчитывает соотношение текста (текстовых блоков) и пустого пространства на экране. Все текстовые блоки покрываются красными прямоугольниками, и площадь этих прямоугольников делится на площадь пустого экрана.
Какой процент считать большим, а какой маленьким, определяется на основании исследований.
Пользоваться плагином не очень просто, есть даже инструкция по тому, как правильно работать с цветовыми блоками-выделениями. Но любопытно попробовать.
Стоимость: бесплатно!
…а вот это не зашло
Плагин из раздела “замена лорем ипсума”. Можно искать тексты по типу UI-элемента или по ключевым словам, но база совсем небольшая.
Да и примеры в основном такие себе: либо простые и очевидные, либо очень эмоциональные и с разными oh, uh, oops!, от которых редакторы так старательно пытаются избавиться.
По сути, это тоже плагин с базой текстов, только здесь тексты от реальных компаний. У каждого текста подписан ее “автор”.
Но тут больше какие-то маркетинговые слоганы, а не интерфейсные тексты. Сложно представить, зачем может понадобиться такой инструмент. Кажется, даже дизайнеру будет проще написать что-то примерно подходящее по смыслу, чем искать по базе текстов рандомных компаний.
Как и одноименный веб-сервис, плагин проверяет тексты на readability и выставляет им уровень читабельности.
Проверка идет по правилам редактора Hemingway: на пассивный залог, наречия, сложные конструкции и трудночитаемые предложения. Пользоваться просто, также есть счетчик слов и символов, что полезно.
Но есть и недостатки, из-за которых пользоваться им я не стала:
- Reading level показывает не в классах, а описательно: very easy, easy, difficult. Не очень привычно, особенно если у вас есть четкие гайдлайны в уровнях, на которые надо ориентироваться.
- Работает с одним текстом за раз. Нужно выделять текстовый блок в фигме, чтобы плагин проанализировал текст в нем. Несколько текстов за один прогнать не получилось.
- Судя по последним обновлениям 2 года назад, плагин не поддерживается и не развивается.
Ничем не примечательный плагин с небольшим запасом типовых текстов для ошибок, заголовков и т.д. Чтобы им пользоваться, нужно обязательно добавить карту и оформить пробную неделю. Реально — это только как слабенькая замена рыбному тексту.
Еще и платный после триала :(
Инструмент с крутой и полезной идеей, но не очень удачной реализацией. Плагин ищет среди ваших текстов формулировки, которые могут быть дискриминирующими по разным признакам: гендеру, расе, национальной принадлежности и т.д. То, что нужно в наше непростое время!
Увы, есть пара недостатков:
- Плагин проверяет целиком всю вкладку, поэтому проверка может занять пару минут в зависимости от количества экранов.
- После проверки выводит подряд все текстовые метки с комментарием по accessibility/inclusivity. Просмотреть только проблемные тексты нельзя, как нельзя и убрать из вывода повторяющиеся метки со всех экранов.
- Плагин подходит к проверке довольно жестко: отмечает опасными даже слова типа special, failed, joint, period (в значении периода времени), названия языков German, Chinese, Japanese и пр.
Да, он полностью бесплатный и с классным посылом, но неудобный.
Спелл-чекер, который не чекает(
Точнее, какое-то время назад работал, проверял орфографию, но в какой-то момент перестал справляться. Страничка плагина в Figma завалена комментариями пользователей с просьбами починить, но поддержкой плагина, кажется, никто не занимается. Он бесплатный, но все равно не советую тратить время и испытывать его на себе.
В заключение
Что ж, немаленький получился список плагинов.
Мы в команде на повседневной основе пользуемся Writer: внесли кастомные правила и проверяем тексты в фигме и вне ее по ним, а также держим там термины. Расширение для браузера позволяет поддерживать единообразие текстов даже в рабочих инструментах — в Google Docs, тикетах Jira, чатиках.
Еще я периодически использую Ghost UX writer и плагин для отмечания прогресса. Ну, и прочие не очень связанные с текстами плагины для добавления стикеров, заметок и to-do списков.
Удобной вам редактуры и красивых макетов! Поделитесь в комментах, чем вы пользуетесь при работе с текстом в Figma?
P.S. Хочу сказать большое спасибо моим коллегам-редакторам — Лёше и Любе. Без вас этот рисерч не был бы таким масштабным, глубоким и полезным!
