Need to transform design to code? Don't hardcode it, Avocode it!
See how
July 6, 2016

How to keep your PSD and Sketch designs safe and in order?

Content Marketing Manager at Avocode.

"I write for those who want to be seen..."

With a big design team comes great responsibility. As a project owner or a designer, you are responsible for all the designs that you create and share with your team. Thanks to cloud sharing, you can organize and backup your design files at the same time.

It's OK to have your head in the cloud. At best if it's SSL 128 encrypted.

There are multiple great file-sharing solutions like Dropbox or Google Drive. However, these services are not so great for visual things. If you want to preview formats like Photoshop or Sketch and perhaps even comment on top of them, I believe that Avocode is the best fit. If you're interested in how you can share and cooperate on a design, maybe have a look at this.

However, before you get there, you might want to find the best solution for sorting and organizing your designs in a place that is accessible to everyone on your team. There are two ways how you can do this:

1. Drag and drop

Files like Photoshop or simple PNG or JPEG images can be simply drag & dropped into Avocode. You can do that either in your Avocode app or in Avocode Manager.

Would you like to add a drag & drop feature to your app? We're using this open source React.js library.

2. Use our plugin

If you'd like to upload Sketch files or even separate Sketch artboards, use our plugin. First, some links to get you going:

You can get the Photoshop & Sketch plugin here.

Great. Now just open your Sketch design, click “Plugins”, then “Avocode Sync” to open the Avocode Extension and select the artboards you wish to sync.

Once you've selected those gorgeous artboards, pick a project or create a new one. Then click the blue button and just watch your designs as they sync. Feels good, right?

Watch it all in action: 


Now put things in order

You already know how to add new designs. You can add them into projects (drag&drop into the folder) or as revisions (drag&drop on top of an existing design). Now have a look at the entire file structure in Avocode. Let's start from the top:

  1. Team (Usually there is one team for each billing unless you are in the Enterprise plan. However, you can be still logged into multiple teams and switch in between them.)
  2. Projects (You can have as many of these as you want.)
  3. Designs (Again, keep uploading as many designs as you want.)
  4. Revisions (Each design can contain multiple revisions. You can preview them chronologically or compare them side by side.)

And what else can you do?

  • Sort your designs by name or by the time of last modification.
  • Search for designs in your entire team or in your designs.
  • Select a design, press SPACE and get a preview without actually going into the design (only in Avocode app).
  • In each design, you can either see comments and comment, take a look at revisions or get the full-screen preview.

Do you work with freelancers and perhaps need to manage who sees what? Easy. Check this.

OK, now you should be ready to go. You can add and upvote for features you would like to see within Avocode by going to our UserVoice. Please let us know how you proceed during your design workflow below.

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: