Color, Alpha, variables CSS & Design System²

Commentaires

Commenter

Modification et saisie du texte

Voici quelques instructions de saisie dans Figma pour un export de sortie HTML de qualité.

Feuilles de Styles

(Idéalement, vous avez commencé par créer des feuilles de style dans votre Design Sytem…) Les éléments textes ont une feuille de styles, symbolisée par un lien dans le panneau Design de Figma.

En cliquant sur son nom, on affiche un menu déroulant permettant de choisir un autre style dans la librairie.

Ces styles correspondent à la charte et sont “garantis” en post-production. 

Si vous rompez le lien au style et le modifiez, il peut ne pas être reconnu “spécifiquement” et son rendu peut être aléatoire selon les méthodes de hand-Off (DesignToDev).

Feuilles de styles texte

Vous pouvez sélectionner une portion de texte pour en modifier le style associé sans détacher l’instance du module (comme pour le Fill d’une image).

Pour mettre une partie de texte dans un autre style de texte imbriqué (span), il suffit de sélectionner uniquement les caractères à modifier, cliquer sur le titre du style et choisir un style de type span.

Style de texte "Span"

 

Pour modifier du texte :

  • changer en gras ou en light,
    un alignement
  • une liste (Ordonnée ou à Puces),
  • un changement de casse forcé

Sélectionnez uniquement les caractères ou le paragraphe à modifier, cliquez sur les … à côté du style, et modifier les paramètres dans la fenêtres Type settings.

Appliquer un exposant ou un indice, 3 possibilités :

  1. Ne rien faire, 1er, 1ère, 2nd, 2e, CO2 sont détectés et remplacés automatiquement par le hand-off
  2. Insérer l’indice en tant qu’entité Unicode (®,©,™) ou (¹,²,³,⁴,⁵) pour les renvois aux notes de bas de page.
  3. Sélectionner uniquement les caractères, cliquer sur le cadenas pour détacher le style de ce caractère puis cliquer sur les … à côté du style. 
Dans la fenêtre  Type Settings, cliquer sur “Details”et assigner les réglages souhaités.

Contact

Logo DVW Design DVW Design

Paris, France

Tel. +33(0)6 68 49 06 04

Vous pouvez également flasher ce QR Code avec mes coordonnées