Комментарии
Как создавать и настраивать плагины в Sketch
Отредактировано 2 несколько месяцев назад от ExtremeHow Редакционная команда
SketchПлагиныНастройкаРазработкаРасширенияИнструментыРабочий процессУлучшенияСкриптингСторонний
Перевод обновлен 2 несколько месяцев назад
Sketch — это популярный инструмент для создания дизайна, который позволяет дизайнерам создавать красивые интерфейсы пользователей. Одним из ключевых достоинств Sketch является его расширяемость с помощью плагинов. Плагины могут помочь автоматизировать задачи, добавлять новые функции и лучше адаптировать функциональность Sketch к вашему рабочему процессу дизайна. Это подробное руководство познакомит вас с процессом создания и настройки плагинов в Sketch.
Понимание основ
Прежде чем приступать к созданию плагинов, важно понять, что такое плагины и почему они полезны. Плагин в Sketch — это, по сути, скрипт, который взаимодействует с API Sketch для выполнения определенных задач. Это может варьироваться от простых задач, таких как изменение цветов, до сложных задач, таких как создание полного компонента пользовательского интерфейса.
API Sketch позволяет разработчикам взаимодействовать с документами, страницами, слоями и многим другим, что делает возможным создание мощных инструментов. Эти инструменты помогают упрощать процессы дизайна, экономя как время, так и усилия.
Настройка среды
Прежде чем начать создавать плагины, вам необходимо настроить свою среду разработки. Вот шаги для начала работы:
- Установите Sketch: Убедитесь, что у вас установлена последняя версия Sketch на вашем компьютере. Sketch в настоящее время доступен для macOS.
- Настройте текстовый редактор: Хороший текстовый редактор необходим для написания кода. Некоторые популярные варианты: Visual Studio Code, Sublime Text и Atom. Выберите тот, с которым вам наиболее комфортно работать.
- Ознакомьтесь с JavaScript: Плагины Sketch написаны на JavaScript, поэтому базовое понимание JavaScript необходимо. Изучение основ синтаксиса JavaScript, переменных, функций и объектов — это хороший старт.
Создание простого плагина для Sketch
Теперь давайте перейдем к созданию простого плагина для Sketch. Этот пример покажет вам, как создать плагин, который добавляет красный прямоугольник в ваш документ Sketch.
Шаг 1: Создайте папку плагина
Начните с создания новой папки с осмысленным названием для вашего плагина, например, “RedRectanglePlugin”. Эта папка будет содержать все файлы, необходимые вашему плагину.
Шаг 2: Создайте файл манифеста
manifest.json файл сообщает Sketch о вашем плагине. Он содержит информацию, такую как имя плагина, версия и скрипт, который будет выполняться.
{
"name": "Red Rectangle Plugin",
"identifier": "com.example.redrectangleplugin",
"version": "1.0",
"description": "Простой плагин Sketch для добавления красного прямоугольника.",
"author": "Ваше Имя",
"commands": [
{
"name": "Добавить красный прямоугольник",
"identifier": "addRedRectangle",
"script": "./addRedRectangle.js"
}
]
}
Поместите manifest.json файл в папку вашего плагина.
Шаг 3: Напишите скрипт плагина
Создайте новый JavaScript файл с именем addRedRectangle.js в папке вашего плагина. Этот скрипт добавит красный прямоугольник на существующую страницу в Sketch. Вот простой пример:
function onAddRedRectangle(context) {
var sketch = require('sketch/dom');
var document = sketch.getSelectedDocument();
var page = document.selectedPage;
// Создайте новый прямоугольник
var rectangle = new sketch.Rectangle({
parent: page,
frame: { x: 0, y: 0, width: 100, height: 100 },
style: { fills: [{ color: '#FF0000', fillType: 'Color' }] }
});
page.layers.push(rectangle);
}
module.exports = onAddRedRectangle;
Сохраните этот скрипт в папке вашего плагина.
Шаг 4: Установите и протестируйте ваш плагин
Чтобы установить ваш плагин, следуйте этим шагам:
- Откройте Sketch.
- Перейдите в Плагины > Управление плагинами...
- Нажмите на значок шестеренки и выберите Показать папку плагинов.
- Скопируйте папку вашего плагина в папку плагинов, указанную.
- Перезапустите Sketch или перейдите в Плагины > Выполнить скрипты > Перезагрузить плагины.
- Ваш плагин теперь должен появиться в меню Плагины!
Тест: Откройте любой документ в Sketch, перейдите в Плагины > Red Rectangle Plugin > Добавить красный прямоугольник. Вы должны увидеть появление красного прямоугольника на вашем холсте.
Настройка вашего плагина
Теперь, когда вы создали простой плагин, давайте посмотрим, как вы можете дополнительно его настроить.
Добавьте настройки пользователя
Иногда вы можете захотеть дать пользователям возможность настроить работу плагина. Для этого вы можете создать интерфейс для настроек с помощью встроенных инструментов Sketch.
function onAddRectangleWithSettings(context) {
var sketch = require('sketch/dom');
var UI = require('sketch/ui');
UI.getInputFromUser(
"Размер прямоугольника",
{ type: UI.INPUT_TYPE.string, initialValue: "100" },
(err, value) => {
if (err) { return; }
var document = sketch.getSelectedDocument();
var page = document.selectedPage;
var size = parseInt(value, 10);
var rectangle = new sketch.Rectangle({
parent: page,
frame: { x: 0, y: 0, width: size, height: size },
style: { fills: [{ color: '#FF0000', fillType: 'Color' }] }
});
page.layers.push(rectangle);
}
);
}
module.exports = onAddRectangleWithSettings;
В этом примере, когда вы запускаете плагин, он спросит пользователя о предпочтительном размере прямоугольника.
Использование сторонней библиотеки
Иногда стандартные API Sketch могут не быть достаточными для достижения вашей цели. Вы можете захотеть использовать сторонние JavaScript библиотеки для расширения функциональности.
Вот как вы можете использовать стороннюю библиотеку:
- Выберите библиотеку и загрузите ее JavaScript файл.
- Включите файл в папку вашего плагина.
- Используйте
require()для подключения и использования его в вашем скрипте.
var _ = require('./lodash.min.js');
function main(context) {
var numbers = [1, 2, 3, 4, 5];
var doubled = _.map(numbers, function(n) {
return n * 2;
});
console.log(doubled);
}
module.exports = main;
В этом примере мы используем библиотеку Lodash для удвоения массива чисел.
Тестирование и отладка
Как и в любой другой разработке программного обеспечения, тестирование и отладка очень важны и в разработке плагинов. Вот несколько советов:
- Логирование в консоль: Используйте
console.log()для вывода переменных и результатов в консоль, которые можно просматривать в Sketch, используя Плагины > Выполнить скрипт > Показать инструменты > Показать консоль. - Разделите скрипт: Разделите скрипт на более мелкие, управляемые задачи. Это облегчит выяснение, где возникают проблемы.
- Мок-данные: Используйте мок-данные для тестирования функциональностей вашего плагина независимо от среды Sketch.
Публикация вашего плагина
Когда вы будете довольны своим плагином, вы можете захотеть поделиться им с сообществом. Вот как вы можете опубликовать свой плагин:
- Подготовьте документацию: Создайте
README.mdфайл с инструкциями по установке и использованию вашего плагина. Предоставьте код и объяснения для любых специфических настроек. - Выберите лицензию для вашего кода: Выберите подходящую лицензию для вашего кода. Многие разработчики используют MIT License или Apache License.
- Разместите ваш плагин: Используйте платформу, такую как GitHub, для размещения исходного кода вашего плагина. Это делает его доступным для других и дает им возможность вносить свой вклад.
- Отправьте в каталог плагинов Sketch: Вы можете отправить ваш плагин в каталог плагинов Sketch для большей видимости. Убедитесь, что вы соответствуете руководствам каталога.
Заключение
Создание и настройка плагинов в Sketch может значительно расширить его функциональность и адаптировать под ваши специфические потребности. Следуя этому руководству, вы научились настраивать свою среду, создавать базовый плагин, настраивать его, использовать сторонние библиотеки и даже публиковать свои творения. С практикой и креативностью вы можете сделать значительный вклад в экосистему плагинов Sketch, делая процессы дизайна более эффективными и инновационными. Удачного кодирования!
Если вы найдете что-то неправильное в содержании статьи, вы можете