Соглашения по именованию слоев и фреймов для разработчиков

Качественный дизайн — это не только красивые макеты, но и понятная, структурированная информация для разработчиков. Ключ к этому — согласованное и логичное именование слоев и фреймов в Figma. Оно помогает разработчикам быстро ориентироваться в файле, понимать структуру и эффективно переводить дизайн в код.

Почему именование важно для разработчиков?

Представьте: вы — разработчик, и вам дали макет с тысячами слоев вроде "Rectangle 1", "Group 2", "Path 3". Сколько времени уйдёт, чтобы понять, что есть что? Правильное именование:

• Ускоряет разработку: Разработчик сразу видит назначение элемента.
• Снижает число вопросов: Меньше уточнений у дизайнера.
• Улучшает читаемость кода: Имена слоев часто переходят в имена классов или компонентов.
• Облегчает поддержку: Найти нужный элемент при изменениях в дизайне или коде гораздо проще.

Совет

Всегда ставьте себя на место разработчика. Если вы не можете быстро понять назначение слоя по его имени, скорее всего, разработчик тоже не сможет.

Принципы именования слоев и фреймов

При именовании слоев и фреймов в Figma следуйте этим принципам:

1. Будьте последовательны: Выберите один стиль именования и придерживайтесь его во всём проекте.
2. Используйте английский язык: Это международный стандарт в разработке.
3. Будьте кратки, но информативны: Избегайте слишком длинных имён, но убедитесь, что имя отражает суть.
4. Используйте kebab-case или camelCase:
   • kebab-case (например, button-primary, header-navigation) часто используют для классов в CSS.
   • camelCase (например, buttonPrimary, headerNavigation) часто используют для переменных или компонентов в JavaScript. Выберите тот, что ближе к стеку технологий вашей команды.
5. Избегайте спецсимволов и пробелов: Они могут вызвать проблемы при экспорте или генерации кода.

Практические рекомендации по именованию

Рассмотрим конкретные примеры именования для разных типов элементов:

1. Фреймы (экраны, секции)

Именуйте фреймы, отражая их содержимое или назначение.

• Страницы/Экраны:
  • home-page
  • product-details
  • user-profile-settings
• Секции внутри страницы:
  • hero-section
  • features-block
  • footer

2. Компоненты и их экземпляры

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

• Мастер-компонент: Button/Primary/Default
• Экземпляр компонента:
  • Кнопка навигации: nav-button-home
  • Кнопка отправки формы: submit-button
  • Экземпляр без специфической роли: button-primary (имя мастер-компонента)

3. Слои внутри компонентов и фреймов

Именуйте слои, отражая их роль или тип контента.

• Текстовые слои:
  • heading-title
  • body-text
  • label-email
  • placeholder-text
• Иконки:
  • icon-arrow-right
  • icon-user
  • icon-search
• Изображения:
  • image-product-main
  • image-avatar
  • background-image
• Фигуры и фоны:
  • background-fill
  • divider-line
  • card-background
• Группы и Auto Layout фреймы:
  • card-header
  • product-info-block
  • button-group
  • form-input-field

Важно

Используйте Auto Layout для структурирования элементов, а не просто группировки. Имена Auto Layout фреймов должны отражать их содержимое или функцию, например, user-card-layout или navigation-items.

4. Скрытие слоев для разработчиков

Иногда в макете есть слои, которые нужны только для дизайна (например, направляющие, заметки, черновики), но не должны быть реализованы в коде. Вы можете использовать префиксы для таких слоев, чтобы разработчики понимали, что их нужно игнорировать.

• _DO_NOT_CODE_guide-lines
• _DRAFT_new-idea

Или просто скрывайте их перед передачей в Dev Mode. Dev Mode по умолчанию не показывает скрытые слои, что очень удобно.

Пример хорошего именования

Посмотрите на пример хорошо именованного фрейма:

// Фрейм страницы
user-profile-page
    // Секция заголовка
    header-section
        // Заголовок страницы
        heading-title
        // Кнопка редактирования
        edit-button
            icon-edit
            text-label
    // Секция информации о пользователе
    user-info-block
        // Аватар пользователя
        image-avatar
        // Имя пользователя
        text-user-name
        // Email пользователя
        text-user-email
    // Секция настроек
    settings-section
        // Элемент настройки
        setting-item-notifications
            icon-bell
            text-label
            toggle-switch
        // Элемент настройки
        setting-item-privacy
            icon-lock
            text-label
            toggle-switch

Как видите, каждое имя сразу даёт понять, что это за элемент и какую роль он выполняет.

Именование в контексте Dev Mode

В Dev Mode Figma автоматически отображает имена слоев. Чем понятнее и логичнее эти имена, тем легче разработчику ориентироваться в инспекторе кода, копировать свойства и понимать структуру. Согласованные имена слоев могут даже помочь в автоматической генерации компонентов или стилей в некоторых фреймворках.

Теперь вы знаете, как правильно именовать слои и фреймы, чтобы значительно улучшить процесс передачи дизайна. Но что насчет самих компонентов? Как их оптимизировать специально для Dev Mode, чтобы разработчикам было ещё удобнее? Об этом поговорим в следующем разделе.