Как связать кнопки между собой в фигме

Обновлено: 19.04.2024

Frame— это рабочая область, где будут размещаться элементы интерфейса, дизайна сайта или мобильного приложения.

Как сделать фрейм в фигме?

Чтобы создать Frame в программе Figma выберите иконку слева и сверху в панели инструментов. Наведите на пустую область и нажмите левую кнопку мыши. Горячие клавиши для создания фреймов — «F» и «A».

Почему 2 горячих клавиши, а не одна? Это связано с тем, что существует программа Sketch. Там есть аналог фреймов, которые называются «Артборды». Чтобы в скетче создать артборд нужно нажать на клавишу «А». Поскольку скетч — это главный конкурент фигмы, чтобы облегчить работу тем, кто переходит на фигму со скетча, разработчики решили сделать привычное для этих людей сокращение.

Если не тянуть мышкой и просто нажать на левую клавишу мыши, то будет создан фрейм размерами 100 на 100px.

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

Выбираем другое разрешение фрейма из списка

Если выбрать фрейм, то можно изменить его выбрав в выпадающем списке справа другое разрешение либо изменить его на группу.

Чтобы изменить шаблон можно нажать на эту область и выбрать другое разрешение либо сделать из фрейма группу. Изменение «Frame» на «Group» или выбор других размеров из шаблонов. Группа позволяет объединять несколько элементов, но в отличие от фрейма в группе меньше возможностей и нет некоторых функций.

Меняем размер по умному. Как уменьшить или увеличить Frame в Figma ?

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

Если при изменении размера, вы будете использовать клавиши ниже, то будет вам счастье:
Ctrl — элементы внутри не привязаны к краям.
Alt — одновременное увеличение фрейма слева и справа, сверху и снизу.
Shift — пропорциональное изменение размеров.
Также можно использовать комбинации этих горячих клавиш.

Следующее как можно изменять размер фрейма — это менять ориентацию на горизонтальную и вертикальную. Например если ширина фрейма 500 пикселей, а высота 100, то можно поменять размеры местами, просто нажимая на эти иконки.

Иконка со стрелками позволяет подогнать размеры фрейма под содержимое которое есть внутри фрейма. Например возьмем график, и нажимаем на эту иконку. Размеры будут подогнаны под содержимое.

Чтобы изменить расположение фрейма по оси Х и Y можно использовать правую панель и значения которые там есть.

Значения W и H позволяют видеть и изменять размеры фрейма. Справа есть иконка цепи. Если её активировать, то размеры будут изменяться пропорционально. Например если включить эту иконку и создать фрейм 100 на 100px. То при изменении значения ширины на 140 высота тоже будет 140px. Если отключить эту иконку, то можно отдельно изменять размеры ширины или высоты.

Изменение угла наклона и скругление углов

Чтобы скруглить углы у фрейма (сделать его круглым), смотрите в правую панель. Сверху есть иконка скругления углов и иконка изменения размеров наклона угла. Также если нажать на самую правую иконку, то будет возможность скруглять любые углы отдельно.

Прошло уже больше недели с Figma Config 2022 и выхода большого количества обновлений, а до сих пор нет полноценного гайда по новым Components Properties. Исправляемся!

Boolean — позволяет менять видимость слоя компонента и имеет два значения true/false.
Применим для всех слоев компонента.

Text — позволяет менять текст через панель properties.
Применим только к текстовым слоям.

Instance Swap — позволяет заменять вложенные компоненты.
Применим только для вложенных компонентов.

Выберите компонент, нажмите «+» на панели Properties и выберите свойство, введите название — параметр создан. Теперь выберите слой и привяжите его к нужному свойству.

Выберите нужный слой, нажмите на иконку свойства и выберите Create property, введите название, свойство появится на панели Property.

Скрывает не только слои но и связанные с ним параметры из панели properties.

Чувствителен к иерархии. Он предлагает к замене компоненты находящиеся с ним на одном уровне (file, page, artboard). Если вы хотите ограничить список предлагаемых instanс’ов — объедините их в один artboard.

Здесь кроется первое ограничение - через properties вы не можете переключать варианты вложенного компонента. Для того чтобы работал Instant swap это должны быть самостоятельные компоненты не объединенные как variants.

Если раньше при добавлении варианта сразу создавалась копия компонента, сейчас (хоть это и называется по-старому Variant) по сути добавляет новое свойство. Копировать компонент и назначать свойство нужно самому.

При выборе слоя внутри компонента с вариантами, figma предложит выбрать подобные (иконочка прицела).

Самое очевидное применение — сокращение больших матриц вариантов. Иконки на кнопках, нотификации на табах/аватарах и многое другое можно теперь сделать boolean props без дублирования.
Изменение текста пригодится если с макетом взаимодействуют менеджеры когда нужно будет поменять название кнопки например по требованию комплаенса. Меньше риск что они что-то смогут повредить.
С Instant Swap не нужно будет постоянно проваливаться в слои компонента чтобы что-то изменить (логотип компании, иконку и т/д).

Что же такое Components Properties на самом деле?
Как по мне это скорее концептуальный разворот нежели банальное обновление.

Как эволюционировала работа с компонентами:

В самом начале каждое состояние элемента нужно было делать отдельным компонентом, артборды были ограничены в адаптиве, нельзя было использовать вложенные компоненты — библиотеки были перегружены компонентами под каждое состояние и каждый размер интерфейса.
Auto layout позволил сократить количество компонентов завязанных на разнице в размерах, адаптивность так же позволила сократить некоторые состояния скрывая какие-то элементы. Но — внутри стало появляться большое кол-во скрытых слоёв.
Variants привнесли иерархию, убрали необходимость проваливаться внутрь компонента чтобы включить или выключить какой-то элемент … Но — вернули большие матрицы компонентов.
Components Props решили проблему больших матриц компонентов, в каком-то смысле вернул нас к управлению состояниями видимостью и сделал это удобнее. Но — были полностью переосмыслены варианты.

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

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

В прошлой статье мы создавали стили для текста, заливок, стили теней, а также компонент для плашек.

В своем Telegram-канале я регулярно делюсь полезными ссылками, своими статьями, мыслями о своей работе.

Кнопки могут иметь несколько состояний:

Кнопка в спокойном состоянии.
Кнопка при наведении.
Кнопка, подсвеченная при навигации по странице при помощи таба.
И неактивная кнопка.

Сегодня мы рассмотрим, как отрисовать все эти состояния и легко переключаться между ними.

Кнопки в Figma можно создать двумя способами: с использованием Auto Layout (масштабируются вместе с текстом внутри) и кнопки с текстом, расположенным по центру вне зависимости от того, до какого размера масштабирована сама кнопка. В разных ситуациях удобны разные варианты кнопок.

Создаем прямоугольник нужного размера, задаем скругление углов и прочие эффекты, если нужно. Подбираем цвет из палитры, которую мы создавали в предыдущей статье. У меня это будет синяя кнопка. Если забыли создать нужны стиль — создаём, добавляем в нашу систему.

С помощью Text Tool (T) пишем название кнопки. Задаем стиль текста, зарезервированный в нашей дизайн-библиотеке специально для кнопок (смотри предыдущую статью).

Жмем на иконку с тремя точками в панели справой. Делаем настройки, как на картинке. Теперь границы рамки текста будут изменяться в размере вместе с самим текстом по мере набора фразы.

Далее выравниваем слой с текстом относительно прямоугольника по центру. Для этого, выделив оба слоя, последовательно жмем две иконки вверху в правой панели:

Затем выделаем оба слоя и запаковываем в компонент, задаем компоненту имя.

Сразу поговорим об именовании компонентов: чтобы слева на вкладке Assets наши компоненты расположились в одной группе, их следует именовать через слеш. Например я хочу, чтобы все кнопки у меня попали в папку Button. Для этого я использую в именах префикс button /. Например button /blue и так далее. Таким же образом можно создавать подпапки. Заранее продумайте, как вы хотите объединить создаваемые вами компоненты и придумайте названия для папок.

Чтобы объединить компоненты в одну группу, назначаем всем им грамотные имена с использованием / Татьяна Маслакова

Это удобно также и при замене компонентов в instance. Они там также объединяются в группы.

Чтобы объединить компоненты в одну группу, назначаем всем им грамотные имена с использованием «/» Татьяна Маслакова

Итак, мы задали имя новому компоненту кнопки. Далее, не снимая выделения с компонента в панели справа ищем вкладку Auto Layout и жмем плюс. Теперь, если мы захотим отредактировать текст кнопки, ее размер будет изменяться вместе с этим текстом.

Изменяя два правых параметра на вкладке Auto Layout, добиваемся подходящего размера отступов по вертикали и горизонтали от границ текста до края кнопки.

Доработка функционала кнопки

Мы можем расширить функционал компонентакнопки, к примеру, добавить в кнопку иконку, которую можно будет скрывать или показывать в слуае необходимости.

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

Внимание: размеры компонентов должны быть одинаковыми. У меня получилось поле 20x20 пикселей. Иконка внутри компонента может не занимать все это поле, но сами компоненты иконок должны быть идентичны по размеру.

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

Остальные иконки пока оставляем в покое. Позже я покажу, как можно легко манипулировать кнопками.

Скрываем на палитре слоев новую иконку, чтобы базовое изображение кнопки было простым, при в процессе работы с экземплярами кнопки, мы сможем отобразить иконку, если она понадобится в дизайне.

Базовый компонент готов.

Создаем экземпляр компонента кнопки (Contrl+d или Comand+d самого компонента или перетащить новую кнопку из панели Assets).

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

Я изменила стиль заливки кнопки, у меня кнопка будет чуть чуть темнеть при наведении.

Теперь выделяем экземпляр кнопки и снова запаковываем ее в компонент, даем имя с использованием /. Новый компонент теперь наследует компонент базовой кнопки. Если мы что-то поменяем в базовой кнопке (кроме цвета, который мы переопределили), это сразу отразится на состоянии других кнопок, созданных на основе базового компонента кнопки.

Активность по табу и неактивная кнопка

Это состояние делается аналогичным образом. Создается экземпляр компонента базовой кнопки и изменяются нужные параметры: заливка, стиль, эффекты.

У меня активные по табу кнопки будут иметь синюю тень. Для этого я дополнительно создала стиль для тени. Как это сделать, читайте в предыдущей статье.

Для неактивной кнопки (которую нельзя нажать и она в интерфейсе например будет активирована позже) я сделала полупрозрачный фон, чтобы кнопка интересно смотрелась не только на белом, но и на на неоднородном цветном фоне. Для этого был создан новый стиль заливки с прозрачностью в 15%. У теста внутри кнопки была понижена непрозрачность до 50%.

Иногда необходимо четко вписать кнопку в сетку проекта, либо сделать кнопку огромной на всю ширину контента.

Начинаем так же, как в пред. варианте: создаем прямоугольник, текст, центрируем их и создаем компонент. Но в этот раз вместо Auto Layout мы будем задавать Constraints: Center, Center:

Если в кнопках нужны иконки, то нужно сгруппировать текст и иконку и применить Auto Layout только на саму эту группу. А далее уже центрировать с помощью Constraints всю группу внутри кнопки.

Constraints для фонового прямоугольника: Left+Right, Top+Bottom.

Состояния масштабируемой кнопки: создаем экземпляр компонента масштабируемой кнопки, настраиваем внешний вид. Запаковываем все в еще один компонент с настройками Constraints: Left+Right, Top+Bottom.

Auto Layout в данном случае не используется.

Кнопки могут состоять не только из прямоугольника и текста. Очень интересно смотрятся разного рода кнопки, построенные шейпах с различными настройками Constraints или Auto Layout:

Используя описанные принципы, мы можем создать компоненты кнопок другого цвета, кнопки с обводкой и т.д. Главное правило: компоненты должны наследоваться от компонента базовой кнопки. Этот компонент будет влиять на остальные и задавать им базовые свойства.

Таким образом можно легко управлять всеми кнопками сразу через базовый компонент:

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

Мы еще не раз применим в нашей библиотеке принцип наследования. Благодаря этому, изменения всей системы будут занимать минимум времени и наша дизайн-система будет очень гибкой и легко перестраиваемой под различные проекты в совершенно разных стилях.

Вспомогательный компонент form_stroke/simple

Далее мы рассмотрим различные формы ввода информации. Для их создания нам понадобится небольшой вспомогательный компонент form_stroke/simple.

Обратите внимание на именование компонента — я заранее его задаю с использованием /, чтобы позднее добавить в группу компонентов form_stroke другие вспомогательные компоненты

Компонент form_stroke/simple будет содержать в себе стиль оформления самого прямоугольника формы ввода. Я сделала обычный прямоугольник со сругленными углами, с заданными параметрами заливки и обводки. Constraints прямоугольника: left+right и top+bottom.

В своих дизайнах мы можем не ограничиваться только прямоугольником. Например Это может быть и просто линия снизу компонента, которая позволит получить стильное поле ввода с подчеркиванием полей вместо прямоугольников.

Не забываем использовать наши готовые стили заливок, эффектов, при необходимости добавлять в библиотеку новые стили, если они потребуются.

Активность по табу и ошибочное состояние базового компонентаИтак, компонент готов. Я вынесла его отдельно, чтобы у нас была единая точка редактирования стиля для всех форм и чекбоксов — это довольно удобно.

Активность по табу и ошибочное состояние базового компонента

Также нам потребуютсся два унаследованных компонента от form_stroke/simple для активных состояний по табу и состояний ошибки ввода. Для этого делаются 2 новых экземпляра form_stroke/simple, настраивается их вид и эти экземпляры запаковываются в компонента. Имена компонентам я задала по тем же правилам, что и базовый компонент, чтобы Оби объединились в группу

Создаем само поле ввода (инпут)

Для создания поля ввода нам может понадобиться:

Ранее созданный базовый компонент
Отдельный текстовый слой с названием формы
Отдельный текстовый слой для вводимого текста
Текст ошибки

Эти элементы могут располагаться по-разному в зависимости от желаемого стиля. Название формы например может стоять над основным полем, а может располагаться внутри него. Название также может скрываться или нет при попытке ввести текст. Текст ошибки также может располагаться в разных местах — сверху, справа и т.д.

Создадим новый компонен на основе базового form_stroke/simple и поместим внутрь компонента также перечисленные выше текстовые слои:

Не забываем для вложенного компонента и текстов настраивать constraints. Например вводимый текст в форме и компонент form_stroke/simple имеют настройки left+right и top+bottom. Название и ошибка форм в нарисованном мною варианте привязаны к верхнему краю.

А вот так легко можно менять состояние ошибки и активность поля ввода:

Создаем дополнительные компоненты для форм ввода в этих двух состояниях

В моем варианте был использован Auto Layout на названии формы и тексте ошибки, чтобы текст ошибки мог сдвигаться, правее от названия.

Выбрала такие имена компонентов:

form/simple_form
form/simple_form_error
form/simple_form_active

Компонент выпадающего списка будет создаваться на основе компонента поля ввода. Для этого мы разместим друг над другом этот компонент и иконку треугольника или головку, которая будет открывать саму выпадушку.

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

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

Обратите внимание на имена иконок. они находятся в группе icon, подгруппе arr.

Создаем экземпляр компонента form/simple_form, размещаем в нем первую иконку, запаковываем в компонент form/dropdownlist.

Figma — графический редактор для совместного проектирования сайтов, приложений и других дизайнерских продуктов. Она появилась в 2016 году как аналог Sketch и Adobe XD, но спустя пару лет стала одним из самых популярных инструментов у дизайнеров.Программа позволяет собрать большие проекты в одном месте и с легкостью переключаться между экранами.

На фоне зарубежных санкций компания, как и Adobe, замораживает бизнес-аккаунты российских компаний по тарифам Figma Professional, Figma Organization и Figma Enterprise, но оставляет доступ к базовому бесплатному тарифному плану. Бесплатная версия программы не подойдет для работы команды, но будет все также актуальна для индивидуального использования. Поэтому, если вы фрилансер, работаете в паре с другим дизайнером или самостоятельно, только начинаете карьеру или хотите заниматься UX-дизайном – эта статья для вас. В ней я расскажу, как работать с компонентами, структурировать их варианты и решать ранее невозможные задачи с помощью нулевого фрейма.

Компонент – это элемент или блок, который можно редактировать комплексно. Задав его вид один раз, автоматически измененные копии компонента можно использовать в разных частях проекта.

Например, если вы нарисуете иконку и сделаете из нее компонент, а потом скопируете ее, то при изменении цвета, размера и других параметров главного компонента, копия будет изменяться соответственно.

Самый простой компонент – кнопка. Важно помнить, что ее вид не должен меняться от перехода экрана к экрану.

Более сложные компоненты – шапка и футер на сайте, меню навигации в приложении, а также хедеры или модальные окна.

Главное преимущество работы с компонентами – возможность вносить изменения во все экземпляры проекта сразу, изменяя только мастер-компонент. Это ускоряет рабочий процесс и делает дизайн-систему проекта более согласованной, упрощает процесс ее поддержки и сотрудничества с другими дизайнерами.

Перед тем как перейти к рекомендациям по работе с компонентами, надо познакомиться с понятиями мастер-компонент (master components) и экземпляр-компонент (component instances).

Мастер-компонент создается при превращении элемента интерфейса в компонент и определяет его свойства.

Экземпляр-компонент – это копия мастер-компонента, который может повторно использоваться в разных проектах. Чтобы отличить мастер-компонент от экземпляра, посмотрите на панель слоёв. Мастер-компонент обозначен иконкой с четырьмя закрашенными ромбами, экземпляр – иконкой с одним контурным.

Экземпляры напрямую связаны с мастер-компонентом, поэтому при внесении изменений в мастер-компонент, экземпляры меняются вместе с ним.

Важно учитывать, что экземпляр наследует все изменения, внесенные в мастер-компонент кроме переопределений свойства и наполнения экземпляра. Связь этих свойств и наполнения будет разорвана, восстановить ее можно в панеле свойств экземпляра.

Варианты – это группа компонентов, объединенных в один компонент, с разным видом и различными свойствами. Переключение между вариантами происходит с помощью выбора необходимого пункта в свойствах экземпляра.

Чтобы создать варианты мастер-компонента, в меню свойств компонента нужно добавить пункт Variants. Экземпляр вариантов или мастер-компонента не отличаются друг от друга. Однако в первом случае есть возможность быстро поменять вариант экземпляра на другой, а во втором быстро заменить экземпляр уже не получится. К созданным вариантам компонента можно добавлять новые компоненты.

Вариантов новых компонентов может быть неограниченное количество. Все зависит от вашей задачи. К примеру, с помощью вариантов можно отрисовать в едином блоке все состояния кнопок на сайте или в приложении и быстро менять их в зависимости от задачи. При этом не нужно создавать по отдельности компонент для каждого из состояний.

Структурирование вариантов

В настройках компонентов можно добавлять и называть свойства и их варианты. Это позволяет структурировать варианты по свойствам и при размещении компонента выбирать необходимый вид компонента.

Наименование блоков

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

Самый простой пример атомарного компонента – список с буллитами, строками которого будут являться экземпляры другого компонента. Если вы захотите изменить в списке вид буллитов, то потребуется изменить его в мастер-компоненте строки, а не в каждой строке списка.

Вы можете создавать вложенность любого уровня и сложности.

Есть задачи, которые невозможно решить с помощью стандартного функционала Figma. Например, ограничение минимальной высоты, ширины элемента, вынос элементов за границы autolayout или наложение элементов друг на друга. Здесь можно использовать нулевой фрейм.

Чтобы создать фрейм, в поле настроек ширины и высоты введите значение 0,001. Если в полях появится значение 0 – ваш фрейм готов! Важно учесть, что при вводе значения 0 или 0,01, Figma автоматически округлит его до единицы, и создать нулевой фрейм не получится.

Добавьте 0px фрейм в auto layout в любую, более удобную для дальнейшего перемещения самого блока, часть контейнера. Далее выделите элемент внутри нулевого фрейма и поместите его в нужное место.

Вынос элемента за границы происходит идентично наложению. Добавьте фрейм в удобное место и вынесите его содержимое за границы auto layout.

Компоненты Figma – это одно из главных достоинств программы. Чтобы не перерисовывать каждый элемент по отдельности, используйте компоненты. Редактируя всего одну иконку или кнопку, можно вносить комплексные изменения в весь проект. Следующий шаг после работы с компонентами – это создание библиотеки компонентов Figma, где можно хранить основные заготовки для интерфейсов. Она избавляет от двойной работы и позволяет использовать общие элементы повторно.

Выстроить качественную систему компонентов – это непростая задача для новичка. Но как только она будет решена, у вас появится время, чтобы выпить не одну, а две чашки кофе.

Как сейчас выстраиваете работу, нашли аналог или пользуетесь Figma? Делитесь в комментариях.

Фигма в РФ доступна?

Бесплатный тариф - да

Какие Российские аналоги есть для Фигмы?

Мой Офис Презентация

пока никаких.
как минимум один в разработке.

Комментарий удален модератором

Сижу в рф спокойно юзаю фигму. к чему высер - не понял

для РФ оплату прикрыли

А кто аналог анонсировал?

Ну вот вроде и круто все (если действительно сделают, постараются и все такое), но ощущение, что пытаются впарить абибас под видом адидаса.

посмотрим, что сделают, если сделают.

это называется сбро бабла, что там по факту не ясно..

Почему не зарегаться под другой страной? Оплата нужна с заграничного банка или еще какие-то ограничения ?

Да, российской картой не оплатить вообще(

В последнем подзаголовке написано про нулевой фрейм "и почему он точно понадобится". Я так и не поняла его назначения. Фигма же нужна для макетов в первую очередь, и для прототипов во вторую. Тултип над кнопкой "tap to add" можно просто поставить над рабочей областью и не извращаться. Второй случай: мы же не делаем полностью рабочее приложение, которое пользователю будет в прототипе позволять вводить текст, соответственно, зачем извращаться, если это можно просто описать в документации? Это как-то легче верстать с нулевым фреймом?

Да потому что автор что-то где-то слышал или читал и/или решил отрерайтить, но так и не понял или решил не париться.

Часто у начинающих пользователей программы Figma возникают следующие вопросы:

Как в Figma делать кнопки?
Как кнопке добавить объем (сделать её объемной).
Какие лучше использовать цвета, чтобы всё смотрелось целостно и гармонично?
Лучше делать кнопки с закруглением или без?
Как сделать кнопку красивой?

Как сделать кнопки в фигме? Инструкция:

В этой инструкции, вы узнаете как буквально за 1 минуту сделать простые и красивые кнопки. Я поделюсь в вами рекомендуемые цветами для кнопок, чтобы повысить их эффективность.

Ведь для кнопок важен контраст и нужно делать их заметными. Вы узнаете какие для этого цвета подходят. Это готовое решение.

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