Advice and answers from the Atomic Team

Importing assets into Atomic is a great way to start prototyping your existing prototypes from another tool.

Drag and drop or Import

We currently support .PNG, .JPG, .SVG and .GIF files.

There are a few different ways to import your elements from another prototype tool into Atomic:

  • Drag and drop
  • Use the image uploader in the left toolbar
  • Using the shortcut (I).
  • Copy and Paste
  • Use the Sketch Plugin to import from Sketch

If you’re manually exporting the images out of Sketch first, it’s a may be useful to export as SVG. This way the vector parts of the image will remain scalable, without losing any resolution.

When you import multiple images you’ll have the option to either place the images on one page, or create a new page for each image.

Multi-page Import

When selecting a new page for each image, each page will automatically be sized to match the dimensions of the image on that page.

If you select a new page for each image, images will be placed in alphabetical order. If you have many images to import, and would like them to import in a specific order, you may like to prefix the names. E.g. 1-home; 2-menu; 3-options etc. Note: the order of pages is based on the following hierarchy: numbers, capital letters, lower-case letters.

When sharing your prototype, if a user is on a desktop they’ll be able to click through the pages easily or navigate left/right using arrow keys. If they’re on a mobile you’ll need to put a hotspot on each page first.

Copy and paste from Sketch or Photoshop

You can copy and paste your assets into Atomic as raster images using keyboard shortcuts. Please note that vector formats and copying from Illustrator are not yet supported.

Handy shortcuts    
• Copy from Sketch Cmd + C  
• Paste from Sketch Cmd + V  
• Copy from Photoshop ↑ + Cmd + C  
• Paste from Photoshop Cmd + V 

Drag layers from Sketch

You can drag and drop one or more layers or Artboards from Sketch straight into Atomic. When you do this, Sketch will send layers over respecting any export settings you may have configured. To set or change your format preference, select a layer in Sketch, click ‘Make Exportable’ and update the settings. As mentioned above: export images as SVG to bring your assets come across in a nicely scalable way.

Using the Sketch Plugin

Alternatively, you can use the Sketch Plugin to send all or selected artboards from Sketch straight into a prototype in Atomic.

Next →  
Sketch Plugin

Related articles:

Did this answer your question?