Sketch Graphic Editor Plugin Anfängerleitfaden

Ursprünglicher Autor: Mike Mariano
  • Übersetzung
  • Tutorial


Grüße Freunde! Mein Name ist Anton. Ich entwickle eine ux.pub- Site , die dem Sketch-Grafikeditor gewidmet ist. Sehr oft tauchen in meiner Mail Fragen zu den Feinheiten der Entwicklung von Plugins für Sketch auf. Da ich kein Entwickler oder Spezialist für die Erstellung von Plugins bin, habe ich mich entschlossen, den detailliertesten Plugin-Designleitfaden von Mike Mariano zu übersetzen.

Teil 1 - Wo soll ich anfangen?


Möchten Sie mit dem Schreiben von Sketch-Plugins beginnen und wissen nicht, wo Sie anfangen sollen? Lesen Sie weiter, denn dieser Beitrag ist nur für Sie!

Die Basis zu beherrschen ist nicht so einfach. Es gibt viele Beispiele für vorhandene Plugins, aber es ist sehr schwer zu verstehen, wo man anfangen soll. Um Ihnen zu helfen, habe ich alle notwendigen Informationen gesammelt, die ich nur an einem Ort finden konnte.

Natürlich ist dies kein Handbuch zum Schreiben von Plugins für Fortgeschrittene, da ich selbst kein Entwickler bin. Ich bin ein UI / UX-Designer, der manchmal ziemlich gute Programmierkenntnisse haben muss (zumindest denke ich das). Tru-Programmierer weinen offen, wenn sie meinen Code sehen, aber ich denke, dass dieser Code von Anfängern gut verstanden wird.

Wenn Sie ein Ingenieur sind, der nach komplexeren Beispielen sucht, sind dieser Beitrag sowie die offizielle Website hilfreich für Sie . Skizzieren Sie Entwickler.

Warum ein Plugin schreiben?


Plugins eignen sich ideal zur Automatisierung sich wiederholender Aufgaben und vereinfachen die Arbeit und die Produktion erheblich. Es besteht die Möglichkeit, dass bereits ein Plug-In für Ihre Anforderungen vorhanden ist. Suchen Sie daher zunächst nach einer vorgefertigten Lösung, bevor Sie eine eigene erstellen. Es ist sehr wahrscheinlich, dass jemand die Aufgabe bereits besser als Sie erledigt hat. Wenn Sie jedoch über einen einzigartigen Workflow zum Erstellen einer Benutzeroberfläche verfügen (wie ich es beim Entwurf von Spieloberflächen in Unity getan habe), benötigen Sie höchstwahrscheinlich eine benutzerdefinierte Lösung.

Starten Sie


Installieren Sie alle erforderlichen Programme und Lesezeichen, bevor Sie den Code starten.

  1. Installieren Sie einen Texteditor, falls Sie noch keinen haben. (Ich benutze Atom , aber es gibt viele andere großartige Editoren wie Sublime oder Textmate .)

  2. Öffnen Sie die Konsole zum Debuggen und fügen Sie sie Ihrem Dock hinzu. Sie werden sie häufig verwenden.>

    1-8tsgn6bxwkezgshwyip8lw

  3. Ihr Computer verwendet die Konsole für das GESAMT-Debugging. Erstellen Sie daher einen neuen Sketch-Abfrageprotokollfilter: Datei> Neues Systemabfrageprotokoll

Kopieren Sie diese Einstellungen und klicken Sie auf OK.

1-n8clsi0_jhe-4jsfx-txga

Der Skizzenfilter wird in der linken Spalte angezeigt.

1-p0oatbbn78yfdssskqrigg

4. Erstellen Sie ein Lesezeichen für den Ordner "Sketch Plugins", damit Sie schnell darauf zugreifen können, indem Sie ihn im Finder-Fenster zu Ihren Favoriten hinzufügen.

Da Sie auch häufig auf diesen Ordner zugreifen, ist es ratsam, ihn zur Hand zu haben.

/ Bibliothek / Anwendungsunterstützung / com.bohemiancoding.sketch3 / Plugins

1-xermiwsh60b0osekwabugw

Das ist alles, Sie sind bereit, Ihr erstes Plugin zu schreiben!

Erstellen eines Plugins in 10 einfachen Schritten


Skizzen-Plugins sind Ordner mit der Erweiterung .sketchplugin, die problemlos für andere Benutzer freigegeben werden können.

In diesem Beispiel erstellen wir ein Basisskript, um den Seitennamen abzurufen. Sie brauchen keine Programmierkenntnisse, um diese Aufgabe zu realisieren, aber es wird Ihnen helfen, die Grundprinzipien zu verstehen. In den folgenden Beiträgen werde ich verschiedene Skripte dokumentieren, um unterschiedliche Daten aus Sketch zu erhalten und zu ändern. Dieses Beispiel ist das einfachste.

Skizzen-Plugins sind in CocoaScript geschrieben, einer Mischung aus Objective-C / Cocoa und JavaScript. Ich kenne mich gut mit Javascript aus, daher gab es keine Schwierigkeiten. Ich werde nicht sagen, dass ich in CocoaScript bin wie ein Fisch im Wasser, aber meine JavaScript-Kenntnisse waren ausreichend, um zu verstehen.

Also fangen wir an!

1. Создайте новую папку в каталоге Sketch Plugins и назовите ее MyPlugin.sketchplugin

1-dw5qn1na_zd8dgzm6s141w

(как только вы добавите расширение .sketchplugin, двойной клик на ней запустит установку плагина вместо открытия папки. Чтобы открыть саму папку, кликните правой кнопкой мышки на плагине и выберите опцию Show Package Contents).

2. Внутри папки создайте еще одну папку и назовите ее Contents

3. Внутри Contents создайте папку Sketch

Конечная структура папки плагина будет выглядеть так:

1-mnhkmqkpjyg0taofttwtgw

Внутри папки Sketch вы и будете создавать сам плагин, который состоит минимум из 2 файлов – манифеста и скрипта.

1-8l57idwssf5tnot0x408tq

Das Manifest beschreibt das Plugin und kann verschiedene Tastenkombinationen und zusätzliche Skripte enthalten. Es heißt immer manifest.json.

Das Skript selbst enthält den Plugin-Code und das Manifest verweist darauf. Der Name kann nach eigenem Ermessen geändert werden, muss jedoch in beiden Dateien übereinstimmen.

4. Erstellen Sie in einem Texteditor eine neue Datei mit dem Namen manifest.json und speichern Sie sie in MyPlugin.sketchplugin> Contents> Sketch.

5. Kopieren Sie diesen Code, fügen Sie ihn in manifest.json ein, und speichern Sie ihn.

{
    "name" : "My Plugin",
    "identifier" : "my.plugin",
    "version" : "1.0",
    "description" : "My First Sketch Plugin",
    "authorEmail" : "your@email.com",
    "author" : "Your Name",
    "commands" : [
    {
      "script" : "MyScript.js",
      "handler" : "onRun",
      "shortcut" : "command shift y",
      "name" : "Get Page Names",
      "identifier" : "my.plugin.pagenames"
    }
  ]
}

Теперь MyPlugin появится в вашем меню плагинов Sketch. Вы можете изменить название плагина или горячую клавишу его вызова, и это отразится в меню Plugins в Sketch. Важно выбрать такую горячую клавишу запуска, которая не назначена для других установленных приложений или плагинов, иначе она не будет работать.

Теперь создадим MyScript.js, на который ссылается manifest. Убедитесь, что название файла совпадает с названием в файле manifest!

6. Вернитесь в текстовый редактор и создайте новый файл под названием MyScript.js, и также сохраните его в папку MyPlugin.sketchplugin > Contents > Sketch folder

7. Скопируйте и вставьте этот код в MyScript.js

var onRun = function(context) {
  //reference the Sketch Document
  var doc = context.document;
  //reference all the pages in the document in an array
  var pages = [doc pages];
  //loop through the pages of the document
  for (var i = 0; i < pages.count(); i++){
    //reference each page
    var page = pages[i];
    //get the name of the page
    var pageName = [page name];
    //show the page name in the console
    log(pageName);
  }
}


Ich werde diesen Code in den folgenden Abschnitten näher erläutern. In der Zwischenzeit verlassen Sie sich auf die Kommentare in den Zeilen.

8. Gehen Sie zu Sketch und öffnen Sie eine neue Datei.

9. Wählen Sie im Plugins-Menü MyPlugin> Seitennamen abrufen.

1-uelcrvjw2vyxzgjdib58ya

10. Gehen Sie zur Konsole und am unteren Rand des Protokolls sollten Sie den Namen der Seite sehen:

10:54:42 PM Get Page Names (Sketch Plugin): Page 1

Versuchen Sie, den Seitennamen in der Sketch-Datei zu ändern und starten Sie das Plugin neu. Das Protokoll sollte einen neuen Namen enthalten. Fügen Sie eine weitere Seite hinzu und benennen Sie diese um. Führen Sie dann das Plugin aus. Die Konsole zeigt nun die Namen beider Seiten an.

Das ist alles!


Ich arbeite erst seit ein paar Wochen bei Sketch und bin bereits beeindruckt von der Leistungsfähigkeit und den Anpassungsmöglichkeiten. Die aktuelle Version des Plugins können Sie hier herunterladen .

Teil 2 - Benutzerbenachrichtigungen


Ich habe den hervorragenden Atom- Texteditor entdeckt , zu dem ich gewechselt habe. Ich weiß noch nicht, warum ich es noch nicht benutzt habe, aber jetzt habe ich mich von meinem guten alten TextMate verabschiedet!

Im vorherigen Kapitel haben wir an einem Plugin gearbeitet, das die Namen aller Seiten Ihres Dokuments in der Konsole anzeigt. Nun werden wir andere Möglichkeiten zur Anzeige von Informationen untersuchen. Sie werden benötigt, wenn Sie Benutzer (und sich selbst) über verschiedene Dinge informieren möchten, z. B., dass das Plug-in funktioniert hat oder der Benutzer einige Daten eingeben muss. Außerdem müssen Sie nicht ständig zur Konsole wechseln, um Ihre Skripts zu testen.

Es gibt zwei zusätzliche Möglichkeiten, Benutzer in Sketch zu benachrichtigen:

  1. Nachricht (Message) - Eine kurze, unauffällige Nachricht, die am unteren Rand der Anwendung angezeigt wird und nach kurzer Zeit ausgeblendet wird
  2. Box - Warnung (Alert Box) - die Standard - Popup-Fenster, das den Benutzer zu jeder Eingabe fragt oder erfordert eine Aktion fortzusetzen.

Jede Methode hat ihre eigene Anwendung und normalerweise müssen Sie das Plugin (und die Benutzer) nicht mit vielen Nachrichten überladen. Experimentieren Sie mit beiden, um herauszufinden, welche Methode für Ihr eigenes Plugin am besten geeignet ist.

Kehren wir vom ersten Beispiel an zum Plugin-Skript zurück und wiederholen es.

var onRun = function(context) {
  //reference the Sketch Document
  var doc = context.document;
  //reference all the pages in the document in an array
  var pages = [doc pages];
  //loop through the pages of the document
  for (var i = 0; i < pages.count(); i++){
    //reference each page
    var page = pages[i];
    //get the name of the page
    var pageName = [page name];
    //show the page name in the console
    log(pageName);
  }
}

Wenn Sie sich diesen Code ansehen, bezieht sich pageName auf den Namen jeder Seite im Seitenarray des Dokuments. Dies ist ein Datencontainer, der alle Informationen über die Seite enthält. In der Regel wird eine for-Schleife verwendet, um auf diese Arrays zuzugreifen, die jedes Objekt durchlaufen, um bestimmte Werte zu extrahieren oder zuzuweisen.

In dieser Zeile wird die Variable pageName an die Konsole gesendet.

log(pageName);

Fügen Sie nun im Skript eine Nachricht hinzu, die die Nachricht in Sketch anzeigt, wenn das Skript ausgeführt wird.

Dazu fügen wir nach der for-Schleife eine Codezeile ein:

doc.showMessage(“MyPlugin Finished!”);

Doc ist eine Variable am oberen Rand des Skripts, die sich auf das Dokument bezieht, und showMessage ist eine integrierte Funktion, mit der eine Variable oder ein String (String) zum Anzeigen der Nachricht übergeben werden kann.

So sieht das Hinzufügen nach der for-Schleife im Kontext des gesamten Skripts aus:

var onRun = function(context) {
  //reference the Sketch Document
  var doc = context.document;
  //reference all the pages in the document in an array
  var pages = [doc pages];
  //loop through the pages of the document
  for (var i = 0; i < pages.count(); i++){
    //reference each page
    var page = pages[i];
    //get the name of the page
    var pageName = [page name];
    //show the page name in the console
    log(pageName);
  }
  //show a message at the bottom of Sketch
  doc.showMessage("MyPlugin Finished!");
}

Starten Sie MyPlugin über das Plugins-Menü, um das Ergebnis anzuzeigen. Am unteren Rand des Skizzenfensters sollten Sie Folgendes sehen:

1-z9cmbfc9syuokwrzdsairq

Diese Art von Nachricht ist nützlich, wenn Sie nicht ständig zur Konsole wechseln möchten oder wenn Sie dem Benutzer etwas anzeigen möchten, für das jedoch keine Teilnahme erforderlich ist.

Wenn Sie eine auffälligere Nachricht wünschen, die eine Aktion des Benutzers erfordert, ist es besser, das Warnfeld zu verwenden. Fügen Sie zum Hinzufügen eine Codezeile am Anfang des Skripts und eine weitere nach dem Anzeigen der vorherigen Nachrichten hinzu.

Die erste Zeile wird über der doc-Variablendeklaration hinzugefügt, um auf die Anwendung selbst zu verweisen:

var app = [NSApplication sharedApplication];

Die zweite Zeile gibt Zugriff auf die neue Variable zum Senden von Nachrichten an die Anwendung.

[app displayDialog:"This is an alert box!" withTitle:"Alert Box Title"];

Und hier ist der letzte Code mit neuen Zeilen:

var onRun = function(context) {
  //reference the Application
  var app = [NSApplication sharedApplication];
  //reference the Sketch Document
  var doc = context.document;
  //reference all the pages in the document in an array
  var pages = [doc pages];
  //loop through the pages of the document
  for (var i = 0; i < pages.count(); i++){
    //reference each page
    var page = pages[i];
    //get the name of the page
    var pageName = [page name];
    //show the page name in the console
    log(pageName);
  }
  //show a message at the bottom of Sketch
  doc.showMessage("MyPlugin Finished!");
  //send an alert message to the application
  [app displayDialog:"This is an alert box!" withTitle:"Alert Box Title"];
}

Starten Sie MyPlugin über das Plugin-Menü und Sie sollten folgendes sehen:

1-1aqb4gdfoh7dxzdugdqdzq

Ändern Sie die Nachrichten (die in Anführungszeichen stehen) in irgendetwas und starten Sie das Plugin neu. Volle Anpassung!

Dies ist der Beginn des Debuggens und Anzeigens von Daten in Sketch. Sie können versuchen, Nachrichten- / Benachrichtigungsskripte zu ändern oder zusätzliche Skripte hinzuzufügen, um unterschiedliche Daten anzuzeigen - Variablen oder Array-Zähler.

Um die Anzahl der Seiten in einem Dokument anzuzeigen, können Sie eine Nachricht erstellen, in der pages.count () angezeigt wird.

[app displayDialog:”This document has “ + pages.count() + “ pages.” withTitle:”Alert Box Title”];

Hier ist das Ergebnis:

1-ruhpur9ob2ns-kknochjyq

Wir haben Benutzerbenachrichtigungen herausgefunden! Zuerst haben wir die Entwicklungsumgebung vorbereitet, dann haben wir herausgefunden, wie Sie Nachrichten in Sketch debuggen und anzeigen können. Als nächstes konzentrieren wir uns mehr auf den Code selbst, suchen nach bestimmten Daten und wie man sie verarbeitet.

Die aktuelle Version des Plugins kann hier heruntergeladen werden .

Teil 3 - Wiederverwendbaren Code schreiben


Es ist Zeit, die Monitore vertikal aufzustellen, denn wir beginnen mit der Programmierung!

In diesem Teil werden die grundlegenden Konzepte zum Schreiben von Code, zum Erstellen von Funktionen für wiederholte Aufrufe und zum Verknüpfen von zwei Skripten erläutert. Wenn Sie das Schreiben von Skripten bereits beherrschen, können Sie einfach bis zum Ende dieses Teils scrollen, die Quellcodes herunterladen und sie auf Ihre eigene Weise neu erstellen. Wenn Sie neu in diesem Geschäft sind oder Ihr Wissen auffrischen müssen, lesen Sie weiter!

Grundlegende Konzepte zum Schreiben von Code


Es gibt Code, den wir bereits geschrieben haben und der Variablen, Arrays, Funktionen und for-Schleifen enthält. Diese Elemente sowie die if / else-Anweisungen sind die grundlegenden Bausteine ​​für alles, was ich tue. Sobald ich diese Elemente (insbesondere die Schleife) beherrschte, wurde es für mich viel einfacher, die Skripte zu verstehen. Ich schreibe meine Skripte in Javascript und Objective-C, aber diese Konzepte sind für jede Programmiersprache ziemlich universell. Sie müssen nur eine bestimmte Art des Code-Schreibens ausarbeiten.

Ich werde diese Konzepte kurz erläutern:

Eine Variable ist ein Verweis auf eine Art von Information. Dies kann entweder eine Zeichenfolge (ein Textabschnitt) oder eine Zahl oder ein Boolescher Wert (wahr oder falsch) sein. Dies ist eine Tastenkombination für den Zugriff auf einen Wert, und es ist sehr praktisch, ihn zu verwenden, anstatt ihn immer wieder mit den Händen einzugeben.

var myName = “Mike”;
 var thisYear = 2016;
 var givesHighFives = true;

Wenn ich myName auf "Mike" setze, kann ich einfach überall im myName-Skript schreiben, und diese Variable verweist auf "Mike". Aber wenn ich möchte, dass "Shawn" mein Name wird, muss ich ihn nur einmal in der Variablendeklaration ändern, und jede seiner Entitäten im Code wird sich auch ändern.

Ein Array ist ebenfalls eine Variable, enthält jedoch normalerweise mehrere Werte desselben Typs. Als ob Sie ein Array von Wochentagen hätten, würden Sie den Zeichenfolgenwert aller Tage in einem solchen Array sehen.

var daysOfTheWeek = {“Sunday”, “Monday”, “Tuesday”, Wednesday”, “Thursday”, “Friday”, “Saturday”};

Sie können es auch so schreiben, es wird einfacher, die Anzahl der Array-Elemente zu sehen, die mit 0 beginnen:

var daysOfTheWeek[];
 daysOfTheWeek[0] = “Sunday”;
 daysOfTheWeek[1] = “Monday”;
 daysOfTheWeek[2] = “Tuesday”;
 daysOfTheWeek[3] = “Wednesday”;
 daysOfTheWeek[4] = “Thursday”;
 daysOfTheWeek[5] = “Friday”;
 daysOfTheWeek[6] = “Saturday”;

Eine Funktion ist ein wiederverwendbarer Code, der eine bestimmte Aufgabe ausführt. Sie fragen sie normalerweise, ob Sie etwas immer und immer wieder tun müssen. Sie können Variablen übergeben, erzwingen, dass sie einen Wert zurückgeben, oder sie leer lassen.

var eyesOpen = true;
 function closeEyes(){
 eyesOpen = false;
 }
 function openEyes(){
 eyesOpen = true;
 }

Im obigen Beispiel können Sie jedes Mal, wenn Sie Ihre Augen schließen möchten, die Funktion closeEyes () aufrufen und anschließend openEyes () aufrufen, um sie zu öffnen.

Die if / else-Anweisung macht genau das, was sie sagt, d.h. Überprüft eine Bedingung, führt eine bestimmte Aktion aus, wenn die Bedingung erfüllt ist, andernfalls wird etwas anderes ausgeführt.

if(daysOfTheWeek == “Sunday”){
 watchGameOfThrones();
 }else if(daysOfTheWeek == “Wednesday”){
 watchMrRobot();
 }else{
 watchTheNews();
 }

Die for-Schleife wird verwendet, um einen bestimmten Codeblock eine bekannte Anzahl von Malen zu wiederholen. Wenn Sie beispielsweise im Array daysOfTheWeek die Werte des Arrays auflisten möchten, verwenden Sie dazu die for-Schleife.

Ohne eine Schleife würden Sie folgendermaßen schreiben:

log(daysOfTheWeek[0]);
 log(daysOfTheWeek[1]);
 log(daysOfTheWeek[2]);
 log(daysOfTheWeek[3]);
 log(daysOfTheWeek[4]);
 log(daysOfTheWeek[5]);
 log(daysOfTheWeek[6]);

Und mit einer Schleife müssten Sie nur schreiben:

for(var i = 0; i < daysOfTheWeek.count(); i++){
 log(daysOfTheWeek[i];
 }

Viel einfacher, oder? Für die Schleife setzen wir den Anfangswert von i auf 0 und zählen, bis i die Anzahl der Werte im Array daysOfTheWeek erreicht, d. H. 7. Das heißt, beginnend mit i = 0 protokolliert die Schleife den Wert von daysOfTheWeek, addiert dann zu i 1 und alles wiederholt sich. Dies geschieht insgesamt siebenmal, bis ein vollständiger Satz von Werten im Array erreicht ist.

Erstellen einer Warnboxfunktion (Warnbox)


Zurück zum MyPlugin-Code. Im vorherigen Teil haben wir ein Benachrichtigungsfenster erstellt, das nach der Verarbeitung des Skripts angezeigt wurde.

[app displayDialog:”This is an alert box!” withTitle:”Alert Box Title”];

Es sieht aus wie etwas, das jedes Mal verwendet wird, wenn wir dem Benutzer Nachrichten anzeigen müssen, und ich möchte nicht jedes Mal die gesamte Codezeile für jede solche Nachricht aufschreiben. Dies gilt insbesondere dann, wenn die angezeigte Meldung aus einer Kombination von Variablen und Zeichenfolgen besteht. Der Code kann sehr lang sein.

Ein guter Grund, eine wiederverwendbare Funktion zu erstellen, und dafür müssen Sie sich registrieren:

function alert(title, message){
  var app = [NSApplication sharedApplication];
  [app displayDialog:message withTitle:title];
}

Jedes Mal, wenn wir alert () aufrufen und den Header und die Nachricht übergeben, wird ein Warnfenster angezeigt.

Fügen Sie diese Funktion nach den eckigen Klammern der onRun-Funktion am Ende des Skripts hinzu:

var onRun = function(context) {
  //reference the Application
  var app = [NSApplication sharedApplication];
  //reference the Sketch Document
  var doc = context.document;
  //reference all the pages in the document in an array
  var pages = [doc pages];
  [app displayDialog:"This document has " + pages.count() + " pages." withTitle:"Alert Box Title"];
  //loop through the pages of the document
  for (var i = 0; i < pages.count(); i++){
    //reference each page
    var page = pages[i];
    //get the name of the page
    var pageName = [page name];
    //show the page name in the console
    log(pageName);
  }
  //show a message in app
  doc.showMessage("MyPlugin Finished!");
  //send an alert message to the application
  [app displayDialog:"This is an alert box!" withTitle:"Alert Box Title"];
}
function alert(title, message){
  var app = [NSApplication sharedApplication];
  [app displayDialog:message withTitle:title];
}

Und jetzt können wir den früher geschriebenen Code ändern, indem wir die ursprüngliche Referenz auf die Variable ersetzen, da sie jetzt in der Funktion registriert ist. Das Skript sieht jetzt so aus:

var onRun = function(context) {
  //reference the Application
  var app = [NSApplication sharedApplication];
  //reference the Sketch Document
  var doc = context.document;
  //reference all the pages in the document in an array
  var pages = [doc pages];
  alert("Number of Pages", "This document has " + pages.count() + " pages.");
  //loop through the pages of the document
  for (var i = 0; i < pages.count(); i++){
    //reference each page
    var page = pages[i];
    //get the name of the page
    var pageName = [page name];
    //show the page name in the console
    log(pageName);
  }
  //show a message in app
  doc.showMessage("MyPlugin Finished!");
  //send an alert message to the application
  alert("Plugin Finished!", "This is a message saying the Plugin is finished.")
}
function alert(title, message){
  var app = [NSApplication sharedApplication];
  [app displayDialog:message withTitle:title];
}

Führen Sie das Plugin aus und Sie werden das gleiche Ergebnis wie zuvor sehen, aber jetzt bezieht sich Ihr Code auf die Funktion. Es kann an einer beliebigen Stelle im Skript aufgerufen werden, sodass der Code nicht immer wieder neu geschrieben werden muss. Aber was wäre, wenn wir ein anderes Skript hätten, in dem wir diese Funktion verwenden könnten?

Verknüpfen Sie mit Skripten aus anderen Skripten


Und hier ist es angebracht, eine Bibliothek zu erstellen. Manchmal haben Sie eine gemeinsame Funktion, die an kein Skript gebunden werden sollte. Wie bei der alert () - Funktion oder beim Runden einer Zahl auf die nächste Ganzzahl. Dies sind allgemeine Funktionen, die wahrscheinlich in verschiedenen Skripten verwendet werden. Daher können Sie anstelle der Funktionen zum Kopieren und Einfügen in jede Datei eine gemeinsame Datei erstellen und nach Bedarf einfügen.

1. Speichern Sie die neue JavaScript-Datei in demselben Ordner, in dem MyScript.js gespeichert ist, und nennen Sie sie common.js. Der Ordner enthält nun 3 Dateien:

1-c9uz7wbojajdje_xvd0ziw

2. Schneiden Sie die Warnfunktion aus MyScript.js aus, fügen Sie sie in common.js ein und speichern Sie die Änderungen.

In common.js sollte es nur diesen Code geben:

function alert(title, message){
  var app = [NSApplication sharedApplication];
  [app displayDialog:message withTitle:title];
}


3. Um dieses Skript in MyScript.js auszuführen, fügen Sie diese Codezeile oben im Skript hinzu und speichern Sie:

@import 'common.js'

Das gesamte Skript mit einer neuen Zeile oben und der entfernten alert () -Funktion sieht folgendermaßen aus:

@import 'common.js'
var onRun = function(context) {
  //reference the Application
  var app = [NSApplication sharedApplication];
  //reference the Sketch Document
  var doc = context.document;
  //reference all the pages in the document in an array
  var pages = [doc pages];
  alert("Number of Pages", "This document has " + pages.count() + " pages.");
  //loop through the pages of the document
  for (var i = 0; i < pages.count(); i++){
    //reference each page
    var page = pages[i];
    //get the name of the page
    var pageName = [page name];
    //show the page name in the console
    log(pageName);
  }
  //show a message in app
  doc.showMessage("MyPlugin Finished!");
  //send an alert message to the application
  alert("Plugin Finished!", "This is a message saying the Plugin is finished.")
}

Führen Sie das Plugin erneut aus, es sollte wie zuvor funktionieren, aber jetzt führen Sie die Funktion über ein gemeinsames Skript aus! Die Optimierung ist abgeschlossen!

Jetzt haben Sie die Grundlagen zum Schreiben und Verstehen komplexerer Plugins. Als Nächstes untersuchen wir den Zugriff auf die Daten eines Skizzendokuments über seine Variablen und Arrays und wie diese Arrays durchsucht werden, um die benötigten Werte zu extrahieren und zuzuweisen.

Die aktuelle Version des Plugins können Sie hier herunterladen .

Teil 4 - Beispiele aus der Praxis


Wir haben bereits gelernt, eine Umgebung zum Schreiben und Debuggen von Code zu organisieren, verschiedene Arten von Benutzerbenachrichtigungen anzuzeigen und die grundlegenden Konzepte zum Schreiben von Code zu beherrschen. Es scheint, dass wir alles haben, um unsere eigenen Plugins zu schreiben.

Glücklicherweise hat Bohemian Coding Dokumentation für seine Klassen:
http://developer.sketchapp.com/reference/class/

Leider befindet es sich, wie oben auf dieser Seite geschrieben, noch in der Entwicklung. Es wird also nicht alles beschrieben, und es gibt nicht viele Beispiele dafür, was damit zu tun ist.

Persönlich lerne ich am besten aus Beispielen. Das Verstehen des Codes kann sehr schwierig sein, aber wenn Sie sehen, wie er in Bezug auf Ihr Wissen und Ihre Ziele verwendet wird, wird es viel einfacher. Ich werde drei Beispiele nennen, die ich bei der Arbeit mit Sketch gefunden habe. Ich hoffe, Sie finden sie nützlich!

Beispiel 1: Ändern Sie die Höhe und Breite einer Zeichenfläche.


Seltsam, aber in der Standardfunktionalität von Sketch ändert sich die Ausrichtung der Zeichenfläche nicht von Hochformat zu Querformat und umgekehrt. Ich habe nach einem Plugin gesucht, das dieses Problem behebt. Es ist also an der Zeit, ein eigenes Plugin zu erstellen.

Lassen Sie uns aus Gründen der Klarheit entscheiden, was wir tun werden. Dies hilft, das Ziel zu bestimmen, Wege zu finden, es zu erreichen und extreme Fälle zu identifizieren, denen man sich stellen muss. Es ist fast so, als würde man ein UX-Skript erstellen, oder?

Für dieses Plugin schreiben wir ein Skript, das Folgendes ausführt:

  • Stellen Sie zunächst sicher, dass etwas hervorgehoben ist
  • Dann stellt er sicher, dass das ausgewählte Objekt eine Zeichenfläche ist
  • Dann nimmt es die ursprüngliche Höhe und Breite der ausgewählten Zeichenfläche und speichert sie in Variablen
  • Stellt dann die neue Höhe basierend auf der alten Breite und die neue Breite basierend auf der alten Höhe ein
  • Informiert den Benutzer letztendlich darüber, dass das Skript funktioniert hat

Hinzufügen eines weiteren Skripts zu MyPlugin


Anstatt MyScript.js einen neuen Codestapel hinzuzufügen, erstellen wir ein neues Skript mit dem Namen RotateArtboard.js und speichern es im Ordner MyPlugin.sketchplugin.

Fügen Sie diesen Code zu RotateArtboard.js hinzu. Jedes Hauptskript sollte sich in der onRun-Funktion befinden, daher ist dieses Skript immer eine gute Basis für den Start:

@import 'common.js'
var onRun = function(context) {
  //reference the Sketch Document
  var doc = context.document;
}

Sie werden feststellen, dass wir die Datei common.js importieren, um dieselbe Warnfunktion zu verwenden, die wir bereits erstellt haben.

Momentan sollten sich folgende Dateien im Plugin-Ordner befinden:

1-zq4ryj_udiwcr-biqkupkg

Öffnen Sie jetzt manifest.json, um unserem Manifest ein weiteres Skript hinzuzufügen.

Kopieren Sie den Codeausschnitt mit allen MyScript.js-Befehlen, fügen Sie nach dem MyScript-Block ein Komma ein und fügen Sie die Befehle vor der schließenden Klammer ein.

{
    "name" : "My Plugin",
    "identifier" : "my.plugin",
    "version" : "1.0",
    "description" : "My First Sketch Plugin",
    "authorEmail" : "your@email.com",
    "author" : "Your Name",
    "commands" : [
    {
      "script" : "MyScript.js",
      "handler" : "onRun",
      "shortcut" : "command shift y",
      "name" : "Get Page Names",
      "identifier" : "my.plugin.pagenames"
    },
    {
      "script" : "RotateArtboard.js",
      "handler" : "onRun",
      "shortcut" : "command shift u",
      "name" : "Rotate Artboard",
      "identifier" : "my.plugin.rotateartboard"
    }
  ],
}

Jetzt sehen Sie ein neues Skript im MyPlugin-Menü (Sie können die Tastenkürzel übrigens ändern):

1-hv9u76wafmq1rnjitphdg

Zurück zum Code! Um herauszufinden, was hervorgehoben ist, verwenden Sie Folgendes:

var selection = context.selection;

Dieser Code erstellt eine Array-Variable mit allen ausgewählten Layern. Jetzt können wir dieses Array überprüfen, um festzustellen, ob sich etwas darin befindet. Wenn es 0 gibt, wird nichts zugewiesen, und wir werden dem Benutzer mitteilen, dass etwas zugewiesen werden muss.

if(selection.count() == 0){
 doc.showMessage(“Please select something.”);
 }

Wenn der Zähler jedoch nicht 0 ist, befindet sich etwas im Array, und es sollte mindestens eine Ebene ausgewählt werden. Jetzt können wir durch die ausgewählten Ebenen blättern, um festzustellen, ob Zeichenflächen ( MSArtboardGroup ) darunter sind :

if(selection.count() == 0){
 doc.showMessage(“Please select something.”);
} else {
 for(var i = 0; i < selection.count(); i++){
  if(selection[i].class() == "MSArtboardGroup"){
     //do something
  }
 }
}

Mit derselben Technik können Sie prüfen, ob es sich bei der Auswahl um eine Textebene ( MSTextLayer ), eine Gruppe ( MSGroupLayer ), eine Form (MSShapeGroup / nicht dokumentiert), ein importiertes Bild ( MSBitmapLayer ) oder ein Symbol (MSSymbolInstance / nicht dokumentiert) handelt.

Um die Höhe und Breite der Zeichenfläche zu ermitteln, müssen Sie zuerst den Rahmen abrufen. Und schon aus dem Frame können Sie die Werte extrahieren und neue zuweisen.

Erstellen Sie eine Variable namens artboard basierend auf dem Array-Element in der for-Schleife, um die aktuellen Dimensionen abzurufen. Mit der for-Schleife können Sie mit mehreren ausgewählten Zeichenflächen gleichzeitig arbeiten .

var artboard = selection[i];
 var artboardFrame = artboard.frame();
 var artboardWidth = artboardFrame.width();
 var artboardHeight = artboardFrame.height();

Erstellen Sie nun zwei neue Variablen mit den von uns benötigten Werten, d. H. Swap Breite und Höhe:

var newArtboardWidth = artboardHeight;
 var newArtboardHeight = artboardWidth;

Verwenden Sie dann artboardFrame, um die Höhe und Breite mit den neuen Variablen festzulegen:

artboardFrame.setWidth(newArtboardWidth);
 artboardFrame.setHeight(newArtboardHeight);

Und schließlich werden wir unser Benachrichtigungsfenster verwenden, um den Benutzer über die Entwicklung des Skripts zu informieren und die neuen Werte anzuzeigen:

var alertMessage = “New Height: “+newArtboardHeight+ “ | New Width: “+newArtboardWidth;
 alert(“Artboard Rotated!”, alertMessage)

Hier ist das gesamte Skript mit Kommentaren:

@import 'common.js'
var onRun = function(context) {
    //reference the sketch document
    var doc = context.document;
    //reference what is selected
    var selection = context.selection;
    //make sure something is selected
    if(selection.count() == 0){
        doc.showMessage("Please select something.");
    }else{
        //loop through the selected layers
        for(var i = 0; i < selection.count(); i++){
            //checks to see if the layer is an artboard
            if(selection[i].class() == "MSArtboardGroup"){
                //reference the selection
                var artboard = selection[i];
                //get the artboard frame for dimensions
                var artboardFrame = artboard.frame();
                //get the width
                var artboardWidth = artboardFrame.width();
                //get the height
                var artboardHeight = artboardFrame.height();
                //set a new width variable to the old height
                var newArtboardWidth = artboardHeight;
                //set a new height variable to the old width
                var newArtboardHeight = artboardWidth;
                //set the artboard frame with the new dimensions
                artboardFrame.setWidth(newArtboardWidth);
                artboardFrame.setHeight(newArtboardHeight);
                //send an alert message with the new values
                var alertMessage = "New Height: "+newArtboardHeight+ " | New Width: "+newArtboardWidth;
                alert("Artboard Rotated!", alertMessage);
            }else{
                doc.showMessage("Please select an artboard.");
            }
        }
    }
}

Um Beispiel 1 zusammenzufassen:

  • Überprüfen Sie, ob etwas hervorgehoben ist.
  • Bestimmen Sie den ausgewählten Ebenentyp und führen Sie einen Schritt aus, wenn dies der Typ ist, den wir benötigen
  • Wir extrahieren den Originalrahmen unserer ausgewählten Zeichenfläche in Höhe und Breite und speichern ihn in Variablen
  • Wir erstellen neue Variablen mit den Werten, die wir benötigen
  • Wir legen diese Werte für den Rahmen der ausgewählten Zeichenfläche fest

Beispiel 2: Layer auswählen und in einen Symbolnamen umbenennen


Hier ist ein weiteres reales Problem, das ich bei der Arbeit mit Symbolen entdeckt habe. Wenn ich ein neues Zeichen aus meiner Bibliothek hinzufüge, ändert sich der Name der Ebene in den Namen des Zeichens. Wenn ich zu einem anderen Symbol wechsle, bleibt der Name der Ebene unverändert. Manchmal möchte ich meinen Ebenennamen festlegen und manchmal möchte ich ihn einfach auf den Namen des neuen Symbols ändern. Hier ist ein weiterer perfekter Grund, ein Plugin zu schreiben!

Laden Sie für dieses Beispiel die Skizzendatei als Referenz herunter .

In der Skizzendatei auf der ersten Zeichenfläche sehen Sie ein Symbol mit der Bezeichnung Quadrat, das sich in der Mitte befindet. Es gibt auch ein anderes Symbol in der Bibliothek, das Kreis genannt wird.

Wählen Sie Quadrat und ändern Sie mithilfe der Optionen auf der rechten Seite Quadrat in Kreis

1-ow6hbt63d3_y9d7hzdkd0a

Betrachten Sie nun die Ebenen auf der linken Seite - die Ebene heißt immer noch Quadrat! Ich denke, ich könnte den Namen manuell ändern, aber es ist nicht cool, besonders wenn Sie viele Entitäten ändern müssen.

Das Skript für dieses Plugin lautet:

  • Stellen Sie zunächst sicher, dass etwas markiert ist
  • Stellen Sie dann sicher, dass das Symbol markiert ist.
  • Holen Sie sich den Namen des Charakters
  • Überprüfen Sie, ob der Symbolname mit dem Ebenennamen übereinstimmt
  • Wenn nicht, ändern Sie den Layernamen in den Symbolnamen
  • Zum Schluss benachrichtigen Sie den Benutzer, wenn das Skript ausgeführt wird

Sie werden feststellen, dass das neue und das vorherige Skript vieles gemeinsam haben - die gleiche Auswahlprüfung und die Bestimmung des Typs der ausgewählten Objekte. Wir können also die vorgefertigten Entwicklungen verwenden, aber dies ist immer noch ein ziemlich spezieller Fall, so dass wir ein separates Skript erstellen werden.

Führen Sie die ersten Schritte des vorherigen Beispiels aus, und fügen Sie MyPlugin.sketchplugin ein weiteres Skript hinzu. Erstellen Sie eine neue Datei mit dem Namen SetLayerNameToSymbolName.js und fügen Sie sie der Datei manifest.json hinzu. Um Zeit zu sparen, verwenden Sie einfach RotateArtboard.js und "Speichern unter". Wir werden dieses Skript sehr oft verwenden. Beginnen wir also hier und nehmen Sie einige Änderungen vor.

Unser Ordner enthält nun folgende Dateien:

1-wswvgjzkj299_nctanol8g

In diesem Skript wird nicht geprüft, ob es sich bei der Auswahl um eine MSArtboardGroup (Zeichenfläche) handelt, sondern ob es sich um eine MSSymbolInstance (Symbol) handelt. Ist dies der Fall, ermitteln wir den Namen von symbolMaster und vergleichen ihn mit dem Namen der Ebene.

Und hier ist ein neues Skript mit ein paar modifizierten Zeilen:

@import 'common.js'
var onRun = function(context) {
    //reference the sketch document
    var doc = context.document;
    //reference what is selected
    var selection = context.selection;
    //make sure something is selected
    if(selection.count() == 0){
        doc.showMessage("Please select something.");
    }else{
        //loop through the selected layers
        for(var i = 0; i < selection.count(); i++){
            //checks to see if the layer is a Symbol
            if(selection[i].class() == "MSSymbolInstance"){
                //reference the selection
                var layer = selection[i];
                //get the original layer name
                var layerName = layer.name();
                //get the name of the symbol on the layer
                var symbolName = layer.symbolMaster().name();
                //check if layer name is not already symbol name
                if(layerName != symbolName){
                    //set the layer name to the symbol name
                    layer.setName(symbolName);
                    var alertMessage = "Layer Name Changed from: "+layerName+ " to: "+symbolName;
                    alert("Layer Name Changed!", alertMessage);
                }else{
                    doc.showMessage("Layer name is already Symbol Name.");
                }
            }else{
                doc.showMessage("Please select a Symbol Layer.");
            }
        }
    }
}

Beispiel 2 zusammenfassen

In diesem Beispiel haben wir gelernt:

  • Überprüft, ob die Auswahl eine Zeichenfläche oder ein Symbol ist, die identisch ausgeführt werden.
  • So erhalten Sie den symbolMaster- und Layernamen
  • So vergleichen Sie zwei Namen und passen den Namen der Ebene an, wenn sie sich unterscheiden.


Beispiel 3: Definieren von Symbolnamen als Layernamen


Das vorherige Skript funktioniert einwandfrei, aber manchmal möchte ich nicht jede Ebene manuell auswählen. Manchmal möchte ich nach dem Verteilen einer Reihe von Zeichen in einem Dokument nur alle Namen der Ebenen mit den Namen der Zeichen in Einklang bringen, ohne die Ebene hervorzuheben. Dazu müssen Sie Folgendes ändern:

  • Holen Sie sich zuerst alle Seiten des Dokuments
  • Dann holen Sie sich alle Zeichenflächen auf jeder Seite
  • Holen Sie sich dann alle Ebenen auf jeder Zeichenfläche.
  • Überprüfen Sie dann, ob einer dieser Layer ein Symbol-Layer ist
  • Überprüfen Sie dann, ob der Name des Layers mit dem Namen des Symbols übereinstimmt
  • Wenn dies nicht der Fall ist, ersetzen Sie den Ebenennamen und benachrichtigen Sie den Benutzer

Da wir jetzt nicht berücksichtigen, was jetzt markiert ist, müssen wir das Skript so ändern, dass es die Daten der Dokumentseiten durchläuft. Dann werden wir eine Reihe von verschachtelten for-Schleifen verwenden, die über das Array von Zeichenflächen, dann über das Array von Ebenen iterieren und schließlich jede Ebene erreichen. Die for-Schleife befindet sich in der for-Schleife, die sich in der for-Schleife befindet.

Wahrscheinlich werden wir für diese Aufgabe ein weiteres neues Skript erstellen. Beginnen Sie mit einer neuen Datei mit dem Namen SetAllLayerNamesToSymbolNames.js und fügen Sie sie wie zuvor in manifest.json ein.

Nun befinden sich so viele Dateien im Ordner MyPlugin.sketchplugin:

1-rhsu-brcrkmcsyvbno0ckw

Und das Plugin in Ihrer Menüliste sollte zusammen mit den vorherigen Beispielen eine neue Option anzeigen, sobald Sie dem Manifest eine neue Datei hinzufügen:

1-zl8p9tmk09ocpqo0ujd7gw

Verwenden Sie den folgenden Code, um Seitendaten aus einem Dokument zu extrahieren:

var pages = [doc pages];

Verwenden Sie die for-Schleife, um Seiten-Zeichenflächen zu erhalten:

var pages = [doc pages];
for (var i = 0; i < pages.count(); i++){
  var page = pages[i];
  var artboards = [page artboards];
}

Verwenden Sie eine for-Schleife innerhalb einer for-Schleife, um Zeichenflächenebenen zu erhalten:

var pages = [doc pages];
for (var i = 0; i < pages.count(); i++){
  var page = pages[i];
  var artboards = [page artboards];
  for (var z = 0; z < artboards.count(); z++){
    var artboard = artboards[z];
    var layers = [artboard layers];
  }
}   

Um jede einzelne Ebene zu extrahieren, müssen Sie zunächst die Ebenen in der for-Schleife durchgehen und dann überprüfen, um welche Ebene es sich handelt:

var pages = [doc pages];
for (var i = 0; i < pages.count(); i++){
  var page = pages[i];
  var artboards = [page artboards];
  for (var z = 0; z < artboards.count(); z++){
    var artboard = artboards[z];
    var layers = [artboard layers];
    for(var k = 0; k < layers.count(); k++){
      var layer = layers[k];
      if(layer.class() == "MSSymbolInstance"){
        //do something
        }
    }
  }
}

Sobald wir festgestellt haben, dass es sich um eine Symbolebene handelt, können wir deren Namen überprüfen und mit dem Namen der Ebene vergleichen. Wenn sie unterschiedlich sind, ändern Sie den Namen des Layers in den Namen des Symbols, und fertig!

So sieht das gesamte Skript aus. Zum besseren Verständnis ist fast jede Zeile auskommentiert:

@import 'common.js'
var onRun = function(context) {
    //reference the sketch document
    var doc = context.document;
    //reference the pages array in the document
    var pages = [doc pages];
    //create a variable to hold how many symbol layers we changed
    var symbolCount = 0;
    //loop through the pages array
    for (var i = 0; i < pages.count(); i++){
        //reference each page
        var page = pages[i];
        //reference the artboards array of each page
        var artboards = [page artboards];
        //loop through the artboards of each page
        for (var z = 0; z < artboards.count(); z++){
            //reference each artboard of each page
            var artboard = artboards[z];
            //reference the layers array of each artboard
            var layers = [artboard layers];
            //loop through the layers array
            for(var k = 0; k < layers.count(); k++){
                //reference each layer of each artboard
                var layer = layers[k];
                //check to see if the layer is a Symbol
                if(layer.class() == "MSSymbolInstance"){
                    //get the original layer name
                    var layerName = layer.name();
                    //get the name of the symbol on the layer
                    var symbolName = layer.symbolMaster().name();
                    //only change the name of layers that don't match the symbol name
                    if(layerName != symbolName){
                        //set the layer name to the symbol name
                        layer.setName(symbolName);
                        symbolCount = symbolCount + 1;
                    }
                }
            }
        }
    }
    var alertMessage = symbolCount + " symbol layer name changed.";
    alert("Symbol Layer Names Reset!", alertMessage);
}

Um Beispiel 3 zusammenzufassen, hier haben wir gelernt:

  • Durchsuchen Sie alle Seiten des Dokuments, um eine Liste der Zeichenflächen zu erhalten
  • Durchsuchen Sie alle Zeichenflächen auf der Seite, um Ebenen zu erhalten
  • Sehen Sie sich alle Ebenen der Zeichenfläche an und überprüfen Sie deren Typ
  • Vergleichen Sie den Layernamen mit dem Symbolnamen
  • Und schließlich, wenn die Namen unterschiedlich sind, ändern Sie den Namen des Layers in den Namen des Symbols


Fazit


Dies sind nur drei Beispiele dafür, wie Sie mit den grundlegenden Konzepten der verfügbaren Sketch-Klassen beginnen können, die wir zuvor untersucht haben. Es bleibt noch viel zu tun, aber wir fangen gerade erst an! Darüber hinaus werden wir noch mehr Möglichkeiten in Betracht ziehen, um auf zusätzliche Klassen in Sketch zuzugreifen, noch mehr Beispiele aus der realen Welt.

Die aktuelle Version des Plugins können Sie hier herunterladen .

Teil 5 - MSLayer Klasse


Wir haben bereits reale, funktionierende Beispiele dafür gesehen, was Klassen in Sketch tun können, damit Sie sich eingehender mit ihrem Studium befassen können. In diesem Teil konzentrieren wir uns auf die MSLayer-Klasse und untersuchen dann die Klassen, die diese erben.

Die MSLayer-Klasse ist die Basisklasse aller Ebenen in Sketch, und alle anderen Ebenentypen sind Unterklassen, die sie erben. Alles, was Sie Ihrem Dokument hinzufügen, ist zunächst eine Ebene - Seite, Zeichenfläche, Gruppe, Form, Text, Bild usw. All dies sind Unterklassen der MSLayer-Klasse, und sie können alles, was die MSLayer-Klasse kann, und noch mehr.

Zum besseren Verständnis der Terminologie stehen in der Klasse zwei Datentypen zur Verfügung:

  1. Attribute - eine benannte Eigenschaft eines Objekts (z. B. Höhe, Breite oder Name)
  2. Methoden - Funktionen, die Klassen zugeordnet sind und normalerweise zum Ändern von Attributen verwendet werden (z. B. Ändern der Höhe, Breite oder des Namens)

Die Dokumentation auf der Entwicklerseite enthält bereits eine gute Basis von Klassenattributen und -methoden. Es macht also keinen Sinn, hier alles zu reproduzieren. Stattdessen zeige ich Ihnen die einfachsten Möglichkeiten, die Attribute einer Ebene anzuzeigen und ihre Methoden in der realen Welt anzuwenden.

Ebenenattribute abrufen


Im vorherigen Teil haben wir zwei Möglichkeiten zum Abrufen von Daten zu einer Ebene untersucht: Verwenden einer Schleife durch das Auswahlarray und Verschachteln der for-Schleifen in das Seitenarray des Dokuments.

Angenommen, Sie haben ein Auswahlarray verwendet, um eine Variable mit dem Namen layer zu erhalten:

var onRun = function(context) {
    var doc = context.document;
    var selection = context.selection;
    if(selection.count() == 0){
        doc.showMessage("Please select something.");
    }else{
        for(var i = 0; i < selection.count(); i++){
            var layer = selection[i];
        }
    }
};

Da wir wissen, dass alle Layer Unterklassen der Basisklasse von MSLayer sind, können wir einige Attribute von jedem Layertyp abrufen, unabhängig von seiner Spezifität, und sie dann als Variablen für den zukünftigen Zugriff speichern.

Einige Attribute sind eigentlich die Essenz anderer Klassen und haben ihre eigenen Attribute und Methoden, die auf diesen Klassen basieren. Für sie werde ich ein paar Beispiele zeigen, wie Sie in die Daten eintauchen können. Verwenden Sie den Link zur Dokumentation, um das Problem genauer zu untersuchen.

Hier sind einige Attribute, die in der MSLayer-Klasse verfügbar sind: Klasse ( Ebenentyp

):

var layerClass = layer.class();

Frame (Größe und Position, relativ zu seiner Zeichenfläche, MSRect-Entität):

var layerFrame = layer.frame();
var layerWidth = layerFrame.width();
 var layerHeight = layerFrame.height();
 var layerXpos = layerFrame.x();
 var layerYpos = layerFrame.y();

Stil (Rahmen, Füllungen, Schatten, innere Schatten, MSStyle-Entität):

var layerStyle = layer.style();
//получение массива цветов заливки
 var layerFills = layer.style().fills();
//получение каждого цвета заливки
 for(var z = 0; z < layerFills.count(); z++){
    var fillColor = layerFills[z].colorGeneric();
 }

Ebenenname:

var layerName = layer.name();

Sichtbarkeit:

var layerIsVisible = layer.isVisible();

Sperrstatus:

var layerIsLocked = layer.isLocked();

Reflexion (horizontal oder vertikal):

//горизонтальное
 var layerIsFlippedHorizontal = layer.isFlippedHorizontal();
//вертикальное
 var layerIsFlippedVertical = layer.isFlippedVertical();

Abbiegen:

var layerRotation = layer.rotation();

Übergeordnete Gruppe (Seite, Zeichenfläche oder Gruppe):

var layerParent = layer.parentGroup();

Zuordnungsstatus:

var layerIsSelected = layer.isSelected();

Absolute Rect (globale Größe und Position im gesamten Dokument, MSAbsoluteRect-Entität):

var layerAbsoluteRect = layer.absoluteRect();
var layerAbsoluteWidth = layerAbsoluteRect.width();
 var layerAbsoluteHeight = layerAbsoluteRect.height();
 var layerAbsoluteXpos = layerAbsoluteRect.x();
 var layerAbsoluteYpos = layerAbsoluteRect.y();

CSSAttributeString:

var layerCSSAttributeString = layer.CSSAttributeString();

CSSAttributes:

var layerCSSAttributes = layer.CSSAttributes();

In der Dokumentation sind noch einige weitere enthalten, aber diese sind die, die ich normalerweise verwende. Ich habe basierend auf den Anforderungen des Skripts ausgewählt. Wenn Sie jedoch wirklich alle diese Attribute auf einmal in Variablen speichern möchten, können Sie Folgendes tun:

var onRun = function(context) {
    var doc = context.document;
    var selection = context.selection;
    if(selection.count() == 0){
        doc.showMessage("Please select something.");
    }else{
        for(var i = 0; i < selection.count(); i++){
            var layer = selection[i];
            var layerClass = layer.class();
            var layerFrame = layer.frame();
            var layerStyle = layer.style();
            var layerName = layer.name();
            var layerIsVisible = layer.isVisible();
            var layerIsLocked = layer.isLocked();
            var layerIsFlippedHorizontal = layer.isFlippedHorizontal();
            var layerIsVertical = layer.isFlippedVertical();
            var layerRotation = layer.rotation();
            var layerParent = layer.parentGroup();
            var layerIsSelected = layer.isSelected();
            var layerAbsoluteRect = layer.absoluteRect();
            var layerUserInfo = layer.userInfo();
            var layerCSSAttributeString = layer.CSSAttributeString();
            var layerCSSAttributes = layer.CSSAttributes();
        }
    }
};

Dann können Sie die Konsole verwenden, um alle Variablen zu protokollieren, die Sie sehen möchten:

log(“Layer Rotation: “ + layerRotation);

Methoden anwenden


Nachdem wir nun gelernt haben, wie Sie Layer-Attribute erhalten, können Sie diese mit Methoden konfigurieren. In der MSLayer- Klasse stehen verschiedene Methoden zur Verfügung, mit denen Sie die spezifischen Attribute eines beliebigen Layers ändern können. Ihre Namen geben ihre Aktionen an:

setName

var newLayerName = "New Layer Name";
 layer.setName(newLayerName);

setIsVisible

//показать слой
 layer.setIsVisible(true);
 //спрятать слой
 layer.setIsVisible(false);
 //переключить
 layer.setIsVisible(!layer.isVisible())

setIsLocked

//заблокировать слой
 layer.setIsLocked(true);
 //разблокировать слой
 layer.setIsLocked(false);
 //переключить
 layer.setIsLocked(!layer.isLocked());

setRotation

var newLayerRotation = 180;
 layer.setRotation(newLayerRotation);

setIsFlippedHorizontal

//отразить по горизонтали
 layer.setIsFlippedHorizontal(true);
 //сбросить
 layer.setIsFlippedHorizontal(false);
 //переключить
 layer.setIsFlippedHorizontal(!layer.isFlippedHorizontal());

setIsFlippedVertical

//отразить по вертикали
 layer.setIsFlippedVertical(true);
 //сбросить
 layer.setIsFlippedVertical(false);
 //переключить
 layer.setIsFlippedVertical(!layer.isFlippedVertical());

setIsSelected

//выделить
 layer.setIsSelected(true);
 //снять выделение
 layer.setIsSelected(false);
 //переключить
 layer.setIsSelected(!layer.isSelected());

Vervielfältigung

layer.duplicate();

Jetzt können Sie verschiedene Arten von Plugins erstellen, indem Sie einfach das Attribut des Layers extrahieren und neu konfigurieren.

Wenn Sie beispielsweise alle Ebenen entsperren möchten, können Sie zunächst prüfen, ob sie gesperrt sind, und sie dann entsperren:

var onRun = function(context) {
    var doc = context.document;
    var selection = context.selection;
    if(selection.count() == 0){
        doc.showMessage("Please select something.");
    }else{
        for(var i = 0; i < selection.count(); i++){
            var layer = selection[i];
            var layerIsLocked = layer.isLocked();
            if(layerIsLocked == true){
              layer.setIsLocked(false);
            }
        }
    }
};

Oder wenn Sie dem Namen der Ebene ein Präfix hinzufügen möchten:

var onRun = function(context) {
    var doc = context.document;
    var selection = context.selection;
    if(selection.count() == 0){
        doc.showMessage("Please select something.");
    }else{
        for(var i = 0; i < selection.count(); i++){
            var layer = selection[i];
            var layerName = layer.name();
            var layerPrefix = "prefix_";
            layer.setName(layerPrefix + layerName);
        }
    }
}

Und noch viel mehr, die Möglichkeiten sind wirklich endlos!

Attributmethoden


Attribute, die Entitäten anderer Klassen sind, z. B. ein Rahmen oder ein Stil, haben ebenfalls ihre eigenen Methoden.

Um beispielsweise die Breite der Ebene auf 100 zu ändern, müssen Sie setWidth für die Frame-Variable verwenden:

var onRun = function(context) {
    var doc = context.document;
    var selection = context.selection;
    if(selection.count() == 0){
        doc.showMessage("Please select something.");
    }else{
        for(var i = 0; i < selection.count(); i++){
            var layer = selection[i];
            var layerFrame = layer.frame();
            var newLayerWidth = 100;
            layerFrame.setWidth(newLayerWidth);
        }
    }
}

Wenn Sie der Ebene eine Füllung hinzufügen möchten, können Sie addStylePartOfType (0) für die Stilvariable verwenden :

var onRun = function(context) {
    var doc = context.document;
    var selection = context.selection;
    if(selection.count() == 0){
        doc.showMessage("Please select something.");
    }else{
        for(var i = 0; i < selection.count(); i++){
            var layer = selection[i];
            var layerStyle = layer.style();
            layerStyle.addStylePartOfType(0);
        }
    }
}

Определение типа подкласса слоя Finding the Layer Subclass Type


All dies können Sie mit jedem MSLayer erledigen. Was aber, wenn Sie beispielsweise eine Textzeile aus einem Textfeld lesen möchten? Sie müssen zuerst wissen, ob es sich bei diesem Objekt um ein Textfeld handelt. Andernfalls gibt der Code eine Fehlermeldung aus, dass String nicht vorhanden ist.

In der Dokumentation werden nicht alle Unterklassen beschrieben, aber da wir die Layerklasse aus dem Klassenattribut herausfinden können, können wir dies leicht handhaben. Und um meine Aufgabe noch weiter zu vereinfachen, habe ich eigens dafür ein Plugin geschrieben!

Laden Sie hier das Plugin Show Layer Type Plugin herunter und installieren Sie es . Laden Sie dann diese Skizzendatei herunter und öffnen Sie sie zum Testen.

In der Skizzendatei sehen Sie eine Zeichenfläche mit verschiedenen Ebenenarten: 2 Linien, ein Symbol, 2 Textfelder und ein Rechteck.

1-4_g6dwvalei6aasionoktw

Wähle alle Ebenen aus und starte das Plugin. Layertyp anzeigen . In der Konsole sehen Sie folgende Ausgabe:

8/28/16 9:07:18.993 AM Show Layer Type (Sketch Plugin)[46515]: Background is a: MSShapeGroup
 8/28/16 9:07:18.997 AM Show Layer Type (Sketch Plugin)[46515]: Line is a: MSShapeGroup
 8/28/16 9:07:18.999 AM Show Layer Type (Sketch Plugin)[46515]: Author is a: MSTextLayer
 8/28/16 9:07:18.999 AM Show Layer Type (Sketch Plugin)[46515]: Icon is a: MSBitmapLayer
 8/28/16 9:07:19.000 AM Show Layer Type (Sketch Plugin)[46515]: Oval is a: MSSymbolInstance
 8/28/16 9:07:19.001 AM Show Layer Type (Sketch Plugin)[46515]: Title is a: MSTextLayer
 8/28/16 9:07:19.002 AM Show Layer Type (Sketch Plugin)[46515]: Line is a: MSShapeGroup

Wenn Sie auf die Seite Symbole gehen und ein Symbol auswählen, führen Sie das Plugin erneut aus. Es wird Folgendes angezeigt:

8/28/16 9:10:08.600 AM Show Layer Type (Sketch Plugin)[46515]: Oval is a: MSSymbolMaster

Wenn Sie eine Zeichenfläche auswählen und das Plugin ausführen, sieht die Ausgabe folgendermaßen aus:

8/28/16 9:10:48.226 AM Show Layer Type (Sketch Plugin)[46515]: Artboard 1 is a: MSArtboardGroup

Wenn Sie alle Ebenen auf einer Zeichenfläche gruppieren und das Plugin ausführen, wird Folgendes angezeigt:

8/28/16 9:11:24.234 AM Show Layer Type (Sketch Plugin)[46515]: Group is a: MSLayerGroup

Das sind alle Arten von Unterklassen von Layern! Vielleicht gibt es noch andere, aber das ist alles, was ich gefunden habe (ich habe die dokumentierten mit Links begleitet).

MSShapeGroup MSBitmapLayer MSTextLayer MSSymbolInstance MSSymbolMaster MSArtboardGroup MSLayerGroup






Jetzt können wir den Code unterscheiden, je nachdem, welche Klasse if / else-Anweisungen verwendet.

var onRun = function(context) {
    var doc = context.document;
    var selection = context.selection;
    if(selection.count() == 0){
        doc.showMessage("Please select something.");
    }else{
        for(var i = 0; i < selection.count(); i++){
            var layer = selection[i];
            var layerClass = layer.class();
            if(layerClass == "MSShapeGroup"){
              //do something
            } else if (layerClass == "MSBitmapLayer"){
              //do something
            } else if (layerClass == "MSTextLayer"){
              //do something
            } else if (layerClass == "MSSymbolInstance"){
              //do something
            } else if (layerClass == "MSSymbolMaster"){
              //do something
            } else if (layerClass == "MSArtboardGroup"){
              //do something
            } else if (layerClass == "MSLayerGroup"){
              //do something
            }
        }
    }
};

Jede dieser Unterklassen hat eine viel größere Anzahl von Attributen und Zugriffsmethoden, die wir in anderen Beiträgen behandeln werden. Lesen Sie die Dokumentation für Unterklassen von Ebenen, um sich auf den Einstieg vorzubereiten!

Schlussfolgerungen


In diesem Teil haben wir gelernt, wie man:

  • Ebenenattribute anzeigen
  • Ändern Sie Layer-Attribute mithilfe von Methoden
  • Greifen Sie auf Attribute und Methoden zu
  • Überprüfen Sie den Typ der Layerklasse und unterscheiden Sie diese im Code


Teil 6 - Datenexport


Sketch bietet bequemen Zugriff auf den SVG- und CSS-Ausgabecode, indem Sie mit der rechten Maustaste auf die Ebene klicken. Dies ist eine sehr nützliche Option für Webdesigner, aber für diejenigen, die an der Entwicklung von Anwendungen oder Spielen beteiligt sind, gibt es wenig Verwendung. Sie müssen auch Werte von einer Anwendung in eine andere kopieren und einfügen, was ein riesiges Feld für Fehler darstellt.

Es gibt viele Bridge-Tools von Drittanbietern zwischen Design und Entwicklung (Zeplin, Avocode, Sketch Measure, Sympli usw.), diese Tools bieten jedoch nur eine Referenz für Entwickler. Es wäre viel nützlicher, wenn die Design- und Entwicklungsanwendungen direkt zusammenarbeiten würden. Stellen Sie sich vor: Sie entwerfen etwas in Sketch, klicken auf „Exportieren“, lesen Ihr Entwicklungsprojekt und erstellen das Layout neu. Auf diese Weise müssen keine Pixelspezifikationen vorgenommen werden, und der Konstrukteur kann sogar Zeit sparen, wenn er das Design im Code neu erstellt.

Die Werkzeuge, die den Designern jetzt zur Verfügung stehen, wurden als Lösungen für allgemeine Anforderungen entwickelt und sind nicht auf bestimmte Aufgaben zugeschnitten. Aber das ist das Schöne an der Entwicklung von Plugins: Sie können Tools speziell für Ihre Bedürfnisse erstellen, Sie müssen nur wissen, wie es geht.

Wir sind bereits durch die Basis gegangen und haben die Grundlage für eine erfolgreiche Programmierung gelegt. Jetzt können wir tiefer in das Herz der Plug-In-Entwicklung eintauchen und eine echte Lösung für eine echte Aufgabe finden.

Sketch Plugins sind Werkzeuge, die Design und Entwicklung verbinden


Um Design und Entwicklung zu kombinieren, müssen Sie eine gemeinsame Grundlage zwischen diesen beiden Bereichen finden. Was können wir auf eine Weise verwenden, die für beide verständlich ist, da es keine systemeigenen Verbindungsmöglichkeiten gibt? Die Antwort lautet XML oder JSON. Mit Hilfe von Plug-ins kann Sketch Daten in beiden Formaten exportieren und höchstwahrscheinlich in der Entwicklungsumgebung, in der Sie arbeiten, lesen. Warum also die Entwickler-Pixelspezifikationen senden, von denen Sie die Werte manuell kopieren müssen, wenn Sie sie in einer XML- und JSON-Datei senden und automatisch importieren können?

Dies ist wirklich eine der besten Lösungen für Sketch. In diesem Teil zeige ich ein grundlegendes Beispiel für den Export von Ebenenattributen in XML oder JSON. Lassen Sie uns ähnlich wie in den vorherigen Abschnitten den Plan skizzieren. Unser Plugin funktioniert in dieser Reihenfolge:

  1. Ebene auswählen
  2. Wir erstellen ein modales Fenster, in dem der Benutzer einen Ordner auswählen und diesen Speicherort in einer Variablen speichern kann.
  3. Aus dem ausgewählten Feld werden Variablen zum Speichern grundlegender Informationen (Name, X-Koordinate, Y-Koordinate, Höhe und Breite) erstellt.
  4. Wir speichern alle diese Variablen entweder in XML oder in einem JSON-Objekt.
  5. Speichern Sie dieses Objekt schließlich in einer XML- oder JSON-Datei in einem zuvor ausgewählten Ordner.

XML-Export


Zunächst erstellen wir unser Plugin. Erstellen Sie ein Plugin namens Export Layer to XML mit einem Hauptskript namens ExportLayerToXML.js. Wir müssen auch unsere Datei common.js hinzufügen, um das benutzerdefinierte Benachrichtigungsfenster zu verwenden, das in den vorherigen Abschnitten erstellt wurde.

Wir wissen bereits, wie Sie feststellen können, ob eine Ebene ausgewählt ist:

@import 'common.js'
var onRun = function(context) {
  var doc = context.document;
    var selection = context.selection;
    //make sure something is selected
    if(selection.count() == 0){
        doc.showMessage("Please select a layer.");
    }else{
      //do something
    }
};

In der else-Anweisung erstellen wir einen Bereich, in dem der Benutzer den Ordner auswählt, in dem die Datei gespeichert werden soll:

//allow xml to be written to the folder
var fileTypes = [NSArray arrayWithObjects:@"xml", nil];
//create select folder window
var panel = [NSOpenPanel openPanel];
[panel setCanChooseDirectories:true];
[panel setCanCreateDirectories:true];
[panel setAllowedFileTypes:fileTypes];

Erstellen Sie dann eine Variable, die überprüft, ob die Schaltfläche gedrückt wurde, verbinden Sie sie mit der Schaltfläche OK, formatieren Sie die ausgewählte Kategorie und speichern Sie sie für die zukünftige Verwendung in der Variablen:

//create variable to check if clicked
var clicked = [panel runModal];
//check if clicked
if (clicked == NSFileHandlingPanelOKButton) {
  var isDirectory = true;
  //get the folder path
  var firstURL = [[panel URLs] objectAtIndex:0];
  //format it to a string
  var file_path = [NSString stringWithFormat:@"%@", firstURL];
  //remove the file:// path from string
  if (0 === file_path.indexOf("file://")) {
    file_path = file_path.substring(7);
  }
}

Wenn alles erledigt ist, durchlaufen wir die ausgewählten Ebenen und rufen die Funktion auf, die die Daten in die XML-Datei schreibt. Der resultierende Code sieht folgendermaßen aus:

@import 'common.js'
var onRun = function(context) {
    var doc = context.document;
    var selection = context.selection;
    //make sure something is selected
    if(selection.count() == 0){
        doc.showMessage("Please select a layer.");
    }else{
        //allow xml to be written to the folder
        var fileTypes = [NSArray arrayWithObjects:@"xml", nil];
        //create select folder window
        var panel = [NSOpenPanel openPanel];
        [panel setCanChooseDirectories:true];
        [panel setCanCreateDirectories:true];
        [panel setAllowedFileTypes:fileTypes];
        //create variable to check if clicked
        var clicked = [panel runModal];
        //check if clicked
        if (clicked == NSFileHandlingPanelOKButton) {
            var isDirectory = true;
            //get the folder path
            var firstURL = [[panel URLs] objectAtIndex:0];
            //format it to a string
            var file_path = [NSString stringWithFormat:@"%@", firstURL];
            //remove the file:// path from string
            if (0 === file_path.indexOf("file://")) {
                file_path = file_path.substring(7);
            }
        }
        //loop through the selected layers and export the XML
        for(var i = 0; i < selection.count(); i++){
            var layer = selection[i];
            exportXML(layer, file_path);
        }
    }
};

Für die exportXML-Funktion übergeben wir nun zwei Werte: den ausgewählten Layer und den Dateipfad.

Zuerst konfigurieren wir das XML:

//initialize the root xml element
var root = [NSXMLElement elementWithName:@"document"];
//initialize the xml object with the root element
var xmlObj = [[NSXMLDocument document] initWithRootElement:root];

Dann extrahieren wir die notwendigen Variablen aus der übertragenen Ebene:

//create the variables
var layerName = layer.name();
var layerFrame = layer.absoluteRect();
var layerXpos = String(layerFrame.x());
var layerYpos = String(layerFrame.y());
var layerHeight = String(layerFrame.height());
var layerWidth = String(layerFrame.width());

Speichern Sie diese Variablen in einem XML-Objekt:

//create the first child element and add it to the root
var layerElement = [NSXMLElement elementWithName:@"layer"];
[root addChild:layerElement];
//add elements based on variables to the first child
var layerNameElement = [NSXMLElement elementWithName:@"name" stringValue:layerName];
[layerElement addChild:layerNameElement];
var layerXPosElement = [NSXMLElement elementWithName:@"xPos" stringValue:layerXpos];
[layerElement addChild:layerXPosElement];
var layerYPosElement = [NSXMLElement elementWithName:@"yPox" stringValue:layerYpos];
[layerElement addChild:layerYPosElement];
var layerHeightElement = [NSXMLElement elementWithName:@"height" stringValue:layerHeight];
[layerElement addChild:layerHeightElement];
var layerWidthElement = [NSXMLElement elementWithName:@"width" stringValue:layerWidth];
[layerElement addChild:layerWidthElement];

Und schließlich schreiben Sie die XML-Datei entlang des Dateipfads und benachrichtigen den Benutzer, wenn alles erledigt ist:

//create the xml file
var xmlData = [xmlObj XMLDataWithOptions:NSXMLNodePrettyPrint];
//name the xml file the name of the layer and save it to the folder
[xmlData writeToFile:file_path+layerName+".xml"];
var alertMessage = layerName+".xml saved to: " + file_path;
alert("Layer XML Exported!", alertMessage);

Das ganze Skript sieht so aus:

@import 'common.js'
var onRun = function(context) {
    var doc = context.document;
    var selection = context.selection;
    //make sure something is selected
    if(selection.count() == 0){
        doc.showMessage("Please select a layer.");
    }else{
        //allow xml to be written to the folder
        var fileTypes = [NSArray arrayWithObjects:@"xml", nil];
        //create select folder window
        var panel = [NSOpenPanel openPanel];
        [panel setCanChooseDirectories:true];
        [panel setCanCreateDirectories:true];
        [panel setAllowedFileTypes:fileTypes];
        //create variable to check if clicked
        var clicked = [panel runModal];
        //check if clicked
        if (clicked == NSFileHandlingPanelOKButton) {
            var isDirectory = true;
            //get the folder path
            var firstURL = [[panel URLs] objectAtIndex:0];
            //format it to a string
            var file_path = [NSString stringWithFormat:@"%@", firstURL];
            //remove the file:// path from string
            if (0 === file_path.indexOf("file://")) {
                file_path = file_path.substring(7);
            }
        }
        //loop through the selected layers and export the XML
        for(var i = 0; i < selection.count(); i++){
            var layer = selection[i];
            exportXML(layer, file_path);
        }
    }
};
function exportXML(layer, file_path){
  //initialize the root xml element
  var root = [NSXMLElement elementWithName:@"document"];
  //initialize the xml object with the root element
  var xmlObj = [[NSXMLDocument document] initWithRootElement:root];
  //create the variables
  var layerName = layer.name();
  var layerFrame = layer.absoluteRect();
  var layerXpos = String(layerFrame.x());
  var layerYpos = String(layerFrame.y());
  var layerHeight = String(layerFrame.height());
  var layerWidth = String(layerFrame.width());
  //create the first child element and add it to the root
  var layerElement = [NSXMLElement elementWithName:@"layer"];
  [root addChild:layerElement];
  //add elements based on variables to the first child
  var layerNameElement = [NSXMLElement elementWithName:@"name" stringValue:layerName];
  [layerElement addChild:layerNameElement];
  var layerXPosElement = [NSXMLElement elementWithName:@"xPos" stringValue:layerXpos];
  [layerElement addChild:layerXPosElement];
  var layerYPosElement = [NSXMLElement elementWithName:@"yPos" stringValue:layerYpos];
  [layerElement addChild:layerYPosElement];
  var layerHeightElement = [NSXMLElement elementWithName:@"height" stringValue:layerHeight];
  [layerElement addChild:layerHeightElement];
  var layerWidthElement = [NSXMLElement elementWithName:@"width" stringValue:layerWidth];
  [layerElement addChild:layerWidthElement];
  //create the xml file
  var xmlData = [xmlObj XMLDataWithOptions:NSXMLNodePrettyPrint];
  //name the xml file the name of the layer and save it to the folder
  [xmlData writeToFile:file_path+layerName+".xml"];
  var alertMessage = layerName+".xml saved to: " + file_path;
  alert("Layer XML Exported!", alertMessage);
}

Laden Sie das Plugin herunter oder schauen Sie es sich auf GitHub an , testen Sie es. Wenn Sie ein Rechteck auf einer Zeichenfläche erstellen und in XML exportieren, sieht es ungefähr so ​​aus:

Rectangle550258234235

JSON-Export


Das Speichern einer JSON-Datei ist bis auf einige Punkte fast genauso gut implementiert. Wir können den ersten Teil des Skripts verwenden und eine exportJSON-Funktion erstellen, die so aussieht:

function exportJSON(layer, file_path){
  //initialize the layer array
  var layerArray = [];
  //create the variables
  var layerName = String(layer.name());
  var layerFrame = layer.absoluteRect();
  var layerXpos = String(layerFrame.x());
  var layerYpos = String(layerFrame.y());
  var layerHeight = String(layerFrame.height());
  var layerWidth = String(layerFrame.width());
  // add the strings to the array
  layerArray.push({
      name: layerName,
      xPos: layerXpos,
      yPos: layerYpos,
      height: layerHeight,
      width: layerWidth,
  });
  // Create the JSON object from the layer array
  var jsonObj = { "layer": layerArray };
  // Convert the object to a json string
  var file = NSString.stringWithString(JSON.stringify(jsonObj, null, "\t"));
  // Save the file
  [file writeToFile:file_path+layerName+".json" atomically:true encoding:NSUTF8StringEncoding error:null];
  var alertMessage = layerName+".json saved to: " + file_path;
  alert("Layer JSON Exported!", alertMessage);
}

Das ganze Skript sieht so aus:

@import 'common.js'
var onRun = function(context) {
    var doc = context.document;
    var selection = context.selection;
    //make sure something is selected
    if(selection.count() == 0){
        doc.showMessage("Please select a layer.");
    }else{
        //allow xml to be written to the folder
        var fileTypes = [NSArray arrayWithObjects:@"json", nil];
        //create select folder window
        var panel = [NSOpenPanel openPanel];
        [panel setCanChooseDirectories:true];
        [panel setCanCreateDirectories:true];
        [panel setAllowedFileTypes:fileTypes];
        var clicked = [panel runModal];
        //check if Ok has been clicked
        if (clicked == NSFileHandlingPanelOKButton) {
            var isDirectory = true;
            //get the folder path
            var firstURL = [[panel URLs] objectAtIndex:0];
            //format it to a string
            var file_path = [NSString stringWithFormat:@"%@", firstURL];
            //remove the file:// path from string
            if (0 === file_path.indexOf("file://")) {
                file_path = file_path.substring(7);
            }
        }
        //loop through the selected layers and export the XML
        for(var i = 0; i < selection.count(); i++){
            var layer = selection[i];
            exportJSON(layer, file_path);
        }
    }
};
function exportJSON(layer, file_path){
  //initialize the layer array
  var layerArray = [];
  //create the variables
  var layerName = String(layer.name());
  var layerFrame = layer.absoluteRect();
  var layerXpos = String(layerFrame.x());
  var layerYpos = String(layerFrame.y());
  var layerHeight = String(layerFrame.height());
  var layerWidth = String(layerFrame.width());
  // add the strings to the array
  layerArray.push({
      name: layerName,
      xPos: layerXpos,
      yPos: layerYpos,
      height: layerHeight,
      width: layerWidth,
  });
    // Create the JSON object from the layer array
  var jsonObj = { "layer": layerArray };
  // Convert the object to a json string
  var file = NSString.stringWithString(JSON.stringify(jsonObj, null, "\t"));
  // Save the file
  [file writeToFile:file_path+layerName+".json" atomically:true encoding:NSUTF8StringEncoding error:null];
  var alertMessage = layerName+".json saved to: " + file_path;
  alert("Layer JSON Exported!", alertMessage);
}

Sie können das Plugin hier herunterladen oder auf GitHub ansehen . Wenn Sie das Skript testen, rufen Sie eine JSON-Datei mit folgendem Inhalt ab:

{“layer”:[{“name”:”Rectangle”,”xPos”:”550",”yPos”:”258",”height”:”234",”width”:”235"}]}

Fazit


Durch diesen Teil haben wir gelernt:

  • Erstellen Sie ein modales Fenster zum Speichern einer Datei
  • Erstellen Sie XML- und JSON-Objekte zum Speichern von Variablen
  • Speichern Sie XML- und JSON-Dateien in einem bestimmten Ordner.

Dies ist nur ein Hinweis zum Exportieren von Daten aus Sketch. Ich habe gerade ein paar Attribute hinzugefügt, aber es gibt eine riesige Menge an Daten, aus denen Sie diejenigen auswählen können, die Sie für Ihre Zwecke benötigen.

Vielen Dank für das Lesen unserer Lektion, teilen Sie Ihre Erfolge in den Kommentaren. Viel Glück beim Erstellen eigener Plugins!

Viel Glück beim Erstellen eigener Plugins, teile die Erfolge unter diesem Beitrag.

Über alle gefundenen Fehler, Übersetzungsungenauigkeiten und ähnliche Dinge informieren Sie bitte in PM.

Jetzt auch beliebt: