|
|
|
|
- Présentation
- Qu'est-ce que Figma ?
- Comment réaliser l'import Figma ?
- Prérequis
- Configurer l'import Figma
- Réaliser l'import Figma
- Importation en détail
Importer un document Figma
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. Comment réaliser l'import Figma ? Prérequis Pour utiliser l'import Figma depuis WINDEV, WEBDEV ou WINDEV Mobile, il est tout d'abord nécessaire de configurer Figma. - Lancez Figma (en mode Application ou en mode Web).
- Connectez-vous à votre compte ou créez un nouveau compte.
- 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 : - Sous le volet "Accueil", dans le groupe "Environnement", déroulez "Options" et sélectionnez "Options générales de xxx".
- Affichez l'onglet "API tierces".
- 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. Un fichier Figma est un ensemble de frames et d'éléments permettant de définir une interface. L'importation se déroule en plusieurs étapes : - Lancement de l'importation.
- Choix de l'élément Figma correspondant à la fenêtre à créer.
- 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 : - 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.
- 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.
Etape 2 : Choix de l'élément Figma correspondant à la fenêtre à importer - Dans la fenêtre d'import Figma, sélectionnez la frame correspondant à la fenêtre à importer.
- 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 un suivi de l'importation pas à pas, il est recommandé de visualiser en même temps la fenêtre en cours de création et la fenêtre de sélection des champs. Pour réaliser l'importation d'un élément : - Déroulez la racine des éléments Figma. L'arborescence des éléments présents apparaît.
- 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.
- 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.
- Le type de champ apparaît dans l'arborescence.
- 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.
- 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.
- Lorsque les éléments voulus sont créés dans la fenêtre ou la page, validez vos choix via le bouton "Terminer".
Important : Style des champs créés : Les champs créés par l'import Figma sont associés à une surcharge d'un style présent dans le gabarit ou l'ambiance du projet. Ce style spécifique peut être ajouté aux styles du projet pour une ré-utilisation sur d'autres champs. Remarques : - 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.
Documentation également disponible pour…
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|