Инструментите за дизайн непрекъснато се подобряват и все повече навлизат на пазара всеки ден ( InVision Studio , например). Като се има предвид това, съвременните инструменти за проектиране като Sketch са създадени да бъдат минимални, където инструментът е настроен да премахва всички несъществени функции. Типично е да създавате допълнителна функционалност само когато е необходимо и тук навлизаме във вълнуващия свят на разработката на приставки на Sketch.
Разработването на приставки за Sketch може да помогне дизайнерите да възприемат техническия аспект на действителното функциониране на Sketch и да им дадат възможност за автоматизиране на повтарящи се задачи. Приставките за скица се правят с код и Скицирайте API на JavaScript Но тъй като дизайнерите не трябва да бъдат експертни разработчици, за да използват този API, този урок демонстрира как да кодира приставка, за да опрости процеса на проектиране и да подобри работния процес в Sketch.
Прости, но много полезни приставки за скици
Много често, скици дизайнери да имате инсталирани поне три или четири приставки Sketch. Приставките по-долу са донякъде основни по своята същност, но често се използват, защото спестяват много време.
- Преименувай го (преименувайте няколко слоя наведнъж)
- Сортирай ме (помага за пренареждане на слоевете по логичен начин)
- UnsplashIt (извлича изображения от Unsplash)
- Генератор на съдържание (генерира фалшиви имена и други „реални“ данни)
Ако сте любопитни да видите какво може да се постигне с приставките на Sketch, разгледайте нашия краен списък с 50 приставки за скица .
Основи на JavaScript за по-малко от 2 минути
Преди да започнете да кодирате, ще трябва да научите няколко неща за синтаксиса на JavaScript (т.е. формалността на начина на писане на кода). Това не само ще ви помогне да напишете кода за вашата приставка Sketch, но ще ви помогне да разберете по-добре как и защо кодът работи.
Коментари
Нека започнем с коментарите на кода.
Коментарите на кода са като скрити бележки - те не са ориентирани към потребителя и следователно няма да се показват в получения плъгин Sketch. Разработчиците често използват тези коментари на кода, за да обяснят написания код, така че ако друг разработчик прочете кода или ако се върне към кода по-късно, те ще разберат какво е написано и как работи.
architecting on aws наръчник за студенти
// this is a single-line comment /* This is a multiline comment */ Променливи
Променливите са като малки контейнери, които се използват за съхраняване на стойности; например:
var firstName = 'Manuele Capacci'; // the variable firstName now equals 'Manuele Capacci' За да извлечете тази стойност, трябва да използвате променливата; например:
log(firstName); // esto grabará 'Manuele Capacci' en la consola 
Обекти
Обектите могат да съхраняват множество променливи, като това:
var user = { firstName: 'Manuele', lastName: 'Capacci', age: 28, role: 'Product Designer' } Забележете, че стойността на 'възраст' не е в кавички. Това е така, защото кавичките ще определят променливата като низ, което означава, че очакваният изход трябва да бъде буквален. Ние не искаме това; искаме променливата да бъде дефинирана като цяло число, за да можем да извършваме математически операции върху нея. Поставянето на кавички около стойността нежелателно ще дефинира стойността като низ.
Можем да използваме променливите на обекта, като това:
// using the object's variables user.firstName; user.lastName; user.age; user.role; Масиви
Масивите са по-прост тип обект:
var users = ['Manuele', 'Daniel', 'Miklos'] // 'users' is an array that contains a list of names user[0]; // this equals 'Manuele' user[1]; // this equals 'Daniel' user[2]; // this equals 'Miklos' Характеристика
Функциите са приложими - те направи нещо. В следващия пример функцията изчислява сумата от a и b. В този пример, a то е 2 и b то е 3 .
// a function declaration function sum(a, b) { return a + b; } // calling the function sum(2, 3); // this equals 5 // recapitulando lo que hemos aprendido hasta ahora var total = sum(2, 3); // la variable 'total' será igual a 5 log(sum(2, 3)); // esto dará como resultado 5 en la consola log(total); // esto también dará como resultado 5 en la consola Условни твърдения
Условните изрази изпълняват кода само в скобите им, ако е изпълнено посоченото условие. В следващия пример кодът се изпълнява незабавно, защото стойността на firstName всъщност е равно на „Мануеле“; следователно кодът else if и else не работи.
var firstName = 'Manuele'; if(firstName == 'Manuele') { // hacer algo por Manuele } más si(firstName == 'Daniel') { // haz algo por Daniel } más { // hacer algo por alguien más } Нека се опитаме да напишем основен код в Sketch.
Напишете първия си ред код в Sketch
Придвижете се до „Приставки → Стартиране на скрипт“ в Sketch. В този прозорец за скриптове можете да напишете код, за да накарате нещата да се случат в Sketch (като преименуване на слоеве) и след това да опаковате този код в приставка Sketch с .sketchplugin тип файл.
По-долу: Ето как изглежда прозорецът за скриптове при първото му отваряне. Може да видите някакъв код, с който не сте запознати, но ще научите малко повече за JavaScript по пътя. Кодът по подразбиране, който вече съществува в този прозорец, ви казва името на документа за скица, кои слоеве са избрани в момента и други.
Засега изтрийте целия код в този прозорец и го заменете с:
log('Hello Sketch'); Това, което правите тук, е да извикате log и предайте низа Hello Sketch като аргумент. Този дневник е достъпен само зад кулисите, което го прави полезен за отстраняване на грешки в кода, когато нещата не работят както се очаква. Ако щракнете върху бутона 'Изпълни', аргументът Hello Sketch ще се регистрира в конзолата под прозореца за скриптове.
Нека да копаем малко по-дълбоко.
Създайте приставка, за да преименувате слоя на скицата
Сега можете да използвате знанията си за JavaScript и Sketch скриптове, за да създадете скрипт, който преименува няколко слоя едновременно. Родриго Соарес създаде плъгин RenameIt , което постига същото и спестява дизайнери дълго време - нека създадем опростена версия. Не забравяйте да създадете няколко слоя за скици, за да можете да тествате вашия скрипт.
как да кодирам с c++
Кодът трябва да започва с повтарящ се ред. Трябва да използвате приложния програмен интерфейс (API) на Sketch - това е изискан термин за специален обект, от който се нуждаете, ако искате да взаимодействате със Sketch по смислен начин. Наименувайте този специален API обект sketch.
Очевидно е, че просто преименувайте избраните в момента слоеве. Как да разберете кои слоеве са избрани в момента? API на Sketch JavaScript предоставя удобен начин за получаване на тази информация само с един ред код.
Ето как да постигнете всичко това с JavaScript код:
// asignar el objeto API a una variable var sketch = context.api(); // asignar capas actualmente seleccionadas a una variable var selection = sketch.selectedDocument.selectedLayers; Цялата информация за текущо избраните слоеве се съдържа в променливата selection. Сега просто трябва да 'повторите' (многократно да стартирате някакъв код) над слоевете, за да ги преименувате.
За да тествате, преименувайте всеки слой на „Преименуван слой“.
Добавете този код в края на вашия скрипт:
колко повече трябва да прави един изпълнител от един служител
selection.iterate(function(layer) { // for every selected layer layer.name = 'Renamed Layer'; // rename to 'Renamed Layer' }) След като натиснете 'Run', ще видите, че всеки слой е преименуван на 'Преименуван слой', но така потребителят се пита как трябва да бъде името на новия слой. Нека адаптираме скрипта:
// pregunta al usuario cuál debe ser el nuevo nombre de la capa var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', ''); selection.iterate(function(layer) { // for every selected layer layer.name = newLayerName; // rename to the value of newLayerName }) Ще се появи изскачащ прозорец с молба потребителят да посочи ново име за слоевете.
Ако не сте сигурни как да осъществите достъп до определени контексти, като например избрани в момента слоеве, или как да разкриете потребителско поле за въвеждане (както в предишните сценарии), можете да прочетете официалния документ Документация за разработчици на скици , който ще ви покаже какъв код се изисква.
Когато сте готови да продължите, натиснете бутона 'Запазване ...' в долния ляв ъгъл на прозореца на скрипта и дайте име на скрипта. Вече ще намерите тази приставка за Sketch достъпна от менюто Sketch под „Plugins“, точно както всички други приставки за Sketch.
Преименуване на слоеве в скица - пълният код
var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; // pregunta al usuario cuál debe ser el nuevo nombre de la capa var newLayerName = context.document.askForUserInput_initialValue('What should these layers be renamed to?', ''); selection.iterate(function(layer) { // para cada capa seleccionada layer.name = newLayerName; // renombrar al valor de newLayerName }) Създаване на приставка за скица „Избор на всички слоеве в група“
Сега ще създадем нещо малко по-сложно. Следващият плъгин за Sketch автоматично ще избере всички слоеве в група, които след това можете да адаптирате, за да включва само текстови слоеве или само слоеве с форма, или дори може автоматично да разпознава типа на слоя и да избира само слоеве от този тип.
Както преди, нека започнем с дефиниране на контекста. След това можете да повторите / повторите слоевете в този контекст и да ги изберете автоматично.
var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; selection.iterate(function(layer) { if(layer.isGroup) { // solo ejecuta el siguiente código si la selección es un grupo layer.iterate(function(innerLayer){ // para cada capa en el grupo innerLayer.addToSelection(); // agregarlo a la selección }); layer.deselect(); // deseleccionar el grupo } }); С този код ще бъдат избрани всички слоеве в която и да е избрана в момента група (стига да са избрани някои). Междувременно самите групи ще бъдат от избрани.
За допълнително усъвършенстване на този скрипт можете да включите условен оператор, който проверява дали слоят е от определен тип. Да предположим, че искате конкретно да изберете всички слоеве текст в група - за да направите това, при всяка итерация, проверявайте типа на слоя на всеки слой, така:
if(innerLayer.isText) { innerLayer.addToSelection(); } 
Изберете всички текстови слоеве в група: пълният код
var sketch = context.api(); var selection = sketch.selectedDocument.selectedLayers; selection.iterate(function(layer) { if(layer.isGroup) { // solo si la selección es un grupo layer.iterate(function(innerLayer){ // para cada capa en el grupo if(innerLayer.isText) { // solo si la capa es una capa de texto innerLayer.addToSelection(); // agregar a la selección } }); layer.deselect(); // deseleccionar el grupo } }); Можете да подобрите този скрипт по няколко начина, като използвате документация като справка:
- Позволете на потребителя да избира само фигури
- Позволете на потребителя да избира само изображения
- В случай, че не е избрана група, автоматично изберете основната група, позволявайки на потребителя да избира слоеве от подобен тип
- Ако групата има вложени групи в нея, обработете по същия начин
заключение
Ако сте любопитни да разработите приставки на Sketch, които други дизайнери могат да използват, погледнете SKPM (Мениджър на приставки за скица). SKPM позволява на дизайнерите да пакетират своите приставки във файловия формат .sketchplugin , което прави приставката инсталируема. По време на този процес разработчиците на приставки също могат да дефинират клавишни комбинации за действия на приставките.
Дизайнер, който знае как да кодира приставки на Sketch, е дизайнер който знае как да подобри работния ви процес и да работи по-бързо, когато е необходимо, освобождавайки повече време за прекарване на доставка на висококачествен краен продукт. Не само това, но и да научите как Sketch работи зад кулисите е чудесна възможност да се потопите в света на JavaScript.
