Sketch plugin`s: Динамические кнопки и относительное размещение объектов

Плагин, которым пользуюсь ежедневно в разработке интерфейсов Compo: UI components in Sketch. Одна из фич Compo — управление размером кнопки в зависимости от количества текста. 

Пишем текст кнопки, например «Регистрация». При нажатии ⌘J создаётся кнопка.

Изменяя название текстового слоя, меняем отступы от краёв кнопки по часовой стрелке, начиная с левого верхнего угла. Например, установим отступы сверху и снизу по 8 px, а по краям 16 px.

Продублируем кнопку и поменяем заголовок, например на «Вход». Нажав ⌘J границы кнопки адаптируются до заданных в названии характеристик. Очень удобно!

Раньше для такой задачи использовался Dynamic Button, но у плагина Compo больше возможностей. Например, управлять размещением объекта относительно фона.

Создадим фоновый объект, он должен называться «BG». Сверху добавим ещё один прямоугольник и назовем b:20 (отступ снизу 20 px) r:16 (отступ справа 16 px). Сгруппируем эти 2 слоя и нажмем ⌘J. Объекты разместились согласно прописанных правил.

Теперь, даже если размер любого из объектов изменится, нажав ⌘J мы разместим их как нужно.

Приятной работы в Sketch!

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