Собака Павлова
Сто шпаргалок Технологии и разработка Как и зачем правильно называть элементы в Figma

Как и зачем правильно называть элементы в Figma

Макеты — это не только картинки, это еще и документация. Документация требует структуры и понятности. Понятные названия хотя бы для элементов первого уровня уже существенно упрощают восприятие макетов коллегами.

#элементы в Figma #порядок #структура

Три главных предмета в фокусе внимания

  1. Ваш коллега

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

  2. Левая панель Figma

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

  3. Собеседование

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

5 советов,
как делать хорошо

  1. Прочтите названия элементов на канве

    Figma показывает названия элементов первого уровня, и сразу видно какие названы по умолчанию.

  2. Начните с первого уровня

    Переименовать сразу все — трудоемкая задача. Пусть хотя бы элементы первого уровня будут иметь осмысленные имена.

  3. Используйте спецсимволы: «!», «+» и т.д.

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

  4. СМЕЛО ИСПОЛЬЗУЙТЕ КАПСЛОК

    Например, для визуального разделения разных блоков.

  5. Используйте «/» и «_»

    «/» помогает сразу указать вложенность или вариативность в компонентах, «_» подсказывает Figma, какие из элементов экспортируемые, а какие нет.

Например

Капитал

Заказчик передавал макеты разработчикам без нашего участия. Аккуратный нейминг был одним из способов документирования.

Контроль

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

Хороший образец

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

Пересборка дизайн-системы

Так делать не надо

Frame 1593/Frame 1984/Frame 435/rectangle.

Инструменты

Левая панель Figma

Ориентироваться по структуре и названиям

Figma Learn

Нюансы нейминга есть в помощи

«Соглашение о наименованиях»

Договоритесь с разработкой, как называть элементы

Textile

Для работы с текстами

Есть люди (и их много), которые воспринимают прототип интерфейса в первую очередь как структуру. А структура требует понятности, в том числе через наименование элементов. Как ни странно, сами картинки для таких людей — дело десятое. Подумайте об этих людях, обычно они ваши работодатели.

Ольга Павлова, директор по развитию «Собаки Павловой»

Другие шпаргалки

Ищете подрядчика или команду?

Давайте обсудим вашу задачу.

Хотите у нас научиться?

1000+ упражнений по дизайну интерфейсов.