x
 
Константин Мозговой
2 июня 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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

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

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

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

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

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

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

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Как передавать макеты в разработку? 3 Как работать в Фигме быстрее. Часть 3 1 Как работать в Фигме быстрее. Часть 2 Как работать в Фигме быстрее 6




Недавно всплыло

Как нанимать исполнителей на временную работу в отдельные проекты? 1 Как выжить в дистанционной работе. Инструменты на удалёнке 4 Как выжить в дистанционной работе. Разделить согласование и сдачу 1 Висячие предлоги в английском 1