Using GIFs with Atomic

Using GIFs with Atomic

Here are three simple ways to use gifs with Atomic:

gif-in-gif.gif

Place a GIF into your prototype

To add life to your prototype, you can easily place a GIF within a design. Simply bring the GIF in one of the ways as you would a regular image:
– Drag and drop
– Use the image uploader in the left toolbar
– Using the shortcut (I)
– Copy and Paste from another drawing tool (such as Sketch)

When you import multiple gif files, you’ll have the option to either place them all on one page, or create a new page for each GIF.

history-main.gif

Show how you got here with a GIF of your edit history

Show others quickly and easily how you got to your current position with an easily shareable gif.

There are dozens of ways to create animated GIFs of your prototype. If you haven’t already, grab a tool like CloudApp or Claquette. (If you’ve never made a GIF before you’ll be surprised how easy it is using these tools).

Record the editor screen, and use the History slider to scrub forward / back to demonstrate to others how you got to where you are.

Here are a some tips:
– Prepare your screen – get all the ducks in a row before you press record
– Keep them short – gifs are well suited to short captures
– Trim the gif: Open the gif file, for example on a Mac using Preview, and delete the pages you don’t need.

preview.gif

Use a GIF to share a WIP prototype

Do you want to one particular aspect or interaction within your prototype , but don’t want anyone playing with the actual WIP prototype?

Using CloudApp or Claquette, take a gif of a preview screen to show how the work is progressing.

Got any tips you’d like to share? We’d love to hear them. Hit us up on Twitter.

Not using Atomic yet? Try it free