Посты-карусели в Figma: от фреймов до экспорта отдельных слайдов

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

Нужен именно файл Figma Design. Прототип с перелистыванием на экране и готовые изображения для соцсети - разные результаты. Соединять фреймы интерактивными переходами ради обычного поста не требуется: листать их читатель будет уже в приложении соцсети.

Создайте фрейм инструментом Frame и задайте ширину и высоту. Для нашего упражнения возьмём 1080 × 1350 пикселей. Это выбранный вертикальный макет 4:5, а не утверждение о единственном допустимом размере. Для другой задачи размер лучше определить заранее; подробности есть в материале о размерах карусели.

Фрейм работает как контейнер: внутри находятся фон, фотография, заголовок и пояснение. Его границы задают будущую карточку. Такая организация соответствует устройству инструмента Frame в Figma.

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

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

Сразу сохраните первую карточку: выделите фрейм, откройте Export в правой панели, добавьте PNG или JPG и масштаб 1x. Для нашего фрейма получится 1080 × 1350. Такой экспорт описан в инструкции Figma. Откройте файл отдельно: виден ли фон, не обрезались ли элементы, совпадают ли размеры?

Это небольшое действие меняет отношение к остальной работе. Вы уже знаете, что документ отдаёт нужный результат, и можете заниматься содержанием. Если же вместо карточки сохранилась вся рабочая область, сначала надо разобраться с выделенным объектом. Повторять ту же организационную ошибку на шести слайдах незачем.

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

У нашей мастерской после обложки появится выбор объёма, затем - разговор о ручке, поверхности и уходе. В конце можно собрать вопросы к мастеру перед заказом. Сохранять одинаковые размеры фреймов полезно, а повторять композицию первого кадра на всех остальных необязательно. Сравнение двух хватов и короткий вопрос про уход занимают пространство по-разному.

Это редакторский пример. Характеристики конкретного изделия надо брать у его автора. Не добавляйте значок посудомоечной машины просто потому, что он красиво заполняет пустое место: такое обозначение воспринимается как обещание.

Переименуйте фреймы по порядку: «02-volume», «03-handle» и дальше. Двузначные номера удобны, когда серия вырастает до десяти кадров: сортировка имён не смешает первый, десятый и второй файлы. Лучше договориться об именах сейчас, чем объяснять коллеге, чем «Финал новый 2» отличается от «Финал точно».

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

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

На карточке про ручку уместен крупный снимок хвата. Для ухода полезнее короткий вопрос мастеру, чем декоративный значок с неподтверждённым обещанием. Поля, цвет текста и характер заголовков остаются общими; размер фотографии и место пояснения зависят от содержания.

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

Текст и изображение в таком макете можно править отдельно. Сохраните эту возможность до конца: готовый PNG, помещённый во фрейм, останется одной картинкой. Слова внутри него не превратятся в текстовые слои. В приложенном SVG-образце заголовок, пояснение и рамка фотографии разделены именно для последующих правок.

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

К моменту финального экспорта у нас уже есть проверенная первая карточка и понятный порядок остальных. Теперь выделяйте нужные фреймы, а не общую секцию, в которой они расположены. В настройках проверьте число объектов и названия. На выходе должны быть отдельные изображения: длинная полоса из всех слайдов снова вернёт задачу к ручной нарезке.

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

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

Передайте коллеге папку с отдельными изображениями и исходный файл. Названия «01-cover», «02-volume», «03-handle» лучше объясняют порядок, чем «Финал новый 2». Если мастер изменит условие ухода, в исходнике можно исправить один текстовый объект и повторно экспортировать нужный кадр.

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