Comentarios
Cómo crear y personalizar plugins en Sketch
Editado 2 hace meses por ExtremeHow Equipo Editorial
BocetoComplementosPersonalizaciónDesarrolloExtensionesHerramientasFlujo de trabajoMejorasSecuencias de comandosTercero
Traducción actualizada 2 hace meses
Sketch es una herramienta de diseño popular que permite a los diseñadores crear hermosos diseños de interfaces de usuario. Una de las principales fortalezas de Sketch es su extensibilidad a través de plugins. Los plugins pueden ayudar a automatizar tareas, agregar nuevas funciones y adaptar mejor la funcionalidad de Sketch a tu flujo de trabajo de diseño. Esta guía detallada te introducirá al proceso de creación y personalización de plugins en Sketch.
Comprender los aspectos básicos
Antes de profundizar en la creación de plugins, es importante entender qué son los plugins y por qué son útiles. Un plugin en Sketch es esencialmente un script que interactúa con la API de Sketch para realizar ciertas tareas. Esto puede ir desde tareas simples como cambiar colores hasta tareas complejas como crear un componente completo de UI.
La API de Sketch permite a los desarrolladores interactuar con documentos, páginas, capas y más, haciendo posible construir herramientas potentes. Estas herramientas ayudan a agilizar los procesos de diseño, ahorrando tiempo y esfuerzo.
Configurando tu entorno
Antes de comenzar a crear plugins, necesitas configurar tu entorno de desarrollo. Aquí están los pasos para comenzar:
- Instalar Sketch: Asegúrate de tener la última versión de Sketch instalada en tu computadora. Sketch está disponible actualmente para macOS.
- Configura un editor de texto: Un buen editor de texto es esencial para escribir código. Algunas opciones populares son Visual Studio Code, Sublime Text y Atom. Elige el que te resulte más cómodo.
- Familiarízate con JavaScript: Los plugins de Sketch se escriben en JavaScript, por lo que una comprensión básica de JavaScript es esencial. Aprender los conceptos básicos de la sintaxis de JavaScript, variables, funciones y objetos es un buen comienzo.
Creando un plugin sencillo de Sketch
Ahora pasemos a crear un plugin simple de Sketch. Este ejemplo te mostrará cómo crear un plugin que agrega un rectángulo rojo a tu documento de Sketch.
Paso 1: Crea la carpeta de tu plugin
Comienza creando una nueva carpeta con un nombre significativo para tu plugin, como “RedRectanglePlugin”. Esta carpeta contendrá todos los archivos que necesita tu plugin.
Paso 2: Crea el archivo de manifiesto
El archivo manifest.json le dice a Sketch sobre tu plugin. Contiene información como el nombre del plugin, la versión y el script que ejecutará.
{
"name": "Red Rectangle Plugin",
"identifier": "com.example.redrectangleplugin",
"version": "1.0",
"description": "Un plugin simple de Sketch para agregar un rectángulo rojo.",
"author": "Tu Nombre",
"commands": [
{
"name": "Añadir Rectángulo Rojo",
"identifier": "addRedRectangle",
"script": "./addRedRectangle.js"
}
]
}
Coloca el archivo manifest.json dentro de la carpeta de tus plugins.
Paso 3: Escribe el script del plugin
Crea un nuevo archivo JavaScript llamado addRedRectangle.js dentro de la carpeta de tu plugin. Este script agregará un rectángulo rojo a la página existente en Sketch. Aquí tienes un ejemplo simple:
function onAddRedRectangle(context) {
var sketch = require('sketch/dom');
var document = sketch.getSelectedDocument();
var page = document.selectedPage;
// Crear un nuevo rectángulo
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;
Guarda este script en la carpeta de tus plugins.
Paso 4: Instala y prueba tu plugin
Para instalar tu plugin, sigue estos pasos:
- Abre Sketch.
- Ve a Plugins > Administrar Plugins...
- Haz clic en el icono de engranaje y selecciona Mostrar Carpeta de Plugins.
- Copia la carpeta de tu plugin en la carpeta de plugins que se muestra.
- Reinicia Sketch o ve a Plugins > Ejecutar Scripts > Recargar Plugins.
- ¡Tu plugin debería aparecer ahora en el menú de Plugins!
Prueba: Abre cualquier documento en Sketch, ve a Plugins > Red Rectangle Plugin > Add Red Rectangle. Deberías ver aparecer un rectángulo rojo en tu lienzo.
Personalizando tu plugin
Ahora que has creado un plugin simple, veamos cómo puedes personalizarlo más.
Agregar configuraciones de usuario
A veces, puedes querer dar a los usuarios la capacidad de configurar cómo funciona un plugin. Para esto, puedes crear una interfaz de usuario para configuraciones usando las herramientas integradas de Sketch.
function onAddRectangleWithSettings(context) {
var sketch = require('sketch/dom');
var UI = require('sketch/ui');
UI.getInputFromUser(
"Tamaño del Rectángulo",
{ 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;
En este ejemplo, cuando ejecutas el plugin, se le pedirá al usuario el tamaño preferido del rectángulo.
Usando una biblioteca de terceros
A veces, las API predeterminadas de Sketch pueden no ser suficientes para lograr tu objetivo. Puede que quieras usar bibliotecas JavaScript de terceros para extender la funcionalidad.
Aquí tienes cómo puedes usar una biblioteca de terceros:
- Selecciona una biblioteca y descarga su archivo JavaScript.
- Incluye el archivo en la carpeta de tu plugin.
- Usa
require()para incluirlo y usarlo en tu script.
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;
En este ejemplo, estamos usando la biblioteca Lodash para duplicar un array de números.
Prueba y depuración
Como con cualquier otro desarrollo de software, la prueba y depuración son muy importantes también en el desarrollo de plugins. Aquí tienes algunos consejos:
- Registro de consola: Usa
console.log()para imprimir variables y resultados en la consola, que se puede ver en Sketch usando Plugins > Ejecutar Script > Mostrar Herramientas > Mostrar Consola. - Dividir el script: Divide el script en tareas más pequeñas y manejables. Esto hace más fácil identificar dónde están los problemas.
- Datos ficticios: Usa datos ficticios para probar la funcionalidad de tu plugin independientemente del entorno de Sketch.
Publicando tu plugin
Una vez que estés satisfecho con tu plugin, puedes querer compartirlo con la comunidad. Aquí te explico cómo puedes publicar tu plugin:
- Prepara la documentación: Crea un archivo
README.mdcon instrucciones sobre cómo instalar y usar tu plugin. Proporciona código y explicaciones para cualquier configuración específica. - Elige una licencia para tu código: Elige una licencia apropiada para tu código. Muchos desarrolladores usan la Licencia MIT o la Licencia Apache.
- Aloja tu plugin: Usa una plataforma como GitHub para alojar el código fuente de tu plugin. Esto lo hace accesible para otros y les da la oportunidad de contribuir.
- Envía tu plugin al directorio de plugins de Sketch: Puedes enviar tu plugin al directorio de plugins de Sketch para obtener más visibilidad. Asegúrate de cumplir con las directrices del directorio.
Conclusión
Crear y personalizar plugins en Sketch puede ampliar en gran medida su funcionalidad y adaptarlo a tus necesidades específicas. Siguiendo esta guía, has aprendido a configurar tu entorno, crear un plugin básico, personalizarlo, usar bibliotecas de terceros, e incluso publicar tus creaciones. Con práctica y creatividad, puedes hacer contribuciones significativas al ecosistema de plugins de Sketch, haciendo que los procesos de diseño sean más eficientes e innovadores. ¡Feliz codificación!
Si encuentras algo incorrecto en el contenido del artículo, puedes