4 заметки с тегом

Sketch

Sketch pugin`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!

17 декабря   Sketch   Посоветовал

Sketch plugin`s: Работа с палитрами и простая установка плагинов

Для работы с палитрами уже не первый месяц использую плагин Sketch Palettes. Плагин экспортирует и импортирует палитру документа и глобальные цвета Скетча. Удобно, если нужно работать в разных документах, например, с фирменными цветами компании.

Кстати, для простой установки некоторых плагинов рекомендую использовать Sketch Toolbox.

15 декабря   Sketch   Посоветовал

Sketch plugin`s: Переименование слоёв по имени символа

Rename Instances Sketch Plugin

Переименует слои символов на артборде, согласно имени на странице «Символы». Работает как с отдельными слоями, так и со всеми символами в макете.

У разработчика Вячеслава Дубовицкого создан ещё ряд крутых плагинов, которые пока не использую, но возможно пригодятся в будущем.

13 декабря   Sketch   Посоветовал

Sketch: Секреты трансформации объектов

По умолчанию Скетч трансформирует объекты, изменяя правую или нижнюю границы объекта. Фотошоп делает аналогичное если при трансформировании «Reference point location» установлена в левом верхнем углу

Зачастую нужно изменить размер объекта так, чтобы правая граница осталась на месте, а изменилась левая. Для этого используется приём, которой стал для меня открытием.  В поле «Size» указываем нужный размер и дописываем букву «r», если нужно трансформировать объект относительно правой стороны, «m» — относительно центра, «b» — относительно нижней границы объекта. 

Вторым открытием стал тот факт, что в поле «Size» или «Position» можно писать математические формулы, в результате, получая нужное значение. Хотите уменьшить объект в три раза? Добавьте к текущему размеру /3. Кроме деления, можно складывать и умножать.

Ну, и главным открытием стало то, что можно использовать эти 2 приёма одновременно.

12 декабря   Sketch   Посоветовал