Installing the plugin

  1. Download the latest version of the plugin
  2. Open the zip file then double click the .sketchplugin file inside it to install the plugin.
  3. Restart Sketch
  4. Login to Atomic by choosing “Atomic > Login / Logout of Atomic” from Sketch’s Plugins menu.

Note: We currently only support the latest version of Sketch.

Using the plugin

In Sketch navigate to the “Plugins > Atomic” menu and select from the options provided:

  • Sync All Artboards – will sync all artboards on the current page. Artboards will be imported in the reverse-order they appear in the Layers panel in Sketch, so the artboard at the bottom of the Layers panel in Sketch will be the first page in Atomic. Any artboards added after the initial sync will be added to the end of the document in Atomic.
  • Sync Selected Artboards – you need to have one or more artboards selected to use this option. 

If you have not logged in to Atomic yet you will be prompted to do so. If you’re already logged in, and this is the first time you have synced from the document, you will be prompted to choose from the available Sync Settings.

Sync settings

The sync settings you choose for the current Sketch document will be remembered for all subsequent syncs you perform. You can change these settings at any time by choosing “Atomic > Sync Settings” from the Plugins menu.

Project

Choose a project from your account. If you belong to multiple teams, all your projects from across your teams will be available.

Prototype or component to sync with

Choose from any of the prototypes or components in the project selected. The document you choose here will be remembered for subsequent syncs with the current Sketch file until you change it.

Sync each artboard as

There are three levels of granularity available when syncing:

  • One image – this will completely flatten artboards and import them as a single image. Use this option when no interaction is required on individual elements, or for early stage screen-based prototyping.
  • Multiple images with groups flattened – each top-level layer whether it’s an element or group will come into Atomic as a single image. Use this option when you’d like to animate or add interaction to groups, but not the individual elements within them. Also useful for minimising the number of layers in your prototype.
  • Individual elements – every layer on the artboard will be brought in as an editable element where possible, or an image, and the folder structure of your layers with be retained. Use this option when you’d like to animate or add interaction to individual elements. Also useful if you want to use custom data or form elements in your prototype.

Size

Choose the resolution you want any images to come in to Atomic as:

  • 1x images will be standard resoluton and faster to load
  • 2x images will be double the resolution, so slower to load, but will look crisper on Retina and other high resolution displays

How changes in Sketch or Atomic are handled between syncs

Pages and artboards

  • Any reordering or renaming of pages you do in Atomic will be retained between syncs. Any reordering or renaming of artboards in Sketch after the initial sync will not be reflected in Atomic.
  • Any pages added to Atomic between syncs will be retained
  • Any artboards deleted from Sketch between syncs will remain in Atomic. This is to prevent accidental deletion of pages that have interaction set on them that should be retained.

Elements

  • Actions added to elements and pages in Atomic will be retained between syncs
  • New elements added in Atomic will be retained between syncs, including hotspots, components and other common elements
  • Changes made to elements in Sketch will always be reflected in Atomic after a sync. This includes adding, deleting, renaming, repositioning, reordering and re-styling elements. 
  • Style and layout changes made to elements in Atomic that exist in Sketch will be reverted to match what’s in Sketch after a sync. This includes adding, deleting, renaming, repositioning and reordering elements.

What elements come across as editable in Atomic

When using the “Individual elements” sync setting, the plugin will create editable elements in Atomic wherever it can. Wherever it can’t the elements will be converted to images. The presence of the following styling will cause elements to be converted to images:

  • Gradients or Textured fills
  • Multiple fills, multiple borders or multiple shadows
  • Center or Outside borders (Inner borders are OK)
  • Blurs
  • Blend Modes (other than Normal)
  • Lines with a Start Arrow, End Arrow or with custom Dash/Gaps defined
  • Text that uses a font not supported in Atomic
  • Text that contains characters and words with different styling within one element
  • Text that uses double underline or list types (e.g. Bulleted lists)
  • Text that uses a Paragraph Spacing other than 0

Using layer prefixes to customise how elements are synced

When using the “Individual elements” sync setting, you can add the following characters to the start of your layer name in Sketch to affect how the element will be synced.

  • *  will cause a group or symbol to be flattened into a single image
  • ^  will force an element to come through as an editable element. Any styling applied to the element that Atomic does not support will be ignored.
  • -  will prevent the element from being imported into Atomic. This only applies to individual elements being exported and not the contents of groups.
  • svg  will bring the layer in as a SVG vector image

Tip: to maximise performance, flatten any element that will not be animating, by using the prefix ‘*’ in group layer names in Sketch before syncing the file. You can also flatten groups by selecting ‘Multiple images with groups flattened’, in the Plugin sync settings.

Troubleshooting

  • Using a font which you have also uploaded to your Atomic project (in .woff format) but text elements are still being flattened on import?
    First, check the outline above which explains when text is flattened. If that doesn't explain the flattening,  check that the filename of the uploaded font matches the version being used by Sketch, if the .woff filename is different, Atomic won't be able to make a match. In this situation, you can either re-upload your font with a matching filename, or prefix text layers with the ^ character then manually change the font after import.

Related articles:

Did this answer your question?