Макет с реальным контентом лучше показывает, как интерфейс будет вести себя в жизни. С Lorem Ipsum сложнее заметить, что заголовок не помещается в карточку, название обрезается, а цифры ломают сетку. Поэтому реальный контент лучше вставлять ещё на этапе дизайна. Но есть «но».
Если в продукте огромное количество аватарок, названий токенов, статистики и прочих мелочей — вставлять их руками долго и больно: нужно заходить на сайт-источник, копировать каждую сущность и вставлять по одной. А вот как сделать то же самое за 5 минут.
Шаг 1. Подключаем MCP
Figma MCP (Model Context Protocol) — это технология и официальный сервер от Figma, который связывает дизайн-макеты напрямую с AI-агентами.
Можно использовать любую ИИ-модель, которая поддерживает работу с Figma MCP. Чтобы установить MCP, просто пишете в чат «Помоги мне установить MCP», нажимаете две кнопки — и всё готово.
Шаг 2. Выбираем нужный участок макета (selection)
Копируем ссылку на него и отдаём модели вместе со ссылкой на сайт-источник: у нас это DexScreener — один из крупнейших бесплатных агрегаторов данных по DEX-токенам.
Шаг 3. Пишем промпт
Возьми из [источник] аватарки, название и статистику и вставь в [макет].
За пару итераций получаем результат, который можно показать клиенту — уже с реальными данными вместо условных плейсхолдеров.
Слева — DexScreener, справа — наш макет, заполненный данными с DexScreener
Кстати, про эту задачу и другие, где поможет MCP, рассказывали в туториале с интенсива