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

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

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

Содержание статьи:

Что такое экран в Figma
Как создать экран: шаги для начинающих
Настройка размеров и ориентации
Работа с авто-расположением
Организация экранов в проекте
Ошибки, которые допускают новички
1. Создание без фреймов
2. Неправильные размеры
3. Отсутствие имён
4. Игнорирование Auto Layout
5. Перегрузка одного экрана
Экспорт и передача разработчикам
Экспертное мнение
Вопросы и ответы
Заключение

Что такое экран в Figma

В контексте Figma термин «экран» чаще всего означает фрейм (frame) — контейнер, который определяет границы макета. Это не просто рамка, а полноценная рабочая область, внутри которой размещаются все элементы интерфейса: кнопки, текст, изображения, иконки. Фрейм ведёт себя как родительский блок, аналогичный

в HTML, и может содержать вложенные слои и компоненты.

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

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

Полезно знать: В Figma нет отдельного объекта «экран» — всё, что вы видите как экран, является фреймом с заданными размерами и содержимым.

Как создать экран: шаги для начинающих

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

Откройте новый файл в Figma или перейдите на нужную страницу проекта.
Нажмите клавишу F на клавиатуре или выберите инструмент Frame в верхней панели.
Щёлкните и потяните мышью на холсте, чтобы создать фрейм нужного размера.
Или воспользуйтесь предустановленными шаблонами: в правой панели в разделе Constraints выберите устройство (например, iPhone 15, Desktop 1920px).
Дважды щёлкните по фрейму, чтобы задать ему имя (например, «Главная — авторизованный»).

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

«Называйте экраны понятно и единообразно. Используйте формат: [Название экрана] — [Состояние]. Например: “Профиль — редактирование”. Это упрощает навигацию в больших проектах.» — Мария Кузнецова, UX-дизайнер, 7 лет опыта

Настройка размеров и ориентации

Правильный выбор размера экрана напрямую зависит от целевой платформы. Для мобильных приложений используются стандартные разрешения: 375×812 px (iPhone), 412×915 px (Android). Для веб-интерфейсов типичны 1920×1080 px, 1440×900 px или адаптивные значения.

Figma предлагает удобную библиотеку предустановленных размеров:

Мобильные устройства: iPhone, Samsung Galaxy, Pixel;
Планшеты: iPad, Surface;
Десктоп: Web, Custom Size;
Телевизоры и другие устройства (через плагины).

Если нужно создать экран с нестандартным размером, просто введите значения вручную в поля W (ширина) и H (высота) в правой панели свойств. Также можно изменить ориентацию: портретную или ландшафтную, перетаскивая углы фрейма или меняя числовые значения.

Платформа	Типичный размер (px)	Рекомендации
Мобильное приложение (iOS)	375 × 812	Используйте Safe Area для нижнего и верхнего отступов
Мобильное приложение (Android)	412 × 915	Учитывайте наличие системных панелей
Веб-сайт (десктоп)	1440 × 1024	Проектируйте под ширину контента 1200–1366 px
Адаптивный дизайн	360 × 640 до 1920 × 1080	Используйте Auto Layout и Constraints

Полезно знать: Figma позволяет сохранять часто используемые размеры как кастомные пресеты — это экономит время при создании однотипных экранов.

Работа с авто-расположением

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

Чтобы включить авто-расположение:

Выделите фрейм или группу элементов.
Нажмите кнопку + Auto Layout в правой панели.
Настройте направление (горизонтальное/вертикальное), отступы и выравнивание.

После активации Auto Layout фрейм начинает «умно» реагировать на изменения: при добавлении новых элементов они автоматически встраиваются в поток, а при изменении текста — контейнеры растягиваются. Это особенно полезно для кнопок, списков, карточек и шапок интерфейса.

«Auto Layout — ваш главный союзник в создании живых, масштабируемых экранов. Не используете его — теряете до 40% времени на ручную подгонку.» — Алексей Петров, продуктовый дизайнер, Figma MVP

Организация экранов в проекте

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

Группируйте экраны по сценариям: Авторизация, Профиль, Настройки.
Используйте страницы (Pages) в левой панели для разделения крупных модулей: Mobile App, Web Dashboard, Prototype.
Применяйте именование по шаблону: [Секция]_[Экран]_[Состояние]. Пример: Auth_Login_Idle.
Добавляйте комментарии и заметки для команды, особенно если экран находится в разработке.

Также полезно использовать плагины вроде Content Reel для быстрой вставки тестовых данных или Flow Helper для визуализации связей между экранами.

Полезно знать: Figma поддерживает цветовые метки для страниц — используйте их, чтобы визуально отличать завершённые, черновые и архивные ветки проекта.

Ошибки, которые допускают новички

Даже простая операция — создание экрана — может быть выполнена неправильно. Вот типичные ошибки и способы их избежать:

1. Создание без фреймов

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

2. Неправильные размеры

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

3. Отсутствие имён

Фреймы с названиями «Frame 1», «Copy 2» — кошмар для командной работы. Всегда давайте осмысленные имена.

4. Игнорирование Auto Layout

Ручное выравнивание занимает больше времени и повышает риск ошибок при обновлении дизайна.

5. Перегрузка одного экрана

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

«Если вы правите один и тот же элемент вручную более трёх раз — пора внедрять Auto Layout и компоненты.» — Дарья Смирнова, UI-архитектор, опыт 9 лет

Экспорт и передача разработчикам

Качественно созданный экран должен быть легко читаем для разработчиков. Вот как подготовить фрейм к передаче:

Проверьте, чтобы все тексты были в векторах, а не в виде изображений.
Убедитесь, что цвета заданы переменными (Variables), а шрифты соответствуют документации.
Добавьте отступы и расстояния, используя режим Inspect.
Опубликуйте библиотеку стилей, если проект командный.
Используйте комментарии для пояснения сложных взаимодействий.

Figma позволяет экспортировать фреймы в PNG, SVG, PDF. Но чаще всего разработчики работают прямо в Figma через режим Developer, где могут копировать CSS, получить доступ к токенам и проверить отступы.

Полезно знать: При использовании Variables (переменных) цветов, шрифтов и размеров, разработчики могут автоматически подтягивать значения через плагины вроде Zeplin или Figma to Flutter.

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

«Создание экрана — это не просто технический шаг, а начало проектирования системы. Хороший экран — это не только красиво, но и логично структурировано. Я всегда советую своим студентам начинать с Wireframe, даже если заказчик хочет сразу “красивый дизайн”. Сначала — архитектура, потом — эстетика.» — Сергей Волков, старший UX-стратег, преподаватель Школы дизайна ВШЭ

Сергей также отмечает, что современные практики требуют не просто статических экранов, а «живых» прототипов: «Используйте Smart Animate и Interactive Components — это повышает качество тестирования и сокращает количество правок на этапе разработки».

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

Можно ли создать экран без использования фрейма?

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

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

Скопируйте готовый фрейм (Ctrl+C / Ctrl+V), затем измените содержимое. Или используйте плагин Batch Frame Creator, чтобы генерировать серию экранов за раз.

Что делать, если экран должен быть больше стандартного разрешения?

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

Как синхронизировать экраны между командой?

Используйте Shared Libraries и Publish Changes. Все фреймы, основанные на компонентах, будут автоматически обновляться при изменениях в библиотеке.

Нужно ли создавать отдельные экраны для каждого состояния (ошибка, загрузка, пустой список)?

Да, это лучшая практика. Каждое состояние должно быть задокументировано отдельно, чтобы избежать недопонимания с разработкой.

Заключение

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

Главное — подходить к созданию экрана системно: сначала размер и структура, потом содержание, затем взаимодействия. Следуя этим принципам, вы сократите количество правок, ускорите работу команды и повысите удовлетворённость клиентов результатом.

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

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

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

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

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

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

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

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

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.