Базовый нейминг объектов в figma для UI/UX дизайнеров

В последнее время я получил несколько вопросов от начинающих дизайнеров о том, как лучше называть объекты в figma, и нужно ли их как-то называть. Рад, что этим интересуются и все больше дизайнеров начинают думать о том, как не плодить бесконечные «Frame6969». Про базовые способы нейминга, а так же для чего он нам пригодится, мы сегодня и поговорим. Здесь не будет «серебряных пуль» для того чтобы разрешить споры о нейминге в крупных компаниях с 100+ дизайнеров, но я постараюсь осветить базовый уровень гигиены для названий в макетах.

Здесь я хочу напомнить что все, что вы делаете, это продукт. Не только спроектированная фича для приложения, сайт или что-то еще, но и сам по себе макет. Этим макетом будете пользоваться вы, ваши коллеги дизайнеры, разработчики, райтеры и аналитики. И всем перечисленным может понадобиться легкая навигация внутри макетов. А именно ее и обеспечивает хороший нейминг.

C удобством навигации растет и скорость работы. Поэтому следить за названиями важно в проектах, которые находятся на стадии постоянных доработок. Например, это может быть новая фича в продукте, которую вы еще тестируете и возможно еще не раз будете докручивать. Но в целом, лучше привить себе культуру нейминга на уровне автоматизма, чтобы всегда собирать достойные макеты. Точно стоит следить за тем, как вы называете объекты при создании компонентов — это уже половина успеха в наведении порядка в названиях.

Ну и если вы сейчас в поисках работы, то есть еще один момент. В некоторых компаниях вас могут попросить показать ваши исходные файлы, и скорее всего, на беспорядок в объектах внимание обратят.

Для базового понимания, я бы хотел выделить два подхода — нейминг от типа объекта и нейминг от контекста верстки.

Названия идущие от типа объекта опираются на то, какой перед нами объект. Кнопку называем «button», заголовок — «title» или «heading», элемент списка — «listitem». Разумеется, базовых компонентов может быть несколько, и тут нам на помощь приходят модификаторы, например в зависимости от размера у нас может быть «small_button» и «regular_button». Как вы поняли из примеров, этот подход хорош для простейших компонентов, так называемых «атомов» и «молекул»(терминология из «атомарного дизайна»)

Второй подход опирается на контекст, то есть мы спрашиваем не «что это за объект», а «какой это объект». И тут у нас могут быть такие вещи как кнопка отмены «cancel_button», или заголовок карточки «card_title». Тут так же как и в первом подходе могут использоваться модификаторы размера, но их применение уже требуется реже, так как мы и так подробно описываем каждый компонент. Этот подход хорошо подойдет для сложных компонентов, таких как «шаблоны» и «страницы»

У обоих подходов есть свои плюсы и минусы, поэтому предлагаю использовать их одновременно. Для мелких компонентов лучше подойдет нейминг по типу, для больших вполне разумно использовать контекст. Таким образом закрывается большинство задач базовой дизайн системы или отдельного файла

Поговорим про то, какие модификаторы можно использовать в названиях компонентов. Самый часто используемый это, пожалуй, модификатор по размеру. Если вариаций размера компонента немного, можно использовать «regular», «small» и «big». Слово «regular» можно использовать как точку отсчета, для размера который чаще всего используется в интерфейсе. Если у вас много разных размеров, текстовый модификатор можно сократить — вместо «extra small» написать «xs», как на одежде. А если это какой-то нестандартный компонент с десятком—другим размеров, тут лучше всего подойдут цифровые модификаторы, например можно использовать числовой ряд с десятками — 10, 20, 30, 40

Другой полезный модификатор — местоположение, например top или bottom. Удобно использовать если у объекта есть предсказуемый набор мест на экране, где тот может быть размещен

Удобными будут и модификаторы состояния. Их можно использовать для компонентов, и для целых экранов, например «login_error». Общепринятые состояния, типа «hover», «disabled» и подобные лучше называть как есть, не придумывая своих вариаций.

Это был один из множества вариантов того, как называть объекты в ваших макетах. Он не поможет в любой ситуации, но может послужить для вас отправной точкой к тому, чтобы начать содержать макеты в порядке.