Компоненты в Figma: то, что режет 90% макетов на собеседовании - Часть 2

Продолжение гайда по подготовке и передаче макетов в разработку от Design Guild Во второй части мы разбираем компонентный подход изнутри: как строить автолейауты под компоненты, когда элемент пора превращать в компонент, а не оставлять "как есть" до конца проекта, и почему откладывание компонентов на финал ломает всю структуру макета. Отдельно разбираем шаблоны страниц, локальные компоненты и защиту дизайн-системы от случайных правок, статусы Ready to Dev, работу с Variant-компонентами и деанонимизацию слоев для разработчиков. В конце - как документировать компоненты и пользовательские сценарии так, чтобы с ними могли работать не только разработчики, но и AI-инструменты вроде Cursor. Подписывайтесь на канал Design Guild, чтобы не пропустить следующие гайды, тестовые собеседования и онлайн-конгрессы! Дизайн-гильдия выдает руководителям компаний, дизайн-отделов и агенств, продюссерам, маркетологам и HR сертифицированных дизайнеров без накрученного опыта и нейро-резюме. ◆ Для компаний и рекрутёров ◇ Найти дизайнера в найм или на проект: https://t.me/ersatz_guild_bot Опишите задачу в боте, и мы порекомендуем вам сертифицированного Гильдией дизайнера или подберём целую команду в зависимости от запроса. ◆ Для дизайнеров ◇ Как вступить в сообщество: играть и двигаться по иерархии https://t.me/ersatzdassein/17437/29695 ◇ Как вступить в гильдию: скажите, что хотите вступить https://t.me/ersatz_guild_bot, расскажите о себе и пройдите отбор. В Гильдии вас ждёт отфильтрованное сообщество · взаимопомощь · вакансии только для Гильдии · супервизии · сертификация как дизайнера · записи собеседований · конкурсы и состязания в рисовках · ◇ Менторство или консультации. Список менторов https://ersatz.super.site/mentors Мы менторим до трудоустройства на продакт дизайнера, консультируем по UX UI и графическому дизайну, учим строить дизайн-системы и даём реальные коммерческие проекты. Просто напишите боту, чему хотите научиться https://t.me/ersatz_guild_bot ◇ Терминология. Прочитайте Тезаурус, если какие-то слова были вам непонятны https://ersatz.super.site/thesaurus. В случае полного непонимания спрашивайте в чате https://t.me/+HQYQzHd6ENk4OTVi ◇ Пройдите бесплатное тестовое собеседование с дизайнером профи. Чтобы записаться пришлите боту https://t.me/ersatz_guild_bot ваше резюме, портфолио и обозначьте на кого хотите пройти собеседование: на UX UI, продакт или графического дизайнера. Пример тестового собеседования https://t.me/ersatzdasein/453 ◇ Приходите на общий созвон в Discord каждый вторник 20 часов по МСК. Микрофон открыт для всех, расскажете о себе и узнаете подробнее о сообществе 🙂   / discord   00:00 О чём лекция: компоненты, шаблоны и поддерживаемые макеты 02:22 Разбор макета с хорошей структурой автолейаутов 03:14 Почему нельзя откладывать компоненты на конец работы 05:59 Как понять, что элемент нужно превращать в компонент 09:18 Главные проблемы компонентного подхода в реальных проектах 10:17 Создание шаблона страницы для работы с экранами 15:01 Локальные компоненты страницы и защита от изменений дизайн-системы 18:13 Статусы Ready to Dev и приоритизация экранов для разработки 21:21 Правила работы, которые уменьшают количество ошибок и решений 22:16 Почему каждый компонент должен создаваться через Variant 27:54 Деанонимизация компонентов и подготовка макета для разработчиков 30:13 Состояния компонентов на примере выбора банка и инпутов 37:09 Как строить User Flow из переиспользуемых страниц и компонентов 40:01 Документирование компонентов, кнопок и пользовательских сценариев 50:29 Документация для разработчиков, Cursor и AI-инструментов 52:25 Полное резюме методологии компонентного проектирования 55:15 Ответы на вопросы: переиспользование компонентов, прототипирование и дизайн-системы Спасибо за гайд Никите Елисееву. Следующая часть пройдёт онлайн на очередном конгрессе - следите за анонсами на этом канале #Figma #FigmaVariants #DesignHandoff #DesignSystem #ReadyToDev #UXUI #DesignGuild #Компоненты #ДизайнТокены #КомпонентыFigma