Documentez vos systèmes de conception avec fractale

Sep 11, 2025

Comment

[dix] [dix] [dix]

[dix]

Avez-vous envie d'apprendre davantage sur les systèmes de conception? Alors ne manquez pas d'ingénieur d'interface utilisateur senior Mina Markham à Générer de New York Le 28 avril, où elle discutera de la manière dont elle a créé Pantsuit, le système de conception qui a propulsé de nombreuses applications hébergées sur HillaryClinton.com. Et sur la côte ouest, à Générer San Francisco Le 9 juin, Stephanie Rewis Partagera certaines des leçons qu'elle a apprises tout en renforçant le système de conception Salesforce.

[dix]

À présent, beaucoup d'entre nous connaissent bien Guides de style . Mais il y a une nouvelle race de documentation du système de conception gagnant de la vapeur: la bibliothèque de motifs. La principale différence entre les deux est la principale source de la documentation de l'outil.

La documentation d'un guide de style a tendance à être originaire d'un fichier de marquage, afin de montrer le balisage que l'auteur est souvent obligé de le copier et de la coller dans le marquage. Ceci est presque impossible à maintenir lors du montage de plusieurs composants ensemble.

Une bibliothèque de motifs, d'autre part, traite nos fichiers HTML de composant comme citoyens de première classe. Chaque composant obtient sa propre page, où il affiche le marquage et le HTML rendu directement à partir du fichier HTML. Cela garantit que les fichiers HTML et la documentation ne sortent jamais de la synchronisation.

Les bibliothèques de motifs sont souvent construites à l'aide d'une langue de modèles plutôt que de HTML uni. Les modèles peuvent inclure des variables et une autre logique, puis nous pouvons passer à divers ensembles de données, permettant ainsi d'afficher des variations d'un composant.

[dix]

Il est possible de combiner plusieurs modèles pour créer des écrans plus complexes, voire des pages complètes. Ces fichiers sont tellement flexibles qu'ils pourraient même être utilisés dans la production! Toute modification apportée à notre bibliothèque de motifs est automatiquement prise en charge par notre site Web, comme tout balisage - pour la bibliothèque ou pour la production - provient d'un seul ensemble de modèles canoniques.

Design systems will be covered at both Generate New York and San Francisco this year — Les systèmes de conception seront couverts à la fois pour générer New York et San Francisco cette année.

Entrer fractal

Créé par Clearleft, Fractal Vous aide à créer et à documenter les bibliothèques de composants Web et à les intégrer à vos projets. Dans ce tutoriel, nous examinerons de plus près comment cela fonctionne (téléchargez une version finie de la démo à ici ).

Fractal est un module nœud.js installé via NPM. Vous souhaitez d'abord installer le module mondial afin que vous puissiez générer un nouveau projet:

npm install --global @frctl/fractal

Avec ce package installé, créez un nouveau projet:

fractal new project-name

Cette commande incendie un guide d'installation qui vous fait traverser le processus d'installation. Cela vous demandera le titre du projet; les noms des composants, de la documentation et des dossiers publics; et si vous utiliserez GIT pour le contrôle de la version. Une fois que ces questions sont terminées, Fractal installera tous les modules requis et configurera une structure de dossier simplement comme spécifié.

Si vous souhaitez ignorer l'installation globale et créer le projet manuellement, les instructions d'installation manuelle peuvent être trouvées à ici .

La filant

Maintenant, vous avez un projet fractal entièrement installé, tournez-le en entrant dans le dossier du projet. Nom du projet CD et exécuter la commande de synchronisation fractale. Ceci démarre un serveur local, regarde les fichiers des modifications et démarre automatiquement BrowserSync:

fractal start --sync

Et comme ça, vous avez une instance de travail de fractale. Ouvrez votre navigateur de choix et accédez à http: // localhost: 3000 pour voir le début de votre nouveau projet fractal. Pour éviter de demander à chacun d'installer Fractal Globalement, créez un script dans votre paquet.json Cela appelle le binaire fractal.

 "scripts": {
    "fractale": "./node_modules/.bin/fractal start --Sync"
}

Maintenant, vous pouvez utiliser NPM Run Fractal sans avoir à installer sans rien globalement.

Ajouter un composant

Maintenant, vous avez commencé un projet fractal, il est temps d'ajouter des composants. Les fichiers de démarrage sont livrés avec un composant appelé «exemple», mais nous allons vous en débarrasser et en faire un nouveau à partir de zéro.

L'une des meilleures choses sur la fractale est que vous pouvez organiser vos composants, mais vous préférez dans le dossier Composants, et il imitera automatiquement cette organisation dans la navigation de la bibliothèque de motifs.

Pour le premier composant, nous allons créer un nouveau bouton principal à l'intérieur d'un dossier de boutons . Pour ce faire, créer avec un fichier de modèle à Composants / boutons / bouton primaire / boutonnière primaire.HBS . Fractal prend en charge les modèles de guidon de la boîte, alors utilisez la .HBS extension de fichier:

[dix]


           & lt; class de bouton = "bouton primaire" & gt; {{texte}} & lt; / bouton et gt;

Le {{texte}} chaîne à l'intérieur de la balise du bouton est un espace réservé variable, ce qui vous permet de réutiliser le modèle, en passant des valeurs différentes pour texte du fichier de données.

Pour créer le fichier de données, utilisez le même nom de base que le fichier de guidon, mais avec une autre yml extension. Maintenant le primaire-button.config.yml assis à l'intérieur du Composants / boutons / boutons primaires Le dossier devrait ressembler à ceci:

 Titre: bouton principal
le contexte:
    Texte: cliquez sur moi

Tout cela crée ensemble votre premier nouveau composant, le bouton principal, membre de la catégorie de boutons, avec le texte: "cliquez sur moi".

Variations de composants

Fractal prend en charge les variations du même composant, nous permettant d'afficher le même composant avec diverses classes ou attributs de modificateur. Disons donc que nous voulions avoir la possibilité d'utiliser un bouton à thème sombre. Nous pourrions créer un nouveau fichier de modèle appelé Bouton primaire - Dark.HBS À côté de notre modèle d'origine (le double DASH indique ces variations de composants). Dans ce modèle, nous appliquerons un modificateur que nous pouvons accroître pour joindre de nouveaux styles.

 & lt; class de bouton = "bouton principal" Thème de données = "sombre" & gt; {{texte}} & lt; / button & gt;

Maintenant, lorsque nous écrivons notre CSS, nous pouvons inclure le sélecteur suivant pour modifier ce modèle avec des styles modifiant.

. Bouton PRIMARY [THÈME DE DONNEES = "DARK"] {}

Variations de données

Tout comme nous pouvons définir des variations en créant plusieurs fichiers de modèle, nous pouvons également créer des variations dans nos données. Nous pouvons faire cela à l'intérieur de la primaire-button.config.yml Fichier en ajoutant un tableau de variantes.

 Titre: bouton principal
le contexte:
    Texte: cliquez sur moi
Variantes:
- Nom: Télécharger
    le contexte:
Texte: Téléchargez maintenant
- Nom: Installer
    le contexte:
Texte: Installer maintenant

Cela créera de nouvelles variations nommées 'Télécharger' et 'Installer', avec un texte différent transmis dans le bouton. Un exemple plus pratique pourrait être si vous utilisiez cette même chose bouton primaire.HBS modèle en fractale ainsi que la production. Dans ce cas, plutôt que de créer un tout nouveau modèle pour votre thème sombre, vous pouvez transmettre la valeur thématique en tant que variable et utiliser les variations de données pour afficher tous les thèmes de tous les boutons.

 & lt; class de bouton = "bouton principal" Thème de données = "{{thème}}" & gt; {{texte}} & lt; / bouton et gt;

Titre: bouton principal
le contexte:
    Texte: cliquez sur moi
    Thème: lumière
Variantes:
- Nom: Thème sombre
    le contexte:
Texte: cliquez sur moi
Thème: Dark

Manipulation d'autres actifs

Fractal traitera également des fichiers autres que le balisage et les données. Tout CSS, JavaScript, images ou autres actifs que vous ajoutez au dossier de composant sera affiché dans l'onglet «Actif». Vous pouvez spécifier un Readme.md Fichier du composant afin que vous puissiez écrire des notes sur la manière dont le composant est utilisé ou un lien vers d'autres parties de la documentation.

Prochaines étapes

La répétition de l'exemple précédent pour tous vos composants principaux crée un catalogue utile des principaux blocs de construction de votre site. Mais le véritable pouvoir d'une bibliothèque de motifs provient de la capacité de combiner ces pièces ensemble. Assurez-vous de vérifier le Documentation fractale Pour savoir comment vous pouvez commencer à créer des composants plus complexes en combinant des éléments atomiques plus petits pour créer des plus grands.

Le dossier Docs est un endroit idéal pour mettre des informations de guidage de style traditionnelles et des notes complémentaires. Cela pourrait couvrir des choses telles que la documentation à l'introduction, des directives sur la voix et la tonalité de votre marque, des listes de couleurs et de variables, etc. Il suit la même navigation basée sur les dossiers que les composants le font, et si vous organisez vos fichiers dans des dossiers de sujet, vous trouverez la navigation sur la Documents fractionnels une brise.

La fractale prend également en charge des sources de données plus complexes. Si vous devez générer un ensemble de données volumineux pour un modèle ou que vous souhaitez le tirer dans une API tiers, vous pouvez utiliser composant-name.config.js Pour renvoyer un objet JavaScript à la place des données de fichier YML.

Enfin, Fractal vous permet d'utiliser un certain nombre de langues de modèles différentes. Assurez-vous de consulter la liste complète de sa documentation. Et le plus important, amusez-vous!

Réservez vos billets pour produire aujourd'hui! Dans New York Vous pouvez apprendre de Mina Markham, qui a construit le système de conception de la campagne présidentielle de Hillary Clinton et dans San Francisco Stephanie Rewis expliquera comment vous pouvez architecte et construire un cadre de CSS moderne pour un système de conception vivant à l'échelle de l'entreprise.

Cet article a été publié à l'origine dans Net Magazine Numéro 285, Achetez-le ici

[dix] [dix]

[dix]

Documentez vos systèmes de conception avec fractale

Entrer fractal

La filant

Ajouter un composant

Variations de composants

Variations de données

Manipulation d'autres actifs

Prochaines étapes

Comment - Most Popular Articles

Comment utiliser le stockage en nuage comme créatif

Commencez avec WebVR

Créer des textures fantomatiques avec des techniques mixtes-médiatiques

Obtenez votre tête autour de réagir avec ces cinq facteurs

Comment travailler avec la vidéo HTML

Comment créer du manga avec une torsion ouest sauvage

Créer un environnement de jeu dans Unreal Moteur 4

Commencez avec le prototypage dans Adobe XD

Catégories