Sharing Native Prototypes & Workspace Documents

Topics covered in this Sketch tutorial:

Sharing a Prototype with Others, Workspace Documents

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to share Sketch documents and prototypes with clients, developers, for user testing, etc.

Sharing a Prototype with Others

1. In Sketch, go to File > Open Local Document.
2. Navigate into Desktop > Class Files > Sketch Class > Pulse and double–click on Prototyping Done.sketch to open it.
3. Go into the Sketch menu and choose Preferences.
4. Click on the Account tab.
5. If you’re not already signed into Workspaces, click Get Started and sign in.)
6. Once you’re signed in, close the Preferences window.

7. As shown below, near the top right of the Toolbar click the Collaborate button .

   

8. Click Save to Workspace.

   NOTES: Saving to Workspace is the same as doing File > Save As and choosing the To a Workspace tab.

   This design is using Arial (a standard system font), but if you’re using custom fonts you would need to embed the fonts as follows: Go into File > Document Settings. In the Fonts tab, change the menu for each font to Embedded.

9. Everything set properly, so click Save.

10. Click the ••• part of the Collaborate button and choose Share Document (you have to wait for the file to finish uploading to see this).

    

11. A web browser will open. If you aren’t already logged in, sign in now.

12. Once you’re logged in, you should see a Document Settings dialog. Here you can decide what you want to allow people to do:

    • Click the Sharing tab.
    • To the right of the link, click on the permissions menu (which probably says No Access and choose Inspect. (and check on the option to Enable comments.)
13. Click Done.
14. If it says Processing document wait until it finishes.
15. You should now see Prototypes, Screens, and Symbols. Click on the Prototype to view it.
16. Click on Shop New Collection to see it works just like it did in Sketch.
17. At the bottom right, click View Artboard.
18. On the right side of the page should be an Activity panel where you can comment. If you don’t see this panel, at the top right click the button.
19. At the top right of the page, switch to the Inspector.
20. In the page, click on elements to learn more about them: font, size, color, etc.
21. In the Inspector on the right you can hover over something (such as a color) and click on it to copy it (which is useful for when developers are coding).
22. With one element selected, hover over other elements to measure the distance between them.

23. Keep this page open in your browser, and return to Sketch.

Making Changes

1. On the Autumn Collection artboard, double–click on the text New Autumn Attire and change it to New Fall Fashion.
2. Do a File > Save.
3. Switch back to the Sketch website which should still be open in your web browser. If you closed it, in Sketch click the ••• part of the Collaborate button and choose View in Browser to reopen it.

4. To see all the pages, at the top of the webpage click the Prototyping Done file name.

   On the right, you should see a panel with Updates. Click on the most recent version.

   Starred Updates

   To control over which updates other people see, star the updating by choosing File > Save and Star within the Sketch app.

   • If no updates are starred, others will see the most recent update.
   • If one or more updates are starred, others only see the starred updates (seeing the most recent starred update by default).

   This lets you save as often as you like, and when you’re ready to share the update with others, you star that update. On sketch.com in the sidebar, you can add/remove stars under Updates.

5. Click on the Autumn Collection artboard to see the new text.

Deleting a Workspace Document

1. At the top left of the page, click the button and then All Documents.

2. Hover over the file you want to remove, and click the button that appears.

3. In the menu, click Delete and confirm the deletion.