Créez un système de design d’espace de travail dans Base44 pour définir une fois les couleurs, polices, logo et composants de votre marque, puis appliquez un look cohérent à toutes vos applications.
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.
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.
Les espaces de travail sur le forfait Builder et supérieurs incluent 1 système de design. Les espaces de travail Enterprise n’ont pas de limite.
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.
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 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.
Vous créez un système de design depuis les paramètres de votre 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 :
Cliquez sur le nom de votre espace de travail en bas à gauche, puis cliquez sur Settings.
Cliquez sur Design system.
Cliquez sur Create. Si votre espace de travail a déjà un système de design, cliquez plutôt sur Create new design system.
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.
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.
Vérifiez le système de design généré dans l’aperçu, puis ajustez ce que vous voulez.
Créer un système de design à partir des supports de votre marque
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 :
Overview
Une courte description de votre marque. Base44 l’utilise pour garder tout ce qu’il génère fidèle à votre marque.
Logos
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.
Modifier les logos de votre marque
Typography
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. Toute personne de votre espace de travail qui peut modifier, c’est-à-dire les propriétaires, administrateurs et éditeurs, peut téléverser une police. Les lecteurs et invités ne le peuvent pas.
Choisir vos polices de titre et de corps de texte
Color palette
Cliquez sur une couleur pour la modifier, ou cliquez sur Generate palette et décrivez les couleurs que vous voulez.
Modifier une couleur de la palette
Tone of voice
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.
Ajouter des traits de ton de voix
Core values
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.
Ajouter vos valeurs fondamentales
Corner radius
Définissez le niveau d’arrondi de vos composants.
Définir vos valeurs de rayon de coin
Spacing scale
Affinez l’espace entre les éléments.
Affiner votre échelle d'espacement
Shadow
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.
Définir vos valeurs d'ombre
Design guidelines
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.
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é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 : peuvent créer, modifier, définir par défaut et supprimer tout système de design.
Éditeurs : peuvent créer et modifier des systèmes de design. Seuls les propriétaires et administrateurs peuvent définir le système par défaut ou supprimer un système de design.
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 :
Cliquez sur le nom de votre espace de travail en bas à gauche, puis cliquez sur Settings.
Cliquez sur Design system.
Sur le système de design voulu, cliquez sur l’icône More actions et cliquez sur Set as default.
Définir un système de design par défaut pour votre 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.
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.
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.
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.
Cliquez sur une question ci-dessous pour en savoir plus sur les systèmes de design.
Ai-je besoin de compétences en design pour créer un système 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.
Chaque client ou projet peut-il avoir son propre système de design ?
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. Les espaces de travail Enterprise n’ont pas de limite.
Cette page a été traduite par IA. Pour les informations les plus précises et à jour, consultez la version anglaise.
Was this page helpful?
Assistant
Responses are generated using AI and may contain mistakes.
