Utilisé pour la typographie, les espacements, les rayons et les icônes.
Douglas
Aide au design Web
Une boîte à outils pour préparer les fondations, les composants, les pages et le fichier Figma d’un projet Web.
Formats utilisés
Chaque format actif générera une page distincte dans Figma.
Base d’espacement
8 px
Projet
Pages
Prépare la liste complète des pages à concevoir. Chaque page deviendra une planche vide dans les formats Figma sélectionnés.
Pages du site
Tu peux renommer, réordonner, dupliquer ou supprimer les pages proposées.
Pages proposées par défaut
Douglas crée initialement les pages Accueil, Nous joindre, Erreur 404 et Page de confirmation. Elles peuvent toutes être modifiées ou supprimées.
Fondations
Couleurs
Ajoute les couleurs sources du projet. Douglas génère une palette complète de 50 à 950 pour chacune d’elles.
Palettes de couleurs
Clique sur une déclinaison pour copier son code HEX. La couleur source est placée automatiquement au niveau correspondant à sa luminosité.
Déclinaisons
Les échelles complètes sont générées à partir de chaque couleur source.
Rôles sémantiques
Les rôles relient les composants et les styles typographiques aux palettes 50 à 950.
Projet
Formats d’écran
Chaque format actif devient une page Figma. Desktop, tablette verticale et mobile sont inclus par défaut.
Formats utilisés
Entre la largeur et la hauteur de départ des planches Figma.
Voir les valeurs techniques
Ces plages sont données à titre de référence pour le développement.
Fondations
Typographie
Définis les deux familles du projet puis assigne-les aux styles typographiques.
Familles typographiques
Le plugin Figma créera les variables « Police des titres » et « Police des textes ».
Entre le nom exact utilisé dans Figma.
Le plugin utilisera Inter comme remplacement si la police n’est pas disponible.
Échelle typographique
Chaque style définit sa famille, sa graisse, sa casse, sa couleur, son interligne et son espacement des lettres.
Fondations
Espacements
Génère une échelle pour les marges, les paddings et les espaces entre les éléments.
px
Fondations
Grilles
Une proposition est générée pour chaque format actif. Les mêmes valeurs créeront de vraies grilles de mise en page Figma en rouge à 10 %.
Fondations
Rayons de coins
Définis les rayons du design system et calcule le rayon d’un élément placé à l’intérieur d’un autre.
Échelle de rayons
Ces valeurs seront exportées comme variables numériques dans Figma.
px
px
Cet espace correspond habituellement au padding du grand bloc.
Rayon du petit bloc
Clique sur le résultat pour le copier.
12 px
Rayon extérieur : 16 px
Espace : 4 px
Fondations
Ombres et lueurs
Choisis un point de départ, ajuste l’effet et vérifie-le sur plusieurs fonds.
Point de départ
Sélectionne l’effet qui ressemble le plus au résultat recherché.
Aperçus
Le même effet est présenté sur trois types de fonds.
Aperçu
Carte ou composant
Aperçu
Carte ou composant
Aperçu
Carte ou composant
Valeur CSS
box-shadow: 0 8px 24px 0 rgba(5, 26, 53, 0.12);
Fondations
Tailles d’icônes
Génère une échelle et vérifie la zone cliquable autour des icônes.
px
px
Composants
Boutons
Configure les variantes Primaire, Secondaire, Tertiaire, Fantôme et Accent ainsi que leurs états.
Réglages communs
Le texte des boutons utilise 16 px par défaut. Douglas calcule automatiquement un padding vertical légèrement asymétrique pour améliorer le centrage.
Variantes et états
Les valeurs sont préremplies à partir des rôles sémantiques et peuvent être ajustées.
Aperçu des boutons
Le plugin Figma créera cette présentation ainsi qu’un vrai ensemble de composants avec variantes.
Composants
Champs et choix
Configure les champs texte, les zones de texte, les cases à cocher et les boutons radio.
Champs texte
Les champs et les zones de texte partagent leurs couleurs, leur typographie, leur bordure et leur rayon.
Cases à cocher
États par défaut, survol, sélectionné, focus et désactivé.
Boutons radio
Bouton radio standard et bouton radio présenté sous forme de carte.
Aperçu des composants
Cette section utilise les valeurs actuelles du projet.
Validation
Contrastes
Vérifie rapidement une combinaison précise ou consulte les contrastes importants du design system.
Ce bloc permet de vérifier le résultat dans un contexte réel.
Matrice des contrastes
La table présente les combinaisons entre les couleurs sources et leur conformité pour le texte et les éléments d’interface.
Combinaisons du design system
Cette table est aussi générée dans la page « Design system » de Figma.
Export
Export Figma
Génère le code JSON à coller dans le plugin « Douglas Design System ».
Formats à créer
Le design system est toujours inclus. Desktop est sélectionné par défaut.
Contenu de l’export
Le plugin créera les variables, les styles, les composants, la documentation et les planches.
Design system
Toujours inclus
Palettes 50 à 950
Variables Figma
Rôles sémantiques
Alias de variables
Typographie
Variables et styles
Boutons
Documentation et composants
Champs et choix
Documentation et composants
Pages Web
Planches vides par format
Code JSON
Le code est produit à partir du projet actuellement ouvert.