Skip to main content
Un système de design enregistre l’identité visuelle de votre marque au niveau de l’espace de travail : ses couleurs, polices, logo et un ensemble de composants assortis. Créez-le une fois, définissez-le par défaut, et chaque nouvelle application que vous construisez démarre aux couleurs de votre marque, vous n’avez donc pas à redéfinir votre style à chaque fois. Vous n’avez pas besoin d’être designer. Avec seulement quelques détails, comme votre logo, une courte description de votre marque, le style que vous voulez et vos éventuels fichiers de design, Base44 crée un système de design complet pour vous, afin que toutes vos applications aient un aspect professionnel et fidèle à votre marque.
La page Design system dans les paramètres de l'espace de travail, avec une carte de système de design Base44 présentant son logo, un bouton, des échantillons de couleurs et la police Inter, à côté d'une tuile en pointillés Create new design system

Vos systèmes de design dans les paramètres de l'espace de travail

Disponibilité :
  • Les systèmes de design sont disponibles sur le forfait Builder et supérieurs. Chaque espace de travail peut avoir 1 système de design, et autant que nécessaire sur le forfait Enterprise.
  • Les systèmes de design s’appliquent aux applications web, pas aux applications mobiles. Une application importée depuis Figma, démarrée à partir d’une URL ou migrée depuis une autre plateforme peut recevoir un système de design une fois sa construction terminée.
  • Créer et utiliser un système de design ne coûte pas de crédits.

​
Ce qui est inclus

Lorsque vous créez un système de design, Base44 remplit tout ce qui garde vos applications cohérentes et fidèles à votre marque, et affiche le tout dans un aperçu en direct. Changez une couleur ou une police, et chaque exemple se met à jour immédiatement, vous voyez donc toujours le rendu.
Un système de design, avec les paramètres de votre marque à gauche et un aperçu en direct à droite

Un système de design et son aperçu en direct

Un système de design couvre 3 éléments :
  • Les bases de votre marque : votre logo, le nom de la marque, le slogan et une courte description, ainsi que les valeurs fondamentales de votre marque, son ton de voix et les directives de design décrivant son apparence.
  • Votre identité visuelle : vos couleurs, vos polices, l’arrondi de vos coins, l’ombre sous les éléments et l’espace entre eux.
  • Des éléments prêts à l’emploi : un ensemble complet de composants déjà assortis à votre marque et prêts à être insérés dans n’importe quelle application, y compris boutons, icônes, cartes, navigation, formulaires et sections de page, chacun stylisé pour ses états interactifs.

​
Créer un système de design

Les propriétaires et administrateurs de l’espace de travail créent les systèmes de design depuis les paramètres de l’espace de travail. Dans un seul formulaire, vous pouvez combiner une courte description, votre logo, un import depuis Figma, un site web ou un package npm, et vos propres fichiers de design, et Base44 génère un système de design complet à partir de ce que vous fournissez. Pour créer un système de design :
  1. Cliquez sur le nom de votre espace de travail en bas à gauche, puis cliquez sur Settings.
  2. Cliquez sur Design system.
  3. Cliquez sur Create. Si votre espace de travail a déjà un système de design, cliquez plutôt sur Create new design system.
  4. Dans Create your design system, ajoutez l’un des éléments suivants :
    • Décrivez votre marque : écrivez une courte description de votre marque, et ajoutez votre logo dans le carré à côté.
    • Importez une source existante : vous pouvez utiliser une source par système de design. Passez d’un onglet à l’autre :
      • Figma file : déposez ou parcourez un fichier .fig, jusqu’à 1,9 Go, et joignez toutes ses pages et frames ou choisissez-en certaines. Base44 réduit les images surdimensionnées et prépare les gros fichiers en arrière-plan, et ne stocke pas le fichier d’origine.
      • Website URL : collez une adresse de site web. N’utilisez que des URL dont vous avez les droits sur le contenu.
      • NPM package : saisissez un package publié par nom, name@version ou un lien npmjs.com. Il se résout depuis le registre npm public par défaut, ou cliquez sur Private registry pour ajouter une URL de registre, un jeton d’accès et les scopes qui doivent s’y résoudre. Votre jeton d’accès est utilisé une seule fois pour récupérer le package et n’est pas stocké.
    • Téléversez vos ressources de design : ajoutez des images, des polices, un fichier design.md ou d’autres fichiers de design, jusqu’à 10 fichiers.
  5. Cliquez sur Create. La génération de votre système de design peut prendre quelques minutes, et vous pouvez partir et revenir pendant qu’elle s’exécute.
  6. Vérifiez le système de design généré dans l’aperçu, puis ajustez ce que vous voulez.
The Create a design system dialog with a logo, a brand description, an imported source, and uploaded design resources

Créer un système de design à partir des supports de votre marque

​
Modifier votre système de design

Lorsque vous ouvrez un système de design, vous le modifiez dans un éditeur à deux panneaux. À gauche se trouvent tous vos paramètres de marque et de design. À droite, un aperçu Preview en direct montre ces styles appliqués à de vrais boutons, icônes et cartes, tels qu’ils apparaissent dans votre application ou site web. Quand vous changez un paramètre à gauche, l’aperçu se met à jour instantanément. Le nom et le slogan de votre système de design se trouvent en haut de la page. Cliquez sur l’un ou l’autre pour le modifier directement. À gauche, vous pouvez modifier chaque partie de votre système de design :
Une courte description de votre marque. Base44 l’utilise pour garder tout ce qu’il génère fidèle à votre marque.
Ajoutez les logos de votre marque, ou générez-en un avec l’IA. Cliquez sur Add logo pour téléverser un logo, ou sur Generate logo pour en décrire un et laisser Base44 le créer. Un logo est marqué comme Primary, et vous pouvez en définir un autre comme principal depuis son menu More actions.
La carte Logos avec les boutons Generate logo et Add logo, et un logo marqué Primary

Modifier les logos de votre marque

Choisissez vos polices de titre et de corps de texte, ou téléversez les vôtres. Vous pouvez aussi affiner la graisse de chaque style de police. Les propriétaires et administrateurs de l’espace de travail peuvent téléverser une police.
La carte Typography avec Heading et Body tous deux réglés sur Inter, au-dessus des graisses Regular à 400, Medium à 500, Semibold à 600 et Bold à 700

Choisir vos polices de titre et de corps de texte

Cliquez sur une couleur pour la modifier, ou cliquez sur Generate palette et décrivez les couleurs que vous voulez.
La carte Color palette avec un sélecteur de couleur ouvert sur le premier échantillon, montrant un champ dégradé, un curseur de teinte et des valeurs R, G et B de 26, à côté des échantillons Secondary, Accent, Text, Muted et Destructive

Modifier une couleur de la palette

Définit comment votre marque communique. Cliquez sur Add tone pour ajouter un trait, ou cliquez sur l’icône de génération pour laisser Base44 suggérer un nouvel ensemble.
La carte Tone of voice avec confident, clear, friendly, direct et optimistic sous forme d'étiquettes amovibles, au-dessus d'un bouton Add tone

Ajouter des traits de ton de voix

Les principes que votre marque défend. Cliquez sur Add value pour en ajouter un, ou cliquez sur l’icône de génération pour laisser Base44 suggérer un nouvel ensemble.
La carte Core values avec Effortless, Complete, Trustworthy, Modern et Empowering sous forme d'étiquettes amovibles, au-dessus d'un bouton Add value

Ajouter vos valeurs fondamentales

Définissez le niveau d’arrondi de vos composants.
La carte Corner radius avec des tuiles d'aperçu et des champs en pixels pour none à 0, sm à 6, md à 12, lg à 20 et full à 9999

Définir vos valeurs de rayon de coin

Affinez l’espace entre les éléments.
La carte Spacing scale avec des barres allant de sp-1 à 4 pixels jusqu'à sp-7 à 48 pixels, chacune avec un champ en pixels modifiable

Affiner votre échelle d'espacement

Définissez le niveau d’élévation de vos composants. Cliquez sur une ombre pour ajuster sa position, son flou, son étendue et sa couleur.
La carte Shadow avec 5 tuiles d'aperçu d'ombre de profondeur croissante, nommées none, sm, md, lg et xl

Définir vos valeurs d'ombre

Des règles qui gardent le langage visuel de votre application cohérent. Cliquez sur Add guideline pour en ajouter une, ou ouvrez le menu More actions sur une directive pour la modifier ou la supprimer.
La carte Design guidelines, décrite comme les règles que l'agent suit pour cette marque, avec 7 directives rédigées, chacune avec un menu More actions, au-dessus d'un bouton Add guideline

Modifier vos directives de design

Vos modifications ne sont appliquées que lorsque vous les enregistrez. Cliquez sur Save changes pour les conserver, ou sur Reset changes pour annuler les modifications non encore enregistrées. Un système de design a besoin d’un nom et d’un aperçu avant de pouvoir être enregistré.

​
Gérer vos systèmes de design

Gérez un système de design depuis sa carte dans la section Design system. Ouvrez l’icône More actions sur un système de design pour le modifier, le définir par défaut ou le supprimer.
Qui peut gérer les systèmes de design :
  • Propriétaires et administrateurs de l’espace de travail : peuvent créer, modifier, définir par défaut et supprimer tout système de design.
  • Autres membres de l’espace de travail : peuvent consulter les systèmes de design et en joindre un dans le chat IA, mais ne peuvent pas les créer, les modifier ni les supprimer.
La page de paramètres Design system avec le menu de la carte ouvert et Edit encadré, au-dessus de Set as default et Delete

Ouvrir un système de design pour le modifier

​
Définir un système de design par défaut

Définissez un système de design par défaut pour votre espace de travail afin que les nouvelles applications démarrent automatiquement avec. Pour définir votre système de design par défaut :
  1. Cliquez sur le nom de votre espace de travail en bas à gauche, puis cliquez sur Settings.
  2. Cliquez sur Design system.
  3. Sur le système de design voulu, cliquez sur l’icône More actions et cliquez sur Set as default.
La page Design system avec le menu de la carte ouvert et Set as default encadré, entre Edit et Delete

Définir un système par défaut pour l'espace de travail

Pour ne plus utiliser un système de design par défaut, ouvrez le même menu et cliquez sur Remove default.

​
Supprimer un système de design

Supprimez un système de design dont vous n’avez plus besoin.
La suppression d’un système de design depuis sa carte prend effet immédiatement, et elle ne peut pas être annulée.
Pour supprimer un système de design :
  1. Cliquez sur le nom de votre espace de travail en bas à gauche, puis cliquez sur Settings.
  2. Cliquez sur Design system.
  3. Sur le système de design voulu, cliquez sur l’icône More actions et cliquez sur Delete.
La page de paramètres Design system avec le menu de la carte ouvert et Delete encadré, sous Edit et Set as default

Supprimer un système de design

​
Utiliser votre système de design pendant la construction

Lorsque vous démarrez une nouvelle application, votre système de design par défaut est présélectionné, l’application est donc construite pour correspondre à votre marque dès le premier prompt. Pour choisir un autre système de design, cliquez sur l’icône Add dans le chat IA, sélectionnez Use a design system, puis choisissez celui que vous voulez.
The home prompt box with the Add menu open, Use a design system highlighted, and the design system list beside it

Choisir un système de design au démarrage d'une nouvelle application

Vous pouvez aussi appliquer un système de design à une application sur laquelle vous travaillez déjà, depuis la même icône Add dans le chat IA. Quand votre espace de travail a un seul système de design, l’option affiche son nom, et cliquer dessus joint le système de design à votre prochain prompt.
The AI chat Add menu open with Use a design system highlighted

Appliquer votre système de design depuis le chat IA

L’application d’un système de design prend effet lors d’un tour de construction dans le chat IA. Si votre chat est en mode non-construction comme Discuss, passez d’abord en Build.
Appliquer un système de design à une application déjà construite reconstruit l’application pour correspondre, plutôt que de la restyler sur place. Appliquez-le tôt, ou attendez-vous à ce que l’application soit régénérée.

​
FAQ

Cliquez sur une question ci-dessous pour en savoir plus sur les systèmes de design.
Non. Décrivez votre marque en quelques mots, ou importez depuis un site web, un fichier Figma, un package npm ou votre logo, et Base44 génère un système de design complet pour vous. Vous pouvez ensuite ajuster chaque partie.
Sur le forfait Builder et supérieurs, vous avez 1 système de design par espace de travail, alors utilisez un espace de travail distinct pour chaque client ou projet qui a besoin de sa propre marque. Sur le forfait Enterprise, il n’y a pas de limite.
Cette page a été traduite par IA. Pour les informations les plus précises et à jour, consultez la version anglaise.