Перейти к содержимому

Дизайн страниц в Claude Figma | От вайрфреймов до полноценного пользовательского пути с Claude Code

듀자인 Dewsign

0:00 / 0:00

Дизайн страниц в Claude Figma | От вайрфреймов до полноценного пользовательского пути с Claude Code

200 просмотров · 9 дн. назад
듀자인 Dewsign
298 подписчиков
200 просмотров · 9 дн. назад
Рабочий процесс Claude Figma для создания реальных страниц товаров из компонентов вашей дизайн-системы. Мы подключаем основы и компоненты из предыдущего видео к Claude Code, а затем используем экран входа в систему в качестве примера, чтобы перейти от планирования каркаса к вариантам макета и полному пользовательскому потоку — всё прямо на холсте Figma. 📌 Что вы узнаете: Как синхронизировать вашу дизайн-систему Figma с Claude Code Почему следует делиться каркасами Figma, а не скриншотами Планирование каркасов и пользовательских потоков, исходя всего из нескольких основных требований Создание 3 вариантов макета с использованием ваших компонентов и их доработка с учётом обратной связи Применение правил финального экрана ко всему потоку одновременно 📃 Практическое задание в Figma File Поскольку процесс подсказок в видео довольно быстрый, за ним могло быть сложно следить. 📌 Все подсказки, использованные в этом видео, написаны прямо в файле Figma ниже, так что смело копируйте и пробуйте их сами :) https://www.figma.com/design/Qt46gKCT... Вместе мы создаём дизайн. Вместе мы растём! 🌱 =================================== 🇰🇷 한국어 버전 영상 →    • 클로드 피그마로 페이지 디자인하기 | 와이어프레임부터 유저 플로우까지 AI로 완성   =================================== 📌 Руководство пользователя канала [KR] 구독을 통해 더 깊이 있는 디자인 시스템 강좌를 만나보세요. [RU] Английская версия доступна в плейлисте. ==================================== 📌 Свяжитесь с Dewsign Instagram @dewsign.design e-mail dewsign.design@gmail.com Хронология 00:00 Введение | сборка страниц из компонентов 00:37 Шаг 1. Синхронизация контекста, подключение вашей дизайн-системы Figma 01:28 Обучение Claude работе с экранами в реальном времени с помощью фреймов Figma 02:26 Шаг 2. Планирование каркаса для экрана входа в систему 03:43. Макеты с низкой детализацией и полный пользовательский поток 04:34 Шаг 3. Создание 3 вариантов макета на холсте Figma 05:23. Сравнение вариантов и доработка окончательного дизайна 06:14. Применение дизайна ко всему потоку #ClaudeFigma #FigmaMCP #ClaudeCode #DesignSystem #AIDesign