Add, annotate and manage views

Link artboards and layers, upload images, drop pins and mark areas to annotate them with laser-targeted precision, and track progress with version history.

Adobe XD

Add artboards, layers and images as views

Views are the core visual element of focuslets and enable you and your team to add detailed annotations.

Select any artboard or layer within your document and click the 'Add the selected layer' button below the description area of the focuslet. The artboard or layer will be safely uploaded to Focus, available for all collaborators to interact with it. Thanks to this, you don't necessarily need to share your actual document.

Views added by linking layers retain the reference to the original layer. Hovering the view, you'll notice a small 'target' icon in the top right corner - clicking it will center your document canvas on the linked layer.

Adding images works in a similar fashion. Simply click the 'Add an image' button and browse for an image on your computer. The image will be uploaded to Focus and ready for collaborators.

While hovering an image view, you'll notice that it cannot be 'centered on'. This is because the original image is not within your design document.

Double clicking on the name of the view, such as 'Projects-Focus (3).png' shown below, will allow you to rename it. This can also be achieved by using the 'more' menu.

To the left of the view name, you can see the view ID, #2 in this case, and an icon denoting the type of this view, image in this case. Linked layers are represented by a diamond icon.

Annotate views

Clicking on the view will open the view modal. Click anywhere on the view canvas to add a new annotation. It will appear both on the canvas as well as in the side panel on the left where you'll be able to type in the annotation description.

Annotations are number from 1 onwards for each focuslet and their numbers always increase, even when you delete some annotations. This way, you can keep track and refer to annotations across all views and view versions added to the focuslet.

Double-clicking the annotation marker will toggle between a pin and an area. As shown below, the pin marker has been double-clicked and is now showing an area.

Drag the bottom-right corner of the annotation area to resize it. Drag the pin to move the whole annotation around and position it exactly where you want it.

Manage view version history

Focus allows you to keep track of multiple versions for each view. When you've made some changes, you can simply add a new version and get more feedback from your team and external guests.

Clicking on the 'Versions' icon next to the 'more' icon on the right of the view modal will reveal all versions available for the current view. You can quickly switch between versions by selecting the version you'd like to see.

Additionally, annotations on the left side of the modal are categorized by view version. Clicking on them will automatically take you to the version where the annotation was added.

When a version other than the latest is selected, the 'Versions' icon turns blue. The 'more' menu allows you to manage the view and the currently selected view version.