Отказался от Google Docs и создал редактор статей внутри Figma. Контент-блоки на Auto Layouts и единый дизайн черновиков

Подробный гайд, как я «соорудил» интерактивный редактор статей как в vc.ru прямо внутри Figma, унифицировал представление контента, приблизил черновик к виду веб-страницы, и повысил скорость редактирования текста.

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

Мне категорически не нравится идея «распыления» на множество «полезных» утилит, каждая из которых выполняет свою узкую функцию: редактирует текст, проектирует макеты, рисует иллюстрации, хранит список дел, формирует таблицы, создает презентации, и много чего еще.

У такого подхода есть ряд существенных недостатков:

  • Когнитивная нагрузка. Каждый сервис - огромная система, имеющая свои уникальные особенности, продиктованные видением разработчика и состоянием рынка: дизайн, интерфейс, функции, механики, компоненты, баги, поддержка. Используя около 10 сервисов одновременно нарастает хаос и неравное напряжение. Переключение между кардинально отличающимися друг от друга программами словно варп-прыжок между целыми вселенными. Это съедает время и силы, истощая психический ресурс.
  • Лишние зависимости. Сервисы могут закрываться, выкатывать ужасные обновления, и даже полностью уходить с рынка из-за санкций или по другим причинам. Лишние зависимости - всегда плохо. Как писал Уильям Гамильтон: «Entia non sunt multiplicanda praeter necessitatem» или «Не следует множить сущности без необходимости».

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

Почему Figma, а не Google Docs?

Задайте себе вопрос: «Какой инструмент ближе всего приближает редактируемый контент к формату веб-страницы - Figma или Google Docs?». Думаю, ответ очевиден.

Большинство текстов пишется под онлайн-площадки: СМИ, UGC-платформы (VC, DTF, TJ, Хабр, Дзен, Medium), социальные сети, личные блоги.

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

Иными словами, представление информации на сайтах, под которые обычно пишется текст - стандартизировано и обладает четкой структурой.

Напротив, настройки документа Google Docs слишком дисперсны. Набирая символы или переходя на новую строку приходится следить за множеством параметров, чтобы не «сломать» верстку всего текста. Например, чтобы избежать нарушения форматирования при вставке текста из источника, приходится нажимать более сложную комбинацию клавиш «Shift+Ctrl+V» (копирование без форматирования), либо использовать инструмент «Копировать форматирование» на новом фрагменте.

Информацию в документе нельзя «обернуть» в типовые блоки, на которых обычно строится веб-контент. Максимум, что можно сделать - включить формат без разбивки по страницам, приближающий документ в виду веб-странице. Сделать это можно так: Файл -> Настройки страницы -> Без разбивки по страницам.

Один из моих лонгридов в Google Docs без разбивки на страницы. Выглядит хорошо, редактируется плохо.

Хотя изображения можно хранить внутри документа, для их экспорта приходится скачивать весь документ в формате веб-страницы, после чего находить необходимые файлы в папке «images». Это делается так: Файл -> Скачать -> Веб-страница. Загруженные изображения имеют оригинальный размер без сжатия, что несомненно радует. Однако более простого способа «вытащить» изображения из документа нет.

Figma же изначально разработана таким образом, что в ней все построено на блоках, служащих основой проектирования сайтов и мобильных приложений. Свойства элементов внутри Figma - калька с HTML и CSS, на которых верстаются онлайн-площадки.

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

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

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

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

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

Похожий счетчик есть и в Google Docs. Он простой, наглядный, и его тоже можно вывести на главный экран: Инструменты -> Статистика -> Показывать статистику слов при вводе текста -> ОК.

1. Лист с auto layout

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

Добиться таких свойств позволяет функция auto layouts. По сути, это тоже самое, что и flex-box в CSS, только для дизайнеров. С помощью нее можно включить автоматическое позиционирование элементов внутри фрейма, установив в параметрах достаточно простые, но гибкие правила.

Для этого я создал фрейм с белой заливкой и добавил ему свойство «Auto layout». В качестве варианта позиционирования выбрал «Vertical direction», «Horizontal padding» и «Vertical padding» поставил на 50, а «Space between items» на 34. Выравнивание оставил как есть - на «Top left alignment».

Ширина фрейма «W» фиксированная - «898px». Поэтому «Horizontal resizing» стоит на «Fixed». Однако, так как высота листа должна меняться в зависимости от содержимого, «Vertical resizing» стоит на «Hug».

При таких настройках любые элементы внутри будут автоматически отступать от границ фрейма на 50 пикселей, выдерживая расстояние между собой в 34 пикселя. Для проверки можно добавить пару прямоугольников. Если изменить высоту любого из них, лист автоматически скорректирует свой размер.

2. Блок текста

Текстовый блок - основной элемент представления информации на сайте.

Он должен растягиваться по ширине листа, учитывая отступы, а также корректировать свой размер по количеству строк, высота которых должна быть не очень маленькой, и не очень большой, позволяя удобно читать абзацы. Для подчеркивания смысловых акцентов будет достаточно трех вариантов начертания: regular, bold, italic.

Я разместил во фрейме листа новый элемент текста, установив в его параметрах «Horizontal resizing» на «Fill», а «Vertical resizing» на «Hug». В качестве шрифта я использовал Roboto с размером 18. Чтобы текст было удобнее читать, я установил «Line height» в 150%.

Эти настройки я сохранил в 3 отдельных стиля, каждый из которых отличается лишь начертанием: обычный, жирный, курсивный. Для удобства я поместил их в фолдер «text». Теперь, редактируя текст мне достаточно выбрать лишь конкретный стиль, чтобы применить необходимые параметры.

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

Текстовые блоки можно копировать частично. Для этого необходимо выделить нужный отрывок текста внутри блока, скопировать его через Ctrl+C, после чего выделить любой другой элемент, и вставить текст через Ctrl+V. Следом за выделенным элементом появится новый блок текста со скопированным отрывком.

3. Блок заголовка

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

Для создания заголовка я скопировал уже имеющийся блок текста, изменил начертание на «Bold», размер увеличил до 24, а «Line Height» поставил на «Auto», т.к. из-за увеличенного кегля высота строк была бы слишком большой. При этом «Horizontal resizing» по прежнему остался на «Fill», растягивая блок по ширине листа.

Также, как и с текстом, я сохранил параметры в отдельный стиль «title», который поместил в ранее созданный фолдер «text». Блока заголовка и текста уже вполне достаточно, чтобы «собрать» несложную статью.

4. Блок фрески

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

Фреска, как и любой контентный блок, растягивается по ширине листа. Однако, как и сам лист, она имеет отступы по краям. Внутри фрески размещается текстовый блок. Чтобы фреска контрастировала с остальной информацией, ей нужен фон. Яркий контрастный цвет будет затруднять чтение, поэтому лучшее решение - бледноватые пастельные цвета, как в дизайне платформ Комитета: VC, DTF.

Я создал копию листа, в которой удалил все содержимое, и поместил ее внутрь основного листа, изменив в параметрах «Horizontal resizing» на «Fill» и задав заливку «Fill» шестнадцатеричным кодом «FEEBEF». Этих изменений вполне достаточно.

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

Для того, чтобы поместить внутрь фрейма более широкий элемент, чем сам фрейм, нужно зажать «Ctrl». Кстати, этот текст сейчас внутри фрески VC.

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

5. Изображения

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

Сперва нужно добавить изображение на холст, перетащив его мышью из папки, или копируя/вставляя через «Ctrl+C»/«Ctrl+V». Если оно появилось вне фрейма листа, его нужно переместить в него.

Кстати, если ширина изображения на хосте больше ширины листа, то, аналогично фреске, без зажатого «Ctrl» оно не переместиться внутрь фрейма.

Далее есть два варианта:

  • Вручную подогнать размер изображения по ширине листа, сохраняя пропорции через зажатый «Shift».
  • Установить параметр изображения «Horizontal resizing» на «Fill», чтобы оно растягивалось по ширине листа автоматически. Высота изображения корректируется вручную так, чтобы оно полностью совпадало со своими границами.

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

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

Если использовать стандартный «Export» в «PNG» или «JPEG», то возникнут артефакты в виде белой линии по краям изображения. Эффект возникает из-за того, что Figma привязывает экспортируемый элемент к пиксельной сетке документа. Если значение X, Y, Width, Height имеет число после точки, то после экспорта появляется линия.

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

К тому же, в Figma нет экспорта изображения в оригинальном размере. Но есть простой обходной путь: выделить изображение, в правой панели нажать «Inspect», в разделе «Code» выбрать «Table», и кликнуть на синюю ссылку «image», после чего Figma откроет браузер с оригинальным изображением, которое можно сохранить.

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

В таком случае, нужно использовать другой способ. Изображение «вынимается» из фрейма, увеличивается вручную до максимального размера без потери качества и пикселизации, а его координаты и размеры в правой панели вручную округляются. Далее используется обычный экспорт с модификатором «1x». И не забудьте снять «замочек» с «Constrain proportion» перед округлением ширины и высоты.

Компоненты и ассеты

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

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

Однако, есть причины, почему я этого не сделал.

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

Проверка орфографии / spellcheck

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

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

Плагины можно запускать без установки. Для этого надо кликнуть в верхней панели по кнопке «Resources», перейти во вкладку «Plugins» и ввести в строку поиска «spellcheck». Найденные плагины можно протестировать по очереди и выбрать наиболее подходящие.

Экспорт в PDF

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

Для этого нужно выделить фрейм, в боковой панели кликнуть на значок «+» во вкладке «Export», и в выпадающем списке выбрать «PDF», после чего можно нажимать на кнопку экспортирования. В появившимся окне Figma предложит выбрать путь для сохранения файла.

Веб-версия и desktop-приложение

Figma - кроссплатформенное приложение. Есть desktop и веб-версия для редактирования, и мобильное приложение для просмотра файлов. Возможности совместного доступа к документу позволяют работать над проектом целой команде одновременно.

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

Если статьи хранятся в одном документе, а показать надо лишь одну - можно временно создать отдельный файл для показа и перенести туда фрейм листа.

Чтобы «расшарить» файл Figma, нужно кликнуть по нему в списке черновиков правой кнопкой мыши и нажать «Share». Дальше появиться окно, в котором кнопка «Copy link» скопирует ссылку, после чего ее можно отправлять через мессенджер, почту или соцсеть.

Заключение

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

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

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

0
32 комментария
Написать комментарий...
Кирилл Васильев

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

А на счет фигмы — прикольно написано) Автору — успеха в освоении и сотворении еще более удобного инструмента

Ответить
Развернуть ветку
Илья Ланкевич

ну нельзя же быть таким олдскульным…:) А телефон кнопочный?

Ответить
Развернуть ветку
Кирилл Васильев

В марте месяце думал продать умный браслет и старый сяоми, и купить виндофон и касио

Ответить
Развернуть ветку
Илья Ланкевич

Класс!:)

Ответить
Развернуть ветку
Игорь

Пригодилось?)

Ответить
Развернуть ветку
Виталий

Мне девушка для отчётов в фигме сделала шаблон, уже штук 50 отчётов сделал)

Ответить
Развернуть ветку
Sergei Zotov

с какой-нибудь интеграцией с Google Spreadsheets? Тут на VC была как-то статья об этом. Кмк, крутой вариант для красивого визуала с кучей кастомизаций

Ответить
Развернуть ветку
Ruslan Fatikhov

Да, ест специальный плагин, который подтягивает игру с Гугл таблиц. Сэкономил себе сотни часов.

Ответить
Развернуть ветку
Арсений

Прочёл статью и нифига не понял, зачем текст в фигме набирать вместо прекрасного гугл докс. Может просто автору лень разобраться с ним?

Ответить
Развернуть ветку
Евгений Широков

А, я не единственный, кто выкручивается так) я себе на ВордПресс загрузил плагин по типу канвы, пока неплохо работает)

Ответить
Развернуть ветку
Дмитрий Филиппов

Что за плагин?

Ответить
Развернуть ветку
Евгений Широков

А вы не юрист? А то я с этими плагинами не слишком законно работаю)

Ответить
Развернуть ветку
Дмитрий Филиппов

Нет, не юрист..

Ответить
Развернуть ветку
Евгений Широков

Как бы это тупо не звучало, но ответил в личку)

Ответить
Развернуть ветку
Ирина Викторовна Анири

и мне, пожалуйста. я тоже не юрист)

Ответить
Развернуть ветку
Алексей Максимов

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

Ответить
Развернуть ветку
indievision

Ну во первых про печать тут никто не говорил. А во вторых из фигмы экспортируется в AI и там проводится предпечатная подготовка. Ну и в третьих для печати изначально делают в других программах.

Ответить
Развернуть ветку
Алексей Максимов

Просто когда такие статьи пишут все это воспринимать как комманду к действию, в итоге все начинали сдавать фигме... В АИ хорошо не получиться импортировать если там многотсраничка и нет шрифтов на машине.

Ответить
Развернуть ветку
Алексей Пастухов

Спасибо за идею вести заметки в шаблонах на автолэйауте. Как-то не приходило такое в голову :)

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

Кстати, PDF очень здорово сжимается сервисом ilovepdf. А то Фигма их действительно экспортирует какими-то конскими.

Ответить
Развернуть ветку
Timofey Asyrkin

Миша, ну зачем себе имя так коверкать и называть себя Майком?

Ответить
Развернуть ветку
Mike Wishnevski
Автор

Чтобы ты спросил, бро)

Ответить
Развернуть ветку
Timofey Asyrkin

сейчас имя, поменял, завтра пол, а послезавтра родину пойдешь продавать?

Ответить
Развернуть ветку
Timofey Asyrkin

Ну это, конечно, сарказм, не принимайте близко к сердцу, товарищи

Ответить
Развернуть ветку
Kirill Kolombet

Как потом сверстанную в figma статью публиковать на платформах? В markdown/html/doc из нее не возможно экспортировать. Потом перевёрстывать ее под каждый блог/сайт

Ответить
Развернуть ветку
Mike Wishnevski
Автор

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

Ответить
Развернуть ветку
Ivan S.

Чем то мне Adobe Illustrator напомнило.

Ответить
Развернуть ветку
Chris Luck

Прикольно, но не является ли это пере изобретением?

Ответить
Развернуть ветку
Mike Wishnevski
Автор

Всмысле?

Ответить
Развернуть ветку
Арсений

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

Лет через 10 наверное разовьётся и будет хороша. Можно будет экспорт в HTML/CSS делать корректно

Ответить
Развернуть ветку
indievision

«Если использовать стандартный «Export» в «PNG» или «JPEG», то возникнут артефакты в виде белой линии по краям изображения. Эффект возникает из-за того, что Figma привязывает экспортируемый элемент к пиксельной сетке документа. Если значение X, Y, Width, Height имеет число после точки, то после экспорта появляется линия.»

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

Ответить
Развернуть ветку
Богдан Сулагаев

Если значение X, Y, Width, Height имеет число после точки, то после экспорта появляется линия

Проблема актуальна до сих пор.

Используйте плагин Pixel Perfect. Перед экспортом тыкаем Run и все будет ровненько

Ответить
Развернуть ветку
indievision

Если в настройках стоит snap to pixel grid числам после точки и взяться неоткуда при растягивании автолейаута. Есть ли какой то смысл выключать эту настройку?

Ответить
Развернуть ветку
Читать все 32 комментария
null