Focus makes logging in as simple as it gets. There are no passwords to forget - simply type in your email and copy and paste the authentication code you receive.
Set up your profile
Click on the 'avatar' circle located at the top right of the plugin panel to open the main menu. By clicking on the larger avatar circle, you'll be able to select an image you'd like to use as your avatar.
To change your display name and make it easier for others to recognize you on Focus, simply type your desired name into the field. All changes are saved automatically.
Important menu links
While you have the main menu open, you'll see a set of links you might find useful:
Account - Open your browser to manage your account and billing
Help - See the quick-start guide and access the help articles
Community - Easily find your way to our Discord community
Blog - Get latest updates from our team
Clicking the 'Log out' menu option will immediately end your current session and you'll have to log back in to keep using Focus. Don't worry though, all of your content is safely stored in the cloud and will be right back when you log in.
Inviting your team to Focus is as simple as typing in their email address and clicking 'Invite'. Once a member is invited, they will receive an email to notify them of their invitation.
When they log in to Focus, they will see your invitation in the Invitations tab of the Teams menu.
You can easily remove team members from your team by clicking the remove button when hovering them in the list.
What happens when a team member is removed?
The member will be removed as collaborator from all projects they've been added to. Additionally, if the member was the only admin of a projects in your team, a new admin will be elected. This will either be another collaborator if available or you, the team owner.
Customizing your team appearance
To make your team more recognizable to your team members as well as any external guests, you should set a team logo and name. This works similarly to how you'd change your profile avatar and name.
Teams and subscription plans
Subscriptions for our plans are based on teams. This means that you can choose to upgrade your team rather than your personal account. Similarly, you can choose to stay on the free plan while you join another subscribed team, for example your company team.
To become a member of your team on Focus, the team owner should add you using your email address. Following that, you'll receive an email notifying you of your invitation similar to the one shown below.
Once you log in to Focus, you'll see your invitation.
When you accept the invitation, you will be able to see all other members in the team.
Hovering the team you'd like to leave on the 'Other' tab of the Teams menu will reveal the leave icon. After clicking the icon, you'll have a chance to confirm your decision.
To get the most value out of Focus, it's important that you understand how your content is organized and structured. These are the main 'entities' that Focus is built on top of:
Team When you log in to Focus for the first time, a new team will be created for you. Teams are at the top of the hierarchy.
Project Whenever you start working on a new project such as a new app, new website or a new design of any kind, everything related to it should be contained within a separate Focus project. Projects always exist within a specific team.
Focuslet Acting as small sandboxes, focuslets are at the core of Focus and enable the powerful collaboration experience Focus offers. They are made up of the following entities such as views and hold together all your related content, discussions and tasks. You can think of them as more specialized and simplified Trello cards or Jira tickets.
View These are the images you upload and the artboards and layers you link within your design documents. Views are added to focuslets and provide the visual aspect. To allow all collaborators to see them, they are uploaded to Focus and can be accessed without the need for the original design document.
View version Views store a separate version each time you update them in order to keep all existing annotations intact and provide an easy way to track your progress over time.
Annotations Whether single point markers or marked up areas, annotations are part of view version and allow you to very precisely get your point across to the whole team. Thanks to annotations, you can get laser-targeted feedback from your team and clients and document intricate details of your designs.
Anatomy of a focuslet
Focuslets are the main building block of Focus. You can use the diagram below to familiarize yourself with their core components.
A project must always exist within a team. When you click 'Create project', you'll be presented with a modal asking you to select the team you'd like to create the project in.
Once you select the team, set your new project's name and select the collaborators you'd like to add. Collaborators that can be selected are based on the members in the team you've selected. Additionally, if you'd like any collaborators to also be able to update the project and change its collaborators, you can give them admin access.
Update a project and manage collaborators
While inside the project, clicking the 'more' icon will show a menu containing the 'Edit' option. You can easily rename the project and add and remove collaborators or change their admin access.
Archive a project
When you're no longer actively working on a project, you can archive it to keep your team tidy.
Please note that you cannot add or change any content inside of an archived project. A banner is shown at the top of the project screen. The 'more' menu will allow you to unarchive the project should you wish to make it active again.
To access archived projects, click the 'Archived projects' button which will toggle the project list between active and archived projects across all teams.
Delete a project
While a project is archived, it is possible to fully delete it. Deleting the project will permanently remove all of its content and all associated discussions. Please proceed with care as it's not possible to restore any project once it's deleted.
Clicking the 'Create focuslet' button while inside a project will create and immediately save a new empty focuslet ready for you to add content to.
Update focuslet content and tags
You can type any amount of content into the focuslet description area - if you're running out of space, you can use the drag handles at the bottom of the text area to expand it. The text you type is automatically saved in the background so there's no need to worry about saving anything.
You can also add views by linking artboards and layers as well as uploading images. In the example below, you can see that the 'Splash' artboard has been linked as a view.
To better organize your project, you can add tags to focuslets. Clicking the 'Add tag(s)' button will reveal a modal panel where you can easily add new or choose from existing tags.
Resolve a focuslet
When you're fully done with a focuslet you can resolve it to keep your project tidy. Think of this as marking the whole focuslet topic as done. Resolved focuslets can no longer be changed, however, the discussion remains open.
Watch focuslet updates
Whenever you create a focuslet, you'll automatically get subscribed to all updates to it. This way, you'll be notified whenever your team changes any of its content, adds new views and so on.
If you'd like to 'watch' a focuslet created by someone else, you can toggle on the watch switch within the focuslet updates modal panel. Now you'll be notified of all changes too.
Lock a focuslet
When you feel you've got enough feedback and comments to work with and want to prevent any further changes or discussion in this focuslet, as its creator, you can lock it. This will stop all collaborators from making any modifications or comments.
Delete a focuslet
As a collaborator of the project, you can delete focuslets within it. While viewing a focuslet, clicking the 'more' button will reveal the option to delete the focuslet in the menu. You'll need to confirm this action as it is not possible to reverse it. Once you delete a focuslet, all of its content will be permanently deleted.
Create and manage focuslet tasks
To keep track of your tasks directly in context, you can add them to your focuslets. Typing a new task in and pressing enter will save it.
You can edit a task by double-clicking its description or by using the 'more' menu option. Clicking 'Delete' will remove the task immediately without confirmation.
A bar across the top of the focuslet panel will indicate progress across all tasks. Hover it to see the exact number of tasks completed.
You'll also see progress bar on each focuslet with tasks within your project to quickly get a sense of your progress overall.
When you'd like to give your clients or other external guests access to everything that's going on within a project, sharing the project is the way to go. It allows them to stay up to date as you add more focuslets and collaborate with you across all of them.
Click the 'more' menu, select 'Share' and simply enter their email address to invite them to the project. When they log in to Focus, they'll see it right away.
Sometimes, you want to share just a small part of a project. For example, you might want to share an important focuslet about the brand styleguide with the marketing team without overwhelming them with all the other content within your project. Sharing a single focuslet is the perfect way to do this.
While viewing a focuslet, click the 'more' menu and select 'Share'. Similarly to how you'd share a project, simply enter the email address of the guest you'd like to invite. When they log in to Focus, they'll see the focuslet immediately.
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.
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.
At the bottom of every focuslet, you'll find the discussion section. Everyone able to access the focuslet will receive your comments as soon as you send them. It's a great way to have a highly targeted conversation about the topic of the particular focuslet.
Discuss private within your team
When you want to discuss internally with only your team, just toggle the private discussion on. This way, external guests will not see nor be notified of any comments your team sends. Great for those in-depth debates that only the team needs to know about.
Discuss with external guests
When you've got something to share with everyone, including external guests such as your clients, other departments and so on, you can use the toggle to the public discussion.
The blue dot next to the icon indicates that there are comments in the other type of discussion, whether private or public.
As you discuss, it's important to be able to quickly get back to the key points. We recommend that you pin all comments that directly provide actionable value to the focuslet's topic. This way, you can capture major decisions while keeping a full trail of reasoning in the same place.
Clicking on the 'pin' icon will let you toggle between all comments and only pinned comments. Use it for easy access to the comments that matter most.
Get others' attention by mentioning them. You can either select 'Mention' from the attachment menu accessible from the text field or by simply typing @. A list of people will be presented for you to choose from.
Once you select a person to mention, a special string will be inserted into your comment. You can see the person's email address and double-check you're mentioning the right person.
Once sent, the mentioned person will receive a notification and their name, or email address if they didn't set a name, will be shown in the comment.
Refer to views
Focus makes it extremely simple to get your point across without any excessive explanations. Open the attachment menu accessible on the left side of the text field and select 'View' to refer to a view available on the focuslet. It's a great way to keep discussion concise and unambiguous.
Refer to annotations
To go one level deeper, Focus allows you to refer to any specific annotation available across views added to the focuslet. This way, you can really focus in on the point you're trying to make in your comments. No more guesswork.
Best of all, all view and annotation references in comments are clickable. This means you can jump directly to them in an instant.
When you need a bit more than text to express yourself, you can add attachments to your comments. You can upload images but more interestingly, you can also link artboards and layers in your document. This adds another great way to refer to specific places in your document that's easily accessible.