Documentation within Figma - Step-by-Step Guide

Introduction

Documentation within Figma helps you add notes and explanations directly inside your design files. This makes it easier for your team to understand the purpose and details of each part without leaving the tool.

When you want to explain the function of a button or feature in your design.

When handing off designs to developers who need clear instructions.

When collaborating with team members who are not familiar with the design.

When you want to keep all project information in one place for easy reference.

When you need to track changes or decisions made during the design process.

Steps

Step 1: Select the frame or element you want to document

- Canvas area

The element is highlighted and ready for annotation

Step 2: Click the Comment button

- Top-right toolbar

Comment mode activates and a comment box appears near your cursor

💡 You can also press the C key to enter comment mode quickly

Step 3: Type your note or explanation

- Comment box

Your text appears in the comment box attached to the selected element

Step 4: Click the Post button

- Comment box

The comment is saved and visible to all collaborators

Step 5: To view or reply to comments, click the Comment icon

- Top-right toolbar

All comments appear in a sidebar for easy reading and discussion

Step 6: Use the Text tool to add permanent notes

- Left toolbar → Text tool

You can place text boxes with documentation directly on the canvas

💡 Use this for important notes that should always be visible

Before vs After

Before

Design file with no notes or explanations; team members ask questions frequently

After

Design file contains comments and text notes explaining elements; team understands design intent clearly

Settings Reference

Comment Visibility

📍 Top-right toolbar → Comment icon

Control whether comments are visible on the canvas

Default: Show all comments

Comment Notifications

📍 Account settings → Notifications

Manage how you receive alerts about new comments

Default: Email and In-app

Text Style

📍 Right sidebar → Text properties

Customize the appearance of permanent documentation text

Default: Depends on project style

Common Mistakes

Adding comments but not posting them

Unposted comments are not saved and cannot be seen by others

Always click the Post button after typing your comment to save it

Using comments for permanent instructions

Comments can be hidden or resolved, so important notes might be missed

Use the Text tool to add permanent documentation visible on the canvas

Placing too many comments in one area

It can clutter the canvas and make it hard to read

Distribute comments clearly and use text boxes for longer explanations

Summary

Documentation in Figma lets you add notes and explanations directly on your design files.

Use comments for quick feedback and the Text tool for permanent notes.

Remember to post comments and organize notes clearly to keep your team informed.