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