# Welcome Welcome to the ContentSync documentation! This document will help you understand how ContentSync works, get started, explore our features and become an expert. Let's get started! Learn how ContentSync work: {% content-ref url="/pages/-MDWXRs-S3LZV2u2xIhU" %} [What is ContentSync?](/what-is-contentsync) {% endcontent-ref %} Or jump ahead and dive into ContentSync: {% content-ref url="/pages/-MDWXXJFnPRMVOIYdM8f" %} [Quick Start](/quick-start) {% endcontent-ref %} ## Feedback We always love to hear from our users and prospective users. Have a question? Request? Suggestion? Want to share how you use ContentSync? Send us a note at . # What is ContentSync? ContentSync maps data between your design and spreadsheets to let you quickly update content. ## The Spreadsheet Content is organized into keys and versions in a spreadsheet. The first column is always the keys, and every other column is a content version. Each row has a content key. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDfgxW9GQeNZ2i4fDHl%2F-MDfi9RlOcRx8wBvApl0%2FSpreadsheet.png?alt=media\&token=1805d404-c41b-4846-b05a-3fb7edd7072d) ### Content Version > A **Content Version** is a collection of content. These are columns on a spreadsheet. ### Content Key > A **Content Key** is a unique identifier of a piece of content. These are rows on a spreadsheet. ## Transferring Content Content can be updated in both directions [**Push**](/what-is-contentsync#upload) and [**Pull**](/what-is-contentsync#download). Updating only a portion of a design is known as a **Selective Push** or **Selective Pull** since it will only update the selected design layers. ### Push A Push transfers content from a design file to a spreadsheet. This will automatically create any missing content keys in the spreadsheet for the design layers that are pushed. ![A Push updates the spreadsheet with the contents of a design.](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDfXsrYCwFe52_BK6pM%2F-MDfYkxLK2yIpFJgFpQ3%2FPush.png?alt=media\&token=0f5a97bd-3ca8-4729-85d4-f98020a409c2) ### Pull A Pull transfers content from a spreadsheet into a design. The design will be updated with the chosen content version. ![A Pull updates a design with the content from a spreadsheet.](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDfgxW9GQeNZ2i4fDHl%2F-MDfiibm-iwrZVYzFfiM%2FPull.png?alt=media\&token=d5dd5194-10d7-428f-a036-ed6ef37efdbf) # Content Versions A Content Version is a collection of content. These are columns of a spreadsheet. You can use Content Versions to: * **Translate** - Create different versions for each language * **Personalize** - Create different versions for each user or persona * **Iterate** - Create different versions as you iterate your content * **Branding** - Create different versions based on region or segmentation * **Reusing** - Create different versions for each campaign, report, email, etc ## Anatomy of a Content Version The spreadsheet is ContentSync's core content management. This lets you utilize all the power of modern spreadsheets and keep your content is both organized and functional in a grid. > The first column is always the Content Key column. > Each other column of the spreadsheet is a content version. For example, imagine your design has a title and description and you want to have multiple languages of this content. It could be represented as the following spreadsheet: | Key | English | Spanish | Korean | | ----------- | -------------------- | ---------------------- | ------- | | title | My title! | ¡Mi título! | 내 제목! | | description | A short description. | Una breve descripción. | 간단한 설명. | The above table would define 3 content versions: English, Spanish and Korean and 2 content keys: title and description. {% content-ref url="/pages/-MDf\_poabH2CaQ0TQxB3" %} [Content Keys](/what-is-contentsync/content-keys) {% endcontent-ref %} ## Creating and Managing Versions #### Creating a Version To create a new version is as simple as adding a new column on your spreadsheet. In order for ContentSync to recognize this new version, you may need to trigger a "Update Versions from Spreadsheet" (see each specific plugin for more details). #### Set Version to Not Be Syncable Sometimes your spreadsheet may contain additional columns you do not want anybody to sync to. To prevent a version from being syncing, go to your project at contentsync.com, navigate to your project, go to settings > versions press the edit button next to a version. From there you can toggle the version you'd like to not be syncable. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDfmocKDGSeTbJHJk98%2F-MDfrunJM8P98ZG1yB63%2FScreen%20Shot%202020-08-01%20at%202.13.45%20PM.png?alt=media\&token=2a25c220-99cb-4077-b0c1-56233a06f676) ## Syncing A Version To sync a design with a version requires you to install the ContentSync plugin of your choice. Once you have installed and configured it, you just select the version and sync. > Syncing a version can be done in both directions! To learn more about how syncing works, check out the specific plugin you would like to work with: {% content-ref url="/pages/-MDWY2bjwoLnAtpBxUY7" %} [Adobe XD Plugin](/plugins/adobe-xd-plugin) {% endcontent-ref %} {% content-ref url="/pages/-MDWY-Zf9uJ34GMMZ7x7" %} [Sketch Plugin](/plugins/sketch-plugin) {% endcontent-ref %} # Content Keys A Content key is a unique identifier of a piece of content. Content Keys are used to: 1. **Identify** a row on a spreadsheet 2. **Specify** a design element's content ## Identify a Row on a Spreadsheet On a spreadsheet, the first column is the content key. This identifies the row to be used and typically the key is descriptive of where or how the content will be used. ## Specify a Design Element's Content Design Element's are assigned a content key. This content key is used to grab the correct content when syncing with a spreadsheet. Content Keys can be used many times throughout a design to reuse the same piece of content within your design. For example, if a common name is used throughout multiple pages, all the design elements can be assigned the same key which will cause them to all share the same content on a sync. {% hint style="info" %} Layers with the same name will sync to the same content. By default, layers with the same name will share content. Pay attention to your layer names. {% endhint %} ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDft1k7Fk17bWZhDZ63%2F-MDftJbtaanmquMOX17H%2FDesign.png?alt=media\&token=08297b84-62bf-4d7d-ad87-ad9a445b7a5c) ## The Content Key Format ### Default Content Key Design elements have default content keys to simplify design file configurations. The default content key follows the Content Key Format however you may override them with any name you would like. Typically content keys are descriptive of where or how the content will be used in a design. You are free to name your content keys anything you would like, however there are some special scenarios where the format is specific. ### Standard Keys A standard key can be any string. Examples: * Header * WelcomePageBodyText * AvatarImage ### Symbol Overrides Some design programs support reusable symbols that are allowed to have internal content overwritten. By default, key with `->` signify a layer within a symbol. There can be multiple to signify nested symbols. Examples: * SecondColumn -> Title * SecondColumn -> Button -> Action ### Symbol Types Some design programs support dynamically swapping symbols based on a content version. The default keys that identify a symbols type end is "**.type**". Examples: * SecondColumnLayout.type * TextAlertStyle.type # Quick Start Before we can get you up and running, which Design Program are you working in? {% content-ref url="/pages/-MDfhZDP5wuVYMsWoPmt" %} [Adobe XD - Getting Started](/plugins/adobe-xd-plugin/getting-started) {% endcontent-ref %} {% content-ref url="/pages/-MDWYMJ0\_A8ZHyGtCbYc" %} [Sketch - Getting Started](/plugins/sketch-plugin/getting-started) {% endcontent-ref %} # ContentSync.com The ContentSync platform is a central place to manage your account, permissions and projects. ## Sign In To sign in to your account, use your Google, Microsoft or email account you used to sign up. ## Account Once logged in, your main screen will show you the active account in the top-left and the projects of the account. You can also access settings, usage stats, and billing details. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-ME-Sv16PG6kRXTIseZp%2F-ME-UK1xMpKcmzr9Lgtd%2FScreen%20Shot%202020-08-05%20at%202.18.20%20PM.png?alt=media\&token=0441bdc0-3fe4-4590-8205-dffd90229032) ### Settings The setting pane will show you your account details. Here is where you can manage the authentications you have with external providers like Google and Microsoft. ### Authentications Under Settings > Authentications you can see the accounts you have authenticated. These accounts can be used to create and manage the spreadsheets of your projects and teams. #### Add Authentication You can add multiple authentications to be able to use different accounts for your spreadsheets. To do this, click on the Add button of the account type you would like to add. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-ME-Sv16PG6kRXTIseZp%2F-ME-VYRvfQCd3eINKRQN%2FScreen%20Shot%202020-08-05%20at%202.23.13%20PM.png?alt=media\&token=2fd3b32d-a7c3-4997-80b7-dc558fcb7d5a) #### Renew an Authentication Sometimes you may need to renew an authentication due to expired permissions. To do this, click on the refresh icon next to the authentication you would like to renew. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-ME-Sv16PG6kRXTIseZp%2F-ME-W8g0S5bQbUqJlrf1%2FScreen%20Shot%202020-08-05%20at%202.25.25%20PM.png?alt=media\&token=c209354a-aab3-4d8c-a7d0-ea88823e24ff) # Team Accounts Team accounts allow for central user management, permissions and billing. ## Creating a Team Account On your account, on the account dropdown, select **Create Team**. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MLIx8bqHaMrBtErKib7%2F-MLIxowFmyGYvgsN7RUZ%2FScreen%20Shot%202020-11-04%20at%207.54.14%20AM.png?alt=media\&token=7b6d78d1-8107-4698-becc-c0721bef9d61) Fill out the popup requesting a Team Name. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MLIx8bqHaMrBtErKib7%2F-MLIy0N3Wiv-SxG-OzxZ%2FScreen%20Shot%202020-11-04%20at%207.55.05%20AM.png?alt=media\&token=33123016-7549-41bc-bd6c-834c1b576bb7) ## Setting Up a Team Account Once created, you will need to add a Google or Microsoft account to the Team. This account will own any created spreadsheets and will be used to sync with Google or Microsoft. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MLIx8bqHaMrBtErKib7%2F-MLIyILQvnfiq1p8m_Y6%2FScreen%20Shot%202020-11-04%20at%207.56.01%20AM.png?alt=media\&token=377c7caf-08a8-4a44-bb50-7cfba9f2afb0) ## Managing Seats and Users You must upgrade your account to add additional users. Once upgraded, you can easily add seats as needed under the **Usage** or **Billing** tab. Once the seats are added you can then invite and manage users under the **People** tab. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MLIx8bqHaMrBtErKib7%2F-MLIz7wt_wMGjhVcsPaH%2FScreen%20Shot%202020-11-04%20at%207.58.33%20AM.png?alt=media\&token=3abeb245-b620-4ef1-b734-1aa05f88db46) ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MLIx8bqHaMrBtErKib7%2F-MLIzG08Df_kIMn7PqB8%2FScreen%20Shot%202020-11-04%20at%208.00.30%20AM.png?alt=media\&token=cd634873-63d7-42df-8fe4-6ea8eb4ff6a6) ## User Permissions When adding a user you can invite them with one of 3 permissions: **Viewer**, **Member**, or **Admin**. | Permission | Viewer | Member | Admin | | ----------------------- | :----: | :----: | :---: | | View Projects | ✔ | ✔ | ✔ | | Create Projects | | ✔ | ✔ | | Change Project Settings | | | ✔ | | Manage User Access | | | ✔ | | Manage Team Access | | | ✔ | | View/Change Billing | | | ✔ | # Google Spreadsheets To get started with Google Spreadsheets, make sure you either sign up with a Google account or [add a google authentication](/platform/contentsync.com#add-authentication) to your ContentSync account. {% hint style="info" %} You must have at lease one Google authentication enabled on your account to use Google Spreadsheets. {% endhint %} ## Performance Google Spreadsheets is our preferred Spreadsheet. It consistently works and is performance. However, keep in mind that the more tabs on your Google Spreadsheet, the longer a sync will take. ## Sheet Tabs Naming Options These options allow finer grained control of which sheet tabs are synced and when they are synced. Some notes: * All options are case insensitive * Options can be combined and used multiple times * Each option must have a space before it * An option can appear anywhere in the sheet tab name ### Disable Sheet Tab To always ignore a tab from syncing, include "**--noCS**" in the tab name. #### Examples A sheet tab with the name `ComponentContents` will sync. `ComponentContents --noCS` or `--noCS ComponentContents` will not sync. ### Enable Sheet Tabs for Specific Content Versions You can set a sheet tab to sync only for specific content versions using "**--CSVersion=\**". You can include this option multiple times and with other options. #### Examples `ComponentContents --CSVersion=english` will only sync on content version "english". `ComponentContents --CSVersion=v1 --CSVersion=v3` will only sync on content version "v1" and "v3" and will not sync on version v2 or any others. ### Disable Sheet Tabs For Specific Content Versions You can also set a tab to be ignored for a specific content version using "**--notCSVersion=\**". You can include this option multiple times. #### Examples `ComponentContents --notCSVersion=english` will sync on call content versions except for version "english". `ComponentContents --notCSVersion=v1 --notCSVersion=v3` will not sync its contents one content version v1 or v3 but will sync on content version v2 and others. # Microsoft Excel 365 To get started with Microsoft Excel 365 spreadsheets, make sure you either sign up with a Microsoft account or [add a Microsoft authentication](/platform/contentsync.com#add-authentication) to your ContentSync account. {% hint style="info" %} You must have at lease one Microsoft authentication enabled on your account to use Microsoft Excel 365 Spreadsheets. {% endhint %} ## Performance We notice that sync consistency and delays are often significant on Microsoft Excel 365 versus Google Spreadsheets. Sometimes you will need to wait a minute for Excel to be consistent before or after a sync. You may also need to refresh the Excel webpage to make sure its up to date. # Adobe XD Plugin ContentSync for Adobe XD! Sync your content from a spreadsheet into your Adobe XD designs and vice-versa with ContentSync for Adobe XD. ## Features ContentSync natively supports Sketch and includes deep integrations such as: * [Push Content](/plugins/adobe-xd-plugin/features/push-content) * [Pull Content](/plugins/adobe-xd-plugin/features/pull-content) * [Image Syncing](/plugins/adobe-xd-plugin/features/image-syncing) ## Interface The main interface of ContentSync is within the Plugin panel of Adobe XD. You can select your project, sync your content and preview your content keys and settings all in the main panel. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDowwVsj2QezGCAYaEf%2F-MDoxbTyGVsbcWQxUX4q%2FScreen%20Shot%202020-08-03%20at%208.35.09%20AM.png?alt=media\&token=cdec6ec1-1509-4045-a34e-751337cbbd19) When you pull content, ContentSync will confirm the content changes that will be applied: ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDowwVsj2QezGCAYaEf%2F-MDp4V40ZO5Ua9diI7uC%2FScreen%20Shot%202020-08-03%20at%209.09.23%20AM.png?alt=media\&token=64088fbb-5885-4cc0-909c-4d02e2261768) Once, applied, your design will be updated with your new content! Dive in and learn more.... {% content-ref url="/pages/-MDfhZDP5wuVYMsWoPmt" %} [Adobe XD - Getting Started](/plugins/adobe-xd-plugin/getting-started) {% endcontent-ref %} {% content-ref url="/pages/-MDoxC4o\_3fQSVodWRPl" %} [Features](/plugins/adobe-xd-plugin/features) {% endcontent-ref %} # Adobe XD - Getting Started Get started with ContentSync and Adobe XD! ![A quick GIF showing how your designs can be easily toggled using the content versions on your spreadsheet.](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MFfRjvHiRw9Qo-G17f0%2F-MFfSjHrUahykr3G6pWu%2FAdobeXDContentSync_Video4.gif?alt=media\&token=30d7ed07-129a-4b41-8d3d-bd6dd6e9eb49) ## 1. Download and Install You can download ContentSync for Adobe XD [**directly**](https://contentsync.com/download/adobexdplugin) or through the[ **Adobe XD plugin store**](https://xd.adobelanding.com/en/xd-plugin-download/?name=87caed95). You can also download [**our simple starter file**](https://contentsync-public-files.s3-us-west-1.amazonaws.com/ContentSync_Getting_Started.xd) to try out ContentSync. You can see and make a copy of our [**simple starter Google Spreadsheet**](https://docs.google.com/spreadsheets/d/1MNuR1e80WZiAmpsnYK4AssQ1tDL1BDxi32SH4GYK0x0/edit?usp=sharing) too. ## 2. Open Adobe XD Once installed, ContentSync will appear in your Adobe XD plugins: ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDp53krHFyNOHNTBcO9%2F-MDp5hV9s-98nrSsAlc_%2FScreen%20Shot%202020-08-03%20at%209.14.54%20AM.png?alt=media\&token=c8d28b8b-c425-499e-a52e-342b490f7d2b) ## 3. Create an Account Opening the plugin and click **Get Started!**. This will open a login box where you can choose the account you'd like to use - Google or Microsoft. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDp53krHFyNOHNTBcO9%2F-MDp5x-m99hr0OIj9oML%2FScreen%20Shot%202020-08-03%20at%209.15.51%20AM.png?alt=media\&token=cd870ba8-8bcb-4316-8c69-caacd19a133f) ## 4. Create a Project The next step is to create a project. Click the **Create New Project** button. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDp53krHFyNOHNTBcO9%2F-MDp6Oj2NCQ9EFVcGm-s%2FScreen%20Shot%202020-08-03%20at%209.17.59%20AM.png?alt=media\&token=a249a1da-473d-4d0f-8bee-89300842eb4a) Enter the project name and press **Create**. This will create the project and the spreadsheet in the background. Once complete, you'll be ready to sync! {% hint style="info" %} Issues getting your project set up? Check out the ContentSync platform ([www.contentsync.com](https://docs.contentsync.com/plugins/adobe-xd-plugin/www.contentsync.com)) for better setup and troubleshooting. As always, feel free to contact support if you need help. {% endhint %} ## 5. Select Version Now select a version to work with. For now click on **Version 1**. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDp53krHFyNOHNTBcO9%2F-MDp78pTCOrMxo-GBASt%2FScreen%20Shot%202020-08-03%20at%209.21.01%20AM.png?alt=media\&token=59e580f5-9684-4761-8725-31b4e2dc4c77) ## 6. First Push Now select your whole design to sync all the contents. Once selected, you will see the content keys on the right side. This just shows you what keys will be synced. Now press **Push > Push Content**. Once complete, open your spreadsheet and you'll find all of your content synced to your spreadsheet! You can easily open your spreadsheet by going to **Project > Open Spreadsheet**. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDp53krHFyNOHNTBcO9%2F-MDp7h90MSdCMwfZ9NZ3%2FScreen%20Shot%202020-08-03%20at%209.23.41%20AM.png?alt=media\&token=e452fed0-e5cf-495e-9ee9-b5ce93461eec) ## 7. Create New Version Now in your spreadsheet we can quickly make a new version. Just fill out the contents for **Version 2** on your spreadsheet. We chose to use google translate to make a Spanish version, but you can make it anything you would like. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDp53krHFyNOHNTBcO9%2F-MDp8C2qRjaG4nkpqNkw%2FScreen%20Shot%202020-08-03%20at%209.24.57%20AM.png?alt=media\&token=9f560805-b296-4dcb-9186-56bc4b64dfc6) ## 8. First Pull For your first pull, in Adobe XD, select your content version **Version 2** and press **Spreadsheet Pull.** ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDp53krHFyNOHNTBcO9%2F-MDp8Q61NdwiuHQ2Ds5G%2FScreen%20Shot%202020-08-03%20at%209.26.43%20AM.png?alt=media\&token=d276eb45-6fad-445e-961b-2ddfa86dc6ee) Once it loads, you'll be prompted for updates. Press **Update** to see your changes take effect. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDp53krHFyNOHNTBcO9%2F-MDp8_dSxMJ7XHpH1Ygh%2FScreen%20Shot%202020-08-03%20at%209.27.17%20AM.png?alt=media\&token=8c170acb-a559-4ddd-ae10-6f7af9f28bf3) ## 9. Wrapping Up Voila! You now have pushed content from your design to a spreadsheet, created a new content version and pulled that new version into your design. This is just the basics. Explore all the features and become a pro. You'll be amazed at the content systems you can create with a spreadsheet! # Features Features of ContentSync for Adobe XD ## Push Content Push content from your design to your spreadsheet. {% content-ref url="/pages/-MDp4pfdpJO7CdfJyvrr" %} [Push Content](/plugins/adobe-xd-plugin/features/push-content) {% endcontent-ref %} ## Pull Content Pull content from your spreadsheet into your design. {% content-ref url="/pages/-MDp4tLf9WAo1DoHhl1Z" %} [Pull Content](/plugins/adobe-xd-plugin/features/pull-content) {% endcontent-ref %} ## Image Syncing Learn how to switch images per content version. {% content-ref url="/pages/-MDoxJaoVmr7GBRbIApv" %} [Image Syncing](/plugins/adobe-xd-plugin/features/image-syncing) {% endcontent-ref %} # Push Content Upload a content version from your design to your spreadsheet. > A **Push** will send data from your design to your spreadsheet and create new sheets and keys. One of the easiest ways to get your spreadsheet up and running quickly with a design is with the **Push**. Pushing content can also be helpful when you want to make content updates from within your design file. ## Push Content To push content, select the layers you want to push and press **Push > Push Content**. This will update the selected content version and only the layers that are selected. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDp8trZjsFDm3MD46Bc%2F-MDpAAKkSN5cr9UY9IIL%2FScreen%20Shot%202020-08-03%20at%209.34.28%20AM.png?alt=media\&token=502b16be-7166-4716-b3f5-2cc386bb21de) ## Push Designs ContentSync does allows designs to be pushed to the ContentSync platform for additional features however this is not supported in Adobe XD at the moment. ## # Pull Content Download content from your spreadsheet and apply them to your design. > A **Pull** will download content from your spreadsheet and apply it to your design. The Pull is the main workhorse of ContentSync. The Pull lets you update your design as your spreadsheets get updated. As will a push, the Pull will update the selected layers. {% hint style="warning" %} Adobe XD only allows certain layers to be modified at a time. This typically becomes an issue with components. ContentSync will do its best to prompt you to select which group of layers to update but note that Adobe XD {% endhint %} ## Spreadsheet Pull A spreadsheet pull will do a full update from your remote Spreadsheet. This may take a few moments as the data is downloaded but it ensures it will be the most up to date content. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDpABh2Od10HzSQwGsp%2F-MDpAkFtaqQcu1dRdntG%2FScreen%20Shot%202020-08-03%20at%209.36.59%20AM.png?alt=media\&token=5bacdbf3-4e8d-4dc7-a07c-0d1035f5124d) ## Quick Pull Sometimes you may want to update parts of a design quickly with data that is already downloaded. The **Quick Pull** lets you apply previously downloaded data from a Spreadsheet Pull to the selected layers. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDpABh2Od10HzSQwGsp%2F-MDpBP1_gJyj-_rrscCU%2FScreen%20Shot%202020-08-03%20at%209.39.51%20AM.png?alt=media\&token=0022dd1d-8343-481d-8807-6484e78e41fd) # Image Syncing Change images per content version! You can also change images per content version. {% hint style="info" %} Note that syncing images only works on **Pull**. {% endhint %} ## Content Format Images is the spreadsheet are set by URL. Some spreadsheets allows for formatting so the image appears in the spreadsheet itself. Refer to the spreadsheet docs for more info. {% hint style="info" %} Images must be publicly available. {% endhint %} As an example, you may have something like this in your spreadsheet: | Key | Version 1 | Version 2 | | ------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | | Welcome Image | | | ## Syncing Images Select the layer you'd like to sync and press **Pull > Spreadsheet Pull**. You can do a Quick Pull if you have already pulled the data. Once pulled, you will be prompted to confirm the updates. The update will preview the image update: ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDpCEmwQ0x2FGh4rprJ%2F-MDpHtpG2dKYR65TjjRa%2FScreen%20Shot%202020-08-03%20at%2010.07.52%20AM.png?alt=media\&token=ed9e1048-c175-4876-964b-61d6b549320a) Pressing update will update the image in the design! ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDpCEmwQ0x2FGh4rprJ%2F-MDpI0Zrg4yJ1fZOAMAV%2FScreen%20Shot%202020-08-03%20at%2010.08.44%20AM.png?alt=media\&token=41df4d17-d3ae-474b-82d9-edcf7e4ba9a0) # Sketch Plugin ContentSync for Sketch! Sync your content from a spreadsheet into your Sketch designs and vice-versa with ContentSync for Sketch. ## Features ContentSync natively supports Sketch and includes deep integrations such as: * [Symbol Override Support](/plugins/sketch-plugin/features/symbol-overrides) * [Symbol Swapping](/plugins/sketch-plugin/features/symbol-swapping) * [Image Syncing](/plugins/sketch-plugin/features/image-syncing) {% content-ref url="/pages/-MDWYQ8QIAWBqXF7TMlk" %} [Features](/plugins/sketch-plugin/features) {% endcontent-ref %} ## Interface ContentSync also provides a custom UI so syncing and customizing is quick and easy. The main panel lets you quickly set your content version to push and pull content: ![ContentSync Main Panel](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDkjjZ4CMJU-kKEdNev%2F-MDkrdab6BYuQrSmrOTQ%2FScreen%20Shot%202020-08-02%20at%201.30.22%20PM.png?alt=media\&token=81c940a8-3565-45ac-bb65-924e98597440) ContentSync also includes a layer panel inspector to customize keys and configure settings: ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDkjjZ4CMJU-kKEdNev%2F-MDkrgfg4yH6a_7OLcea%2FScreen%20Shot%202020-08-02%20at%201.30.29%20PM.png?alt=media\&token=aab18bd0-856e-4bbd-940f-f57e21b6e6ce) For symbol instances, ContentSync lets you customize keys for overrides as well as the type key for performing symbol swapping: ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDkjjZ4CMJU-kKEdNev%2F-MDks6HfIhuFKVOvgnt2%2FScreen%20Shot%202020-08-02%20at%201.32.42%20PM.png?alt=media\&token=c1eedf21-7800-4fb0-acdf-7799193ef00d) ## Get Started {% content-ref url="/pages/-MDWYMJ0\_A8ZHyGtCbYc" %} [Sketch - Getting Started](/plugins/sketch-plugin/getting-started) {% endcontent-ref %} # Sketch - Getting Started Get started with ContentSync and Sketch! ## 1. Download & Install Download the [ContentSync Sketch Plugin](https://contentsync.com/download/sketchplugin). Open the file and you should see the ContentSync for Sketch installer. Double click on the highlighted file: **SketchContentSync.sketchplugin**. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDpOfwKG5Tz4dkfVVZH%2F-MDpSgRJNnErlKRAotHy%2FScreen%20Shot%202020-08-01%20at%202.33.40%20PM.png?alt=media\&token=bd5da0c6-0d86-4561-b4a9-f43eb929dcd9) Confirm the Sketch will dialog box confirming you would like to install it. Now that ContentSync for Sketch it installed, you will have the new ContentSync interface panels added to your Sketch. ## 2. Download The Start File Download the [contentsync-intro-walkthrough.sketch](https://contentsync-public-files.s3-us-west-1.amazonaws.com/contentsync-intro-walkthrough.sketch) starter file and open it in Sketch. You can also see a [reference google spreadsheet](https://docs.google.com/spreadsheets/d/1QgfqH2-Agqe31oBkUUF8YYSWvkzFyA98FJKVJreoWkY/edit?usp=sharing). ## 3. Create an Account Once the file has opened, you will notice a new ContentSync panel installed at the top right of Sketch. Click the **Click to Start ContentSync** button to get started. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDfvhACmkfVe-Z4XAI_%2F-MDfx_zsWmTXfPAjrvQ4%2FScreen%20Shot%202020-08-01%20at%202.38.29%20PM.png?alt=media\&token=23f088e7-00e1-4772-b6ec-d563306f94da) This will open the login / signup window. Go ahead and log in with either your Google or Microsoft account to simplify setup. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDfvhACmkfVe-Z4XAI_%2F-MDfxqYapSsJdtL1XvgJ%2FScreen%20Shot%202020-08-01%20at%202.39.40%20PM.png?alt=media\&token=3bc4ea20-d76c-4795-9154-85b1ce19c7d7) ## 4. Create a Project Once you have logged in, the ContentSync pane will now prompt you for a project. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDfvhACmkfVe-Z4XAI_%2F-MDfy81vIi50UNol3Nsn%2FScreen%20Shot%202020-08-01%20at%202.40.56%20PM.png?alt=media\&token=1807dc93-3bef-4f01-816f-50d4c435c456) Click on Select / Create Project to get the dropdown then select **New Project**. Go ahead and fill in the project name and description as you would like and press **Create Project**. {% hint style="info" %} If for some reason the Create Project loading takes too long or fails, go to your [ContentSync Platform](https://www.contentsync.com/?dashboard=1) dashboard. From there you can update your project to link properly if there was an issue. If the project is stuck in "Project is creating the spreadsheet", press esc and then press "Connect/Create Spreadsheet" again. {% endhint %} ## 5. Push Content Once your project is configured, you can now select the version to use. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDfvhACmkfVe-Z4XAI_%2F-MDg--Thjb0Emk8JnQYt%2FScreen%20Shot%202020-08-01%20at%202.49.06%20PM.png?alt=media\&token=416bafb7-f40c-42b9-8181-95031ec1edf5) Once you select or create a version, press **Push**. Once complete, your content will appear on your spreadsheet! ## 6. The Spreadsheet ContentSync automatically create the spreadsheet on your account for you. Click on the gear icon on the right side and then **Open Spreadsheet** and your new spreadsheet will open. ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDfvhACmkfVe-Z4XAI_%2F-MDg-JPwJvQoCcSig8pb%2FScreen%20Shot%202020-08-01%20at%202.50.27%20PM.png?alt=media\&token=b9e6ee65-27a0-4736-9105-439f75e48aed) ## 7. New Version Now you can modify the spreadsheet by adding versions and changing content however you would like. ## 8. Refresh Versions In order for ContentSync to recognize new versions on your spreadsheet, you must refresh the versions from Sketch. To do this, press the refresh icon within the versions dropdown: ![Refresh Icon - Will pull new versions from the spreadsheet](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDfvhACmkfVe-Z4XAI_%2F-MDg04T5eVG52v2NOOc0%2FScreen%20Shot%202020-08-01%20at%202.53.24%20PM.png?alt=media\&token=379270a1-104d-44cd-bccc-c9fedc8a3c7d) ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDfvhACmkfVe-Z4XAI_%2F-MDg08_gZVhAyUlCFTeg%2FScreen%20Shot%202020-08-01%20at%202.53.33%20PM.png?alt=media\&token=4d626228-3929-487d-97e5-778ba5a8239a) Once this is complete, your new versions will appear in the version dropdown! ## 9. Pull Content Now that your new version is in the dropdown, select the new version and then press **Pull**. This will update your design to content of the new version! Congratulations, your first Sync! ## 10. Explore Now that you understand the basics of ContentSync, you can explore the power of all the features. Learn how to customize keys, use type overrides, sync images and more! # Features Features of ContentSync for Sketch ContentSync for Sketch is deeply integrated into Sketch and includes many features: ## Image Syncing Image syncing allows image layers and overrides to be dynamically changes per content version. {% content-ref url="/pages/-MDWYXQTb1XzT2vOt0cP" %} [Image Syncing](/plugins/sketch-plugin/features/image-syncing) {% endcontent-ref %} ## Symbol Overrides Set symbol instance overrides per content version. Create truly dynamic and powerful content structures. {% content-ref url="/pages/-MDWYZFtQ0LK4fYvQptx" %} [Symbol Overrides](/plugins/sketch-plugin/features/symbol-overrides) {% endcontent-ref %} ## Symbol Swapping Changing symbol instance types per content version. Create highly customizable designs per content version. {% content-ref url="/pages/-MDWYZDalEYI5n-c\_bHL" %} [Symbol Swapping](/plugins/sketch-plugin/features/symbol-swapping) {% endcontent-ref %} ## Content Styles Sync more than just words. Synchronize text styles too! {% content-ref url="/pages/-MDWYZ0XXnQDejRmXB6D" %} [Content Styles](/plugins/sketch-plugin/features/content-styles) {% endcontent-ref %} ## Multiple Sheets Sync to multiple sheets within your spreadsheet. {% content-ref url="/pages/-MDWYhAawwxiiA9ePzN0" %} [Multiple Sheets](/plugins/sketch-plugin/features/multiple-sheets) {% endcontent-ref %} ## Saved Sync Defaults Some details on how ContentSync for Sketch saves your settings. {% content-ref url="/pages/-MDWYkUfuUz-5hy\_2V9i" %} [Saved Sync Defaults](/plugins/sketch-plugin/features/saved-sync-defaults) {% endcontent-ref %} # Image Syncing Changes images per content version. ## How It Works By setting images in your spreadsheet, you can have ContentSync dynamically swap images for each content version. {% hint style="info" %} Image syncing only works when pulling images. {% endhint %} ## Spreadsheet Format To sync an image, the image must be set in the spreadsheet for the content key of the image layer. ### Raw Image URL The easiest way is to set the value of the key to the URL of the image you would like to use. Make sure these urls are publicly available so Sketch can access it. ### Image Formula You can also use image formulas on Google Spreadsheets so you can preview the image in your spreadsheet itself. Simply set the value of the cell to `=image("https://path/to/image.png")`. ## Layer Support ### Symbol Instance Image Overrides Symbols with image layers or fills may provide image overrides. The key of override for the image will be used to sync the image. ### Bitmap Layers Not currently supported. ### Shape Layers Not currently supported. # Symbol Overrides ContentSync supports syncing to symbol overrides! Library symbols too. ## Symbol Instance Overrides Each symbol override is given a content key which can be mapped to content. You can customize these keys just as you can with text layers too. The default content key of an override is the same as the layer's name. ![The default key is the layer name of the override.](https://www.contentsync.com/assets/docs-concepts/example-layer-inspector-symbol-c2340e61f907376d2679980105cb901ec9fb3530c40fb3864f9210620fd10f91.png) ## Key Context Each symbol instance can be given a context which prefixes its override keys. This helps group content keys and organize your spreadsheets. ![Setting the Context adds a prefix to each override key.](https://www.contentsync.com/assets/docs-concepts/example-layer-inspector-context-1e54287f0122ce48c20f936f5ef1e2275d046634e6825e8b519e926d1c44f31a.png) Even with the context enabled, you can still override the value with a customized key. ## Cleaning Up Large Override Lists If your symbol has a large amount of overrides, you can prevent specific overrides from syncing by disabled them. To disable syncing an override, click the **X** next to the override content key. ![Disable the title override of the symbol.](https://www.contentsync.com/assets/docs-features/sketch-overrides-disable-fc0ab9929dbd367a88b5f4a05fd7282c8ab17bc1f28d4b0733fceabb6c24de72.png) Now the disabled override will not be synced. {% hint style="info" %} Disabled overrides also bubble up to any symbol that includes it. {% endhint %} If the symbol is used within another symbol, notice how the disabled content key is automatically disabled: ![](https://www.contentsync.com/assets/docs-features/sketch-overrides-nested-5d6be80aede9c23086aefce2cf73f25693a204fbe7593f71904beb87a57e4e70.png) ## Nested Symbols By default, contexts are disabled which means the key over any nested override is the same as the layer name of that override. ![Even in a nested symbol, the override key is the same as the layer's name.](https://www.contentsync.com/assets/docs-features/sketch-symbols-nested-defaults-ab8569d2c885e40bbbf37831d7c759253fe0a0daa972ffe22421aa258767dd9b.png) Custom content keys behave the same and bubble up to any symbols including it. If the layer was given a custom key it would be shown as the override key on the symbol: ![](https://www.contentsync.com/assets/docs-features/sketch-symbols-nested-custom-0d15575b3f4138592c1d856db4497df1ddd39ca7839dd644525349f4c9ae039a.png) If contexts are enabled on a symbol, it will also bubble up. This is helpful for pinpointing an override key to a specific override of a specific symbol. ![](https://www.contentsync.com/assets/docs-features/sketch-symbols-nested-context-cb81d72e900d3636631a6fceb737d96f8cf9fb828ce14c37bb3422673f203c30.png) ## Library Symbols Library symbols are supported too. ContentSync will read the saved ContentSync settings on the library and apply them the same a a local symbol. # Symbol Swapping A powerful way to create dynamic designs per version. When you need more than just content variation between content versions, symbol swapping can help create completely customizable designs. ## Symbol Type Key {% hint style="info" %} A type key is a content key that represents a symbol's type. {% endhint %} By enabling the type key on a symbol instance, you can specify the symbol's type by the value of the key. The value is represented by the name of the symbol to use. ## Swapping Symbol Instances Enabling the Type Key will create a key to target a symbols key. The value of the key is the name of the symbol to use for the symbol instance. ![](https://www.contentsync.com/assets/docs-features/sketch-symbol-type-key-simple-01359bb85c9be388cbb38bfde320b2be0d0e773d4ce08e6421a9aa9f3fdb1518.png) In the case above, `Title Card 1.type` will be the type key and it will be given the value of **Simple Card** (which is the name of the symbol). By changing the value in the spreadsheet, you can change the type of the symbol instance per version. ## Swapping Nested Symbol Instances The same principle can be applied to nested symbols. The main symbol will have a symbol override type key which can be used to change the nested symbol's type. ![](https://www.contentsync.com/assets/docs-features/sketch-symbol-type-key-override-dca37a5530cd27e0b09667d18a27810e7195692bcb26aad510b80f872c2545d8.png) ## Example In the simple chatbot example there are two symbols: **bot\_message** and **person\_message**. ![](https://www.contentsync.com/assets/docs-features/sketch-symbol-type-example-bot-symbols-86328f7f3fee98705c7b50ea6ff792b28301985d3f27b0e4987dd49e02dd9499.png) The base design has multiple of these symbols to demonstrate of conversation with three messages. ![](https://www.contentsync.com/assets/docs-features/sketch-symbol-type-example-bot-version-1-f9e665f789c674fdbae02671043cb93906c988dee6c0babeda9176357f6917e3.png) With the type key enabled, doing a push would result in the following spreadsheet: | Key | V1 | | -------------- | ------------ | | message-1.type | bot\_message | | message-2.type | bot\_message | | message-3.type | bot\_message | We can quickly create two new versions: | Key | V1 | V2 | V3 | | -------------- | ------------ | --------------- | --------------- | | message-1.type | bot\_message | bot\_message | person\_message | | message-2.type | bot\_message | person\_message | bot\_message | | message-3.type | bot\_message | bot\_message | person\_message | Now, when we sync, the type of each symbol instance will be updated to the content version: ![Syncing V2 changes the symbol instance types.](https://www.contentsync.com/assets/docs-features/sketch-symbol-type-example-bot-version-2-9737b2a060358522b0de1909cbe2f766d210dec976834da90d413f145dbe9788.png) ![Syncing V3 changes the symbol instance types.](https://www.contentsync.com/assets/docs-features/sketch-symbol-type-example-bot-version-3-582a9ac053d8eccf4d8788d8eb64736486406f70c39bf666aa2566be0c290ab6.png) This shows how the content versions can be used for more than just content but also design. By switching symbols you can create highly customizable content versions. # Content Styles Update text properties too. ContentSync also lets you sync content styles. {% hint style="info" %} Only some spreadsheets allow for syncing styles. {% endhint %} {% hint style="info" %} Content Styles are only supported on text layers. {% endhint %} ## Supported Styles These styles are supported: * Font Size * Font Family * Font Color * Font Weight * Alignment * Transform * Bold * Italic * Underline * Strikethrough ## Enabling Syncing Styles Syncing styles can be enabled per layer. To do this, toggle the **Sync Text Layer Styles** option on the ContentSync Layer Inspector. Then each style property can be toggled to sync. ![Enabling syncing text style properties.](https://www.contentsync.com/assets/docs-features/sketch-styles-a41553bdc14fe322ab3186dca099c857372151227ce8cba5d14b41e2c76edb41.png) ## Synced Content When enabled, ContentSync will try to map styles between the spreadsheet and the text field. Each spreadsheet does have limited styling abilities so read more about each spreadsheet's support for more details. {% hint style="info" %} For example, Google Spreadsheets does not support decimal font sizes. {% endhint %} # Multiple Sheets Organize your content across multiple sheets. By default, ContentSync will pull content from all of your spreadsheet sheets. Any new content pushed to your spreadsheet will default to the main sheet. You can specify which sheet a layer is synced to within the ContentSync Layer Inspector. Look for the sheet customization icon: ![Customize Sheet Icon](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDkuGrJvIjMXzg0tE1o%2F-MDkuzIvG6hhIjfx0kEk%2FScreen%20Shot%202020-08-02%20at%201.45.14%20PM.png?alt=media\&token=59cc257a-21eb-40c5-968d-4c6fb8805ada) Once toggled, the sheet customization field will appear and you can customize the name of the sheet you want to sync to: ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDkuGrJvIjMXzg0tE1o%2F-MDkvGyr1oEI49ffJMtq%2FScreen%20Shot%202020-08-02%20at%201.46.34%20PM.png?alt=media\&token=205a8b0e-7804-4fc8-a16f-56ea51873f88) Now, when synced, the content will appear on your customized sheet. {% hint style="info" %} Content Keys should only appear on one sheet per content version. If you have the content key in multiple places the once chosen to sync is not guaranteed. {% endhint %} # Saved Sync Defaults ContentSync will save certain settings after a push. These settings can be cleared but they are created to ensure syncs stay consistent as designs may change. {% hint style="info" %} Saved settings are important to note as your keys and design structures change over time. {% endhint %} ## What are saved settings? By default a layer's content key is the layer's name. However, once a design is synced, the content key used to sync is saved to that layer. This means that future layer name changes will not update the content key. {% hint style="info" %} Once a layer is synced, its content key will no longer update if the layer's name is changed. {% endhint %} ## Saved Setting Status Once a layer has been synced, a green checkbox will appear next to the key. This key signifies that the current key has already been synced and is mapped to the spreadsheet. ![A synced and saved key will show up with a check icon.](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDkvo7DdyvkfpiNXs1_%2F-MDkxH6tsWQi_LjyEk3I%2FScreen%20Shot%202020-08-02%20at%201.55.15%20PM.png?alt=media\&token=af3b1d49-8f1b-4016-8111-2e969b3f35c7) If a key that has already been synced is changed, it will show up as an undo icon until it is synced again. ![A saved key that has been changed will show up with an undo icon.](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDkvo7DdyvkfpiNXs1_%2F-MDkxdg5i5slnX2zTq6P%2FScreen%20Shot%202020-08-02%20at%201.56.55%20PM.png?alt=media\&token=ebcad473-a2ef-4dd6-a7d7-b3133d8796d7) Clicking on the undo icon will present the options to restore the previous settings or clean the setting. ![Clicking on the undo icon will give the option to restore or clear the settings.](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDkvo7DdyvkfpiNXs1_%2F-MDkxuWAoMHBrqGBYZFc%2FScreen%20Shot%202020-08-02%20at%201.58.03%20PM.png?alt=media\&token=0b42c9d1-7f4f-473e-a6a2-0b8bad315b5d) ## File Settings If settings are changed such as key prefix or suffix, you may want to reset all the saved settings across a file. Without doing this, previously synced files will not use the new file settings. To do this, go to Project > Settings > More Settings ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDkvo7DdyvkfpiNXs1_%2F-MDkyj_FUZ3qI5wslPzH%2FScreen%20Shot%202020-08-02%20at%202.01.39%20PM.png?alt=media\&token=508bcf37-6e3e-49b2-baf5-72b15741a1cc) These options include clearing all the saved key settings or completely resetting all layer settings (enable/disabled type keys and overrides). ![](https://1554041498-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDWTX8OcRpD4pfUmZFB%2F-MDkvo7DdyvkfpiNXs1_%2F-MDkypRKKTYrdJxp0ORQ%2FScreen%20Shot%202020-08-02%20at%202.02.04%20PM.png?alt=media\&token=a22dc2c3-bbad-4b83-8ecb-eff7876f9b06) ## # ContentSync.API() ContentSync can also be used from other Sketch plugins too. Use ContentSync.API() within Sketch plugin code to integrate and extend ContentSync. ## ContentSync.API().versions(callback(ok, data)) `ContentSync.API().versions(...)` will return a list of versions from your linked ContentSync project. Callback should be a function which takes two parameters, `ok` and `data`. #### Function Definition `ok` - `true` if successful, `false` if error `data`- List of `version` objects if `ok==true` and error details if `ok==false` asasa `version` - Object of the format: ``` { name: string, syncable: boolean } ``` #### Example An example Sketch script which would print out the versions looks like this: ```javascript function withV(v){ console.log(v); } // Fetch ContentSync versions and print them out ContentSync.API().versions((ok, data) => { if(ok) data.map(withV); if(!ok) console.log("Error: ", data); }); ``` ## ContentSync.API().pull(versions, callback(ok, data)) Coming soon. ## ContentSync.API().syncSelection(version\_name, data, selection, callback(ok, data)) Coming soon. ## Development `ContentSync.API()` is still in early development. Please contact us or create a [Github](https://github.com/contentsync/SketchContentSync) issue to request additional features or report any problem. # Troubleshooting ## Token has been expired or revoked ![Token has been expired or revoked in Sketch](https://mail.google.com/mail/u/0?ui=2\&ik=8b468de30a\&attid=0.1\&permmsgid=msg-f:1674209659927157221\&th=173bfcd0bb7c59e5\&view=fimg\&sz=s0-l75-ft\&attbid=ANGjdJ_YMSw2rZcapOtypkJYozWygnl12w3qGYapKfJKSPLntMdaPFO4gFjZHObQIP-6XBCYSuBy0VlFKO0hnCqgviv_OEK3o5nTC3PMhhDYDtgbFyMACB073JG-egA\&disp=emb\&realattid=fd928b620d56c10a_0.1.1) Get the "Token has been expired or revoked" error in Sketch? Go to your dashboard at [www.contentsync.com](https://docs.contentsync.com/plugins/sketch-plugin/www.contentsync.com) and [renew your authorization](/platform/contentsync.com#renew-an-authentication). # Troubleshooting ## My content wont Sync Properly Make sure your spreadsheet is linked properly in your project and the layout of our spreadsheet is correct. **Always make sure your content key column if your first column.** ContentSync uses the first column to match your content to your design elements. # FAQ ## Is there a Figma Plugin? Our Figma plugin is in the works! Check back frequently for updates. If you'd like to be part of our beta users, email . ## Does ContentSync work with Abstract? Yep. ## I can't find an answer to my question. No problem! We're here to help. [Contact us!](/contact-us) # Security & Data ## Data & Encryption All ContentSync data is encrypted at rest with AES-256. All communications with ContentSync are secured over HTTPS. ## Data & Storage ContentSync stores information necessary for services. This including storing sync data for a period of time while syncs and associated services are being performed. ContentSync may store this information for up to 30 minutes. Design images and data will be stored if you do a design sync. This feature is completely optional but is required to use our canvas view. All images and information are securely stored to ensure only permitted users have access for a limited amount of time. ## Data & Access **All spreadsheets are owned by your account.** The spreadsheet is owned by your account, ContentSync just has access to it. At any point you can revoke our access. All of your Google and Microsoft data is accessed through their APIs through a verified OAuth authentication you provide to ContentSync. You can revoke that access any time through [Google](https://myaccount.google.com/permissions) and [Microsoft](https://docs.microsoft.com/en-us/cloud-app-security/manage-app-permissions#working-with-the-oauth-apps-page). ContentSync uses that authentication during services to sync your data with a spreadsheet. Data is updated through our API to theirs and passes through our servers to properly map and sync data for our services. #### Google Permissions The permissions you give ContentSync only allows us to access and modify spreadsheets we create on your account. You can revoke our access at any time and continue to have your spreadsheet within your Drive. #### Microsoft 365 Permissions The permissions you give ContentSync only allows us to access and modify spreadsheets we create on your account. You can revoke our access at any time and continue to have your spreadsheet within your Drive. ## Payment Processing All payment processing is done through our payment processor, [Stripe](https://stripe.com/), and credit card details are stored outside of our architecture. # Contact Us ## Support Contact our support team for questions about features, issues getting started or general questions. ## Sales Contact our sales team for details on sales, integrations and training. ## Enterprise Contact our support team for questions about features, issues getting started or general questions.