Skip to content

Commit a096e78

Browse files
authored
Merge pull request #26 from nolastan/export
Add export functionality + Update for Sketch 41
2 parents f4739e6 + 3e800b5 commit a096e78

File tree

7 files changed

+132
-23
lines changed

7 files changed

+132
-23
lines changed

Contents/Sketch/colors.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ var applyColors = function (newColors, assetColors) {
33
var appController = app.delegate();
44
var colors = [];
55
for(var i=0; i<newColors.length; i++) {
6-
var color = MSColor.colorWithSVGString("#" + newColors[i].Rgb);
7-
color.alpha = newColors[i].Opacity;
6+
var color = MSImmutableColor.colorWithSVGString("#" + newColors[i].Rgb);
7+
if(newColors[i].Opacity) {
8+
color.alpha = newColors[i].Opacity;
9+
}
810
colors.push(color);
911
}
1012
[assetColors addColors:colors];
1113

1214
// The following line is throwing the error: is not a function
1315
// appController.globalAssets().objectDidChange();
14-
16+
1517
}

Contents/Sketch/export.cocoascript

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
var onRun = function(context) {
2+
var output = 'Style, Typeface, Color, Opacity, Size, Alignment, Line, Character'
3+
4+
var alignmentEnum = Object.freeze([
5+
'left','right','center','justified'
6+
]);
7+
8+
var doc = context.document;
9+
var sharedStyles = doc.documentData().layerTextStyles();
10+
var styleObjects = sharedStyles.objects();
11+
var textLayer = [[MSTextLayer alloc] initWithFrame:nil];
12+
13+
14+
for (var i=0; i<styleObjects.length; i++) {
15+
var color, opacity, alignment = "";
16+
17+
textLayer.setStyle(styleObjects[i].style());
18+
19+
var name = styleObjects[i].name();
20+
21+
var attributes = styleObjects[i].style().textStyle().attributes()
22+
23+
var paragraphStyle = attributes.NSParagraphStyle;
24+
25+
if(paragraphStyle) {
26+
alignment = alignmentEnum[paragraphStyle.alignment()] || "";
27+
}
28+
29+
var line = textLayer.lineHeight() || '';
30+
var character = textLayer.characterSpacing() || '';
31+
32+
var font = attributes.NSFont.fontName();
33+
34+
if(attributes.NSColor) {
35+
color = attributes.NSColor.hexValue();
36+
opacity = attributes.NSColor.alphaComponent();
37+
}
38+
var size = attributes.NSFont.pointSize();
39+
output += '\n' + name +', '+ font +', '+ color +', '+ opacity +', '+ size +', '+ alignment +', '+ line +', '+ character;
40+
}
41+
42+
var writeTextToFile = function(text, filePath) {
43+
var t = [NSString stringWithFormat:@"%@", text],
44+
f = [NSString stringWithFormat:@"%@", filePath];
45+
return [t writeToFile:f atomically:true encoding:NSUTF8StringEncoding error:nil];
46+
}
47+
48+
var openInFinder = function(path) {
49+
var finderTask = [[NSTask alloc] init],
50+
openFinderArgs = [NSArray arrayWithObjects:"-R", path, nil];
51+
52+
[finderTask setLaunchPath:"/usr/bin/open"];
53+
[finderTask setArguments:openFinderArgs];
54+
[finderTask launch];
55+
}
56+
57+
var createTempFolderNamed = function(name) {
58+
var tempPath = getTempFolderPath(name);
59+
createFolderAtPath(tempPath);
60+
return tempPath;
61+
}
62+
var getTempFolderPath = function(withName) {
63+
var fileManager = [NSFileManager defaultManager],
64+
cachesURL = [[fileManager URLsForDirectory:NSCachesDirectory inDomains:NSUserDomainMask] lastObject],
65+
withName = (typeof withName !== 'undefined') ? withName : (Date.now() / 1000),
66+
folderName = [NSString stringWithFormat:"%@", withName];
67+
return [[cachesURL URLByAppendingPathComponent:folderName] path];
68+
}
69+
70+
var createFolderAtPath = function(pathString) {
71+
var fileManager = [NSFileManager defaultManager];
72+
if([fileManager fileExistsAtPath:pathString]) return true;
73+
return [fileManager createDirectoryAtPath:pathString withIntermediateDirectories:true attributes:nil error:nil];
74+
}
75+
76+
var folder = createTempFolderNamed('sync');
77+
var file = folder + '/typography.csv';
78+
79+
var shortcutPath = folder + '/README.url';
80+
var shortcutFile = '[InternetShortcut]\nURL=https://github.com/nolastan/sync.sketchplugin#exporting-styles'
81+
writeTextToFile(output, file);
82+
writeTextToFile(shortcutFile, shortcutPath);
83+
openInFinder(file);
84+
}

Contents/Sketch/manifest.json

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,27 @@
44
{
55
"script" : "script.cocoascript",
66
"handler" : "onRun",
7-
"shortcut" : "option s",
8-
"name" : "Sync",
9-
"identifier" : "sync"
7+
"shortcut" : "command option s",
8+
"name" : "⬇️ Import from URL",
9+
"identifier" : "import"
10+
},
11+
{
12+
"script" : "export.cocoascript",
13+
"handler" : "onRun",
14+
"name" : "⬆️ Export typography as CSV",
15+
"identifier" : "export"
1016
},
1117
],
1218
"menu": {
13-
"isRoot": true,
19+
"isRoot": false,
1420
"items": [
15-
"sync",
21+
"export",
22+
"import"
1623
],
1724
},
1825
"identifier" : "com.github.nolastan.sync",
1926
"version" : "1.1",
2027
"description" : "Sync styles and symbols",
2128
"authorEmail" : "nolastan@gmail.com",
22-
"name" : "Sync"
29+
"name" : "🎨 Sync"
2330
}

Contents/Sketch/script.cocoascript

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ var onRun = function(context) {
7070

7171
function showOptions() {
7272
var alert = [NSAlert alertWithMessageText: "Sync text styles"
73-
defaultButton:"Sync"
73+
defaultButton:"Import"
7474
alternateButton:"Cancel"
7575
otherButton:nil
7676
informativeTextWithFormat:"Enter the URL where your styles live."];

Contents/Sketch/styles.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,26 +20,26 @@ var applyStyles = function (newStyles, sharedStyles) {
2020

2121
if(style.Background) {
2222
var fill = sharedStyle.addStylePartOfType(alignmentHash['fill']);
23-
fill.color = MSColor.colorWithSVGString("#" + style.Background);
23+
fill.color = MSImmutableColor.colorWithSVGString("#" + style.Background);
2424
}
2525

2626
if(style.Borderthickness > 0 && style.Bordercolor) {
2727
var borders = sharedStyle.addStylePartOfType(alignmentHash['border']);
2828
borders.thickness = style.Borderthickness;
29-
borders.color = MSColor.colorWithSVGString("#" + style.Bordercolor);
29+
borders.color = MSImmutableColor.colorWithSVGString("#" + style.Bordercolor);
3030
}
3131

3232
if(style.Shadow) {
3333
var shadow = sharedStyle.addStylePartOfType(alignmentHash['shadow']);
34-
var shadowColor = MSColor.colorWithSVGString("#" + style.Shadowcolor);
35-
shadow.color = shadowColor.colorWithAlpha(style.Shadowopacity);
34+
var shadowColor = MSImmutableColor.colorWithSVGString("#" + style.Shadowcolor);
35+
shadow.color = shadowColor.colorWithAlphaComponent(style.Shadowopacity);
3636
setShadowAttribute(shadow, style.Shadow);
3737
}
3838

3939
if(style.Innershadow) {
4040
var innerShadow = sharedStyle.addStylePartOfType(alignmentHash['innerShadow']);
41-
var innerShadowColor = MSColor.colorWithSVGString("#" + style.Innershadowcolor);
42-
innerShadow.color = innerShadowColor.colorWithAlpha(style.Innershadowopacity);
41+
var innerShadowColor = MSImmutableColor.colorWithSVGString("#" + style.Innershadowcolor);
42+
innerShadow.color = innerShadowColor.colorWithAlphaComponent(style.Innershadowopacity);
4343
setShadowAttribute(innerShadow, style.Innershadow);
4444
}
4545

Contents/Sketch/typography.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,19 @@ var applyTypography = function (newStyles, sharedStyles) {
2727
if(style.Style == "") { return; }
2828

2929
var textLayer = [[MSTextLayer alloc] initWithFrame:nil];
30+
var paragraphStyle = textLayer.style().textStyle().attributes().NSParagraphStyle;
3031

3132
if("Size" in style) { textLayer.setFontSize(style.Size); }
3233
if("Line" in style) { textLayer.setLineHeight(style.Line); }
34+
if("Paragraph" in style) { paragraphStyle.setParagraphSpacing(style.Paragraph); }
3335
if("Character" in style) {
3436
var characterSpacing = Number(style.Character);
3537
textLayer.setCharacterSpacing(characterSpacing);
3638
}
3739
if("Alignment" in style) { textLayer.setTextAlignment(alignmentEnum[style.Alignment]); }
3840
if("Typeface" in style) { textLayer.setFontPostscriptName(style.Typeface); }
3941
if("Color" in style) {
40-
var color = MSColor.colorWithSVGString("#" + style.Color);
42+
var color = MSImmutableColor.colorWithSVGString("#" + style.Color);
4143
color.alpha = style.Opacity;
4244
textLayer.setTextColor(color);
4345
}

README.md

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,42 @@
11
# Sync Sketch Plugin
22
![](https://i.imgur.com/dUeIJjI.gif)
33

4-
Save your text styles, layer styles, and color palette in a Google Sheet to keep your design team in sync. Every time you run this plugin your styles and colors will be replaced with those you specify in a spreadsheet. This should make it easier to share typography styles across teams!
4+
Share styles with your team using Google Sheets.
5+
* Import and update styles from a shared Google Sheet.
6+
* Export styles as CSV files, which can be uploaded to Google Sheets and shared with your team.
7+
* Use formulas in Google Sheets to set relative font sizes and line heights.
58

69
# Installation
710
Install from [Sketch Toolbox](http://sketchtoolbox.com/) (recommended) or [download the zip](https://github.com/nolastan/sync.sketchplugin/releases/download/1.1/sync.sketchplugin.zip), unzip, and open `sync.sketchplugin`.
811

9-
# Getting Started
12+
# Setting up Google Sheets
13+
You'll need a published sheet to use Sync.
1014

1115
1. Create a Google Sheet from [this template](https://drive.google.com/previewtemplate?id=17q6GOMM1X6kkvgeL3LeGkRr4C2vOhpM_JiQUWxbBtew&mode=public) (click the "Use this template" button).
1216

1317
2. Select *File > Publish to web…* and then click the *Publish* button.
1418

15-
3. Copy the link to your sheet. (See below if you are using Google Apps at work)
19+
# Exporting styles
20+
Export styles from Sketch to your sheet. Alternatively, you can skip this step and define your initial styles in the Google Sheets interface.
1621

17-
4. Run the Sync command from the plugin menu and paste your URL into the prompt.
22+
1. With the Sketch document containing your styles open, run the *Export* command from the Sync plugin menu. A finder window should open revealing `typography.csv`.
23+
2. Open your Google Sheet, select *File > Import…* and then *Upload*.
24+
3. Drag `typography.csv` into the upload screen and select *Replace current sheet* then click *Import*.
25+
26+
# Importing styles
27+
Import styles from your sheet to Sketch.
28+
29+
1. Copy the URL to your Google Sheet. (See below if you are using Google Apps at work)
30+
31+
2. Run the `Import` command from the Sync plugin menu and paste your URL into the prompt.
1832

1933
Your text styles, layer styles, and color palette should now be synced with your spreadsheet. Run the plugin again any time to update. Share your published sheet URL with your team to stay in sync.
2034

2135
## Using Google Apps at work?
2236
Some companies prevent employees from publishing sheets. If the *Published content & settings* drill-down in the *Publish to the web* modal says that people at your company must log in to view, then Sync will not be able to access your sheet. Don't worry – you can still use Sync for typography. Just visit [Sheetsu](http://sheetsu.com/) to generate an API for your new sheet. Use your new Sheetsu URL and continue to step 4.
2337

2438
## Font Weight
25-
Font variants—such as bold, italic, or narrow—are actually separate font files on your computer. You should specify these exactly as named in `~/Library/Fonts/` folder on your Mac, *excluding* the file extension (e.g. `ttf`). The [Google Sheet template](https://drive.google.com/previewtemplate?id=17q6GOMM1X6kkvgeL3LeGkRr4C2vOhpM_JiQUWxbBtew&mode=public) provides an example of this.
39+
Font variants—such as bold, italic, or narrow—are actually separate font files on your computer. You should specify these exactly as named in `~/Library/Fonts/` folder on your Mac, *excluding* the file extension (e.g. `ttf`). The [Google Sheet template](https://drive.google.com/previewtemplate?id=17q6GOMM1X6kkvgeL3LeGkRr4C2vOhpM_JiQUWxbBtew&mode=public) provides an example of this. If you get stuck, consider defining your styles in Sketch and using the export feature.
2640

2741
## Need help?
2842
[View the screencast](https://dl.dropboxusercontent.com/s/f4ubqenqz8n5wne/68D4E91B-173A-4AA0-964C-AA7F9EA77AC8-5233-000032842DD067F4.gif?dl=0), [create an issue](https://github.com/nolastan/sync.sketchplugin/issues/new) or [tweet @stan](https://twitter.com/stan).
@@ -51,4 +65,4 @@ As an alternative to Google Sheets, you can create a custom JSON api with the fo
5165
]
5266
}
5367
```
54-
Run the Sync command from the plugin menu and paste your API endpoint URL into the prompt.
68+
Run the *Import* command from the Sync plugin menu and paste your API endpoint URL into the prompt.

0 commit comments

Comments
 (0)