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.

Practice

1. What is the main purpose of adding documentation within Figma designs?

easy

A. To make designs easy to understand for everyone

B. To increase the file size unnecessarily

C. To hide design elements from viewers

D. To create complex animations automatically

Solution

1. Step 1: Understand the role of documentation in design

   Documentation helps explain design decisions and details clearly.

2. Step 2: Identify the benefit for teamwork

   Clear documentation improves communication and saves time for teams.

3. Final Answer:

   To make designs easy to understand for everyone -> Option A

4. Quick Check:

   Documentation purpose = clarity [OK]

Hint: Think about why notes help teammates understand designs [OK]

Common Mistakes:

• Confusing documentation with design decoration
• Thinking documentation hides elements
• Assuming documentation creates animations

2. Which of the following is a correct way to add documentation inside a Figma file?

easy

A. Hide all text layers to keep file clean

B. Delete all unused layers without notes

C. Use comments and text layers to add notes

D. Only use external documents, not Figma itself

Solution

1. Step 1: Identify documentation methods in Figma

   Comments and text layers are built-in ways to add notes directly on designs.

2. Step 2: Recognize why other options are incorrect

   Deleting layers or hiding text removes documentation; external docs are less integrated.

3. Final Answer:

   Use comments and text layers to add notes -> Option C

4. Quick Check:

   Documentation methods = comments + text layers [OK]

Hint: Remember Figma supports comments and text for notes [OK]

Common Mistakes:

• Thinking documentation means deleting layers
• Assuming external docs replace Figma notes
• Hiding text layers removes documentation

3. Given a Figma file with multiple pages, which page is best suited for detailed documentation notes?

medium

A. The first page with only images

B. A dedicated page named 'Documentation' or 'Notes'

C. The page with the most complex design

D. A hidden page with no access

Solution

1. Step 1: Understand page organization in Figma

   Using a dedicated page for documentation keeps notes organized and easy to find.

2. Step 2: Evaluate other options

   Notes on complex design pages or hidden pages reduce clarity and accessibility.

3. Final Answer:

   A dedicated page named 'Documentation' or 'Notes' -> Option B

4. Quick Check:

   Best documentation location = dedicated page [OK]

Hint: Use a separate page for notes to stay organized [OK]

Common Mistakes:

• Putting notes on complex design pages
• Hiding documentation pages
• Mixing notes with images only

4. You added comments in Figma but teammates say they can't see them. What is the likely issue?

medium

A. Comments require a paid plugin to be visible

B. Comments automatically delete after 24 hours

C. Comments only appear in exported PDFs

D. Comments were added but not resolved or viewed

Solution

1. Step 1: Check how Figma comments work

   Comments stay visible until resolved or dismissed by users.

2. Step 2: Understand common misconceptions

   Comments do not auto-delete, are visible in the app, and need no plugins.

3. Final Answer:

   Comments were added but not resolved or viewed -> Option D

4. Quick Check:

   Comments visibility = unresolved and viewed [OK]

Hint: Check if comments are unresolved and teammates have viewed them [OK]

Common Mistakes:

• Believing comments auto-delete
• Thinking comments show only in exports
• Assuming plugins are needed for comments

5. How can you best combine Figma documentation features to ensure your design is clear and easy to follow for a large team?

hard

A. Use a dedicated documentation page, add comments on key elements, and include descriptive text layers

B. Only add comments and avoid text layers to keep the file simple

C. Create multiple hidden pages with notes to avoid clutter

D. Export designs without notes and send separate documents

Solution

1. Step 1: Identify best practices for documentation in Figma

   Combining a dedicated page, comments, and text layers covers different documentation needs clearly.

2. Step 2: Evaluate drawbacks of other options

   Using only comments or hidden pages reduces clarity; separate docs break workflow.

3. Final Answer:

   Use a dedicated documentation page, add comments on key elements, and include descriptive text layers -> Option A

4. Quick Check:

   Comprehensive documentation = page + comments + text [OK]

Hint: Combine pages, comments, and text for clear documentation [OK]

Common Mistakes:

• Relying on only one documentation method
• Hiding notes instead of organizing them
• Separating docs from Figma file