Dynamic button sketch
Наш канал в

Dynamic button plug-in для Sketch.app позволяет создавать кнопки с фиксированными отступами, при этом неважно, какой текст вы добавляете.

В версии Sketch 3.3.3 наблюдаются проблемы с работой плагина. Если кто знает решение, буду благодарен за подсказку.

Обновление

[СКОРО] Версия 2.0

  • [добавлено] Некоторые новые, интересные функции

Версия 1.2:

  • [добавлено] Поддержка Sketch 3.2
  • [добавлено] Теперь вы можете выбрать несколько слоев, чтобы конвертировать их в кнопки в один клик

Версия 1.1:

  • [добавлено] Поддержка Sketch >= 3.0.2
  • [добавлено] Теперь вы можете использовать CSS-сокращения (10:10, 10:10:10, 10:10:10:10)
  • [добавлено] Обратная связь (‘ничего не выбрано’, ‘неправильный формат’)

Спасибо IngoValente за CSS-сокращения и всем другим пользователям за интерес.

Демо

Установка

  1. Скачайте Dynamyc button.Sketch plugin.
  2. Двойным щелчком кликните на файле в папке download. Sketch должен открыться самостоятельно и сообщить, что плагин был успешно установлен.Dynamic button

Вы должны видеть запись Dynamic button в меню Plugins menu.

Dynamic button sketch

Инструкции

Сначала вы можете создать структуру (как на изображении ниже) вручную, а затем уже использовать плагин. Или же создайте текстовый слой, а затем сгенерируйте автоматическую структуру, используя горячую клавишу Cmd + J. Затем появится группа “flexible button” с текстовым слоем (0:0:0:0) и фоном (‘BG’).
Dynamic button sketch
0:0:0:0 – это отступы. Синтаксис похож на отступы в CSS.
Например, для отступов: 10px 20px 10px 20px (отступы: верхний правый нижний левый) нужно указать 10:20:10:20
Задайте нужные отступы (в имени текстового слоя), выделите текстовый слой и нажмите Cmd + J.
Dynamic button sketch
Вот и все! Вы создали свою динамическую кнопку. Теперь можно менять текст и нажимать Cmd + J – кнопка автоматически изменится.
Dynamic button sketch
Изменение горячих клавиш по умолчанию

  1. Откройте папку плагина. Вы можете сделать это, выбрав скрипт из меню Plugins menu, затем нажать на иконку с колесиком и выбрать опцию “Open Plugins Folder”.
  2. Откройте файл “Dynamic Button.sketchplugin” в текстовом редакторе.
  3. Горячая клавиша указана в первой строке:

// just a comment (cmd j)

Замените ее на любую нужную вам.

Скачать плагин Dynamic button

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

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

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

Полное руководство по дизайну 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