Paddy — плагин для автоматической настройки отступов в Sketch

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

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

Если вам понравился этот плагин, почему бы вам не купить мне кофе ☕ через 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, для открытия поля ввода, чтобы легче сохранить внутренний отступ всех выбранных слоев.

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

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

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

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

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

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

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

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

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

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

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

Это автоматически обновит все внутренние и внешние отступы для ранее выбранных слоев.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Давайте поговорим об внешних отступах в символах. Вы можете компоновать свои элементы с «внешними отступами» на вашем мастер-артборде, если вам так проще … однако, он не будет поддерживать внешние отступы после переопределения символа. Это просто невозможно, без манипуляций с данными, которые нарушали бы его просмотр в других программах, таких как 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’ — выравнивание по нижнему краю

Примеры

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

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

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

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

Контакты

• Email david@williames.com
• Подпишитесь на автора @davidwilliames в Twitter

Нет комментариев