Data Sync (previously API/JSON Sync) « Сайт по фигме, но автор отношения к ним не имеет! Not affiliated with Figma
Это не официальный сайт Figma / This is not the official site of Figma

Data Sync (previously API/JSON Sync)Data Sync (previously API/JSON Sync)

установить плагин для Фигмы Data Sync

Плагин Data Sync помогает синхронизировать дизайн с данными API.

Функции

  • Загрузка JSON, XML и CSV из URL-адреса API или вставьте как текст;
  • Также поддерживаются URL-адреса таблиц Google;
  • Перемещайтесь по данным в простом интерфейсе;
  • Заполняйте, подключайте и синхронизируйте слои с текстом и изображениями.

Google таблицы

  • Просто вставьте URL-адрес и данные будут загружены;
  • Можно использовать стандартный формат URL, отображаемый в браузере;
  • Поддерживаются только таблицы с опцией общего доступа «все, у кого есть ссылка»;
  • Первая строка будет использоваться как строка заголовок;
  • Форматирование.

Поскольку данные не всегда поступают так, как мы хотим их визуализировать, можно отформатировать результаты перед заполнением. Для гибкости форматирование выполняется с использованием кода js, где можно использовать $value как переменную, полученную из данных.

Вот несколько примеров

  • John-follower -> $value.split(’-’)[0] -> John;
  • 224.50 -> ’€ ’ + Math.round($value) -> € 225;
  • true -> $value ? ’available’ : ’occupied’ -> available;
  • 1 -> [’Clear’, ’Rain’, ’Snow’][$value] -> Rain;
  • 1988 -> «’» + ($value).toString().substring(2,4) -> ’88;
  • klm -> `https://airlines/${$value}.png` -> https://airlines/klm.png;
  • Параметры запроса API

Если нужно добавить параметры запроса к вызову API, можно сделать это в отдельном поле и указать параметры как объект. Чтобы узнать, какие параметры доступны и как они называются, воспользуйтесь следующей библиотекой: https://github.com/Jam3/xhr-request.

Примечания

  • Нужно вручную выбрать, какие массивы перебирать после выбора пути;
  • Данные таблиц CSV и Google всегда анализируются с первой строки в ​​качестве строки заголовка;
  • Для быстрого размножения слоев установите плагин Multiply;
  • Если количество слоев на странице превышает лимит, информация на странице синхронизации не будет автоматически обновляться при изменении на странице, вместо этого можно использовать кнопку обновления вручную. Это сделано для повышения производительности.
Разработчик: Emin Sinani

Плагины из той же категории