Размеры визиток, листов А4, сайтов, баннеров, карточек и других фреймов в фигме

Стандартные размеры фреймов в фигме

При выборе инструмента Frame в правой панели фигмы появляются стандартные размеры для различных устройств (мобильных телефонов, планшетов, компьютеров), и форматов (презентации, социальные сети, обложки). Если вы разрабатываете дизайн для конкретного устройства или формата, можно просто выбрать подходящий вариант из предложенных. Исключение составляет раздел с размерами для печати (Paper) — в фигме они слишком маленькие. Если вам нужно сделать дизайн для визиток или листа формата А4, смотрите соответствующую часть статьи ниже.

Как изменить размер фрейма

Размер фрейма отображается на правой панели фигмы в разделе Layout. Там же можно его изменить.

Поменять размер также можно просто выделив фрейм и потянув за его уголок. Если вы увеличиваете или уменьшаете размер фрейма, в котором уже есть контент, рекомендую делать это с зажатой клавишей Ctrl — в таком случае все слои останутся на своих местах, даже если у них были заданы разные привязки (Constraints).

Если же вам нужно изменить размер фрейма вместе со всем содержимым с сохранением пропорции — воспользуйтесь инструментом Scale:

Размер фрейма мобильного приложения в фигме

Мобильные приложения должны хорошо отображаться у всех пользователей, поэтому нельзя просто сделать дизайн под одно конкретное устройство. Рекомендуется за основу взять ширину самого маленького из поддерживаемых устройств и сделать отзывчивый дизайн, то есть такой, который будет автоматически подстраиваться под более широкие экраны. Добиться отзывчивости дизайна в фигме можно с помощью Constraints, автолейаутов и гибких сеток. Более простой способ — сделать фиксированный дизайн, при котором ширина основной части никак не будет меняться, а на больших экранах просто будут появляться отступы по бокам.

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

Если говорить о конкретных значениях, то на момент написания статьи самым маленьким устройством в стандартном наборе фигмы является iPhone SE с размером 320х568 px. Поэтому если делать дизайн приложений под эти размеры, на всех современных устройствах точно не будет проблем, ведь все они имеют большие размеры.

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

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

Размеры фреймов для дизайна сайта в фигме

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

Поэтому в любом случае придется делать несколько фреймов с адаптивами под разные устройства. Как минимум — это адаптив под мобильные телефоны (например 320 или 375 px) и адаптив для компьютеров и ноутбуков (например 1440 или 1920 px). В зависимости от сложности дизайна можно добавлять и дополнительные адаптивы под промежуточные брейкпоинты, например под 768, 1024, 1366, 1440, 1600, 1920 px

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

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

Размеры слайдов презентации в фигме

Тут всё просто. Обычно презентации делаются в форматах 16:9 или 3:4. В первом случае вы можете задать размер отдельного фрейма (слайда) 1920х1080px, во втором — 1024х768. Впрочем, если требуется презентация повышенной четкости, можно сделать и более крупные размеры, главное — в тех же пропорциях.

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

Размер карточек товаров для вб и озон в фигме

Инфографика для маркетплейса вайлдберриз имеет стандартный размер 900х1200 пикселей (можно больше в тех же пропорциях). Такие же минимальные размеры и у карточек на озоне для категорий одежда, обувь и аксессуары. Для остальных категорий — от 200х200 до 4320х7680.

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

Стандартные размеры баннеров в фигме

Наиболее распространенные размеры баннеров, использующиеся в интернете — это:

728х90 — Полноразмерный баннер
336х280 — Большой прямоугольник
300х250 — Средний прямоугольник
300х50 — Мобильный баннер
160х600 — Широкий небоскреб

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

Размеры фреймов в фигме для печати

В отличие от таких графических редакторов, как Photoshop и Illustrator, Фигма изначально не предназначена для дизайна печатных материалов — визиток, постеров, логотипов. Но всё же в ней можно их разрабатывать. Для печати можно будет экспортировать результат в PDF или JPG формате. Но какие размеры задавать? Ведь в фигме всё измеряется в пикселях, а печатные размеры — это как правило сантиметры, миллиметры или дюймы. Давайте разбираться.

Большая часть полиграфии печатается с плотностью 300 dpi (точек на дюйм). Поэтому если вы знаете исходный размер в дюймах, нужно просто умножить его на 300. Если нужный размер задан в сантиметрах — сначала переводим их в дюймы (делим на 2,54) и далее также умножаем на 300. Получается такая формула:

Размер в px = (Размер в cm / 2,54) * 300 = Размер в cm * 118

После расчета округляем полученное значение до целого числа.

Для простоты приведу несколько наиболее популярных размеров ниже.

Размер визиток в фигме для печати

Стандартный размер визиток в России и Беларуси 9х5 см — 1062х590 px.

Стандартный размер визиток в Европе 85х55 мм — 1003х649 px.

Стандартный размер визиток в США 3,5х2 дюйма — 1050х600 px.

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

Размеры листов формата А3, А4, А5 в фигме для печати

Лист А3 (29,7х42 см) — 3508х4960 px (размер постера)

Лист А4 (21х29,7 см) — 2480х3508 px (размер документа или сертификата)

Лист А5 (14,8х21 см) — 1748х2480 px (размер блокнота или листовки)