От Photoshop до нейросетей: какими инструментами пользуется продуктовый дизайнер в 2026 году

Когда мне было лет 11-12, сайты рисовали в Adobe Photoshop.

Я помню эту эпоху, когда дизайн интерфейсов во многом строился вокруг статичных макетов, слоёв, эффектов и ручной работы с каждым элементом. Хотел сделать красивую кнопку, приходилось отдельно продумывать её форму, градиент, тень, блик и обводку. А если хотелось чего-то посложнее, начиналось настоящее приключение в Photoshop.

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

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

И даже готовый макет не гарантировал, что сайт в браузере будет выглядеть точно так же. Элементы могли съезжать, отступы отличаться, а результат расходиться с первоначальной задумкой.

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

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

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

Figma, дизайн-системы, Auto Layout, Variables, генерация изображений и AI-ассистенты: всё это стало частью современного рабочего процесса.

Но вместе с этим у меня возникает вопрос: что именно изменилось за эти годы, инструменты, процесс создания интерфейсов или сама профессия дизайнера?

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

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

Ключевые выводы

• Figma остается ядром, но ИИ меняет правила. Figma AI и Figma Make ускоряют прототипирование, но не отменяют необходимость принимать продуктовые решения.
• LLM — это инструменты для research, а не волшебная кнопка. ChatGPT помогает структурировать данные и генерировать идеи, но требует критической проверки.
• Понимание кода расширяет возможности. Знание HTML/CSS и умение использовать Cursor/Copilot для JavaScript делает дизайнера независимее и эффективнее в связке с разработкой.

Продуктовый дизайнер в 2026 году: это уже не только Figma

Если попросить человека назвать главный инструмент UX/UI-дизайнера, скорее всего, он ответит: Figma.

И это вполне логично. В ней мы проектируем интерфейсы, собираем компоненты, создаём прототипы, работаем с дизайн-системами и передаём макеты разработчикам.

Но сегодня одного инструмента уже недостаточно, чтобы описать весь рабочий процесс.

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

При этом на каждом этапе можно использовать разные инструменты. А теперь к ним добавились нейросети, которые умеют анализировать информацию, генерировать изображения, писать тексты, создавать прототипы и помогать с кодом.

Поэтому мне интереснее рассматривать не рейтинг программ, а рабочий стек продуктового дизайнера: какие задачи он решает и чем именно ему в этом помогают инструменты.

Figma: основа рабочего процесса

Несмотря на развитие генеративного ИИ, Figma остаётся для меня центральным инструментом проектирования интерфейсов.

И дело не только в том, что в ней можно нарисовать экран. Гораздо важнее то, как устроена работа с самим продуктом.

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

Здесь на первый план выходят компоненты, Auto Layout?Инструмент Figma, который описывает, как элементы ведут себя внутри контейнера: как распределяются, как растягиваются, как реагируют на изменение контента. и Variables?Переменные Figma: цвета, отступы, радиусы, типографика. Хранятся в одном месте и меняются сразу во всём файле..

Компоненты помогают переиспользовать элементы и централизованно управлять их изменениями.

Auto Layout позволяет выстраивать интерфейсы с учётом размеров содержимого, отступов и взаимного расположения элементов.

Variables помогают систематизировать значения: цвета, размеры и другие параметры, которые используются в дизайн-системе?Набор правил, компонентов и токенов, по которым собирается интерфейс продукта. Обеспечивает единообразие и ускоряет разработку..

Вместе эти инструменты позволяют перейти от рисования отдельных экранов к проектированию целостной системы.

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

А что насчёт Figma AI и Figma Make?

Здесь начинается интересная часть.

Figma AI помогает генерировать первые варианты экранов, предлагать решения по Auto Layout, проверять дизайн на соответствие дизайн-системе и автоматически создавать текст-заполнитель. Функции доступны на платных планах, а на бесплатном (Starter) есть ограниченный доступ.

Figma Make позволяет превратить текстовое описание или статичный дизайн в интерактивный прототип и даже в код. В 2026 году добавилась интеграция с GitHub, а цены на Figma Make снизились. Это полезно, когда хочется быстро проверить идею, показать направление или получить основу для дальнейшей работы.

По стоимости: профессиональный план Figma начинается от $16 в месяц за пользователя. AI-кредиты можно докупать отдельно. Актуальные тарифы всегда стоит смотреть на официальной странице Figma.

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

Важно. Сгенерированный экран ещё нужно оценить: соответствует ли он задаче, логично ли устроена иерархия, предусмотрены ли необходимые состояния, понятны ли сценарии и можно ли поддерживать такое решение в рамках продукта. Получить первый вариант стало проще. Принять хорошее продуктовое решение не обязательно.

ChatGPT и другие нейросети: помощники, а не волшебная кнопка

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

Я использую ChatGPT и другие AI-инструменты для разных задач, и мне нравится сама возможность быстрее переходить от идеи к её проверке.

Например, нейросеть может помочь:

• структурировать требования к интерфейсу;
• сформировать первоначальные гипотезы;
• предложить альтернативные варианты пользовательского сценария;
• подготовить тексты для кнопок, подсказок и ошибок;
• составить список состояний, которые стоит предусмотреть;
• объяснить незнакомую техническую концепцию;
• разобрать фрагмент кода и предложить вариант решения.

По тарифам на 2026 год у ChatGPT есть несколько планов: Free с базовым доступом и ограничениями, Go за $8 в месяц с увеличенными лимитами, Plus за $20 в месяц, который подходит для большинства задач, Pro за $100 в месяц с расширенными лимитами, и Pro 500 за $500 в месяц для максимальной производительности. Актуальные тарифы смотрите на странице OpenAI.

Однако здесь есть одна тонкость.

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

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

Допустим, мне нужно продумать форму сложного B2B-продукта. Можно попросить ИИ предложить варианты структуры, список возможных ошибок и состояния полей. Но затем всё равно необходимо оценить, что действительно нужно пользователю, какие ограничения существуют у продукта и как элементы будут работать вместе.

Именно эта часть мне кажется принципиальной.

Совет. ИИ может предложить десятки вариантов. Но количество вариантов само по себе не определяет качество результата. Всегда оценивайте предложенные варианты через призму реальных задач бизнеса и пользователя.

Генерация изображений: от долгой ручной работы к поиску концепции

Помните эпоху, когда реалистичную кнопку или металлическую поверхность приходилось тщательно собирать в Photoshop?

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

Инструменты генерации изображений позволяют получать концепции, визуальные референсы, иллюстрации и ассеты по текстовому описанию. Например, Midjourney или Adobe Firefly.

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

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

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

В-третьих, можно экспериментировать с образами, материалами, освещением и композицией, не начиная каждый раз с чистого холста.

По стоимости: Midjourney начинается от $10 в месяц за базовый план. Adobe Firefly предлагает бесплатный план с ограничениями, а платные идут от $9.99 в месяц (Standard) до $199.99 в месяц (Premium). У Firefly особая ценность для дизайнеров: он интегрирован в Photoshop и Illustrator, а также обучен на легальных изображениях, что важно для коммерческих проектов.

Но есть и ограничения.

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

А главное, визуальная выразительность не должна подменять функциональность.

Если речь идёт о реальном продукте, важно учитывать не только красоту картинки, но и её роль в интерфейсе, доступность, читаемость и производительность.

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

Но это не означает, что работа закончилась. Просто часть усилий переместилась с производства изображения на выбор, оценку и доработку результата.

HTML и CSS: почему понимание вёрстки всё ещё полезно

Я не позиционирую себя как фронтенд-разработчика, но разбираюсь в HTML и CSS и могу работать с вёрсткой интерфейсов.

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

Когда знаешь основы HTML и CSS, проще оценивать структуру страницы, понимать поведение элементов, разбираться с адаптивностью и видеть, почему один и тот же макет может по-разному выглядеть в разных условиях.

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

Понимание вёрстки помогает учитывать такие нюансы ещё во время проектирования. Если хочешь разобраться в основах, рекомендую MDN Web Docs: это лучший справочник по HTML, CSS и JavaScript.

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

И вот здесь появляется ещё один вопрос: если дизайнер понимает HTML и CSS, насколько глубоко ему необходимо разбираться в JavaScript?

JavaScript и ИИ: обязательно ли всё писать самостоятельно?

Это, пожалуй, одна из самых интересных для меня тем в контексте современных инструментов.

С HTML и CSS я могу работать самостоятельно. Когда же задача требует JavaScript, я охотнее обращаюсь к ИИ за помощью.

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

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

Для этого есть специальные инструменты. GitHub Copilot работает прямо в редакторе и предлагает код по мере набора. Индивидуальный план стоит от $10 в месяц. Cursor это уже полноценная среда разработки с глубокой интеграцией ИИ, план Pro стоит $20 в месяц. Для дизайнера, который иногда пишет код, Cursor часто оказывается удобнее, потому что можно работать с целым проектом. Например, вызов AI-чата в Cursor открывается по Cmd + K (или Ctrl + K на Windows).

Но здесь важно не перепутать две вещи: умение использовать ИИ для создания кода и полноценное владение программированием не одно и то же.

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

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

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

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

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

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

Прототипирование: когда макет становится интерактивным

Статичный макет помогает показать внешний вид интерфейса, но далеко не всегда передаёт, как продукт будет вести себя в реальности.

Что произойдёт после нажатия кнопки? Как откроется меню? Как изменится форма после ошибки? Что увидит пользователь после успешного действия?

Для подобных задач нужны прототипы?Интерактивная модель интерфейса, которая показывает, как продукт ведёт себя в реальности: переходы, состояния, реакции на действия пользователя..

В Figma можно создавать интерактивные сценарии, связывать экраны и демонстрировать переходы. Для более сложных взаимодействий существуют специализированные инструменты, например ProtoPie. Планы начинаются от $25 в месяц, есть бесплатный с ограничениями.

А если нужно быстро получить более реалистичную концепцию, можно экспериментировать с Figma Make и другими инструментами генерации интерактивных интерфейсов.

Однако инструмент стоит выбирать под конкретную задачу.

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

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

Не нужно делать сложнее, чем требуется. Нужно сделать достаточно, чтобы ответить на поставленный вопрос.

Аналитика и исследования: инструменты для проверки решений

Есть ещё один класс инструментов, который легко недооценить, если воспринимать UX/UI исключительно как визуальную работу.

Это инструменты аналитики и исследования поведения пользователей.

Например, Яндекс Метрика позволяет анализировать посещаемость, источники трафика и поведение посетителей сайта. Карты кликов и записи сессий помогают заметить некоторые проблемы взаимодействия, которые не всегда очевидны по одному лишь макету. Инструмент бесплатный, и для большинства проектов его возможностей достаточно.

Для исследований и проверки прототипов существуют специализированные сервисы, например Maze (планы от $99 в месяц) и Lyssna (планы от $75 в месяц). Их возможности и доступность зависят от конкретного тарифа и сценария использования.

Но здесь я бы особенно осторожно относился к автоматическим выводам.

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

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

То же самое относится к ИИ, который анализирует отзывы или поведение пользователей. Он может помочь структурировать информацию и обнаружить возможные закономерности, но не должен превращать предположения в доказанные выводы.

Мне кажется, здесь хорошо проявляется разница между использованием инструмента и профессиональным мышлением.

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

Handoff: как связать дизайн и разработку

Ещё один важный этап: передача дизайна в разработку.

Здесь можно использовать Figma Dev Mode, спецификации компонентов, документацию дизайн-системы и другие инструменты, которые помогают разработчикам понять, как должен работать интерфейс.

В зависимости от проекта могут пригодиться и AI-инструменты для работы с кодом, например Cursor или GitHub Copilot.

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

Разработчику по-прежнему важно понимать состояния компонентов, поведение интерфейса, ограничения, адаптивность и логику сценариев. А дизайнеру убедиться, что решение достаточно понятно описано и его не приходится угадывать по одному скриншоту.

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

И здесь я возвращаюсь к своему опыту с HTML и CSS: понимание того, как устроена вёрстка, помогает мне лучше представлять, что происходит после передачи макета.

В итоге хороший handoff?Процесс передачи макетов из дизайна в разработку. Хороший handoff включает не только экраны, но и правила, состояния, спецификации и ответы на вопросы. это не просто наличие правильных отступов и размеров в Figma. Это передача достаточно полной информации, чтобы интерфейс можно было реализовать предсказуемо.

Нужно ли продуктовому дизайнеру использовать все эти инструменты?

Нет.

И это, пожалуй, самый важный вывод из всего обзора.

Современный рынок предлагает огромное количество программ и сервисов. Каждый месяц появляются новые AI-инструменты, генераторы интерфейсов, плагины и платформы автоматизации.

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

Я бы выбирал инструменты исходя из конкретных задач.

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

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

Если ИИ помогает ускорить создание концепций, текстов или отдельных фрагментов кода, имеет смысл встроить его в соответствующий этап процесса.

А если какой-то сервис не решает реальную проблему, не обязательно использовать его только потому, что о нём все говорят.

Для меня хороший стек не тот, в котором больше всего инструментов. Это тот, в котором каждый инструмент выполняет понятную функцию.

Что изменилось в профессии дизайнера за эти годы?

Если сравнить эпоху Photoshop с современным рабочим процессом, можно заметить, насколько сильно изменились технические возможности.

Стало проще создавать визуальные концепции, собирать дизайн-системы, прототипировать взаимодействия и получать помощь при работе с кодом.

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

Но я бы не спешил делать вывод, что дизайнеру теперь достаточно научиться правильно писать промпты.

Ведь даже если нейросеть способна сгенерировать интерфейс, остаются вопросы:

• Решает ли он задачу пользователя?
• Понятна ли структура?
• Учтены ли ошибки и альтернативные состояния?
• Будет ли интерфейс работать на разных устройствах?
• Можно ли поддерживать и развивать это решение?
• Есть ли основания считать выбранный вариант лучше альтернатив?

На эти вопросы нельзя ответить одним фактом генерации.

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

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

Вместо заключения

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

Сегодня у меня совершенно другой набор инструментов. Я работаю с Figma и дизайн-системами, использую HTML и CSS, а для некоторых задач на JavaScript обращаюсь к ИИ.

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

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

Возможно, именно это и есть главное изменение: современный дизайнер получает всё больше способов воплотить свою идею, но по-прежнему должен понимать, какую идею стоит воплощать.

Когда-то я наблюдал, как сайты создавали в Photoshop. Сегодня я могу описать концепцию нейросети, получить визуальный вариант и использовать ИИ для решения отдельных технических задач.

Инструменты изменились радикально. Но вопрос, который я задаю себе перед началом работы, остался прежним:

Что я хочу создать, для кого и какую задачу это должно решить?

И, кажется, именно с этого по-прежнему начинается хороший дизайн.

«Инструменты меняются, но главный вопрос дизайнера остается прежним: какую задачу пользователя решает продукт».

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