Figma 주석 기능 등장! 이제 플러그인 없이도 가능!

기존의 코멘트(Comment)는 피드백이나 질문을 위한 기능이었습니다. 하지만 디자인 정의서처럼 정제된 정보를 개발자에게 전달하려면 별도 문서가 필요했죠. 그래서 많은 디자이너들이 노션이나 스프레드시트에 따로 정리하거나, Annotation 플러그인을 설치해 화면에 직접 표기하곤 했습니다.

이번에 추가된 Figma 주석 기능은 그런 불편을 덜어주는 공식 기능입니다. 참고로 주석은 디자인 모드에서도 작성할 수 있으며, Dev Mode에서는 주석과 함께 측정값, 스타일 정보, 토큰 등이 함께 표시되어 개발자 입장에서도 더 유용합니다.

실무자에게 왜 유용할까?

플러그인 설치 없이 기본 제공
디자인 화면 위에 직접 주석 입력 가능
카테고리 분류로 정보 전달이 명확
노션, 구글 문서 없이 Figma 하나로 정의 + 전달
Dev Mode에서는 측정값과 함께 핸드오프에 최적화

이제 디자이너는 디자인 화면 위에서 설명을 끝내고, 개발자는 같은 화면에서 스펙과 설명을 함께 볼 수 있습니다.

실제 활용 흐름: Figma 주석 기능 이렇게 씁니다

컴포넌트별 상세 설명 추가하기

예를 들어, 앱 아이콘에 접근성 정보를 함께 전달하고 싶다면 해당 컴포넌트를 선택한 후, 주석 기능을 활성화하고 ‘Accessibility’ 카테고리를 지정하면 됩니다.

이 주석은 해당 요소에 ‘고정’되며, 위치나 프레임이 이동해도 따라다닙니다. 개발자는 노션이나 별도 문서 없이도 이 정보를 디자인 화면에서 바로 확인할 수 있습니다.

팁: 주석은 Shift + E 단축키로도 빠르게 추가할 수 있습니다.

인터랙션 정의도 한눈에 가능

예전에는 “스크롤 시 고정됨” 같은 동작을 말로 설명하거나, 프로토타입을 따로 만들어야 했습니다. 이젠 컴포넌트를 선택하고 ‘Interaction’ 카테고리를 설정한 뒤 간단히 텍스트만 입력하면 됩니다.

주석은 읽기 전용이며, 다른 사용자가 내용을 수정할 수 없습니다. 실무에서는 피드백 코멘트와는 완전히 다른 목적의 도구로 활용됩니다.

주석 카테고리로 정보 구조화

주석 기능은 단순한 메모 기능이 아니라, 카테고리 분류 + 색상 설정이 가능한 구조화된 설명 도구입니다. 현재 제공되는 주석 카테고리는 다음과 같습니다:

지원되는 카테고리는 다음과 같습니다:

Interaction – 스크롤, 클릭 등 UI 동작
Accessibility – 대체 텍스트, 키보드 탐색 등
Development – 여백, 크기, 색상값
Content – 문구, 텍스트 규칙 등

주석이 많아질 경우에는 우측 사이드바에서 카테고리별로 필터링도 가능합니다. 예를 들어 ‘Interaction’만 보이게 설정하면 관련된 주석만 집중적으로 검토할 수 있어 개발자나 기획자에게 매우 유용합니다.

측정값도 함께 전달하기: Add measurements

디자인 요소 간의 여백이나 크기를 시각적으로 전달하고 싶을 땐, 측정값(Measurement) 기능을 함께 사용하면 좋습니다. 이 기능은 주석처럼 Dev Mode 안에서 사용할 수 있으며, 정확한 간격 정보를 직접 지정해서 보여줄 수 있습니다.

측정값을 추가하는 방법은 다음과 같습니다:

상단 툴바에서 Measurement 버튼을 클릭하거나 Shift + M 단축키를 사용합니다.
측정의 시작점을 선택하고, 드래그하여 끝점까지 연결합니다.
필요하다면 측정선을 드래그하여 위치를 조정해 디자인을 가리지 않도록 정렬할 수 있습니다.
측정선을 더블클릭하면 텍스트를 직접 수정해 원하는 단위를 추가하거나 설명을 덧붙일 수도 있습니다.

이 기능은 특히 다음과 같은 상황에 유용합니다:

버튼과 카드 간 여백 정의
반응형 레이아웃의 최소/최대 너비 전달
시각적 가이드를 통한 QA 대응

팁: 주석과 측정값을 함께 쓰면, 개발자가 시각적으로 어떤 기준에서 어떤 수치가 중요한지 빠르게 파악할 수 있습니다.

놓치기 쉬운 팁과 실전 노하우

코멘트 vs. 주석 기능 차이

기능	목적	수정 가능 여부	주 사용 대상
코멘트	피드백, 논의	누구나 가능	팀 전체
주석	디자인 설명 전달	작성자만 수정	디자이너 → 개발자

이 둘의 용도와 목적을 구분해서 사용하는 것이 협업 효율을 높이는 핵심입니다.

실무에서 잘 쓰는 설정 팁

Interaction: 보라색
Accessibility: 파란색
Development: 주황색
Content: 초록색

이처럼 색상 규칙을 정해두면 여러 팀원이 동시에 작업해도 시각적 혼란이 줄어들고, 새 팀원이 온보딩하기도 수월해집니다.

Dev Mode에서의 활용 팁

Dev Mode에서는 주석을 클릭하면 해당 컴포넌트의 측정값, 여백, 색상 코드, 토큰 정보까지 함께 확인할 수 있습니다. 개발자 입장에서는 “이 설명이 어떤 스펙을 의미하는지”를 명확히 이해할 수 있게 됩니다.

→ Dev Mode 링크: https://www.figma.com/dev-mode/

마무리: 이런 분들께 특히 추천합니다

Figma 주석 기능은 디자인 설명, 인터랙션 정의, 개발 전달을 하나의 화면 안에서 해결할 수 있는 실무형 기능입니다. 특히 다음과 같은 분들께 추천합니다:

디자인 정의를 문서로 별도 전달하고 있는 디자이너
개발자와 UI 스펙 관련 커뮤니케이션이 많은 팀
디자인 시스템을 정리하고 있는 조직
QA나 사용자 시나리오에 맞춘 설명이 필요한 프로젝트

디자인 설명, 아직도 Notion에 쓰고 계신가요?
이제는 Figma 주석 기능으로 한 화면에서 깔끔하게 전달해보세요.

참고 링크

관련 글

새로 추가된 Figma 주석 기능이란?

코멘트 기능과 뭐가 다를까?