Сколько километров ты проходишь по макетам в Figma. Плагин измеряющий расстояние
Хочу рассказать вам о своём плагине, который измеряет расстояние пройденное по макету в километрах и милях, а также показывает весь пройденный путь.
Привет, это Денис Абдуллин — продуктовый дизайнер, сделал плагин Figma Tracker, сейчас коротко расскажу что он делает, и как он был придуман.
Плагин измеряет расстояние пройденное за определённое время
Сразу скажу, идея этого плагина у меня была ещё 3 года назад, скорее даже была просто шуткой, сказанной коллегам, что вот забавно было бы увидеть сколько километров проходится одним только курсором в фигме. Было это в контексте работы над компонентами дизайн-системы, когда нужно было много перемещаться по страницам и внутри них.
По итогу получился простой трекер времени работы, некоторым и мне в том числе помогает сфокусироваться над задачей, но с дополнительной визуализацией пройденного пути.
Поскольку плагин не может измерить точное движение курсора, считается только прямое расстояние между объектами, между которыми вы перепрыгиваете (как человек-паук с крыши на крышу).
Ещё вдохновением для этого послужило приложение Strava, для бегунов и велосипедистов, там приятно смотреть на свой маршрут и делиться им, и в этом плагине получилось также, у вас есть слепок маршрута, насколько возможно его было сделать, и его можно сохранять, для себя или для того, чтобы отправить куда-нибудь. Получается, что работа в Figma уже походит на спорт, поэтому добавил ещё и условный счётчик калорий.
Пишите в комментариях, если интересны подробности, как именно был сделан плагин. Может быть уже сейчас у вас есть идея для своего собственного плагина, можете также поделиться в комментариях.
Бонусом прикрепляю подборку моих каналов для дизайнеров
Веду каналы уже много лет, поэтому там накопилось много интересного, буду рад вас там увидеть. Да и информация об обновлении плагина может быть только там:
Хороший интерфейс – как устроены цифровые продукты
Концепты интерфейсов – интересные приёмы и решения
Офферы для дизайнеров – вакансии напрямую от лидов и дизайн-директоров
Личный канал – личный опыт из работы и из жизни