Git Product home page Git Product logo

google-sheets-content-sync-sketch-plugin's Introduction

Title

Edit and collaborate on your content in Google Sheets, then sync in back to your sketch files.

Demo

Usage

TL;DR

  1. Create a Google Sheet — enter titles across the top, and values directly below
  2. Publish it with File > Publish to the web... > Publish
  3. Name text layers appropriately — e.g. text layer #title
  4. Run the plugin — control + i

1. Create your Spreadsheet

Create a new Google Spreadsheet (unfortunately Google Docs won't work with this.)

Enter your content going horizontally, with the titles on the first line, and the values directly below. Note: It is very important that you do it this way

Layout example

2. Publish the sheet

Next you need to publish the document, so that Sketch can read it's contents via the shareable link.

Do this by going File > Publish to the web... > Publish

Publish example

3. Name your layers

Now that the spreadsheet is accessible — how do you tie specific values to your layers?

It all comes down to how you name your layers

In the name of a layer, add a '#' followed by the title in the spreadsheet.

For example: to tie the value of 'title' to a Text Layer, give it a name like #title

Spreadsheet Data Sketch Layer list
Spreadsheet Data Sketch Layer list

It is not case-sensitive, and will ignore spaces — so text #anothertitle will still get the value for Another Title, you can also have other naming before the '#'. So layer name #title and #title would both work equally.

🌄 Using images

It is also possible to link images to shape layers. Simply tie in the image name into the name of the Shape layer, 'e.g.' Profile pic #avatar; then in your Google Sheet, add an image URL as the value.

Different Sheets

If you would like to tie the data to a specific sheet within the Google Spreadsheet, add the sheet name to your Sketch page, otherwise it will default to the first page. (Note: Only one Google sheet, per a Sketch page)

Spreadsheet Sheets Sketch Page list
Spreadsheet Sheets Sketch Page list

Multiple values for the same title

You can give multiple values to the same title, by default it will grab the first one.

To get a specific value — add the 'nth' one you want after a '.'

e.g. to get the 2nd title value a layer may be called layer name #title.2.

Spreadsheet Multiple values Sketch Multiple values
Spreadsheet multiple values Sketch multiple values

It's also possible to randomise which value is used. Instead of using a number such as layer name #title.2 use an 'x' or 'n' — layer name #title.n or layer name #title.x.

4. Run the plugin

⌃ control + i to import the values from a spreadsheet. A popup alert will appear, allowing you to enter the URL of your Google Sheet. Important: Use the URL of your Google Sheet in the browser address bar, DO NOT use the URL generated after clicking 'Publish to the web'.

Then click Import. That's it! 🎉 The content should magically populate.

Anytime you want to re-sync the values, run the plugin again!

Working with Symbols

⚠️ Note: Nested symbols are not yet supported

Symbols are great for creating an element that is used multiple times, but the content slightly differs. Which makes is a great candidate for this plugin.

Symbols before and after

When using Symbols, make sure the layer names within the Symbol have a '#' followed by Google Sheets column title — same as explained above. So that the override label matches the column title.

Spreadsheet Columns Sketch Symbol Layer list
Spreadsheet symbols Symbols overrides

Then to make each Symbol instance refer to a different row in the spreadsheet, make sure the layer name for each Symbol instance has a '.' followed by the 'n'th row you want it to refer to. Like so...

Symbols layer list


Why make this plugin?

This is great for collaborating on content heavy documents, or when you may have a copywriter you work with.

There has been numerous times that I have been working on a large document with others, where we would collaborate in a Google doc. Then I would continually copy that content back into my Sketch design. This can be very frustrating after multiple iterations — when you think you're done with the content, so you copy it all into Sketch; then more updates are made, and you have to copy them all again. 😡

This plugin really saves the day in that regard — and has saved me a ton of time. 😍

Another use case, is having different versions of text across different sheets, to easily change between them.

Installation

  1. Download the plugin
  2. Double-click the file, 'Google sheets content sync.sketchplugin'
  3. That's it...

Contribute

This plugin is in active development.

Pull requests are welcome and please submit bugs 🐛.

Contact

Twitter Follow


Check out my other Sketch Plugins:

If you find this plugin helpful, consider shouting me coffee ☕️ via PayPal

google-sheets-content-sync-sketch-plugin's People

Contributors

dwilliames avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

google-sheets-content-sync-sketch-plugin's Issues

Styling of text inside text-field

It would be nice to have the option to style a specific word or phrase within a text-field, ie. making it bold or change the color, underline etc. so that you would not have to repeat this every time you import new changes. Could perhaps be HTML/CSS or markdown based?
Skærmbillede 2019-11-22 kl  16 40 22
Skærmbillede 2019-11-22 kl  16 45 18

Image URL not working?

Works great and is exactly what I needed but when I add an image URL and try to load it into a shape it doesn't work (if I try to write it to a textbox the URL does appear as text though).

Nested Symbols

Great plugin. Do you have a timeframe on when the Nested Symbols feature would be released?
Thanks.

Sync random row

Love the plugin. Makes my life so much easier when working with large data sets. That being said, some of the datasets I work with have ~100,000 rows. Have you thought about adding the ability to randomly select a row?

Usecase:
I'm designing an dashboard of some sort. I've imported a bunch of data into a google sheet. Now I want to test that real data through my design. The data has lots of different currencies, and positive and negative changes. What I'm trying to discover is obvious layout issues. What would help would be to randomly select rows from my dataset.

Instead of looking through the dataset to find a row that might work or break the layout, and instead of adding .1 or changing it to .2 (because you wouldnt do this 10,000 times on 17 layers), it would help if the plugin randomly selected a row, so I could keep generating instances quickly and understand what's going wrong.

How I've set things up so that I can test multiple rows quickly:
screenshot 2017-11-23 21 06 06

Thoughts?

Request: use local images

Hi there, I think it could be very useful to have the images loaded from a local folder, instead from the web, could it be possible? maybe with a folder in the same location as the .sketch file?

Regards

Setting ID's vertically?

Is there a way to enter layer names in the first column and the content horizontally or referencing value by their name instead of the 'nth' value? It would make it easier to manage string dictionaries. :)

Plugin can't be used with enterprise Google account

First off, thanks for this awesome plugin.

I work for a company which uses GSuite for all of our internal email and documents, and it's not possible to publish to a public URL visible outside of the company, so no sheet created using our enterprise accounts can be used with this plugin.

We would really benefit from being able to keep shared sheets with different types of dummy data to use across the design team for mockups, but our enterprise security settings make that impossible right now.

Request: Make this work locally with Excel

Hey!
Awesome plugin. I used to use JSON populator a lot but not everybody in our organization likes to edit JSON files and the convention how the variables/placeholders work isn’t as elegant as your solution. Unfortunately, we aren’t allowed to share any information via any Google service. Therefore my question is if you plan a version which works locally with data which can be exported from Excel (😖 I know!).
Thank you!

Request: Use Artboards (as oopposed to Pages) for separate sheets

Virtually all design files can be organized very efficiently using one page and multiple artboards.

It is perfectly normal to have clickable prototype with 30 artboards and a single page. At the same time it is impossible to have the same prototype with 30 pages x 1 artboard setup.

So ability to bind one google doc sheet per artboard would benefit plugin usability greatly.

Impossible run the plugin

Hi, I'm very interested in using this plugin to improve my workflow with copywriters.
I tried to install and run your plugin but seems it doesn't work. I can't run the plugin. Using the sketch debbuger (runScript command) I saw that there is a "Syntax error" in the first foreach.

I have the last version of Sketch.
Can you let me know if you have the same problem?
Thank you

Macbook Air M1 compatibility Issue

Hi,

I've upgraded to a M1 Macbook Air. The plugin gets installed on sketch 72; however when I'm trying to link a google sheet via "link google sheet", the dialogue box (Where sheet URL is to be entered) is not opening.

I've tried uninstalling and reinstalling the plugin, but without any luck. My workflow is stuck as I don't have the old laptop with me anymore where things ran smoothly :(

Conditional logic for showing/hiding symbols

I would love to show/hide symbols based on data in the google doc.

Use case: to show project progress, based on google doc data.
I have a google doc with projects listed by row. Each row has a status column with integer data. I would like to be able to show/hide a specific symbol based on the value of this cell. If the cell contains a 1, show a symbol (e.g. a green check mark), if 0, show a different symbol (e.g. a red cross mark).

Reference value in exact cell with no value above

In the google sheet, a column only has a value in row 3. how can I populate only #value.3 (right now this is viewing it as #value.1 (grabbing any first value in column))... if I have #value.1 or #value.2 I would like to return an empty text box.

Thanks.

Can't sync different sheets

Hello!
Thank you very much for create this amazing plugin!
I'm using it with a single sheet and it works perfectly, but if a use another sheet (for another artwork) I get an N/A: https://cl.ly/ljV6
And if I use the same #layertitle (for example) in both pages I get the same content of the first sheet.

I'm using v1.1.1 btw

Thanks again!

Alway require import URL

Hi,

Thanks for you plugin. But we can not run it because it alway require import google sheet url. Please check it. My Sketch app's version is 44.1.

Thanks

Images not working.

Thanks for the wonderful plugin!

Everything works great, however, I'm having a hard time getting images to populate.

I have inserted image into cell in google sheets
I have a shape layer -- 'hanginthere #image'

Am I doing something wrong?

Generating spreadsheet from existing Sketch doc

I'm probably late to the party here, but would it be possible to auto-generate the spreadsheet from an existing Sketch doc? That way, you'd only have to type everything out once (name layers, create spreadsheet (which includes named layers), edit, repeat).

It doesn't look possible how. What would we be looking at to build it?

Referencing column headers from sheet

Hi @DWilliames Really solid plugin, here. Thank you so much for your work and generosity.

I'm wanting to pull column heading from the sheet, too. It seems like this would be relatively simple, but I don't see a mention of it in your documentation. Is it possible today?

Set style/colour with the google doc

I would love to be able to set colour values (e.g. colour fill) for a symbol, based on google doc data.

Here are a few options to consider;

  • set the hex code in the google sheet,
  • set the style name in the google doc

Support "_" inside string's name

I've been using the plugin and wanted to use names like "#onboarding_title" as my string's name. But currently, only "#onboarding title" or "#onboardingTitle" or "#onboarding-title" works. It would be great if underscore works in this case.

Thanks!

Support random item

Rather than specifying a specific item number e.g. #item.1 allow the ability for it to be randomised, e.g. #item.x where it would choose a random item from the list.

Problem with Images

Can't fetch any of the images I put in my Google Sheets file. I thought it might've been because it was a Google Drive link without the .jpg extension so I got the direct link for the image with the .jpg extension instead and still it didn't pull up my image and just got stuck on fetching image. I waited for about 5-10 minutes and still nothing happened. It would make it easier for me if the image didn't need a .jpg .png or .gif extension because I'll be pulling all my files from a Google Drive but if this can't happen I'd still just like for me to fetch images normally without having to wait for an extended period of time.

Update Sketch with Image URLs

Feature Request:
Would it be possible to add the ability to update the sketch file with image URLs pasted into the Google Spreadsheet?

For example, I have a grid of people like this:
image

Ideally, I'd like to add an avatar image for each of them in the Google Spreadsheet, like this:
image

Would this be possible to add to this Sketch plugin?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.