{"id":19694401,"url":"https://github.com/dwilliames/google-sheets-content-sync-sketch-plugin","last_synced_at":"2025-04-03T03:12:48.587Z","repository":{"id":44632912,"uuid":"84765157","full_name":"DWilliames/Google-sheets-content-sync-sketch-plugin","owner":"DWilliames","description":"Sync content within a Google Sheets document, to text layers — based on their names. Edit and collaborate on your content in Google Sheets, then sync in back to your sketch files.","archived":false,"fork":false,"pushed_at":"2021-08-08T12:25:48.000Z","size":3267,"stargazers_count":292,"open_issues_count":24,"forks_count":24,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-03-24T08:43:02.865Z","etag":null,"topics":["cocoascript","sketch","sketch-app","sketch-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DWilliames.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-12T23:30:29.000Z","updated_at":"2025-02-15T03:27:04.000Z","dependencies_parsed_at":"2022-08-26T05:10:18.150Z","dependency_job_id":null,"html_url":"https://github.com/DWilliames/Google-sheets-content-sync-sketch-plugin","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DWilliames%2FGoogle-sheets-content-sync-sketch-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DWilliames%2FGoogle-sheets-content-sync-sketch-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DWilliames%2FGoogle-sheets-content-sync-sketch-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DWilliames%2FGoogle-sheets-content-sync-sketch-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DWilliames","download_url":"https://codeload.github.com/DWilliames/Google-sheets-content-sync-sketch-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246927839,"owners_count":20856198,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cocoascript","sketch","sketch-app","sketch-plugin"],"created_at":"2024-11-11T19:22:41.297Z","updated_at":"2025-04-03T03:12:48.567Z","avatar_url":"https://github.com/DWilliames.png","language":"JavaScript","funding_links":["https://www.paypal.me/dtw/5"],"categories":[],"sub_categories":[],"readme":"\n![Title](images/logo.png)\n\n\u003ca href=\"https://www.sketchapp.com\"\u003e\n  \u003cimg width=\"160\" height=\"41\" src=\"images/sketch-badge.png\" \u003e\n\u003c/a\u003e\n\u003ca href=\"http://bit.ly/SketchRunnerWebsite\"\u003e\n  \u003cimg width=\"160\" height=\"41\" src=\"http://sketchrunner.com/img/badge_blue.png\" \u003e\n\u003c/a\u003e\n\nEdit and collaborate on your content in Google Sheets, then sync in back to your sketch files.\n\n![Demo](images/demo.gif)\n\n## Usage\n\n### TL;DR\n1. Create a Google Sheet — enter titles across the top, and values directly below\n2. Publish it with `File \u003e Publish to the web... \u003e Publish`\n3. Name text layers appropriately — e.g. `text layer #title`\n4. Run the plugin — `control + i`\n\n----\n\n### 1. Create your Spreadsheet\n\nCreate a new Google Spreadsheet (unfortunately Google Docs won't work with this.)\n\nEnter 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**\n\n![Layout example](images/layout.png)\n\n\n### 2. Publish the sheet\n\nNext you need to publish the document, so that Sketch can read it's contents via the shareable link.\n\nDo this by going `File \u003e Publish to the web... \u003e Publish`\n\n![Publish example](images/publish-demo.gif)\n\n\n### 3. Name your layers\n\nNow that the spreadsheet is accessible — how do you tie specific values to your layers?\n\n**It all comes down to how you name your layers**\n\nIn the name of a layer, add a '#' followed by the title in the spreadsheet.\n\nFor example: to tie the value of 'title' to a Text Layer, give it a name like `#title`\n\nSpreadsheet Data | Sketch Layer list\n:---:|:---:\n![Spreadsheet Data](images/spreadsheet-example.png) | ![Sketch Layer list](images/sketch-name-example.png)\n\n\u003e 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.\n\n**🌄 Using images**\n\nIt 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.\n\n\n**Different Sheets**\n\nIf 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)*\n\nSpreadsheet Sheets | Sketch Page list\n:---:|:---:\n![Spreadsheet Sheets](images/sheets-example.png) | ![Sketch Page list](images/pages-naming-example.png)\n\n\n**Multiple values for the same title**\n\nYou can give multiple values to the same title, by default it will grab the first one.\n\nTo get a specific value — add the 'nth' one you want after a '.'\n\ne.g. to get the 2nd title value a layer may be called `layer name #title.2`.\n\nSpreadsheet Multiple values | Sketch Multiple values\n:---:|:---:\n![Spreadsheet multiple values](images/spreadsheet-multiple-values-example.png) | ![Sketch multiple values](images/sketch-multiple-values-example.png)\n\nIt'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`.\n\n\n### 4. Run the plugin\n\n\u003ckbd\u003e⌃ control\u003c/kbd\u003e + \u003ckbd\u003ei\u003c/kbd\u003e 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'.**\n\nThen click `Import`. That's it! 🎉 The content should magically populate.\n\nAnytime you want to re-sync the values, run the plugin again!\n\n\n## Working with Symbols\n\n**⚠️ Note: Nested symbols are not yet supported**\n\nSymbols 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.\n\n![Symbols before and after](images/Symbols_before_and_after.png)\n\nWhen 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.\n\nSpreadsheet Columns | Sketch Symbol Layer list\n:---:|:---:\n![Spreadsheet symbols](images/symbols_spreadsheet.png) | ![Symbols overrides](images/symbol_overrides.png)\n\nThen 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...\n\n![Symbols layer list](images/symbols_layer_list.png)\n\n---\n\n## Why make this plugin?\n\nThis is great for collaborating on content heavy documents, or when you may have a copywriter you work with.\n\nThere 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. 😡\n\nThis plugin really saves the day in that regard — and has saved me a ton of time. 😍\n\nAnother use case, is having different versions of text across different sheets, to easily change between them.\n\n\n## Installation\n\n1. Download the plugin\n2. Double-click the file, 'Google sheets content sync.sketchplugin'\n3. That's it...\n\n\n## Contribute\n\nThis plugin is in active development.\n\nPull requests are welcome and please submit bugs 🐛.\n\n## Contact\n\n* Email \u003cdavid@williames.com\u003e\n* Follow [@davidwilliames](https://twitter.com/davidwilliames) on Twitter\n\n[![Twitter Follow](https://img.shields.io/twitter/follow/davidwilliames.svg?style=social\u0026label=Follow)]()\n\n---\n\nCheck out my other Sketch Plugins:\n* [Nudge Resize](https://github.com/DWilliames/nudge-resize-sketch-plugin)\n* [Nudge Corner Radius](https://github.com/DWilliames/nudge-corner-radius-sketch-plugin)\n* [📕 PDF Export](https://github.com/DWilliames/PDF-export-sketch-plugin)\n\nIf you find this plugin helpful, consider shouting me coffee ☕️ via [PayPal](https://www.paypal.me/dtw/5)\n\n\u003ca href=\"https://www.paypal.me/dtw/5\"\u003e\n  \u003cimg width=\"160\" height=\"41\" src=\"images/paypal-badge.png\" \u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwilliames%2Fgoogle-sheets-content-sync-sketch-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwilliames%2Fgoogle-sheets-content-sync-sketch-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwilliames%2Fgoogle-sheets-content-sync-sketch-plugin/lists"}