nolastan / sync.sketchplugin

Keep your design team in sync!

Sync Sketch Plugin

Share styles with your team using Google Sheets.

• Import and update styles from a shared Google Sheet.
• Export styles as CSV files, which can be uploaded to Google Sheets and shared with your team.
• Use formulas in Google Sheets to set relative font sizes and line heights.

Installation

Install from Sketch Toolbox (recommended) or download the zip, unzip, and open sync.sketchplugin.

Setting up Google Sheets

You'll need a published sheet to use Sync.

1. Create a Google Sheet from this template (click the "Use this template" button).

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

Exporting styles

Export styles from Sketch to your sheet. Alternatively, you can skip this step and define your initial styles in the Google Sheets interface.

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.
2. Open your Google Sheet, select File > Import… and then Upload.
3. Drag typography.csv into the upload screen and select Replace current sheet then click Import.

Importing styles

Import styles from your sheet to Sketch.

1. Copy the URL to your Google Sheet. (See below if you are using Google Apps at work)

2. Run the Import command from the Sync plugin menu and paste your URL into the prompt.

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.

Using Google Apps at work?

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 to generate an API for your new sheet. Use your new Sheetsu URL and continue to step 2.

Font Weight

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 provides an example of this. If you get stuck, consider defining your styles in Sketch and using the export feature.

Need help?

View the screencast, create an issue or tweet @stan.

Pattern Libraries

Share your pattern library with the Sync community.

• Material Design (Download Roboto)

Custom API

As an alternative to Google Sheets, you can create a custom JSON api with the following structure. Currently this method only supports typography.

{
  …
  result: [
    {
      Style: "Headline 1",
      Size: "32",
      Color: "DD2E1F",
      Opacity: "85",
      Typeface: "SourceSansPro-Semibold",
      Alignment: "center",
      Line: "40",
      Character: "0"
    },
    …
  ]
}

Run the Import command from the Sync plugin menu and paste your API endpoint URL into the prompt.

sync.sketchplugin's Issues

How to specify fill image and/or multiple fills?

Is it possible to specify an image background or multiple backgrounds? I'd like to pull into the sync file a background color with an image fill/texture.

Thanks for the great plugin!

Styles won't sync (Sketch 46.2)

Hey! I love the concept here for mass generating type styles in a more scalable fashion. However, after publishing my sheet and importing it via the URL, nothing happens. No errors, no text styles visible.

I'm running Sketch 46.2, did something break?

Add library

I'd like to add this library I created:

It removed all styles except those in the spreadsheet, and also removed styles from every object

Hey there,

Used the plug-in, and it seems useful except for the following:

1. When I ran the plugin for the first time it removed all of the styles I had created in the document. A LOT of styes.A warning would have been nice.
2. Whenever I run the plugin, it removes the styles from every object. So if I style a text box H1, then run the plugin, it will show as "no text style" (along with every other element in the document.) is the plugin supposed to update the styles, or remove them?

I feel like a bit more description in the readme could prevent this confusion. The behaviour could be useful, but the word "sync" suggests something else, and I was pretty surprised.

Sync with API generated from Google Spreadsheet not workin

Hi,

Very nice plugin! Unfortunately, the API generated with the tool you mention doesn't work for me. I pasted the url generated: https://sheetsu.com/apis/c07cf456 in your plugin's prompt. But nothing seems to change.

Do you have any idea how to do please?

Thank you!

How to add text options like Underline or Bullet list

In the little cog, you can set some options...
Can we add this to the google sheet?
I try to add a new column called "Options" then fill the cell with Underline, but it doesn't works

Support Sketch 45 plugin update system

Hi there!

This is a quick note to remind you that Sketch 45 will include a plugin update system.

It would be awesome if you could add support to it (it's really easy!) before Sketch 45 comes out. Ideally, you should release an update for your plugin while we're still in Sketch 44, so your users will have a nice & easy experience when 45 is released.

For more details, please check http://sketchplugins.com/d/229-updating-plugins and http://developer.sketchapp.com/introduction/updating-plugins/

Thanks in advance!

Add support for paragraph spacing

Neither the spreadsheet template or the plugin currently support paragraph spacing.

Styles are removed and re-added on each sync. Ideally they would update.

If you change a font in google spreadsheet and sync, text styles are unselected in Sketch. Not sure if it's a bug, or the way it works. But would be nice, if it didn't happen.

Bug explained: https://dl.dropboxusercontent.com/u/430406/Live%20%5Bdo%20not%20delete%5D/Github/Sync-bug.mp4

Sync should have an option to PUSH changes to the spreadsheet

Issue: I just overwrote my existing text styles using sync. It's more intuitive to push styles from a document than to manually enter them after having created them in sketch.

Workflow:

1. New file
2. Mockup designs and create styles
3. Save File
4. Sync > Push to GoogleDoc

• Confirmation dialog "Are you sure?"
  End

Zip-File-Link in readme.md old?

After downloading the plugin from the zip-link in the readme.md file the Runner integration wasn't working properly. I had to manually add the Resource folder, so the icons would work. Might just be an old link?

REQ: Palette as part of the document not global

Would it be possible to have the plugin override the document colors as opposed to the Global Sketch Palette?

That would be great. Thanks!

Not working with Sketch 39

I can't sync styles by removeObject error.

• URL: (default url) https://docs.google.com/spreadsheets/d/17q6GOMM1X6kkvgeL3LeGkRr4C2vOhpM_JiQUWxbBtew/pubhtml
• Version: Version 39.1 (31720)

2016/07/26 14:18:04.625 Sync (Sketch Plugin)[26792]: TypeError: existingStyles.removeObject_ is not a function. (In 'existingStyles.removeObject_( style)', 'existingStyles.removeObject_' is undefined)
line: 41
sourceURL: ~/Library/Application Support/com.bohemiancoding.sketch3/Plugins/sync.sketchplugin/Contents/Sketch/script.cocoascript
column: 35

  function removeAllStyles() {
    var existingStyles = sharedStyles.objects();

    while (existingStyles.count() > 0) {
      style = existingStyles.objectAtIndex(0);
      [existingStyles removeObject:style];
    }
  }

can't send styles to sheet?

It just seems to get styles from the sheet and not send them from the sketch file? Maybe different function to push or pull styles?

Sorting

I think it would be great if the text styles would be sorted by name or font size. So far, I don’t see any sorting? I might make a PR for this though ;)

Support text decoration and list type

via Twitter

Support negative values

Problem: I can't get sync to work in Sketch 3.7.2

I already tried the methods described in the instructions (API and Google doc link). Also making sure the fonts exist and are written correctly from my font library.

What else can I do?

zero line height crashes

Putting 0 as the line height of a text style causes the plugin to not work.

Great alternative to brand.ai

Didn't know where to send this so feel free to delete it. I found this plugin via link on producthunt @ brand.ai. I love this alternative and hope you keep it up. Happy to help when and where possible.

Adding "Weight" to the attributes list

Hi there,

Would it be possible to add the "Weight" of the font to your list of attributes? I use this in my text styles for bold/semi-bold/light versions of the font.

Many thanks,

Katy

Re-imported styles are not applied automatically

First of all: great plugin! When I made "Style Inventory" I always thought of a simple way to export/import styles and using Google Sheets is such a good idea!

My issue:

• make a new document
• import text styles from sheet
• use styles
• change styles in the sheet
• import again
  => existing layers using text styles are not updated to reflect the changed text styles

As you can see in the screenshot: the layer with black text is using "Headline" that had been changed in the sheet. I changed the color to green. After the import, the style updated, but the selected text layer did not update. Thus I get the "out of sync arrows".

How to fix:
Maybe run through all layers that use text styles and re-apply styles?

Not working on Sketch 3.4.2

I installed it today and followed all instruction. When I run this plugin I can't see new styles in Sketch? Am I missing something? Please help coz this plugin is really cool and our team want to use it asap.

Thanks
Vinish