Как выбрать формат в фигме

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

Форматы в Figma: что это и зачем они нужны

Формат в Figma — это рамка, которая задаёт размер холста для конкретного экрана или компонента. Это может быть карточка продукта, экран мобильного приложения, веб-страница или даже баннер. Формат определяет ширину и высоту в пикселях, а также может включать ориентацию (портретную или ландшафтную). Он служит основой для проектирования пользовательского интерфейса и помогает дизайнеру визуализировать, как элементы будут выглядеть в реальных условиях.

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

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

Основные типы форматов по платформам

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

Для мобильных приложений iOS и Android существуют чёткие рекомендации по размерам. Например, iPhone 14/15 в портретной ориентации использует формат 393×852 пикселей, а для Android часто берут 360×640 или 411×823. Эти значения соответствуют логическим пикселям, а не физическим, что упрощает работу с разными плотностями экранов.

В веб-дизайне чаще всего используются фиксированные ширины: 1440px, 1280px или 1920px. Высота при этом может быть неограниченной, так как веб-страницы прокручиваются. Однако важно помнить, что современные сайты проектируются адаптивно, поэтому одного формата недостаточно — нужен набор для разных breakpoints.

Для других устройств — умных часов, автомобильных дисплеев, VR — форматы могут быть специализированными. Apple Watch, например, требует маленьких рамок: 414×394 (Series 9). При работе с IoT или embedded-интерфейсами важно заранее уточнять ТЗ и физические параметры экрана.

Как создать и настроить формат

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

1. Откройте новый файл или страницу в Figma.
2. Нажмите на иконку «Frame» в левой панели инструментов или используйте горячую клавишу F.
3. В правой панели свойств выберите нужный шаблон из выпадающего списка или введите свои значения в поля Width и Height.
4. При необходимости измените ориентацию, цвет фона рамки или добавьте границы.
5. Для повторного использования сохраните формат как «Custom Device» в настройках.

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

• Создайте рамку с нужными размерами.
• Нажмите на три точки рядом с названием формата.
• Выберите «Save as custom device».
• Присвойте имя, например, «Landing Page Desktop» или «Admin Panel Mobile».

Теперь этот формат будет доступен во всех ваших проектах. Это особенно полезно для внутренних стандартов компании или повторяющихся проектов.

Работа с мастер-фреймами

Мастер-фреймы — это шаблоны, на основе которых создаются экземпляры. Они полезны при проектировании систематизированных интерфейсов, таких как админ-панели или каталоги.

• Создайте базовый фрейм с отступами, гридами и структурой.
• Превратите его в компонент (через значок «+» в панели слоёв).
• Используйте экземпляры для быстрого создания новых экранов.
• При изменении мастера все экземпляры обновятся автоматически.

Это экономит время и обеспечивает консистентность.

Ошибки при выборе формата и как их избежать

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

Первая — использование произвольных размеров без привязки к реальным устройствам. Например, создание макета 500×800 для мобильного приложения, хотя ни один популярный смартфон не имеет таких габаритов. Это затрудняет адаптацию и вызывает вопросы у разработчиков.

Вторая — игнорирование безопасных зон (safe areas) на iOS. Верхняя часть экрана iPhone скрыта под вырезом, а нижняя — под свайп-полосой. Если не учитывать это, важные элементы могут оказаться вне видимости.

Третья — попытка охватить всё одним форматом. Дизайн для 1440px не будет работать на 360px без адаптации. Отсутствие responsive-подхода делает макет неполноценным.

Проверенные правила для корректного выбора

• Используйте стандартные размеры для платформы.
• Учитывайте пиксельную плотность: 1x, 2x, 3x для экспорта ассетов.
• Добавляйте отступы под нотч и свайп-зоны на мобильных.
• Проектируйте минимум три брейкпоинта: мобильный, планшет, десктоп.
• Синхронизируйтесь с разработчиками: узнайте, какие разрешения они поддерживают.

Адаптивные решения и респонсивность

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

Figma поддерживает Auto Layout и Constraints — инструменты, которые позволяют элементам вести себя предсказуемо при изменении размеров. Например, кнопка может растягиваться по ширине контейнера или оставаться центрированной.

Для создания адаптивных макетов:

• Используйте Auto Layout для групп и фреймов.
• Настройте Constraints: left-right, top-bottom, center и т.д.
• Создавайте несколько экземпляров одного экрана в разных форматах.
• Связывайте их через Prototype, чтобы показать поведение при изменении ширины.

Такой подход называется «responsive design in Figma» и активно используется при презентации поведения интерфейса.

Плагины для упрощения работы

• Device Frames — добавляет реалистичные рамки устройств (iPhone, iPad, MacBook).
• Screen Specs — автоматически подставляет технические характеристики экрана.
• Breakpoints — помогает быстро переключаться между стандартными веб-брейкпоинтами.
• Auto Resize — упрощает настройку constraints для множества объектов.

Эти инструменты экономят время и снижают количество ошибок.

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

По её словам, лучшие практики включают:

• Создание «пилотного» формата — основного, с которого начинается дизайн.
• Тестирование макетов на реальных устройствах через Figma Mirror.
• Использование переменных (Variables) для управления размерами в динамике.

Она также отмечает, что с выходом Figma Variables и Conditional Design появились новые возможности для адаптивных систем. Теперь можно задавать логику изменения размеров на основе условий, что приближает Figma к реальному коду.

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

Заключение

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

• Выбирайте формат на основе платформы и данных о пользователях.
• Используйте предустановленные и кастомные шаблоны для консистентности.
• Учитывайте safe zones, пиксельную плотность и ориентацию экрана.
• Применяйте Auto Layout и Constraints для адаптивного дизайна.
• Тестируйте макеты на реальных устройствах через Figma Mirror.