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

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

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

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

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

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

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

ИнтерфейсФигма
Отправить
Поделиться
Запинить

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