Figma est un logiciel qui permet de créer des maquettes et des prototypes dans différents domaines, en particulier pour des sites et des applications.
A partir de la version 2024, WINDEV, WEBDEV et WINDEV Mobile permettent de transformer des documents Figma en fenêtres et en pages, et de générer les champs correspondants en respectant leur aspect graphique.

Qu'est-ce que Figma ?

Figma est un outil de dessin (vectoriel).
Le designer crée par exemple des rectangles, des cercles, des traits, des textes et leur applique de nombreux paramètres.
Tout est statique, tout peut se superposer.
Le tout est imbriqué dans des frames.
Les documents créés sont accessibles par une URL, dont l'accès nécessite une authentification.

Prérequis

Pour utiliser l'import Figma depuis WINDEV, WEBDEV ou WINDEV Mobile, il est tout d'abord nécessaire de configurer Figma.

1. Lancez Figma (en mode Application ou en mode Web).
2. Connectez-vous à votre compte ou créez un nouveau compte.
3. Générez un token Figma. Pour plus de détails, consultez Où trouver la clé Figma ?.

Configurer l'import Figma

Dans WINDEV, WEBDEV ou WINDEV Mobile, renseignez le token Figma dans les options générales du produit :

1. Sous le volet "Accueil", dans le groupe "Environnement", déroulez "Options" et sélectionnez "Options générales de xxx".
2. Affichez l'onglet "API tierces".
3. Dans l'option "Clé Figma", indiquez la clé Figma générée précédemment.
   
   
   Remarque : Le bouton "Tester" permet de tester la validité de la clé Figma.

Réaliser l'import Figma

Le designer doit fournir le document à importer sous forme d'une URL. L'importation se déroule en plusieurs étapes :

1. Lancement de l'importation.
2. Choix de l'élément Figma correspondant à la fenêtre à créer.
3. Sélection des éléments à importer et association de ces éléments aux champs WINDEV, WEBDEV ou WINDEV Mobile.

Etape 1 : Lancement de l'importation :

1. Sous le volet "Projet", dans le groupe "Projet", déroulez "Importer" :
   • sélectionnez "Une maquette Figma .. Créer une fenêtre". Une nouvelle fenêtre est automatiquement créée.
   • sélectionnez "Une maquette Figma".
2. Dans la fenêtre qui s'affiche :
   • Indiquez le fichier Figma à importer (sous forme d'URL).
   • Cliquez sur le bouton "Charger".
   • Sélectionnez la frame Figma à importer.
     Une nouvelle page est automatiquement créée.

Etape 2 : Choix de l'élément Figma correspondant à la fenêtre à importer

1. Dans la fenêtre d'import Figma, sélectionnez la frame correspondant à la fenêtre à importer.
   
2. Validez (bouton "OK").

Etape 3 : Sélection des éléments à importer :
La fenêtre qui s'affiche permet d'associer les éléments Figma aux champs WINDEV, WEBDEV ou WINDEV Mobile à créer. Cette fenêtre affiche les éléments Figma à importer à gauche et à droite, l'aperçu de la fenêtre ou de la page à reproduire. Pour réaliser l'importation d'un élément :

1. Déroulez la racine des éléments Figma. L'arborescence des éléments présents apparaît.
2. Déroulez un élément dans son ensemble, jusqu'à arriver à l'élément correspondant au champ à importer. Le champ correspondant à l'élément sélectionné est affiché dans l'aperçu.
3. Lorsque les éléments du champ sont identifiés, dans le menu contextuel de la branche correspondant au champ, sélectionnez le type de champ voulu.
   
4. Le type de champ apparaît dans l'arborescence.
5. Associez chaque élément du champ à son type. Par exemple, pour un champ de saisie, il faut définir son libellé et sa zone de saisie. Cette association se fait par le menu contextuel.
   
6. Au fur et à mesure, la fenêtre se construit selon les choix réalisés.
   
   Il est possible de corriger les choix effectués pour obtenir le résultat voulu.
7. Lorsque les éléments voulus sont créés dans la fenêtre ou la page, validez vos choix via le bouton "Terminer".

• Les choix effectués lors de l'importation sont enregistrés dans le répertoire du projet sous forme d'un fichier "*.wdfigma". Lors de l'affichage de la fenêtre d'importation, si l'adresse Figma ainsi que la frame sélectionnée sont connues, le produit propose de reprendre l'importation déjà effectuée.
• La fenêtre d'importation propose plusieurs options :
  •  : Permet de recharger le fichier Figma en conservant les choix effectués. Cette option est notamment utile lorsque le designer modifie le fichier Figma (par exemple pour assembler les élements d'un champ dans une même arborescence).
  •  : Permet d'ouvrir le fichier Figma dans l'application Figma (en mode web).
  •  : Si la fenêtre ou la page à importer est plus grande que la vue, permet d'avoir une vue à 100% ou adaptée à la zone disponible.