Call for feedback: Working with documents in the web app

Hi, I’m Tim :wave: You may have bumped into me around the forum already, but if not, I’m the product manager and technical lead for the Sketch web app.

While we’re busy working away on improving our existing product and adding new features, I’d love to know about your experiences with the web app.

Here are four key areas of the web app, that my team and I are keen to have more user feedback on. We want to hear how you make use of the features in each area:

  1. Sharing documents with your team and others (sharing and permissions features)
  2. Developer handoff in the web app (Inspector and asset exporting)
  3. Organising and finding your documents (Project and search)
  4. Notifications and staying up to date

How to give feedback
Simply reply to this topic. If you can, attach a screen recording for specific examples or issues — a picture (or video) paints a thousand words, and would be incredibly helpful for us in better understanding your feedback.

1 Like

One thing that I noticed is that working between web app and mac app is still not a streamlined experience that it should be to feel like one product.

There are a few examples. First one that comes to mind is creating a new file in the project. On web app there is no way to add a new file. Even if that is not technically possible from web, there should maybe be a button to create new file and it somehow redirects to the Mac app with automatically pre-filled new document modal with the corresponding project etc.

Another similar example is commenting. One thing that is missing in mac app is a view with all comments, which exists in web app. This is an opposite example where web app offers more than mac app but it should not be the case. As a mac app user I should care very little about web app. Web app is more for other collaborators and viewers.

Good example of feature parity is file sharing which works on both platforms and you don’t have to think about where you need to perform the action.

3 Likes

Sharing documents with your team and others (sharing and permissions features)

  1. Internally, my design team sends each other links to their documents, usually from the toolbar overflow menu in the desktop app. This opens the web browser, and the “Edit in Sketch” opens it in the app. This is personally inconvenient where my OS insists on opening it in Sketch Beta, so I have to note the filename and manually open.
  2. All engineers, PMs, and designers currently gave access to all documents and projects. This may change with enterprise work in the future, but for now we have little use for extensive access rights for our small team.

Developer handoff in the web app (Inspector and asset exporting)

  1. Developers consistently do not find the Inspector tab unless linked, and when do, do not discover the right-click layer tree. Once taught about the right-click menu, they expect it to be available in all tabs, not just Inspect, so the behavior feels unpredictable.
  2. The layer tree in Sketch documents often won’t match implementation, and so it would be helpful to indicate a “reference” layer to start with. I’ve been doing this through naming layers, but that’s difficult to enforce.
  3. The lack of some type of “variant” structure is an ongoing frustration. I’ve got infinite symbols for every permutation of a UI element, and then have to extensively and manually document to explain the relationship between props.
  4. Asset exporting has never been particularly useful — some assets devs need, others they don’t, and the versions used in Sketch designs are rarely the production versions. This isn’t saying the feature isn’t useful, but that it’s not useful for us.
  5. The color token live-link (dunno what it’s called) is super useful, and similar systems for other tokens would be similarly used. We’d prefer integrating these to our build systems than relying on manual self-serve exports.
  6. The lack of subfolders/collections means we have a ton of projects, and have to separate feature or platform projects from their specs. We don’t want dev in the creative and iterative files, but now have a ton of top-level projects, making navigation difficult.
  7. Search is an ongoing pain, behaving inconsistently.
  8. We need a way to “resolve” comments. Today, a designer and dev may discuss a control in a comment thread, but without a way to mark a comment as resolved, the only way to reclaim that space on the canvas is to delete the root comment. This quickly doesn’t scale.

Organising and finding your documents (Project and search)

  1. See above — noted there since designers will find workarounds whereas non-design collaborators just ask for guidance.

Notifications and staying up to date

  1. Without being able to resolve comments, every new comment is incremental noise and makes it hard to keep up.
  2. Explicit document versioning + commits/changelog would be a major value add. We do this on-canvas today, but that’s hard to enforce.
  3. “Starring” documents is overly restrictive and lacks transparency. I initially understood it as a way to version a library for use in other files, without understanding that it would prevent non-editors from seeing document updates. Then, without changelog/commit/versions for starred updates, “starring” is trivialized.
8 Likes

While our team isn’t currently working with Sketch Workspaces, we’ve been analysing it in order to probably start using it instead of Abstract.

A few things we’ve missed…

We miss the option to hide documents to viewers. While you can choose which projects share with them, once a project is shared, everything in it is shared. We’d love to have the option of adding new documents to a project but not share them with our developers yet or, change the status of a document from visible to not visible, work on it, and make it visible again.

I find that the right-click layer panel on the inspect mode is not very usable. Even for us, designers who have named the layers, it’s difficult sometimes to find what we’re looking for, imagine how it is for developers…

Some ideas:

  • Highlight in the design the layer that the user is currently hovering while the panel is being showed.

  • Add an option to see the whole artboard layer list. I think it’s easier to orientate yourself in a design when you have the whole structure in front of your eyes, and not only a part of it.

I think you already mentioned that you were working on the possibility of having folders inside of projects. That would be great (and getting back to my first comment, please don’t forget to make the visibility of those folders an option).

Apart from that, having a tag system would help in some complex situations. We have set a design system for a really complex product. Folders might help, but won’t do all for us. Tags would let us categorise in many ways (Some of our documents might apply to several customers or several technologies at the same time) and a tag based search might be useful for developers in order to find what they’re looking for and be sure to which client applies or not (for example).

3 Likes

I also forgot: In the artboard inspector, please include a left and right arrow to navigate to the previous and next artboard. I know this can already be done with the keyboard, but it’s not that obvious to much people.

2 Likes

Hi, I would quite appreciate the possibility of sharing the link to the specific artboard within the project. The Mac app now only allows copying the link to the entire project. However, if the project contains higher dozens of individual artboards, it is often a tedious process to search for a specific artboard within the web app, then you have to expand the artboard detail and then copy the link address from the browser. Some kind of “one-click” solution would save quite a lot of time.

7 Likes

Hey @alecvse interesting point! Probably a good addition this topic as well.

I would love to be able to share just some pages of the project. I don’t like devs or clients seeing what’s still work in progress or may “pasteboard”.

It would be nice to be able to easily select several versions of the document history and delete them.

1 Like

A more streamlined way share specific pages and art-boards from the app would be helpful. I’m often copying links into slack and adding them to tickets and I find I have to go to the web app and navigate to those pages to get the links. It’s an extra few steps.

One issue I noticed is that when you are viewing an artboard in the comment tab you can pinch and zoom in pretty smoothly and it will only zoom in on the canvas. However in the inspect tab, if you pinch and zoom it will zoom in entire browser. So the only way to properly zoom in inspect is with the zoom tools provided in the interface. Using those is a lot more cumbersome that using the keyboard or track pad.

A feature request I’ve long had is to have some kind of Collections feature similar to what Abstract has. I cannot express enough how useful that feature is and I miss it every day since switching over to sketch workspaces.

Thanks for the feedback @wwwedran!

We’re actively investigating how we can expand our Mac app’s URL scheme to unable us to do exactly this, and provide a richer “deep-linking” experience between the web and desktop apps.

Thanks for taking the time to write such a detailed response, @wil :star_struck: I’d love to briefly respond to some key points you raise :man_bowing:

This is something we sometimes struggle with internally too! Many of us use tools like SwiftDefaultApps as an interim solution to “force” a default app for Sketch documents.

Thanks for sharing. we’re aware of the fact our handoff tools aren’t obvious to everyone, and we are actively reviewing the user experience of the document view in the web app, with the aim of improving the discoverability and usability of tools like handoff (Inspect & asset export), annotations, and sharing.

I think its fair to say that a shortcoming of the current asset export feature is that it relies on designer-specified exports defined within the document (using the slice tool/export panel). We have discussed the possibility of allowing users in the web app to create exports from any selection in the inspector, and download these directly. Would this be something that improves the usability for you and your team?

I’m glad you found this useful! We do have a long-term goal of expanding our token export for both text and layer styles.

We’ve been working on a solution for this over the last couple of months, and hope to share more with you and the rest of the community soon :pray:

We’ve actually just shipped a “Resolve Comments” feature in the web app and the latest beta release of the Mac app :eyes: You can begin resolving annotations and comments in the web app today, and you can expect to see in the stable Mac release soon!

I’ve heard similar feedback from others recently. As part of our work reviewing the document view and sharing documents, we intend to make it clearer as to what version of a document a given user role will have access to. We do provide a way for users to add “Descriptions” to versions, effectively allowing for manual changelogs, but I suspect the visibility of this feature could be improved.

Again, thanks for the feedback @wil!

Thanks @pinker. We are indeed working on a new feature to help with the organisation of documents within projects, and you can expect to see that soon :pray:

Tagging documents is something we’ve been discussing a lot internally. I too see them as distinct from projects and folder-like organisation of documents, and that tags would span the entirety of your workspace. Effectively becoming part of searching and filtering documents. Thanks for the feedback on this, its very useful :pray:

@leohans @mste thanks for this feedback :pray: It’s something I and others at Sketch hear a lot from our users. We are actively working on reviewing and improving our sharing features, and we’re keen to improve the experience around sharing documents (or parts of them) with clients.

@jkilp Thanks for sharing this one. Currently our inspector uses a different (and older) mechanism for rendering the artboard, which is why we have this stepped zoom behaviour. Using the new canvas rendering with the inspector is a goal of ours, however I’ll discuss this with the team and see if there is an short-term interim solution.

2 Likes

An easier way to get to Inspect.

1 Like

While I’m sure there are improvements to be made to the web app (I guess Figma is the competitor driving your focus here), but I’d also think about your strength.

We use both Figma and Sketch. Figma for wireframes and discussion, Sketch to actually create graphics etc. We want files that we can store long-term, and ideally more scripting on a computer and in CI-servers, for e.g. automatic translations of text inside graphics, automatic conversion of font text to vector outlines (since embedding custom fonts inside SVGs is tricky), and similar things.

These are areas where you have an advantage over Figma. Not sure if only playing catch-up with them on the web-app front is a good strategy.

1 Like

I’m glad you’ve shared this @sandstrom!

We’re very much focused on ensuring we play to the strengths of our web app. We believe that the web app is the home of the workspace, and workspaces are the hub where design work meets people :muscle:

We will be playing to our strengths, focusing on proving better features for organising your work, finding the specific document you want to work from, and ensuring that the many types of workspace members (designers, engineers, and clients) are able to get what they need from any given document (handoff and token exports, giving and receiving feedback, improving the sharing experience etc)

Sounds good! I’m not saying that you shouldn’t focus on the web app, and obviously if you’re the lead for that part of the product, that’ll be all you’re thinking about :slight_smile: (which is how it should be)

But from my point of view, Figma is already better in collaboration and easily sharing mockups (a lot of the stuff that happens before we’ve commited to a particular design). So unfortunately you’ve already lost us there.

We do use Sketch still though, for authoring any design assets and files (mostly SVGs in our case). For us, this is where you still have an advantage. However, what we’re lacking there isn’t mostly collaboration, it’s more about automation, tooling, CLI integration and scripting. Most of the is for the macOS app, but some of it could be cloud too.

For example, we could likely use some type of API access to documents in the cloud, to see if they’ve been updated. If they’ve been updated, we could then trigger an automatic translation job for new translation strings.

Just mine two cents though, you should weight this with other feedback.

My main point is really this, don’t try to chase Figma too much. Do your own thing, and play to your strengths. Recognise that Figma is (and likely will remain) better than you in some areas. That’s not the end of the world. It’s better to be 1st in your own niche, than 3rd best elsewhere.

1 Like

A public API is something that continues to be requested, and has popped up a fair bit on this forum already too. It is something I know we’ve looked into previously, and I will be discussing it again with my colleagues.