Школа
Интерфейс

Функция Auto Layout в Фигме — как делать резиновые кнопки

2 июня 2020
👁 54379  
Интерфейс

Функция Auto Layout в Фигме — как делать резиновые кнопки

2 июня 2020
👁 54379  
Константин Мозговой
Дизайнер бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Раньше в Фигме, чтобы переименовать кнопку, надо было отредактировать текст, подправить размер кнопки, подвинуть соседнюю кнопку и так далее. Но уже полгода как появилась функция Auto Layout, а ей почему‑то не все пользуются.

Кнопки с автолейаутом меняют размер в зависимости от набранного текста, а группа таких кнопок расталкивает друг друга. Вот как это работает:

Чтобы сделать такую кнопку, наберите текст кнопки и нажмите Shift + A, чтобы превратить его в автолейаут. Также текст можно обернуть во фрейм и в панели свойств нажать на иконку «+» в блоке Auto Layout. Фигма обернёт текст в автолейаут и задаст внутри него отступы по умолчанию. Их можно скорректировать в панели свойств. Получившаяся кнопка автоматически меняет ширину при изменении текста:

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

Теперь сделаем так, чтобы несколько кнопок при изменении в них текста отталкивали соседние, как на гифке вначале. Для этого трижды скопируйте кнопку и поставьте копии рядом друг с другом. Выделите их, оберните во фрейм и превратите в автолейаут. Укажите отступ между ними, например, 20 пикселей. Измените текст в каждой кнопке, например, на «Принять», «Регистрация» и «ОК»:

Если всё сделано правильно, кнопки должны расталкивать друг друга. К тому же их можно менять местами перетаскиванием или стрелочками на клавиатуре. А изменяя значения ограничителей в блоке Constraints, можно управлять тем, в какую сторону должны расталкиваться кнопки.

P. S. Это был вторничный совет о дизайне интерфейсов. Присылайте вопросы.

ИнтерфейсФигма
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы