Привет! Я — Лёша Яркин, решаю бизнес-задачи с помощью дизайна уже больше 10-ти лет. Это третья часть моей большой статьи, и сегодня я поделюсь ссылкой на мои шаблоны дизайн-шпаргалок, которые помогают мне декомпозировать, и отслеживать прогресс дизайн-задач прямо в Figma. Я опубликовал их в Figma Community. Все шаблоны абсолютно бесплатны, и вы можете их использовать, либо изменять, как посчитаете нужным/удобным.
Зачем вообще нужны эти шаблоны?
Где-то в идеальном мире(возможно на планете TRAPPIST-1e) у дизайнера есть всего одна текущая задача, она достаточно проста, и содержит в себе минимум факторов неопределенности. Работать с ней легко и просто, дизайнер помнит все процессы, и спокойно держит в голове прогресс их выполнения.
Но в реальном мире всё совсем не так. Задач зачастую несколько, и даже если они все относятся к одному продукту, детально отслеживать их выполнение достаточно сложно. Создавать под каждый пункт дизайн-процессов отдельные подзадачи в Jira — это прямой путь к тому чтобы утонуть в бюрократии, жертвуя временем выделенным нам на саму задачу.
Я верю, что голова дизайнеру нужна для того чтобы думать, а не запоминать
Поэтому я сделал такой набор шпаргалок для себя, ведь мне не хочется упускать что-то из виду, хочется помнить все необходимые пункты, как робот. При этом иметь к ним быстрый доступ прямо в Figma, рядом с макетами. Так мне удобнее работать, мне не нужно помнить тысячи деталей работая с новыми макетами. Завершив какой-то этап, я просто прожимаю тоггл в инстансе собранных мной компонентов, и чекбокс у выбранного этапа дизайн-задачи переключается в состояние “Готово”. Мне больше не надо отвлекаться на завершенные этапы, и я могу полностью сфокусироваться на текущем процессе.
Я сделал 3 таких шаблона с чек-листами:
Рядовая задача (Целевой процесс)
Чек-лист (Дизайн)
Чек-лист (Разработка)
Саму секцию с чек-листами я помещаю рядом с верхнеуровневым макетом фичи, с которой сейчас идёт работа. И где-то рядом обычно размещаю копию утвержденного ТЗ, и выжимки из результатов исследований/ключевые инсайты. Они мне помогают “медитировать” глядя на мои макеты. Когда все чек-листы прожаты, и задача успешно завершена, — я просто удаляю всё лишнее.
Дизайн-процессы в каждой команде настроены по-своему, и возможно у вас будут пункты, которых у меня нет, либо вы посчитаете необходимым где-то дать более детальное описание этапов. Всё это можно сделать в родительском компоненте. Количество шагов и этапов может отличаться, но сильно сокращать этот список я не рекомендую.
Самое важное: никогда не приступайте к дизайну сразу после ознакомления с ТЗ, без исследования рынка и конкурентов. Ведь если пропустить эти этапы сразу, потом придётся потратить на них значительно больше времени, когда окажется что ваш продукт не имеет конкурентных преимуществ, и плохо закрывает потребности пользователя и пожелания бизнеса.
Из-за особенностей настройки и отображения вложенностей в инстансах компонентов в Figma, чтобы избежать дополнительного аккордеона с названием пунктов для каждого переключаемого тоггла чекбоксов, я булевым значением сделал отображение самого прожатого чекбокса, который в свою очередь не является компонентом, а просто отображается поверх непрожатого, и имеет то же название что и пункт из списка. Описание звучит сложновато, но на самом деле всё довольно просто :-)
Забрать себе этот набор дизайн-шпаргалок можно по ссылке: Design Checklists
Делитесь своими секретами декомпозирования и микро-трекинга задач, а также следите за обновлениями, будет много интересного!
P.S.
В первом шаблоне есть много полезных ссылок на разные ресурсы для сбора референсов, в зависимости от типа продукта. Кто дочитал, — тот о них узнал! :-)