Paint By JSON

Что такое Paint By JSON?

Paint By JSON — это плагин Figma, который позволяет дизайнерам заполнять фреймы живыми данными REST API вместо текста-заглушки. Он подключается к endpoint, показывает предпросмотр JSON-ответа в плагине, сопоставляет JSON-пути с именами слоёв и сохраняет эти сопоставления как переиспользуемые Palettes.

Плагин создан для дизайнерской работы, где нужно отражать реальные структуры контента. Пользователи могут применять сохранённую Palette к фрейму или набору повторяющихся компонентов, использовать её в разных файлах и экспортировать заполненный дизайн как JSON, Markdown или Spec Frame для передачи в разработку.

Ключевые возможности

• Подключается к живым endpoint или к моковому JSON, который можно получить через GET, чтобы дизайны заполнялись реальными структурами данных, а не статическими примерами.
• Поддерживает headers и значения аутентификации при подключении к endpoint, что делает его удобным для работы с защищёнными API в процессе дизайна.
• Сопоставляет JSON-пути с именами слоёв в Figma, позволяя Palettes оставаться переносимыми даже при изменении файлов, библиотек или структуры слоёв.
• Сохраняет настройки endpoint, headers и сопоставления как переиспользуемые Palettes, чтобы тот же набор данных можно было применить снова без повторной настройки.
• Включает базовые transforms, такие как обрезка, форматирование валюты, разбор дат, условные ветвления и цепочки transforms до того, как значения попадут на canvas.
• Поддерживает как заполнение одного фрейма, так и режим коллекции, где массив можно распределить по повторяющимся экземплярам компонентов.
• Экспортирует заполненные дизайны в JSON, Markdown или Spec Frame для поддержки передачи дизайна в код.
• Работает в iframe плагина и хранит ответы API и значения аутентификации на машине пользователя, а не отправляет их в базу данных продукта.

Как использовать Paint By JSON

Начните с установки плагина в Figma и подключения URL для API или источника JSON, который вы хотите использовать. При необходимости добавьте headers или аутентификацию, затем просмотрите ответ внутри плагина.

Далее сопоставьте поля JSON с именами слоёв в вашем фрейме и примените нужные transforms для отображения или форматирования. Сохраните настройку как Palette, а затем примените её к одному фрейму или повторяющемуся набору компонентов.

После заполнения фрейма используйте Palette в других файлах или экспортируйте результат как JSON, Markdown или Spec Frame для передачи.

Сценарии использования

• Проектирование экрана продукта с реалистичными именами пользователей, заголовками, ценами или датами, полученными из того же API, который будет использовать продукт.
• Проверка того, выдерживают ли макеты значения данных, если они длиннее, короче или структурно отличаются от обычного текста-заглушки.
• Заполнение повторяющихся компонентов на основе ответа массива, например карточек, элементов списка или других интерфейсов на основе коллекций.
• Переиспользование одного и того же сопоставления данных в нескольких фреймах или файлах, когда в design system используется единый принцип именования слоёв.
• Подготовка артефакта для передачи в разработку, который включает дизайн и базовую структуру данных в формате JSON, Markdown или Spec Frame.

FAQ

Paint By JSON работает только с live API? Нет. На странице указано, что он может подключаться к живым ответам API или моковому JSON, если данные можно получить через GET.

Он умеет работать с защищёнными endpoint? Да. Плагин поддерживает добавление headers или значений аутентификации при подключении к endpoint.

Что можно экспортировать? На странице продукта указано, что заполненные фреймы можно экспортировать как JSON, Markdown или Spec Frame.

Он хранит мои API-данные в облаке? Согласно странице, плагин работает в iframe плагина Figma, а ответы API и значения аутентификации остаются на вашем устройстве; они не отправляются в базу данных компании.

Есть ли ограничение на количество Palettes, которые можно сохранить? На странице упоминаются ограничения тарифов, включая бесплатный и Pro, но указанные точные лимиты продукта — две palettes на бесплатном плане и 50 сохранённых palettes на Pro.

Альтернативы

• Ручной контент-заполнитель в Figma — самый простой вариант, но он не позволяет проверять дизайн на реальных структурах данных.
• Дизайн-процессы на основе таблиц — помогают работать со структурированным контентом, но обычно требуют иной настройки, чем прямое связывание JSON-путей в Figma.
• Универсальные плагины Figma для заполнения данными — могут подставлять примерный контент, но не всегда так же сфокусированы на переиспользуемых palette на основе endpoint и экспорте.
• Передача дизайна через отдельные spec-документы — позволяет описывать требования к данным вне canvas, но не сохраняет привязку данных к самому фрейму Figma.