Rename Plugin für Sketch App

Image

Gestaltet ihr in Sketch und erstellt eure Prototypen in Principle?

 

Wenn ihr eure Layer in der anfänglichen Euphorie beschriftet, dann aber doch nur in einem Chaos an Duplikaten endet, dann geht es euch wie mir. Unzählige Screen Duplikate mit Unmengen an Gruppen gleicher Namen. Das Importieren der gestalteten Varianten in Principle läuft super, doch beim Erstellen der ersten Animationen zwischen Zuständen wird schnell zur Katastrophe. Elemente springen hin und her und die Animation ist für den „Ar…h“. Bestimmt habt ihr von dem Plugin „RenameIt“ gehört. Ein echt super Plugin, welches die Arbeit erleichtert und etwas Ordnung zurück in dein Sketch Projekt bringt. Individuelle Möglichkeiten zur Betitelung deiner Ebenen. Das einzige Manko, zumindest für mich, man muss alles auf dem Artboard markieren und Gruppierungen entfernen bis nur noch einzelne Layer vorhanden sind. Häufig verwende ich SVG´s in meinen Designs. Bei denen ist es sehr wichtig ist,das Masken und Gruppen beibehalten werden. Andernfalls sind die SVG Elemente als solche unbrauchbar. Auch sonstige Maskierungen innerhalb des Artboardes werden deaktiviert. Für mich gab es eine Zeit lang nur eine Möglichkeit, jede Ebene nachträglich einzeln neu beschriften.

Damit ist jetzt Schluss.

 

Hätte ich es bei dem heutigen Projekt genauso gemacht, dann wäre ich wohl die nächsten Tage noch damit beschäftig, Ebenen manuell für den Export zu optimieren. Nach einigen Minuten der Suche nach Alternativen Möglichkeiten, hab ich kurzerhand ein eigenes kleines Plugin geschrieben. Das Prinzip ist einfach. Man gestaltet seine Screendesigns, ändert den Namen des jeweiligen Artboards und nutzt das Plugin zum anpassen aller darin befindlichen Ebenen.

In wenigen Schritten kannst auch du das Plugin nutzen.

 

Schritt 1: Lade dir das Plugin herunter

Schritt 2: Entpacke die heruntergeladene Datei

Schritt 3: Doppelklick auch die darin *.sketchplugin Datei

... und schon kannst du das Plugin nutzen.

Alternativ findest du hier den Quellcode. Diesen kannst du ganz einfach in das Scriptfenster unter /Plugins/Run Script in deine Sketch Anwendung einfügen und ausführen.

const sketch = require('sketch')
const document = sketch.getSelectedDocument()
const selectedLayers = document.selectedLayers
const selectedCount = selectedLayers.length

let counter = 0

const renameInnerGroups = (artboard, layer) => {
  const artboardName = artboard.name
  const layerName = `${artboardName}-layer-${counter}`;
  layer.name = layerName;
  counter += 1
  const innerLayers = layer.layers
  if(innerLayers){
    innerLayers.forEach((l, i) => renameInnerGroups(artboard, l))
  }
  
}

selectedLayers.forEach(artboard => {
  artboard.layers.forEach((layer, index) => renameInnerGroups(artboard, layer, index))
})

Image

Lade dir das Plugin herunter