Как вести нейминг компонентов в Figma
Очень часто заходишь в проект к дизайнеру и видишь просто фантастические имена объектов, а иногда даже просто Frame123. Видимо, дизайнеру так удобно, и у него очень хорошая память на фреймы, но я бы не хотел работать с такими макетами. Узнали ситуацию? Давайте по порядку.
Что такое нейминг?
Нейминг компонента это непосредственно его название. По названию в дальнейшем можно найти как сам компонент из Assets, так и облегчить себе поиск при свапе, за счет компоновки по папкам. Чем проще и понятнее будет его название, тем понятнее будет другим дизайнерам и разработчикам понять, что это и для чего.
Правила регистра или camelCase
Это рекомендация, логика разбивки может быть и другой.
- Название компонента стоит начинать с маленькой буквы и придерживаться правил программирования.
- Если идет объединение двух, трех и более слов в одно, то ОБЯЗАТЕЛЬНО следующее должно начинаться с большой буквы.
Пример: primaryBuy, productButtonBuy
Папки
Все компоненты должны лежать по папкам для более быстрой и простой навигации среди компонентов и быстрого свапа с поиском. Пример: button / default / primary, где button и default являются папками, а primary объектом, так как это конечный объект в наименовании.
Как создавать папки?
Папки создаются путем вставки знака “/”, между “/” рекомендуется ставить пробелы для более легкого считывания.
Пример: button / primary
Точка в нейминге
Тут все просто. Точка ставится перед именем объекта что бы он не публиковался при публикации библиотеки. В таком случае его будет невозможно найти из внешнего файла.
Пример: .buttonDelete
Свап компонентов
Функция свапа компонентов предназначена для тех случаев когда к примеру у вас компонент неактуален, а вам надо заменить на актуальный такой же и что бы не заходить в ДС, Вы через правый бар ищете нужный и заменяете. Таким методом при правильном нейменге можно свапать компоненты целыми библиотеками, а так же легко выполнять их поиск.
Нейминг вложенных слоев объекта
О чем ты?
У каждого компонента есть вложенные слои. Так вот все слои необходимо как то называть для того что бы другому дизайнеру или разработчику в ваших макетах было проще разобраться. Не очень приятно и сильно раздражает когда ты не можешь сходу разобраться в макетах и внести в них правки.
И как мне их называть?
Называть слои следует так, что бы было понятно, что там лежит внутри или зачем он нужен.
Совет от себя
- Я называю объекты по их назначению, если объект просто нужен для компенсирования расстояния, то так и называю “compensator”;
- Если слой просто объединяет несколько объектов, то так и называю “[name block]+[name block]+ ит” только не делаю длинное название, стараюсь делать короткими и понятными;
- Что бы меньше парится с неймингом, НЕ создавайте ненужные слои, не можете понять функционал слоя, удаляйте смело его;
Итог
Правильное ведение нейминга своих компонентов приводит к ускорению редактирования, другие дизайнеры и разработчики вам скажут только спасибо, вы просто перестанете путаться в своих макетах и начнете слету понимать где и что надо сделать, а так же как это найти.
🚀 Подписывайтесь, чтобы узнать то, чего не знают другие! Уникальные инсайты и редкие темы для вашего роста и вдохновения! 💡
Спасибо за статью.
Очень нравится фраза «не можете понять функционал слоя, удаляйте смело его». Это очень правильно, но также хочу добавить, что даже если кажется, что слой имеет свою функцию, следует подумать, может ли слой внутри или снаружи него иметь ту же функцию. Именование очень помогает в этом, помогает найти лишние слои.