├── README.md
└── Copy and Paste for Framer.sketchplugin


/README.md:
--------------------------------------------------------------------------------
 1 | Copy-and-Paste-for-Framer
 2 | =========================
 3 | 
 4 | Copy & paste boilerplate code from a Sketch layer to FramerJS
 5 | 
 6 | **Shortcut:** `shift` + `cmd` + `c`
 7 | 
 8 | ![Screenshot](https://dl.dropboxusercontent.com/u/974773/_keepalive/Style%20Inventory/Framer.png)
 9 | 
10 | Feel free to modify the plugin as you like. You might want to only copy the name or add even more boiler plate code ;)
11 | 


--------------------------------------------------------------------------------
/Copy and Paste for Framer.sketchplugin:
--------------------------------------------------------------------------------
  1 | // (shift cmd c)
  2 | 
  3 | // This plugin copies FramerJS boiler plate code for the currently selected layer.
  4 | // Example:
  5 | 
  6 | /*
  7 | 
  8 | 	# Import Table Cell from Sketch
  9 | 	tableCell = layers.Table_Cell
 10 | 
 11 | 	# Add states for Table Cell
 12 | 	tableCell.states.add
 13 | 		hidden: {opacity: 0}
 14 | 
 15 | 	# Animation options for Table Cell
 16 | 	tableCell.states.animationOptions =
 17 | 		curve: "ease-in"
 18 | 		time: 0.25
 19 | 
 20 | 	# Interaction for Table Cell
 21 | 	tableCell.on Events.Click, ->
 22 | 		tableCell.states.next()
 23 | 
 24 |  */
 25 | 
 26 | if (selection.count() == 1) {
 27 | 
 28 | 	// ask user for the Framer object that stores all Sketch layers
 29 | 	var framer;
 30 | 
 31 | 	// remember the Framer/Sketch object for the current Sketch runtime session
 32 | 	var persistent = [[NSThread mainThread] threadDictionary];
 33 | 
 34 | 	if (persistent["com.getflourish.framer"] == null) {
 35 |     	var value = String([doc askForUserInput:"Name of Framer Import:" initialValue:"layers"]);
 36 |     	persistent["com.getflourish.framer"] = value;
 37 | 	}
 38 | 
 39 | 	framer = persistent["com.getflourish.framer"];
 40 | 
 41 | 	// get selected layer
 42 | 	var layer = selection[0];
 43 | 
 44 | 	// layer name
 45 | 	var name = layer.name();
 46 | 
 47 | 	// replace spaces by underscores
 48 | 	var cleanName = name.replace(" ", "_");
 49 | 
 50 | 	// camel case for use in Framer
 51 | 	var layerName = toCamelCase(cleanName);
 52 | 
 53 | 	// make the final definition
 54 | 	var definition = "# Import " + name + " from Sketch";
 55 | 	definition += "\n";
 56 | 	definition += layerName + " = " + framer + "." + cleanName;
 57 | 	definition += "\n";
 58 | 	definition += "\n";
 59 | 
 60 | 	// Handle artboards, groups and layers independently
 61 | 
 62 | 	if (layer.className() == "MSArtboardGroup") {
 63 | 		definition += "# Make artboard visible";
 64 | 		definition += "\n";
 65 | 		definition += layerName + ".visible = true";
 66 | 
 67 | 		// copy definition to the clipboard
 68 | 		setClipboard(definition);
 69 | 
 70 | 		// show message
 71 | 		doc.showMessage("Copied " + name + " for FramerJS.");
 72 | 
 73 | 	} else if (layer.className() == "MSLayerGroup") {
 74 | 
 75 | 		// States
 76 | 		definition += "# Add states for " + name;
 77 | 		definition += "\n";
 78 | 		definition += layerName + ".states.add";
 79 | 		definition += "\n\t";
 80 | 		definition += "hidden: {opacity: 0}";
 81 | 		definition += "\n";
 82 | 		definition += "\n";
 83 | 
 84 | 		// Animation Options
 85 | 		definition += "# Animation options for " + name;
 86 | 		definition += "\n";
 87 | 		definition += layerName + ".states.animationOptions =";
 88 | 		definition += "\n\t";
 89 | 		definition += 'curve: "ease-in"';
 90 | 		definition += "\n\t";
 91 | 		definition += 'time: 0.25';
 92 | 
 93 | 		// Interaction
 94 | 		definition += "\n";
 95 | 		definition += "\n";
 96 | 		definition += "# Interaction for " + name;
 97 | 		definition += "\n";
 98 | 		definition += layerName + ".on Events.Click, ->"
 99 | 		definition += "\n\t";
100 | 		definition += layerName + ".states.next()";
101 | 
102 | 		// copy definition to the clipboard
103 | 		setClipboard(definition);
104 | 
105 | 		// show message
106 | 		doc.showMessage("Copied " + name + " for FramerJS.");
107 | 	} else {
108 | 		doc.showMessage("Framer can only import Groups");
109 | 	}
110 | }
111 | 
112 | // will convert any string to camel case
113 | function toCamelCase(str) {
114 |     return str
115 |         .replace(/\s(.)/g, function($1) { return $1.toUpperCase(); })
116 |         .replace(/\s/g, '')
117 |         .replace(/^(.)/, function($1) { return $1.toLowerCase(); })
118 |         .replace("_", "")
119 |         .replace("/", "");
120 | }
121 | 
122 | // set the clipboard to the given text
123 | function setClipboard(text) {
124 | 	pasteBoard = null;
125 | 	if(typeof text === 'undefined') return null;
126 | 
127 | 	if(!this.pasteBoard) this.pasteBoard = NSPasteboard.generalPasteboard();
128 | 
129 | 	this.pasteBoard.declareTypes_owner([NSPasteboardTypeString], null);
130 | 	this.pasteBoard.setString_forType(text, NSPasteboardTypeString);
131 | 
132 | 	return true;
133 | }


--------------------------------------------------------------------------------