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

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

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

Основные способы изменения формата

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

В разделе «Design» вы найдёте параметры размера: ширину (W) и высоту (H). Вы можете ввести нужные значения вручную, например, 1920×1080 для Full HD-экрана. Также доступны опции фиксации соотношения сторон: значок цепочки рядом с полями ввода позволяет заблокировать пропорции, чтобы при изменении одного параметра второй подстраивался автоматически.

Кроме ручного ввода, можно использовать маркеры на границах артауда. Перетаскивая углы или стороны, вы визуально масштабируете холст. Это удобно при экспериментальной работе, когда точные цифры ещё не определены. Однако такой метод менее точен, особенно при необходимости соблюдать стандарты, например, Material Design или Apple Human Interface Guidelines.

Также стоит упомянуть о режиме «Constraints» — ограничениях, которые определяют, как элементы ведут себя при изменении размера родительского фрейма. Например, если вы установите для кнопки constraint «Left & Right», она будет растягиваться вместе с увеличением ширины артауда. Это критически важно при создании адаптивных макетов.

Пошаговый алгоритм изменения формата

1. Откройте проект в Figma и выберите нужный артауд с помощью инструмента «Select» (V).
2. Перейдите в правую панель и найдите раздел «Design».
3. Измените значения ширины (W) и высоты (H) вручную или перетащите границы артауда.
4. При необходимости зафиксируйте соотношение сторон, кликнув по значку цепочки.
5. Убедитесь, что внутренние элементы корректно реагируют на изменения (через constraints).
6. Проверьте результат в режиме прототипа, если артауд связан с другими экранами.

Работа с пресетами и шаблонами

Figma предлагает обширную библиотеку пресетов — готовых форматов, соответствующих популярным устройствам. Это значительно ускоряет процесс создания макетов. При создании нового артауда (через панель слева или комбинацию Shift+A) вы видите список предустановленных размеров: iPhone 15, iPad Pro, Desktop HD и другие.

Пресеты сгруппированы по категориям: Mobile, Tablet, Desktop, Wearable и Custom. Например, в группе Mobile доступны все актуальные модели смартфонов с указанием разрешения и ориентации. Выбор пресета автоматически создаёт артауд нужного размера, что исключает ошибки при ручном вводе.

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

Как добавить кастомный пресет

• Создайте артауд с нужными размерами.
• Выберите его и откройте меню создания нового артауда (Shift+A).
• Нажмите на значок «+» рядом с заголовком «Custom».
• Введите название (например, «Landing Page 1440») и сохраните.
• Новый пресет появится в списке и будет доступен для всех проектов в вашей организации (если используется Team Library).

Автоматическая подстройка размеров

Один из самых мощных инструментов Figma — авто-размер (Auto Layout), который позволяет фреймам динамически изменять свои размеры в зависимости от содержимого. Это особенно полезно при работе с текстовыми блоками, кнопками, карточками и списками.

Чтобы включить авто-размер, выделите фрейм, содержащий элементы, и нажмите кнопку «Auto layout» в правой панели или используйте комбинацию Shift+A. После этого высота (или ширина) фрейма будет автоматически подстраиваться под контент. Например, если вы добавите новый абзац текста, фрейм увеличится, чтобы вместить его.

Auto Layout работает с вертикальной и горизонтальной ориентацией. Вы можете задать отступы (padding), расстояние между элементами (gap) и направление потока. Это делает возможным создание адаптивных интерфейсов без ручной корректировки каждого элемента.

Пример использования авто-подстройки

Представьте, что вы проектируете форму входа. Она состоит из нескольких полей ввода, кнопки и ссылки «Забыли пароль?». Без Auto Layout вам пришлось бы вручную выравнивать каждый элемент. С Auto Layout вы оборачиваете все элементы во фрейм с вертикальным направлением, задаёте gap = 16px, и при любом изменении — добавлении нового поля или изменении текста — макет автоматически перестраивается.

Сохранение часто используемых форматов

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

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

Другой подход — использование страниц в Figma-файле как библиотеки форматов. Например, первая страница может содержать все стандартные артауды вашей компании: «Главная мобильная», «Продукт десктоп», «Email рассылка». Дизайнеры команды копируют нужный артауд и начинают работу с него.

Советы по организации библиотеки форматов

• Называйте артауды понятно: не «Frame 1», а «Checkout Screen – Mobile».
• Добавляйте аннотации: какие отступы, шрифты и цвета используются.
• Обновляйте библиотеку при смене дизайн-системы.
• Делитесь библиотекой через Team Library, чтобы все члены команды имели доступ.

Ошибки и как их избежать

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

Другая ошибка — игнорирование сетки и отступов. При масштабировании холста легко нарушить принципы 8pt-сетки, что влияет на визуальную гармонию. Рекомендуется всегда включать сетку (View → Show Grid) и использовать плагины вроде «Spacing Guide» для контроля отступов.

Также распространена проблема с прототипами. Если вы меняете размер артауда, но не проверяете связи в режиме Prototype, переходы между экранами могут работать некорректно. Особенно это критично при использовании Smart Animate.

Чек-лист перед изменением формата

• Создана ли резервная копия артауда?
• Проверены ли constraints у всех ключевых элементов?
• Сохраняется ли целостность сетки и отступов?
• Обновлены ли связи в режиме Prototype?
• Согласован ли новый формат с дизайн-системой?

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

Интервью с Мариной Смирновой, руководителем дизайн-студии «PixelFlow»

— В нашей практике более 60% проектов требуют адаптации под несколько устройств. Мы активно используем кастомные пресеты и auto-layout. Например, при редизайне сайта для клиента из e-commerce мы создали три основных формата: мобильный, планшетный и десктопный. Каждый из них был сохранён как шаблон и использовался всеми дизайнерами команды.

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

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

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

Заключение

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

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