Taskflow — бесплатный плагин Figma с дедлайнами, статусам, приоритетами и тёмной темой

Taskflow — бесплатный плагин Figma с дедлайнами, статусам, приоритетами и тёмной темой

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

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

Сначала задизайнил плагин, прикинул расположение функций и кнопок, переделал его несколько раз, после чего приступил к воплощению своего незамысловатого творения!

Если вы решите написать свой плагин, то рекомендую использовать esbuild — он будет собирать все ваши модули в два файла: code.js и ui.html — после этого вы прописываете в манифесте пути к этим двум файлам и публикуете плагин. Figma сама подтянет нужное, а остальное оставит у вас на ПК.

В итоге дизайнерское сообщество пополнилось удобным плагином Taskflow, которым вы уже можете воспользоваться!

Фильтры для настройки отображения задач в плагине Taskflow
Фильтры для настройки отображения задач в плагине Taskflow

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

Календарь для выставления дедлайнов в плагине Taskflow
Календарь для выставления дедлайнов в плагине Taskflow

На данный момент можно перетаскивать задачи из одного списка в другой, реализован функционал фильтров, Inbox списка, списка со всеми задачами, дедлайны — в общем, минимальный набор для комфортной работы.

Action menu для работы с задачей в плагине Taskflow
Action menu для работы с задачей в плагине Taskflow

Задачи, как и списки, можно дублировать, удалять, а выполненные задачи скрывать, чтобы они не мешали. Сам плагин можно развернуть на всю высоту экрана, чтобы удобно просматривать все текущие задачи.

Немаловажно, что плагин полностью бесплатный и быстро работает, а также сохраняет задачи вне зависимости от документа — синхронизация сделана в рамках всего приложения!

Taskflow оформлен в стиле всех моих остальных плагинов, с которыми вы можете ознакомиться в моем профиле Figma community. Для меня важно, чтобы стиль интерфейса был консистентным, поэтому все мои плагины построены на едином UI-Kit, который я развиваю и переиспользую.

Подсказки в состоянии EmptyState в плагине Taskflow
Подсказки в состоянии EmptyState в плагине Taskflow

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

Если вам интересна тема плагинов, могу порекомендовать свой тгк «Банановый дизайн», где публикую свой опыт разработки и делюсь деталями этого дела :)

Публикую посты редко, но по делу) И без рекламы)

3
Начать дискуссию