This article explains how to sync your Sketch symbols to Atomic Components.  Components are reusable ‘symbols’, that can be interactive, and/or store static states. 

If you’re a first time user of the plugin, start by checking out the article on using the Sketch Plugin

Step 1: Sync your Sketch artboard to make an Atomic prototype

First, use the Atomic Sketch Plugin to sync your artboard — including any Symbols — to Atomic. 

Step 2: Convert Symbols to Components 

Your symbols are now in Atomic as single-state elements. Convert them to reusable Atomic Components.

In Atomic, select the symbol elements would like to convert, then select ‘Component’ at the top of the screen (shortcut ⌘ + 3). Give it a meaningful name.

Step 3: Change your sync settings 

Now you’ve created the Component in Atomic, we need to sync specific Symbols from Sketch. 

When you are syncing Symbols to different Components, you’ll have to change the settings each time.  

In Sketch, switch to your Symbols page and then from the navigation select “Plugins > Atomic > Sync Settings” view. Find and select the  Atomic Component you made in Step 2 then save your changes. Now any artboards you sync from this document will sync to the selected component. 

Step 4: Sync your symbol variations to your component

In Sketch select all of the the Symbol artboards you want to sync across to into that Component. Then, navigate to “Plugins > Atomic > Sync Selected Artboards” (shortcut ⌥ + ⌘ + L). 

Each symbol artboard you selected is now  available as a page within your Atomic Component. 

Tip: To finish, delete the first page from the Component as it’s now redundant - it doesn’t have the sync connection.

Step 5: Using Atomic Components

You can now place instances of the Component anywhere in your prototypes and any changes within the Component will be reflected in every instance. Change the ‘state’ of an instance to display a different page.

Add any interaction or animation you like. See: Adding interaction to your prototypes.

When you make changes to the Sketch Symbols that you’d like reflected in Atomic, simply repeat step 3 and 4. 

Tip: When changing between syncing the whole Sketch file and individual Symbols, be sure to update your sync settings to target the corresponding prototype or component. 

Did this answer your question?