Fermer

avril 3, 2023

Extraire les données d’une API dans une couche Figma –

Extraire les données d’une API dans une couche Figma –


Extraire des données d’une API dans une couche Figma est l’une des choses les plus cool et les plus utiles que nous puissions faire avec Figma. Si nous travaillions sur une maquette pour Airbnb, par exemple, et que nous voulions y insérer des données d’appartement, nous voudrions utiliser l’API Airbnb pour la vitesse, le réalisme et les mises à jour en temps réel.

Dans cette première étape, nous utiliserons le plug-in Data Sync, qui nous permet de demander des données au format JSON, XML ou CSV à partir de Google Sheets et des API, puis de les insérer dans notre maquette.

Commencez par sélectionner le calque Texte dans « Desktop – 1 » avec le style de texte « Plus grand » appliqué, puis exécutez le plugin Data Sync.

Exécution du plug-in Data Sync

Supposons maintenant que ce que nous concevons indique aux utilisateurs quelle est leur adresse IP. Nous allons utiliser l’API ipify pour découvrir quelle est la nôtre et l’insérer dans la couche. Pâte https://api.ipify.org/?format=json dans le champ de texte, puis cliquez sur le Charger bouton, qui demandera les données de l’API avant de nous basculer vers l’onglet Connecter. (Il s’agit d’une API ouverte, nous n’avons donc pas besoin d’inclure d’identifiants d’authentification.)

Demander des données à l'API ipify

Nous verrons immédiatement les données renvoyées par l’API, qui dans ce cas est notre adresse IP. Cliquez dessus puis cliquez sur le Insérer pour remplacer le contenu de la couche par les données.

Insertion de notre adresse IP dans la couche

Changez le contenu de « Titre » en « Votre adresse IP est… »

Modification du contenu du titre

Configuration de l’accès à l’API

La plupart des API nécessitent des options d’authentification et de demande, donc à moins que nous n’utilisions une API ouverte comme celle ci-dessus, cela peut être un peu difficile à configurer. Cela étant dit, les données renvoyées par les API peuvent être reformatées dans Figma à l’aide de JavaScript, cela peut donc valoir la peine apprendre du JavaScript pour faciliter le travail avec les API.

Cet article est un court extrait de Le guide du concepteur de Figmadisponible sur SitePoint Premium.






Source link