😎 🛠🛠🛠
Аннотации в Figma и почему надо приучать себя использовать их прям вот щасДо последней обновы дизайнеры, которые хотели как-то дать уточнения к своим макетам, упражнялись по-разному: писали комменты, использовали плагины, ручками создавали фреймы с пояснениями. Всё это чтобы расставить инфо-акценты над важными частями макета, пояснить как для команды, так и для заказчика. А иногда и для себя пометки сделать, что тоже немаловажно.
А теперь фигмовцы добавили нативный инструмент Annotation. Лежит он рядом с комментариями, устроен просто: ткнув инструментом в нужный элемент, получаем облако аннотации с категориями и свойствами, которое висит вне фрейма и не режет глаз.
Облако аннотации состоит из:
➡️
Категории. Позволяет сразу определить, к чему конкретно относится аннотация. Из коробки категорий четыре: разработка, взаимодействие, доступность, контент. Категории можно добавлять свои, тут всё на откуп вашему умению структурировать информацию. Само собой, категории можно кодировать цветом, чтобы быстрее ориентироваться.
➡️
Самой аннотации. Текстовый блок. Пока не поддерживает картинки и спец знаки (кроме стрелок) , но, думаю, это довезут. Поддерживает емодзи.
➡️
Свойств объекта. В зависимости от того, какой элемент выбран для аннотации, в этом блоке появится набор его свойств из панели properties. Это могут быть цвета, размеры, гэпы, паддинги, радиусы скругления углов и т.д. Ткнули в свойство — зафиксировали, что аннотация относится именно к нему. Так, например, легко дать понять, что фраза «вот эта хуйнюшка важна для общей консистентности» относится к паддингам в 16px. В одной аннотации может быть несколько свойств.
В режиме разработки аннотации показывают разрабу всё самое нужное: если в теле аннотации был акцент на корнер-радиусе, то это свойство и подсветится при клике.
На обложке этого поста вы можете увидеть главную страницу сайта (сорри за блюр, пока в разработке), вокруг которой налеплено 27 комментов. Все эти комменты налепил я при передаче сайта в разработку и, поверьте, это ещё малое количество. Сделаны они были с помощью плагина, а теперь их место займёт новый инструмент аннотаций.
Документирование своей работы, умение передать идею, ответить на все вопросы до их появления — это важнейший скилл, развитию которого, к сожалению, уделяется очень мало внимания на курсах и, тем более, при самообучении. Порой на глаза попадаются работы, при просмотре которых возникает больше вопросов, чем печатных знаков в этих работах:
Каков принцип, по которому определяется расстояние между блоками?
На какой экран пользователь попадёт при тыке сюда?
Мы используем правый флаг только в этом месте и больше нигде?
Это часть UI кита или единичный элемент?
И
это всё должно быть вменяемо описано.
Работа дизайнера, хоть на фрилансе, хоть в компании, в любом случае командная. Если вы этого ещё не поняли — поймите. Как минимум есть вы и заказчик, это уже не один человек.
Когда нет прямых и постоянных коммуникаций, фиксировать свои мысли, подходы и идеи необходимо, чтобы безболезненно их донести до других. Например, до верстальщика, который будет отдуваться на вашем макете, или копирайтера, который обязан осознавать, что для заголовков в карточках вы заложили две строки текста, а всё, что больше — попадёт под кат.
В конце концов, и до самого себя донести, чтобы не забыть.
Что касается применения аннотаций как дизайнерских хардов: я думаю, что теперь, когда это нативный инструмент фигмы, с ним будут просить (или требовать) работать как с автолэйаутами или переменными. Они появятся в списках требований вакансий под холёными формулировками типа «Уметь документировать дизайн-решения». И это логично, особенно для студий и компаний.
2️⃣3️⃣9️⃣
#инструменты
@denyadumaet
