Двойной клик по скачанному файлу (Paddy.sketchplugin) для его установки.

Если вы используете этот плагин, пожалуйста, поставьте «звезду» этому проекту на GitHub. Для меня это простой способ увидеть, сколько людей использует его, и сколько усилий мне нужно приложить для его дальнейших улучшений.

Paddy плагин для Sketch - Демонстрация работы

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

Подпишитесь на автора плагина @davidwilliames в Twitter

Зачем этот плагин?

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

  • Автоматический: большинству других плагинов требуется сочетание клавиш для их применения или повторного применения. В Paddy все делается автоматически, когда вы управляете своими слоями; просто отмените выбор всех слоев и обновите их.
  • Видимые свойства: легко просматривать список слоев, чтобы узнать, какие внутренние отступы / внешние применяются к вашим слоям и группам; без необходимости их индивидуального выбора. Это связано с тем, что все свойства задаются с помощью имени слоя.
  • Нет специальных манипуляций с данными: он просто изменяет размеры и перемещает ваши слои в оптимальные положения — это не превращает ваши группы в специальную «стек группу» или нечто подобное. Поэтому другие люди или программы смогут читать файл Sketch, без потребности в этом плагине.
  • Легкий: он просто выполняет пару основных вещей — он не раздут кучей неиспользуемых функций.

Внутренние отступы слоя

Внутренний отступ может быть применен к одному слою «Фон» (Background) (либо слою фигуры, либо символу) группы. Слой «Фон» автоматически изменит размер на определенное значение, чтобы отступ остался неизменным.

Укажите величину внутреннего отступа в имени фонового слоя между '[' и ']'. Например, Background [10 20]. Формат значений внутреннего отступа должен быть в том же порядке, что и CSS.

Примеры:

  • [20]
    • все стороны имеют внутренний отступ 20
  • [10 5]
    • верхний и нижний внутренние отступы 10
    • левый и правый внутренние отступы 5
  • [10 5 15]
    • верхний внутренний отступ 10
    • левый и правый внутренние отступы 5
    • нижний внутренний отступ 15
  • [10 5 15 20]
    • верхний внутренний отступ 10
    • правый внутренний отступ 5
    • нижний внутренний отступ 15
    • левый внутренний отступ 20

Запустите команду плагина «Применить внутренний отступ к выделенным элементам» (Apply padding to selection) или используйте сочетание клавиш Control + Alt + p, для открытия поля ввода, чтобы легче сохранить внутренний отступ всех выбранных слоев.

Paddy плагин для Sketch - Демонстрация работы 1

Игнорирование отдельных слоев

Чтобы игнорировать определенные слои, когда фоновый слой вычисляет его размер, на основе внутренних отступов; просто добавьте префикс «-» в имени слоя, который вы хотите игнорировать. Например -new badge будет проигнорирован.

Paddy плагин для Sketch - Игнорирование отдельных слоев

Игнорирование внутренних отступов для конкретных краев

Если вы не хотите применять внутренний отступ сверху, снизу, слева или справа; просто используйте «x» вместо числа.

Например, чтобы установить внутренний отступ 60 сверху и снизу, но игнорировать внутренний отступ слева и справа, имя фонового слоя будет выглядеть так [60 x]

Paddy плагин для Sketch - Игнорирование внутренних отступов для конкретных краев

Более продвинутые выражения для размеров

Вы также можете указать максимальные и минимальные размеры наряду со значениями внутреннего отступа, разделенные точкой с запятой — ';'. Например, [20 10; width <= 50] будет применяться максимальная ширина '50'.

  • Для ширины используйте: width или w
  • Для высоты используйте: height или h
  • Доступные знаки операции: >=, >, <, <=, =

Пример: [20;h>=250] будет применяться внутренний отступ «20» во всех направлениях с минимальной высотой «250».

Paddy плагин для Sketch - Продвинутые выражения

Автоматическое применение

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

Поддержка символов

Много времени и усилий ушло на то, чтобы убедиться, что Paddy работает с символами. Если символ содержит фоновый слой с внутренним отступом; экземпляр символа автоматически изменит размер так, чтобы фоновый слой имел достаточный внутренний отступ вокруг родственных слоев.

Paddy плагин для Sketch - Поддержка символов, пример

Это отлично работает для создания кнопок с динамически изменяемым размером.

Paddy плагин для Sketch - Поддержка символов, пример кнопки

Это должно работать и со Sketch Libraries! (По крайней мере, оно работает в ходе моего ограниченного тестирования)

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

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

Внешние отступы

Подобно стекам слоев от Anima или плагину Distributer, вы также можете применять «внешний отступ» к любой группе, чтобы он автоматически разместил все дочерние элементы.

Чтобы установить внешний отступ / размещение слоев в группе, добавьте свойства расстояния в [ ]; аналогично применению внутренних отступов к группе.

Свойства: [{Spacing}{direction}]

  • Внешний отступ: числовое значение отступа. Например, '10', '4'
  • Направление:
    • 'h' для горизонтали
    • 'v' для вертикали

Примеры внешних отсупов / размещения

  • [10v] — расстояние между элементами вертикально, с интервалом 10
  • [5h] — расстояние между элементами горизонтально, с интервалом 5

Запустите команду плагина «Применить интервал к выбору» (Apply spacing to selection) или используйте сочетание клавиш Control + Alt + Command + p, для открытия поля ввода, чтобы легче сохранить внешние отступы для всех выбранных групп.

Paddy плагин для Sketch - внешние отступы

Внешние отступы в символах

Давайте поговорим об внешних отступах в символах. Вы можете компоновать свои элементы с «внешними отступами» на вашем мастер-артборде, если вам так проще … однако, он не будет поддерживать внешние отступы после переопределения символа. Это просто невозможно, без манипуляций с данными, которые нарушали бы его просмотр в других программах, таких как Zeplin.

Если, однако, вы не заботитесь о совместимости с такими программами, как Zeplin, вы можете использовать плагин AutoLayout от Anima с функцией «Stack groups» (сложения групп в стек). Paddy будет учитывать стек-группы при изменении размера символа; даже с его переопределениями. В большинстве случаев, вероятно, это именно то, что вы хотите сделать, применяя внешний отступ в вашем символе.

Автоматическое выравнивание

Вы также можете установить выравнивание для всех слоев внутри группы — все они будут автоматически применены. «Выравнивание» (Alignment) может применяться к группе отдельно или в сочетании с «внешним отступом» (spacing).

Аналогично с внешним / внутренним отступом, оно задается группе определенной функции внутри скобок [ ].

Свойства: [{alignment}] или [{Spacing}{direction} {alignment}]

Выравнивание

  • 'l' / 'left' - выравнивание по левому краю
  • 'c' / 'center' - выравнивание по центру, горизонтально
  • 'r' / 'right' - выравнивание по правому краю
  • 't' / 'top' - выравнивание по верхнему краю
  • 'm' / 'middle' - выравнивание по центру, вертикально
  • 'b' / 'bottom' - выравнивание по нижнему краю

Paddy плагин для Sketch - внешние отступы, автоматические выравнивания

Примеры

  • [left] — выровнять все слои по левому краю
  • [10v c] — расположить все слои вертикально с интервалом 10, все центрированные по горизонтали
  • [5h b] — расположить все слои горизонтально с интервалом 5, все выровненные по нижнему краю

Paddy плагин для Sketch - внешние отступы, прмиер

Вносите свой вклад и сообщайте об ошибках

Этот плагин находится в активной разработке.

Пожалуйста сообщайте о багах ?.

Контакты