Tutoriel n°5 : Stylez votre projet à partir d'un design Figma 

Ce tutoriel vous montrera l'intégration d'une page de login qui a été précédemment créée sur Figma. Figma vous donne automatiquement les CSS affiliés aux éléments de la page que vous avez créée, voyons comment les intégrer dans le Studio.

Note : Nous avons actuellement créé le design avec Figma (un outil gratuit) mais d'autres outils comme Adobe XD vous fournissent également des CSS automatiques.

Étape 1 : Créer un nouveau projet

La page de connexion que vous allez recréer a été créée sur figma.
Voici le lien pour y accéder :

https://www.figma.com/file/ltNjfK14DfBCIvrRZ
 ekR6k/Styling_tutorial-design?t=T5PdI13kCqktNIYY-1

NB : Vous devez utiliser ou créer un compte Figma (gratuit) pour accéder au CSS.
‍
Comme vous pouvez le voir, chaque élément du design peut être cliqué, et dans la partie droite de la page, dans la section"inspect", le CSS pour chaque élément est automatiquement généré. C'est ce que nous utiliserons pour concevoir cette même page dans le Studio.

Maintenant que vous savez cela, créons notre application :
Pour créer un nouveau projet, allez dans Fichier -> Nouveau -> Projet et cherchez"Convertigo Low Code FullStack Web/Desktop or Mobile app project" et nommez-le"styling_tutorial".

Une fois que votre projet a été créé, utilisez simplement le bouton play pour ouvrir le Visual App Viewer.
Note : N'oubliez pas que si vous nommez votre projet différemment, vous ne pourrez pas continuer correctement le tutoriel .
Étape 2 ᐅ
Succès !

Vous avez terminé cette étape avec succès, veuillez cliquer sur le bouton Étape suivante pour passer à l'étape suivante du tutoriel.
Fermer
Vous n'avez pas effectué toutes les actions requises dans cette étape, êtes-vous sûr de vouloir passer à l'étape suivante ?
OuiNon