Динамические кнопки в Sketch с помощью Auto Layout

Динамические кнопки в Sketch с помощью Auto Layout, фото

В Sketch все еще сложно корректировать динамические кнопки и регулировать их наполнение. Вы можете использовать различные плагины, например, Dynamic Buttons или Modulizer, но я никогда не понимал, как их заставить работать с символами.

Что ж, сегодня разбираясь с плагином Auto Layout, благодаря терпению и удаче, я нашел способ создавать супер-пупер кнопку с динамическим символом. Это не идеальный вариант, требующий времени, но он может стать хорошим компромиссом до тех пор, пока не улучшат программу:)

Вот, как этого добиться:

  1. Разделите свою кнопку на три части.Размер группы body будет изменен на основе длины label, наполнение будет обрамлять кнопку слева и справа.

Динамические кнопки в Sketch с помощью Auto Layout, фото номер 1

  1. Выделите все слои и создайте стэк группу, убрав интервал на 0. Разумеется, сперва вам нужно установить Auto Layout😉
  2. Выделите фон label и закрепите его слева, сверху, справа, снизу.

Динамические кнопки в Sketch с помощью Auto Layout, фото номер 2

  1. Закрепите слой label горизонтально и вертикально по центру.Также убедитесь, что он в режиме изменения размера “Float in place”.

Динамические кнопки в Sketch с помощью Auto Layout, фото номер 3

  1. Создайте новый символ и задайте ширину для его артборда, равную максимальной ширине, которая будет у кнопки в вашем дизайне (например, меньше чем 320px для экрана iPhone 5). Это не идеальный способ, но впоследствии, при необходимости, вы сможете изменить размер вручную.
Динамические кнопки в Sketch с помощью Auto Layout, фото номер 4
Выравнивание по центру артборда + закрепление горизонтально по центру
  1. Наконец, выровняйте символпо левому краю, по центру или по правому краю своего артборда и, соответственно, закрепите его слева, справа или по центру панели Auto Layout. Редактируйте символы и наслаждайтесь 🙂
Динамические кнопки в Sketch с помощью Auto Layout, фото номер 5
Выравнивание по левому краю артборда + закрепление слева

 

Динамические кнопки в Sketch с помощью Auto Layout, фото номер 6

Заключение: это позволит вам сэкономить время, сделает наполнение корректным, и вы с легкостью сможете редактировать символы. Что вы об этом думаете? Есть ли еще какие-нибудь хитрые способы? 🙂 Надеюсь, что Sketch вскоре решит эту проблему и все эти хитрости станут просто заметками в Medium.

https://ux.pub/auto-layout-predstavlyaem-stacks%e2%80%8a-%e2%80%8aadaptivnyj-dizajn-v-sketch/

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

Работая со Sketch последние три года, я освоил ряд ключевых техник, которые значительно улучшили мой рабочий процесс. Так как я, помимо рисования, также обожаю прототипировать и кодить, мне нужен инструмент для быстрого выполнения дизайн-проектов и легкой генерации исходников. Sketch вместе с его плагинами и другие инструменты для прототипирования полностью справляются с этой задачей. Часть 1 Часть 3 Часть 4

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5