Figma Buzz: что за сервис и как им пользоваться

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

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

Вёрстка макета

Вы можете выбрать один из доступных шаблонов для редактирования либо просто скопировать фрейм из вашего файла Design и вставить в Buzz как есть.

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

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

В Buzz есть готовые элементы вёрстки: текстовые блоки, стикеры, простейшие фигуры. Их можно добавить на макет в любой момент при необходимости.

Редактирование шаблона

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

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

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

Пакетное редактирование

Buzz поддерживает два формата с содержимым данных, которые она может применять для пакетной вёрстки:

• .csv — лёгкий и быстро загружается, но поддерживает только текст;
• .xlsx — формат Microsoft Excel тяжёлый и грузится долго, но зато через него можно добавлять текст и картинки.

Оба формата можно выгрузить из Google Sheets. Для этого в таблице перейдите «Файл» → «Скачать» → выберите нужный формат.

Внутри текста таблицы могут быть неразрывные пробелы и абзацные отступы.

Чтобы загрузить таблицу в Figma, перейдите Bulk Create → Upload и выберите таблицу на компьютере. Затем откройте подходящий шаблон, соотнесите в нём поля из таблицы с элементами макета для замены и в левом нижнем углу нажмите Create.

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

Чтобы выгрузить изображения из Buzz, во вкладке Grid View выделите необходимые макеты и в правом верхнем углу нажмите Export.