Режимы Annotations и Measurement добавили в Figma в инструмент комментариев

Когда дизайнер устает кричать в пустоту, он делает аннотацию. Или в крайнем случае пишет в Notion. Или, как раньше, рисует стрелочки на скрине и отправляет в Telegram, надеясь, что разработчик поймет, что имелось в виду под «тут кнопка должна быть активной, но не кликабельной».

Figma наконец услышала наши мольбы — и добавила аннотации. Причём не просто жёлтые стикеры по углам, а полноценную систему комментирования с категориями. Плюс туда же — инструмент редлайнов (Measurement), который мы привыкли видеть в Zeplin, Avocode и прочих приложениях из доисторической эпохи. Всё теперь можно делать прямо внутри макета. Без боли. Почти.

Что такое аннотации в Фигме

Аннотации — это такие комментарии, но умные. Они живут внутри макета и сразу дают понять, зачем они тут. На скриншоте видно: теперь можно выбрать категорию аннотации, чтобы сразу обозначить контекст. Это как если бы ты пришёл на встречу с бейджиком «я тут по accessibility, не бейте».

Figma добавила четыре категории:

• Development — для того, что касается верстки, логики и того, что «должно работать».
• Interaction — поведение, анимации, ховеры, фокусы и прочие «по наведению появляется бордер».
• Accessibility — шрифты, контраст, таб-индексация.
• Content — всё, что связано с текстом, заглушками, переводами и смыслами.

Каждая категория подсвечивается своим цветом, как теги в таск-менеджере. Это даёт тебе возможность быстро пробежаться по макету и отфильтровать только то, что нужно разработчику, копирайтеру или тимлиду по доступности.

Как создать аннотацию в Фигме

Если ты хочешь оставить аннотацию в Figma, тебе нужно:

• Найти кнопку комментариев в нижней панели — но теперь она с секретом.
• Нажать и выбрать не Comment, а Annotation.
• Щёлкнуть по нужному месту на макете и оставить текст.
• Выбрать категорию аннотации (Development, Content и т.д.).

Интерфейс простой, как дверной звонок. Но главное — теперь это не просто комментарии, а системный инструмент, который помогает команде ориентироваться в хаосе проектных задач.

Measurement: редлайны в Фигме

Рядом с аннотациями тихонько пришёл ещё один подарок — Measurement. Тот самый режим измерений, который показывает расстояние между объектами. Прямо как в Zeplin. Только не надо никуда экспортировать.

Чтобы включить редлайны:

• Нажми на иконку аннотаций и выбери Measurement.
• Наведи на элемент, потяни от него стрелку — и Figma покажет тебе расстояние в пикселях до другого объекта и привяжет эту стрелку.

На скрине видно: 100 пикселей между картинками. Всё красиво, по делу и без лишней болтовни.

Эта штука спасает, когда нужно объяснить разработчику, что между кнопкой и текстом не «на глаз» отступ, а строго 16 пикселей. И если будет 15 — макет умрёт.

Зачем всё это дизайнеру

Аннотации в Фигме — это не про визуальный шум. Это про системную коммуникацию. Ты не просто пишешь «вот тут не так», ты говоришь:

• «Это относится к разработке».
• «Тут важен текст, не перепутай с lorem ipsum».
• «При наведении должно быть поведение, вот здесь».
• «Цвета важны для доступности, не трогай».

Раньше мы всё это держали в голове, или в худшем случае — в Google Docs на 80 экранов. Теперь можно вкладывать эти знания прямо в макет. Без пояснительных записок и фраз «там в Notion есть описание, сейчас найду».

Вывод

Annotations в Figma — это как надписи на дверях в лабиринте: куда идти, что важно, а что не трогать. А редлайны — это линейка, которая всегда под рукой.

Теперь дизайнер может не быть Шерлоком, который догадывается по следам пикселей, что хотел автор. Всё можно оставить прямо в макете, и не бояться, что смысл потеряется на этапе продакшена.

Если ты ещё не пользовался аннотациями — самое время попробовать. Они уже доступны, работают без костылей, и экономят тебе кучу времени. А заодно и нервы.