Как создать фрейм в фигме для слайдов и формата А4?

Чтобы создать фрейм в фигме, включите инструмент Frame клавишей F или A и протяните прямоугольник на холсте либо выберите готовый размер в правой панели. Для слайда берите пресет из группы Presentation, например 1920×1080 для формата 16:9. Для печатного листа подойдёт группа Paper, где формат А4 в фигме задан как 595×842. Основные способы такие:

1. Щелчок по холсту с включённым Frame: получится фрейм 100×100 или размера последнего созданного.
2. Протягивание мышью: рамка нужного размера, точные числа потом правятся в полях W и H.
3. Пресет справа: Phone, Tablet, Desktop, Presentation, Watch, Paper, Social Media.
4. Обёртка вокруг готовых объектов: Ctrl+Alt+G на Windows или Option+Command+G на Mac.
5. Копия соседнего фрейма: Ctrl+D или плюс сбоку от него.

Всё это работает в Figma Design, там фреймы служат основой любого макета. В Figma Slides размер каждого слайда задаёт сама колода, а свойства фрейма видны в режиме дизайна.

Вам нужна не схема размеров, а готовые слайды к выступлению? Попробуйте создать презентацию бесплатно в сервисе SimpleSlide. Презентация генерируется с помощью ИИ за 1 минуту: введите тему или вставьте свой текст, и вы получите готовый шаблон. Его легко отредактировать или сразу скачать в PPTX или PDF.

Что такое фрейм в фигме и зачем он нужен?

Чем фрейм отличается от группы?

Фрейм это контейнер, внутри которого лежат текст, фигуры и картинки. Снаружи он похож на прямоугольник, но ведёт себя иначе. У группы нет собственного размера, она просто обнимает содержимое. У фрейма размер фиксированный, своя заливка, обводка, скругление углов и возможность обрезать всё, что вылезает за край. Справка Figma вводит важное понятие:

Фреймы, которые лежат прямо на холсте, называются фреймами верхнего уровня (перевод наш).

Оригинал: «Frames that sit directly on the canvas are called top-level frames.»

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

Что даёт фрейм, чего нет у группы?

Как создать фрейм в фигме по шагам?

Как сделать фрейм в фигме вручную?

Самый наглядный способ подходит, когда точный размер пока не важен:

1. Откройте файл Figma Design и нажмите F или A, либо выберите значок решётки на нижней панели инструментов.
2. Зажмите кнопку мыши на пустом месте холста и протяните прямоугольник.
3. Отпустите кнопку: появится рамка с названием Frame 1 над левым верхним углом.
4. Справа в полях ширины и высоты введите точные числа, например 1920 и 1080.
5. Дважды щёлкните по названию и переименуйте рамку, например «01 Титул».

Если просто щёлкнуть по холсту, фигма создаст квадрат 100×100, когда это первый фрейм в сеансе, или повторит размер последнего созданного. Щелчок внутри существующего контейнера добавит вложенный квадрат 100×100.

Как обернуть готовые объекты во фрейм?

Бывает, что текст и картинки уже лежат на холсте россыпью. Выделите их и нажмите Ctrl+Alt+G (на Mac Option+Command+G). Фигма создаст рамку точно по границам выделения. Потом её размер можно поправить до нужного формата, объекты при этом останутся на месте.

Какой размер фрейма выбрать для слайдов?

Где найти пресеты Presentation?

Когда включён инструмент Frame, в правой панели появляется список готовых размеров. Откройте группу Presentation и выберите нужный вариант. Если рамка уже есть, выделите её и смените пресет в выпадающем списке Frame в той же панели. Размеры обновятся сразу, а объекты внутри либо подстроятся по ограничениям, либо останутся на прежнем месте.

Пропорции важнее пикселей. Если колоду потом планируется перенести в Figma Slides командой «Copy to Figma Slides», справка требует фреймы верхнего уровня с соотношением сторон от 4:3 до 16:9. Вертикальные и квадратные кадры этим путём не переедут.

Нужно ли подгонять размер под PowerPoint?

Да, если колода уйдёт в PPTX. В PowerPoint стандартный широкоэкранный слайд тоже 16:9, поэтому 1920×1080 переносится без полей. Как поменять размер слайда, если презентация уже живёт в PowerPoint, мы разбирали в статье про размер слайда в PowerPoint.

Как сделать формат А4 в фигме?

Где пресет А4 и почему он 595×842?

В группе Paper фигма хранит бумажные форматы, и формат А4 в фигме там выглядит как 595×842. Цифры не случайные. Лист А4 по международной серии А имеет размер 210×297 мм, а 595×842 это тот же лист в типографских пунктах, по 72 на дюйм. Сама серия форматов закреплена в стандарте ISO 216:

ISO 216:2007 устанавливает размеры обрезанных листов писчей бумаги и некоторых видов печатной продукции (перевод наш).

Оригинал: «ISO 216:2007 specifies the trimmed sizes of writing paper and certain classes of printed matter.»

Какой размер А4 взять в пикселях?

Пресет 595×842 удобен для документов, которые уйдут в PDF: пропорции листа соблюдены, а вектор и текст при выгрузке остаются чёткими. Если же внутри много фотографий и макет пойдёт в типографию, считайте размер от разрешения по формуле: миллиметры разделить на 25,4 и умножить на dpi.

Есть и обходной путь: делать макет в 595×842, а при выгрузке картинкой выбирать множитель 4x. Получится примерно 2380×3368, этого хватает для печати текста и иконок, но для фото высокого качества надёжнее сразу рисовать в большом размере.

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

Как настроить фрейм под слайд?

Какие свойства стоит включить сразу?

• Clip content: всё, что выходит за край, скрывается, и на показе не торчат обрезки картинок.
• Layout guides: сетка колонок с полями помогает держать одинаковые отступы на всех слайдах, для 1920×1080 обычно берут поля 80-120 px.
• Fill: однотонный цвет, градиент или картинка на фон.
• Corner radius: скругление пригодится для карточек внутри слайда, а у самого слайда углы лучше оставить прямыми.
• Lock aspect ratio: замок рядом с числами ширины и высоты сохраняет пропорции, когда вы тянете рамку.

Как менять размер, не ломая содержимое?

Рамку можно тянуть за угол или за край, а точный размер вводить в поля W и H. Если внутри настроены ограничения Constraints, объекты подстроятся под новый размер. Чтобы временно их игнорировать, держите Ctrl (на Mac Command) во время перетаскивания. Без ограничений элементы остаются на своих местах, и при переходе с 4:3 на 16:9 справа просто появится пустая полоса.

Как разметить слайд сеткой колонок?

Какие параметры сетки поставить?

Сетка не видна зрителю, но именно она делает колоду аккуратной. Без неё заголовок на третьем слайде начинается на 90 пикселей от края, а на седьмом на 130, и глаз это замечает, даже если человек не может объяснить, что не так. Настраивается разметка в правой панели, в разделе Layout guide:

1. Выделите слайд и нажмите плюс рядом с Layout guide.
2. Смените тип на Columns.
3. Для слайда Full HD поставьте 12 колонок, отступ от края около 96 и промежуток 24.
4. При желании добавьте вторую разметку типа Rows для горизонтальных линий.
5. Сохраните настройку как стиль, чтобы применять её к остальным слайдам одним щелчком.

Двенадцать колонок удобны тем, что делятся на два, три, четыре и шесть. Текст можно поставить на шесть колонок, картинку на шесть, а три карточки с цифрами по четыре колонки каждая.

Зачем оставлять безопасные поля?

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

Когда вкладывать одну рамку в другую?

Что такое вложенные контейнеры?

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

Как помогает auto layout?

Выделите карточку и нажмите Shift+A. Фигма включит auto layout: содержимое выстроится по вертикали или горизонтали с одинаковыми промежутками, а сама карточка будет растягиваться под текст. Если подпись стала длиннее, нижний край сдвинется сам, и не придётся двигать рамку руками. Для презентаций это особенно полезно в списках преимуществ и сравнениях, где у всех карточек должны совпадать внутренние отступы.

Как собрать колоду слайдов из фреймов?

Как быстро размножить слайды?

1. Выделите готовый фрейм и нажмите Ctrl+D (на Mac Command+D): копия встанет рядом.
2. Или включите Frame, наведите курсор на рамку и нажмите плюс сбоку, соседние фреймы сдвинутся сами.
3. С зажатым Alt (на Mac Option) плюс создаёт пустой фрейм того же размера.
4. Расставьте слайды в ряд слева направо, в том порядке, в котором будете показывать.
5. Пронумеруйте названия: «01», «02», «03». В панели слоёв фреймы верхнего уровня выделены жирным, так их проще найти.

Что делать дальше со слайдами?

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

Как навести порядок в файле с макетами?

Зачем нужны страницы и секции?

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

• «Черновики» для идей и отброшенных вариантов, которые жалко удалять;
• «Рабочая версия» для текущей колоды, с которой вы выступаете;
• «Архив» для старых выступлений, если файл используется повторно.

Внутри страницы помогают секции, их создают клавишами Shift+S. Секция объединяет несколько элементов на холсте под общим названием, например «Вступление» или «Финансы», и её можно двигать целиком. Справка Figma также советует помечать готовые секции статусом Ready for dev, если макет дальше уходит разработчикам.

Как называть слои, чтобы потом их найти?

Давайте осмысленные имена хотя бы главным элементам: «Заголовок», «Фото героя», «График выручки». Безымянные Rectangle 47 и Group 12 не мешают, пока вы работаете одни, но коллега, открывший файл через полгода, потратит лишние полчаса, а при выгрузке в PPTX слои с понятными названиями проще узнать и поправить.

Какие ошибки бывают с фреймами?

Что встречается чаще всего?

• Слайды разного размера. Кто-то тянул рамку мышью, и вышло 1917×1083. Выделите все слайды разом и задайте числа один раз.
• Слайды вложены в общий контейнер. Для показа и переноса нужны фреймы верхнего уровня, вытащите их на холст.
• Вместо фрейма использована группа или прямоугольник. У них нет пресетов, обрезки и сеток, пересоберите слайд во фрейме.
• А4 сделан в пропорциях экрана. Лист 1920×1080 не напечатается как А4, выберите пресет Paper.
• Картинка вылезает за край на показе. Включите Clip content.

Как проверить колоду перед выгрузкой?

Выделите все слайды и посмотрите на правую панель: если в полях W и H стоит «Mixed», размеры разные. Затем откройте показ или выгрузите PDF и пролистайте его целиком. Так ошибки с форматом, полями и обрезками находятся за пару минут, а не во время выступления. Пять минут проверки дешевле неловкой паузы перед залом.