Дизайн и Графика

Адаптивная кнопка в Figma создаётся путём применения функции Auto Layout к группе элементов (текст, иконка, фон), которая автоматически изменяет размер и расстояние между компонентами при изменении содержимого. Это позволяет кнопке масштабироваться без ручной корректировки размеров при изменении текста или добавлении иконок.

Зачем нужна адаптивная кнопка с Auto Layout

• Автоматическое изменение размера кнопки при изменении текста, без необходимости вручную растягивать элемент.
• Сохранение отступов и расстояний между элементами (текст, иконка) при масштабировании кнопки.
• Упрощение создания компонентов для дизайн-системы, которые можно переиспользовать в разных частях проекта.
• Ускорение процесса дизайна благодаря автоматизации изменения размеров элементов.
• Обеспечение консистентности дизайна при работе в команде, так как все кнопки будут вести себя одинаково.

Пошаговая инструкция по созданию адаптивной кнопки

1. Откройте проект в Figma и создайте новый фрейм (Frame) размером примерно 200×60 пикселей для кнопки.
2. Добавьте прямоугольник (Rectangle) внутри фрейма, который будет фоном кнопки, и установите нужный цвет заливки.
3. Добавьте текстовый элемент (Text) с текстом кнопки (например, «Нажмите здесь») поверх прямоугольника.
4. При необходимости добавьте иконку (Icon) слева или справа от текста как отдельный элемент.
5. Выделите прямоугольник (фон кнопки), нажав на него один раз в левой панели.
6. Нажмите на кнопку Add auto layout в правой панели (или используйте горячую клавишу Shift+A).
7. Откроется панель настроек Auto Layout; установите направление макета как Horizontal (слева направо).
8. В параметре Padding установите внутренние отступы: например, 16 пикселей слева/справа и 12 пикселей сверху/снизу.
9. В параметре Gap установите расстояние между текстом и иконкой, если иконка присутствует (например, 8 пикселей).
10. Перетащите текстовый элемент внутрь фрейма с Auto Layout.
11. Если добавляется иконка, перетащите её также внутрь фрейма с Auto Layout.
12. Убедитесь, что все элементы (текст и иконка) выровнены вертикально относительно друг друга через параметр Align (выберите Center).
13. Установите параметр Fill container для фона кнопки, чтобы он занимал всё доступное пространство внутри фрейма.
14. Проверьте результат, изменив текст кнопки на более длинный или короткий — кнопка должна автоматически изменить размер.
15. Если нужна иконка, убедитесь, что её размер зафиксирован (например, 24×24 пикселя), чтобы она не масштабировалась при изменении текста.
16. Создайте компонент из этой кнопки, нажав Create component (или правой кнопкой мыши → Create component).
17. Сохраните проект, нажав Ctrl+S (Windows) или Cmd+S (Mac).

Настройка состояний и вариантов кнопки

• После создания компонента добавьте варианты для разных состояний кнопки: Default, Hover, Active, Disabled.
• Для каждого варианта измените цвет фона и текста через правую панель в разделе Design.
• Используйте копирование компонента для быстрого создания вариантов: выберите компонент и нажмите Ctrl+D (Windows) или Cmd+D (Mac).
• Убедитесь, что все варианты используют один и тот же Auto Layout, чтобы сохранить адаптивность.

Часто задаваемые вопросы

Почему текст кнопки не центрируется относительно иконки при использовании Auto Layout? Выделите текстовый элемент и установите параметр Align на Center в разделе Auto Layout, или измените значение Vertical align на Middle в панели свойств.

Как зафиксировать размер иконки так, чтобы она не масштабировалась при изменении размера кнопки? Выделите иконку внутри Auto Layout и установите фиксированное значение ширины и высоты в разделе Constraints или отключите Fill container для этого элемента.

Можно ли использовать Auto Layout для кнопки с множественными элементами (текст, иконка слева и иконка справа)? Да, создайте вложенные Auto Layout: основной слой с горизонтальной ориентацией для всей кнопки и вложенные слои для иконок слева и справа с вертикальной ориентацией.