Как изменить формат в фигме

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

Figma — это веб-ориентированный инструмент, который строит работу вокруг гибкости и коллаборации. В отличие от Photoshop или Illustrator, где формат документа задаётся один раз при создании, в Figma вы можете иметь множество артбордов разных размеров в одном файле. Это особенно полезно при разработке интерфейсов для нескольких устройств: iPhone, iPad, десктоп, Android. Однако такая свобода требует дисциплины — важно понимать, как управлять размерами, сохранять согласованность и избегать ошибок масштабирования.

Что такое формат в Figma: артборды вместо страниц

В контексте Figma термин «формат» не относится к размеру самого файла, а описывает размеры артбордов — специальных рабочих областей, аналогичных страницам в других программах. Каждый артборд представляет собой независимый холст с заданными шириной и высотой. Именно на них размещаются элементы интерфейса: кнопки, тексты, изображения.
Артборды позволяют организовать проект логично: например, один экран приложения — один артборд. При этом в одном файле может быть десятки, даже сотни артбордов разных размеров. Это удобно для прототипирования, но требует чёткой структуры. Без контроля за размерами легко запутаться, особенно если дизайнер работает в команде.
Figma не ограничивает вас жёсткими рамками. Вы можете свободно перемещать объекты между артбордами, изменять их размеры в процессе работы и использовать авто-расположение (Auto Layout) для адаптивности. Однако именно поэтому важно заранее определить целевые форматы, соответствующие требованиям платформы: iOS, Android, Web.

Разница между страницей и артбордом

В Figma есть два уровня организации: страницы и артборды. Страница — это логический раздел проекта (например, «Мобильная версия», «Десктоп», «Анимации»). Артборд — конкретный макет внутри страницы. Один файл может содержать несколько страниц, каждая из которых включает множество артбордов.
Представьте, что страница — это глава книги, а артборд — её абзац. Такой подход позволяет масштабировать проект без потери ясности. Например, на одной странице можно разместить все экраны мобильного приложения, а на другой — адаптацию для планшета.

Как создать артборд с нужным форматом

Создание артборда с нужным форматом — базовый навык в Figma. Есть три основных способа: использование пресетов, ручной ввод размеров и клонирование существующих артбордов.
Первый шаг — активируйте инструмент Frame (рамка) на панели слева или нажмите F. После этого вы можете:

• Выбрать готовый пресет из боковой панели справа;
• Щёлкнуть на холст и ввести нужные значения в поля W (ширина) и H (высота);
• Удерживая Shift, нарисовать рамку нужного размера с пропорциональным масштабированием.

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

Пошаговая инструкция: создание артборда вручную

1. Откройте Figma и создайте новый файл или откройте существующий.
2. Нажмите F, чтобы активировать инструмент Frame.
3. Кликните в любом месте холста — появится артборд 375×812 пикселей (по умолчанию для iPhone).
4. В правой панели найдите поля W и H и введите нужные значения, например, 1440×900 для десктопа.
5. Нажмите Enter, чтобы применить изменения.
6. Переименуйте артборд в левой панели Layers (например, «Главная — Desktop»).

Стандартные размеры для популярных устройств

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

Обратите внимание: в Figma размеры указываются в пикселях, но система автоматически учитывает плотность экрана (PPI). Для мобильных устройств рекомендуется проектировать в 1x, чтобы разработчики могли экспортировать @2x и @3x.

Совет по работе с кастомными размерами

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

• Сложности при экспорте и верстке;
• Несоответствие сеткам и гайдлайнам платформы;
• Ошибки при использовании компонентов, рассчитанных на стандартные пропорции.

Чтобы избежать этих проблем, придерживайтесь следующих правил:

1. Соберите технические требования от заказчика или разработчиков: точное разрешение, PPI, ориентация.
2. Создайте шаблонный артборд и сохраните его как компонент в библиотеке.
3. Добавьте аннотации: укажите назначение, ориентацию, особенности интерфейса.
4. Протестируйте макет на реальном устройстве или с помощью симулятора.

Пример: создание артборда для киоска

Допустим, вы разрабатываете интерфейс для торгового киоска с разрешением 1024×768. Это старое соотношение 4:3, которое редко встречается в мобильных пресетах.

• Создайте артборд 1024×768.
• Установите ориентацию — портретную или ландшафтную.
• Добавьте границы для отступов (например, 50 px с каждой стороны).
• Настройте сетку 12-колоночную с отступами 20 px.
• Сохраните как «Template: Kiosk 4:3» и добавьте в библиотеку команды.

Такой подход обеспечивает повторяемость и согласованность в больших проектах.

Ошибки, которые нельзя допускать

Даже опытные дизайнеры иногда совершают типичные ошибки при работе с форматами в Figma. Вот самые распространённые:

• Использование одного артборда для всех экранов. Это затрудняет навигацию и делает невозможным создание прототипов.
• Игнорирование ориентации экрана. Например, проектирование мобильного интерфейса в ландшафтной ориентации без проверки юзабилити.
• Работа без грид-сетки. Отсутствие сетки приводит к несогласованным отступам и визуальному хаосу.
• Несоответствие платформенным гайдлайнам. Например, использование iOS-элементов в Android-приложении или игнорирование Material Design.
• Изменение размеров артборда после начала работы. Это может исказить расположение элементов, особенно если используется Auto Layout.

Плагины и автоматизация

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

• Device Frames — добавляет реалистичные рамки устройств (iPhone, iPad, MacBook) поверх артбордов.
• Responsive Layout — помогает тестировать адаптивность, изменяя размеры артборда с сохранением пропорций.
• Size Matters — показывает список популярных разрешений с возможностью быстрого выбора.
• Gridlover — настраивает типографские и колоночные сетки под нужный формат.
• Content Reel — вставляет реальные данные (текст, фото), чтобы проверить, как макет ведёт себя на разных размерах.

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

Как установить плагин

1. В Figma нажмите значок Plugins в правом нижнем углу.
2. Выберите Find more plugins.
3. Найдите нужный плагин по названию (например, «Device Frames»).
4. Нажмите Install.
5. После установки он появится в меню Run plugin.

Экспертное мнение

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

Вопросы и ответы

Заключение

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

• Формат в Figma — это размер артборда, а не всего файла.
• Всегда используйте пресеты для популярных устройств или создавайте шаблоны для кастомных.
• Контролируйте constraints и Auto Layout при изменении размеров.
• Применяйте плагины для автоматизации и согласованности.
• Синхронизируйте форматы в команде через библиотеки компонентов.