Как сделать окно в фигме

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

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

Базовый способ создания окон

Начните с создания фона-оверлея, который затемнит интерфейс и сфокусирует внимание пользователя. Для этого нарисуйте прямоугольник на весь артборд и задайте ему полупрозрачную чёрную заливку. Затем создайте само окно - светлый прямоугольник с скруглёнными углами и лёгкой тенью, чтобы оно визуально "парило" над фоном.

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

Создание фона

1. Нарисуйте прямоугольник (R) на весь размер артборда.
2. Заливка: черный (#000000) с непрозрачностью ~40-50%.
3. Это затемняет контент позади и фокусирует внимание на окне.

Создание самого окна

1. Нарисуйте прямоугольник поверх фона.
2. Размер: например, 400-600px в ширину, зависит от контента.
3. Заливка: белый (#FFFFFF) или цвет фона вашего интерфейса.
4. Скруглите углы (например, 8px). Тень: (x:0, y:8px, blur:32px, spread:0, #000000 с opacity ~10-20%).

Добавление контента

• Заголовок: Текст (T) сверху.
• Кнопка закрытия (обязательно!): В правом верхнем углу. Обычно иконка "крестик" (✕). Можно использовать Auto Layout для выравнивания.
• Основной текст / поля / кнопки: Расположите по центру или сетке.
• Кнопки действий: Часто "Отмена" (вторичная) и "Подтвердить" (первичная) внизу.

Группировка и выравнивание

1. Выделите все элементы окна (кроме фона) и сгруппируйте (Ctrl+G) или, что лучше, примените Auto Layout (Shift+A). Это позволит окну растягиваться по высоте контента.
2. Выделите группу окна И фон, и выровняйте их по центру артборда (используйте панель выравнивания).

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

Элемент	Назначение	Рекомендации
Оверлей (фон)	Затемняет контент позади, фокусирует внимание на окне, блокирует взаимодействие с фоном.	Цвет: Чёрный (#000000). Непрозрачность: 40% - 50%.
Контейнер окна	Основная область для содержимого, визуально отделённая от фона.	Заливка: Светлая (часто белая). Скругление углов: 8-12px. Тень: Лёгкая, для эффекта "парения".
Заголовок (H3)	Кратко объясняет суть диалога или действие.	Формулировка должна быть ясной и краткой, например, "Удалить файл?".
Кнопка закрытия (✕)	Позволяет пользователю мгновенно отказаться от действия и закрыть окно.	Располагается в правом верхнем углу. Должна иметь чёткую, удобную для клика область.
Основной текст	Поясняет последствия действия или предоставляет дополнительную информацию.	Должен быть лаконичным и поддерживающим заголовок.
Кнопки действий	Предлагают пользователю выбор для завершения сценария (подтвердить, отменить).	Располагаются внизу. Первичная кнопка (главное действие) - визуально акцентирована.

 

Продвинутый способ с Auto Layout и Variants

Для профессиональной работы превратите окно в компонент - это позволит вам повторно использовать его в проекте и централизованно вносить изменения. Ключевым шагом станет применение Auto Layout ко внутреннему содержимому окна: это автоматически будет менять его высоту при редактировании текста или добавлении элементов.

С помощью вариаций (Variants) вы сможете в одном компоненте объединить разные состояния, например, окно с предупреждением, информационное окно или окно с формой. Такой системный подход экономит время и обеспечивает визуальную согласованность всех диалогов в интерфейсе. Вы сможете мгновенно обновлять стиль всех окон в проекте, правя лишь их главный компонент.

Создание компонента

1. Сделайте базовое окно, как описано выше, но без фона.
2. Выделите только само окно (белый прямоугольник с контентом) и нажмите Ctrl+Alt+K (или кнопку "Create Component").
3. Это главный компонент (Main Component).

Использование Auto Layout для контента

1. Внутри компонента выделите все элементы (заголовок, текст, кнопки) и примените Auto Layout (Shift+A).
2. Настройте Direction: Vertical, Spacing между элементами (например, 24px).
3. Установите Padding для окна (например, по 32px со всех сторон). Теперь при изменении текста окно будет автоматически подстраиваться по высоте.

Создание варианта с фоном

1. Нажмите на компонент - в правой панели в разделе Variants нажмите "+".
2. Создайте два варианта:

• Modal/With Backdrop (само окно + отдельный слой с фоном, который лежит под компонентом в Instance).
• Popup/Without Backdrop (только окно, для всплывающих подсказок).

Как использовать:

1. Перетащите Instance вашего компонента из панели Assets на артборд.
2. Если нужен фон, просто добавьте под ним прямоугольник с затемнением.
3. Чтобы изменить текст в кнопках или заголовке, просто кликните дважды на Instance и отредактируйте. Auto Layout всё адаптирует.

Прототипирование как способ оживить окно

Чтобы показать логику работы окна, создайте прототип с двумя ключевыми состояниями: страницу до появления окна и страницу с открытым окном. Затем свяжите их интерактивными переходами, например, назначьте клик по кнопке "Удалить" как триггер для открытия окна.

Для правдоподобной анимации используйте эффект Smart Animate с плавным easing, который имитирует постепенное появление и затемнение фона. Также не забудьте прототипировать и обратное действие — закрытие окна по крестику или кнопке "Отмена", чтобы продемонстрировать полный цикл взаимодействия. 

Подготовка фреймов

• Frame 1: Страница без окна. Например, кнопка "Удалить".
• Frame 2: Та же страница, но с затемненным фоном и окном поверх.

Создание интерактива

1. На Frame 1 выберите кнопку "Удалить".
2. В правой панели перейдите на вкладку Prototype.
3. Нажмите на синий плюсик возле кнопки и потяните связь на Frame 2.
4. Настройте: Interaction: On Click - Action: Navigate to - Animation: Smart Animate (или Move In, Fade In).
5. Easing: Ease Out (для плавности), Duration: 300ms.

Добавление закрытия

• На Frame 2 создайте связь от кнопки "крестик" и от кнопки "Отмена" назад на Frame 1.
• Настройте: On Click - Navigate to - Frame 1, анимация Smart Animate или Fade Out.

 

Теперь в режиме прототипа (Ctrl+P) можно кликать на кнопки, и окно будет плавно появляться и исчезать.

 

Ключевые советы по дизайну окна

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

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

1. Доступность: Убедитесь, что контраст текста достаточный. У кнопки закрытия должна быть достаточная область клика.
2. Фокус: Первичная кнопка действия должна быть визуально акцентирована.
3. Запрет скролла: Фон (оверлей) часто делают на весь экран, чтобы блокировать взаимодействие с контентом позади.
4. Закрытие: Окно должно закрываться не только на крестик, но и:

• По клику на оверлей.
• По нажатию клавиши Esc.
• В прототипировании Figma это имитируется связью с оверлея.

Быстрые шаблоны:

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

• Modal Windows Kit.
• Dialog System.
• iOS Dialogs или Material Design Dialogs.

Начните с простого прямоугольника и фона, затем обязательно освойте Auto Layout для гибкости и Components для переиспользования. Прототипирование добавит интерактивности вашему дизайну.

Вывод

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