Дизайн страниц в 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