Быстрый совет: извлеките данные из API в слой Figma

Начните с выбора слоя «Текст» в «Рабочи Изучение

Вытягивание данных из API в слой Figma — одна из самых крутых и полезных вещей, которые мы можем сделать с помощью Figma. Если бы мы работали над макетом для Airbnb, например, и хотели бы вставить в него данные о квартире, мы бы хотели использовать API Airbnb для скорости, реализма и обновлений в реальном времени.

На этом первом этапе мы будем использовать плагин Data Sync, который позволяет нам запрашивать данные в формате JSON, XML или CSV из Google Sheets и API, а затем вставлять их в наш макет.

Начните с выбора слоя «Текст» в «Рабочий стол — 1» с примененным стилем текста «Более крупный», затем запустите подключаемый модуль «Синхронизация данных».

Начните с выбора слоя «Текст» в «Рабочи

Теперь давайте предположим, что то, что мы разрабатываем, сообщает пользователям, какой у них IP-адрес. Мы будем использовать API ipify, чтобы узнать, что у нас есть, и вставить его в слой. Вставьте https://api.ipify.org/?format=jsonв текстовое поле, а затем нажмите кнопку «Загрузить », которая запросит данные из API, прежде чем переключить нас на вкладку «Подключение». (Это открытый API, поэтому нам не нужно указывать какие-либо учетные данные для аутентификации.)

Теперь давайте предположим, что то, что мы разраб

Мы сразу же увидим данные, возвращаемые API, в данном случае это наш IP-адрес. Нажмите на него, а затем нажмите кнопку «Вставить», чтобы заменить содержимое слоя данными.

Мы сразу же увидим данные, возвращаемые API

Измените содержимое «Заголовок» на «Ваш IP-адрес…»

Измените содержимое «Заголовок» на «Ва

Настройка доступа к API

Большинство API-интерфейсов требуют аутентификации и параметров запроса, поэтому, если мы не используем открытый API, подобный приведенному выше, его настройка может быть немного сложной. При этом данные, возвращаемые API, можно переформатировать в Figma с помощью JavaScript, поэтому, возможно, стоит немного изучить JavaScript, чтобы упростить работу с API.

Читайте также:  Автоматизация маркетинга: лучшие инструменты искусственного интеллекта для ускорения роста
Оцените статью
bestprogrammer.ru
Добавить комментарий