Ce tutoriel vous montrera comment intégrer une page de connexion précédemment créée sur Figma. Figma vous fournit automatiquement le CSS associé aux éléments de la page que vous avez créée. Voyons comment l'intégrer dans Studio.
Remarque : nous avons actuellement créé le design avec Figma (un outil gratuit), mais d'autres outils tels qu'Adobe XD vous fournissent également du CSS automatique.
Étape 1 : Créer un nouveau projet
La page de connexion que vous êtes sur le point de 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 est cliquable, et dans la partie droite de la page, dans la section « inspect », le CSS de chaque élément est généré automatiquement. C'est ce que nous allons utiliser pour concevoir cette même page dans Studio.
Maintenant que vous savez cela, créons notre application :
Pour créer un nouveau projet, allez dans Fichier -> Nouveau -> Projet, recherchez « Convertigo Low Code Web/Desktop or Mobile app project » et nommez-le « styling_tutorial ».
Une fois votre projet créé, utilisez simplement le bouton de lecture pour ouvrir la visionneuse d'application visuelle.
Remarque : n'oubliez pas que si vous donnez un autre nom à votre projet, vous ne pourrez pas suivre correctement le tutoriel.
Étape 2 : Intégrer les grilles
Maintenant que vous avez votre application vide, il est temps de configurer la mise en page : comment les éléments seront affichés dans la page. Rappelons rapidement ce dont nous disposons :
- Un titre et un sous-titre
- Deux champs de saisie de texte
- Un bouton
Créons des grilles : nous avons quatre blocs, donc 4 lignes de grille de 25 % chacune :
Dans votre projet, allez dans Application -> NgxApp
-> Pages -> Page -> Contenu, puis cliquez dessus et recherchez le composant « Grid » dans la palette.
Lorsque vous faites glisser le composant Grid vers la fenêtre App Viewer, choisissez « inside ». Affichez ensuite les bordures de la grille : pour ce faire, cliquez sur le bouton « Show all grids or current selected » situé à côté de l'App Viewer (dernière icône de la barre d'outils verticale).
Ici, vous n'avez pas besoin des colonnes droite/gauche, il suffit donc de supprimer « GridCol1 » dans l'arborescence.
Définissez la hauteur « GridRow » à 25 % dans les propriétés GridRow -> Hauteur.
Il vous suffit ensuite de dupliquer cette GridRow 4 fois dans la grille (clic droit sur GridRow-> Copier, puis clic droit sur la grille principale et choisir Coller « en tant qu'enfant » dans la grille)
La page est désormais divisée en 4 blocs égaux, dans lesquels vous ajouterez les composants de votre page.
Étape 3 : Placez les éléments de votre page
Comme vous n'en avez pas besoin ici, vous pouvez supprimer l'en-tête et le pied de page.
L'étape suivante consiste simplement à ajouter les éléments de votre page :
Cliquez sur votre première GridCol, puis recherchez « H1 » dans la palette. Glissez-déposez-le dans votre première GridRow. Supprimez le libellé sur le GridCol pour vous débarrasser de la « Colonne 11 », puis modifiez le libellé de votre H1 dans les propriétés dans « Valeur du texte » comme sur le design Figma : « Ravie de vous revoir ! »
Ensuite, dans cette même section, ajoutons le sous-titre : recherchez le composant « Paragraphe » dans la palette et glissez-déposez-le sous le premier texte. Comme pour le titre, modifiez sa valeur conformément à la conception Figma : « Prêt pour une nouvelle expérience ? »
Répétez l'opération avec les autres éléments dans les étapes suivantes.
Étape 4 : Placez les éléments de votre page n° 2
Sélectionnez votre deuxième GridRow (supprimez à nouveau l'étiquette), puis recherchez « GenericItem » dans la palette. Glissez-déposez ce GenericItem dans la deuxième section. Dans l'étiquette du GenericItem, remplacez la valeur du texte par « Username ». Dans la palette, recherchez le composant « TextInput » et glissez-déposez-le dans votre GerenicItem (cette saisie de texte sera utilisée pour remplir le champ).
Ensuite, dans la palette, recherchez le composant « Icon » et glissez-le dans votre GenericItem. Cliquez dessus et, dans les propriétés, définissez sa taille sur « small » et son emplacement sur « start » pour le placer à gauche. Cliquez ensuite sur [...] du champ « Icon Name » : c'est ici que vous choisirez l'icône que vous souhaitez. (Ici, vous pouvez littéralement choisir l'icône que vous souhaitez.)
Maintenant que vous avez votre première entrée de texte complète, il vous suffit de copier l'ensemble du GenericItem et de le coller dans le GridCol suivant. Modifiez l'icône et l'étiquette en « Password »
À l'étape suivante, vous placerez votre bouton, puis vous pourrez styliser l'ensemble.
Étape 5 : Placez les éléments de votre page n° 3
Le dernier élément à afficher est le bouton : rien de compliqué, recherchez dans la palette le composant « Button », glissez-le dans la dernière section Grid.
Modifiez la valeur du texte du bouton dans l'arborescence en « Sign in ».
Vous disposez désormais de tous les éléments qui composent la page de connexion : voyons comment la styliser selon le design Figma.
Étape 6 : Mettez en forme les éléments de votre page
It's time to put some styling in this page !
As told at the beginning of this tutorial, each element of this page has an automatic CSS generated by figma. You just have to click the element you want, click on "inspect" and you simply have to copy/paste it. (Don't copy the Height, Width and position, it is useless for the Studio). Let's see where !
For the first CSS element, select the background of the page (click on the page background), and as you can see the affiliated CSS shows up. Copy it (here we just need the background one) and come back in the Studio.
The idea is simply to put a "Style" component in each element you want to style : Search in the palette for "Style" and as you want to change the background color, drag & drop this component directly in your content, directly on the app viewer as in the video or in the treeview.
Then double click the Style to open the editor and paste your copied CSS.
Be careful : you have to paste the CSS inside the {} to be effective.
Overmore, you will always have to add "--" before every CSS line that you will paste : That is mandatory to tell the component you style to "accept" this styling.
Étape 7 : Stylisez les éléments de votre page n° 2
Répétons l'opération avec le titre (h1) : dans le projet Figma, cliquez sur « Glad to see you again ! » et copiez le CSS qui apparaît à droite (à l'exception de la famille de polices qui sera configurée ultérieurement).
Revenez dans Studio, recherchez le composant « Style » dans la palette et glissez-déposez-le directement dans le champ h1 de l'App Viewer.
Ouvrez le composant style dans le champ H1 dans l'arborescence, double-cliquez pour l'ouvrir et collez votre CSS. (N'oubliez pas le « -- » au début de chaque ligne).
Répétez l'opération pour le sous-titre (paragraphe) : cliquez dessus dans Figma, copiez le CSS (à l'exception de la famille de polices), glissez-déposez un composant style dans le paragraphe, ouvrez-le et collez votre CSS. (N'oubliez pas le « -- » au début de chaque ligne).
Recherchez ensuite dans la palette le composant « FormatLayout » et glissez-le dans la « grille » principale de l'arborescence. Ce FormatLayout centrera les éléments de la page.
Cliquez sur FormatLayout et, dans ses propriétés, recherchez « Alignment » et configurez-le sur « ion-text-center ».
Étape 8 : Mettez en forme les éléments de votre page n° 3
Répétez cette opération avec le texte saisi : Bonne nouvelle, comme les deux champs sont identiques, il vous suffit de le faire pour l'un et de copier/coller le composant de style dans le second.
Dans Figma, cliquez sur le premier champ de texte saisi et copiez le CSS (à l'exception de la largeur, de la hauteur et de la position).
Revenez dans Studio, recherchez le composant « Style » dans la palette et glissez-le dans le composant « GenericItem » dans l'arborescence (difficile à pointer directement dans l'App Viewer).
Ouvrez le composant de style, double-cliquez pour l'ouvrir et collez votre CSS. (N'oubliez pas le « -- » au début de chaque ligne).
Appuyez sur CTRL + S dans l'éditeur pour appliquer le CSS, puis cliquez simplement avec le bouton droit sur ce composant Style pour le copier et le coller dans le deuxième GenericItem.
Étape 9 : Mettez en forme les éléments de votre page #4
Le dernier élément à styliser est le bouton. Cliquez dessus dans Figma, copiez le CSS (même la largeur et la hauteur pour celui-ci) et revenez dans Studio : recherchez le composant Style dans la palette, glissez-déposez-le directement dans le bouton App Viewer, ouvrez le style et collez votre CSS. (N'oubliez pas le « -- » au début de chaque ligne).
Appuyez sur CTRL + S dans l'éditeur pour appliquer le CSS.
Tous vos éléments sont désormais affichés visuellement comme dans Figma.
Cependant, la mise en page ne correspond toujours pas au design Figma : nous allons y remédier à l'étape suivante.
Étape 10 : Stylisez les éléments de votre page #5
Tout le style que vous allez créer est lié aux composants Grid.
La première chose à faire est de mieux placer les textes de saisie : dans l'arborescence, cliquez sur « GridRow1 ». Dans les propriétés, recherchez le champ « Alignement » et configurez-le sur « ion-align-items-end ».
Cela placera le texte de saisie au bas de cette grille.
Répétez cette opération avec « GridRow2 » et « GridRow3 » en définissant l'alignement sur « ion-align-items-center ».
Cela rend la page responsive : vous pouvez changer d'appareil en cliquant sur l'icône du smartphone à gauche de l'App Viewer pour vérifier.