Améliorez vos compétences UI/UX grâce aux symboles Sketch et aux guides de style dynamiques

1. Bande-annonce: Je suis [inaudible] et je suis concepteur de produits ici chez SkillShare. Aujourd'hui, certains des plus grands défis auxquels font face les concepteurs UI/UX sont de lutter contre les incohérences dans leur application ou leur site Web, ainsi que d'essayer de rationaliser leur processus de conception et de développement pour créer des produits beaucoup plus rapidement. Lorsqu' il y a un manque d'actifs de conception réutilisables, concepteurs ont tendance à fabriquer chaque composant à partir de zéro, ce qui est vraiment difficile à mettre à l'échelle. Cela crée également beaucoup d'incohérences sur le site. Cela peut conduire à beaucoup de confusion de l'utilisateur. Lorsqu' il y a trop de motifs ou d'éléments visuels, les utilisateurs ne savent pas à quoi s'attendre lorsqu'ils interagissent et passent par différents flux utilisateur sur un site. Récemment, de nombreuses équipes de conception ont adopté des systèmes de conception beaucoup plus grands, plus complexes et évolutifs qui aideront à lutter contre ces problèmes. Ceux-ci peuvent inclure des couleurs simples, la typographie et la documentation de motifs différents, mais ils peuvent également inclure composants beaucoup plus complexes qui sont spécifiques à cette application exacte. Par exemple, sur SkillShare, nous avons des composants très répétitifs pour indiquer les cartes de classe. Ces systèmes conçus sont adaptables et réutilisables. Il rend votre processus de conception beaucoup plus efficace et augmente la cohérence dans une grande application, voire un ensemble de produits. Eh bien, ils sont devenus très courants dans les entreprises, je pense qu'il y a une grande utilité pour celles-ci, vous soyez un freelancer, un designer travaillant sur un projet seul, ou même une petite équipe de designers. Ces systèmes peuvent être facilement assemblés et peuvent vraiment rationaliser le flux de travail de n'importe quel concepteur. Dans ce cours, je vais vous montrer comment vous pouvez vraiment créer rapidement un guide de style personnalisé à utiliser sur une application. Il peut s'agir d'une application sur laquelle vous travaillez personnellement, ou d'une application que vous avez décidé d'examiner de plus près, vous allez obtenir la perspective d'un initié dans le flux de travail d'un concepteur UI/UX. Eh bien, ce pourrait être un sujet légèrement créneau qui sonne. C' est certainement quelque chose que tout le monde peut utiliser dans son workflow de conception, vous débutiez dans l'industrie ou que vous cherchiez vraiment à peaufiner certaines de vos compétences en croquis. Tout ce dont vous avez besoin pour ce cours peut être téléchargé en ligne gratuitement ou pour un essai gratuit. Ne vous inquiétez pas si vous êtes nouveau à l'un de ces outils. Nous allons commencer ce cours en identifiant et documentant les modèles de conception existants sur votre application. Nous allons ensuite utiliser un modèle personnalisé que j'ai fourni à quiconque prend cette classe pour vraiment démarrer le processus de guide de style. Ensuite, nous passons à la création de composants personnalisés dans l'esquisse par nous-mêmes. Ceux-ci seront uniques à l'application sur laquelle vous avez décidé de travailler. Enfin, nous allons partager un peu plus sur la façon d'utiliser ces systèmes entre les équipes ou même sur différents ordinateurs si vous êtes un freelance ou un designer indépendant. Mon objectif pour tous ceux qui suivent ce cours est d'intégrer un système de conception dans votre flux de travail UI/UX. En suivant cette classe, vous verrez à quel point il peut être simple de configurer ce système de conception, et vous obtiendrez un guide de style assez complet dont vous pourrez travailler immédiatement après ce cours. Je suis très heureux d'aider chacun d'entre vous à exploiter la puissance de l'esquisse, à créer un guide de style personnalisé qui vous aidera à accélérer votre flux et à éliminer les incohérences dans votre application ou votre site Web. J' espère que vous vous joindrez à moi. 2. Qu'est-ce qu'un système de design ?: Je voulais juste prendre une minute pour décrire certaines des différences entre les guides de style, systèmes conçus et beaucoup d'autres mots à la mode qui sont utilisés dans l'industrie en ce moment. Dans le passé, les guides de style étaient produits plus comme un artefact. Une fois que tous les styles d'interface utilisateur ont été finalisés, un concepteur était chargé de passer en revue et de documenter vraiment tous les éléments visuels qui étaient inclus dans les conceptions initiales. Parce que c'était un artefact du processus de conception et ne faisait pas vraiment partie du processus lui-même. Ces guides de style sont rapidement devenus obsolètes et vraiment pas référencés beaucoup après leur création initiale. Aujourd'hui, il y a eu un changement dans les gens qui utilisent ces systèmes de conception comme une partie plus intégrée de leur flux de travail de conception. Donc, au lieu de simplement documenter la conception initiale, ceux-ci deviennent la seule source de vérité de ce que les concepteurs sont capables de tirer dans leurs conceptions qu'ils créent. Ainsi, lorsqu'un concepteur crée une nouvelle maquette, au lieu de concevoir chaque chose de manière indépendante, il aura ce système de conception intégré à son flux de travail d'esquisse. Qu' ils seront en mesure de tirer des éléments préfabriqués qui sont flexibles et réactifs, qui répondront à tous les besoins qu'ils pourraient avoir pour cette situation de conception. En travaillant à partir de ce système unifié, les modifications de conception sont reflétées sur l'ensemble de l'application ou sur l'ensemble du site Web. Cela rend le processus beaucoup plus fluide pour les concepteurs et les développeurs, car les développeurs sont également en mesure de référencer les mêmes éléments et de savoir qu'il existe une cohérence dans toutes les instances de l'application ou du site Web. Airbnb, Shopify, IBM et beaucoup d'autres grandes entreprises ont tous des systèmes de conception vraiment bien documentés et intéressants qui sont excellents à regarder, pour juste voir le potentiel avec ces types de systèmes et ce que vous pourrait être en mesure de faire dans une plus grande entreprise. Je vais inclure des liens vers ces ci-dessous dans la classe décrit ces types de systèmes peuvent être génial pour toute votre équipe, fois les concepteurs et les développeurs, et vraiment n'importe qui d'autre qui pourrait toucher votre produit à l'avenir. Parce que ces styles sont prédéfinis et répétés, Il y a beaucoup plus de cohérence pour tout le monde dans l'équipe. Vous n'aurez plus à annoter chaque instance, chaque maquette ou tout autre motif d'interface utilisateur de temps appliqué dans vos conceptions. Les développeurs sont déjà habitués à ces composants et modèles et savent comment implémenter vos conceptions, dès qu'ils les voient. C' est aussi beaucoup moins efficace. Vous pouvez concevoir beaucoup plus rapidement lorsque vous pouvez voir toutes vos options d'éléments différents qui pourraient entrer dans vos conceptions. Une meilleure cohérence est certainement un excellent moyen d'avoir un meilleur UX sur votre site. Les systèmes conçus vont d'une simple documentation des couleurs et de la typographie aux systèmes qui documentent le contenu éditorial et les directives de mise en œuvre, et même des systèmes de conception entièrement intégrés qui sont alignés sur les bibliothèques frontales de développeurs qu'ils utilisent pour construire et maintenir d'énormes applications. Pour cette classe, cependant, nous allons nous concentrer davantage sur le système de conception pour les concepteurs. Donc quelque chose qui documente complètement tous les styles et composants de l'application. Mais ce sera un outil qui n'est utilisé que par les concepteurs ou l'équipe de conception. Maintenant que nous comprenons ce que sont les systèmes de conception et comment ils diffèrent des guides de style du passé. Je pense que nous sommes prêts à nous plonger dans la mise en route de notre projet. se voit dans la leçon suivante. 3. Créer un inventaire d'interface: La création d'un système de conception est un excellent moyen d'accélérer votre flux de travail et de réduire les incohérences dans votre application. La première étape vers la création d' un système de conception consiste à créer un inventaire de conception. Cela signifie que nous allons passer en revue l'état actuel de votre application ou site Web et prendre une image beaucoup plus large de la façon dont les choses fonctionnent en ce moment. Nous allons aller capturer des captures d'écran de tous les éléments et composants de votre site. Quand je dis des éléments, je fais référence aux plus petits morceaux de la conception de votre site. Ceux-ci peuvent inclure la couleur et la topographie. Les composants se réfèrent à des éléments beaucoup plus indépendants et reproductibles sur le site. Il peut s'agir de la carte de classe sur Skillshare ou de la liste d'accueil sur Airbnb. Quelque chose de dynamique et le contenu change, mais dans son ensemble, le design est répété sur l'ensemble du site. L' inventaire de l'interface est vraiment un outil phénoménal pour montrer les problèmes de conception qui existent sur l'application actuelle. C' est un excellent moyen d'obtenir l'adhésion des parties prenantes et juste pour les concepteurs de comprendre l'ampleur des problèmes auxquels ils font face. Cela dit, cela peut certainement être les étapes les plus longues, alors ne soyez pas laissé tomber si vous passez beaucoup de temps à regarder dans votre application existante et à trouver beaucoup d'incohérences que vous devez documenter. Nous devons d'abord sélectionner une application ou site Web avec lequel nous allons travailler pour ce projet. Cette décision se poursuivra pour le reste de vos projets. Certainement, sélectionnez quelque chose qui ne vous dérange pas de passer quelques heures à travailler. Je vais travailler avec la conception de cette application Skillshare iOS. J' encourage toute personne qui est un peu plus récente à Scratch ou plus récente aux symboles et aux croquis à suivre avec moi car cela pourrait le rendre un peu plus facile. Certaines autres grandes options seraient des applications bien connues telles que Medium, Airbnb, Apple Music, quelque chose que vous admirez vraiment la conception et la cohérence de. Vous êtes également le bienvenu d'utiliser un projet personnel, mais je vous avertirais que ce devrait être quelque chose qui est assez loin et a déjà un guide de style établi afin que vous ne créez pas de nouveaux éléments de conception que vous travaillez par le biais du projet. Une fois que vous avez sélectionné votre application, vous pouvez aller de l'avant et télécharger le modèle de keynote d'inventaire de l'interface que j'ai inclus dans la section des ressources de classe ci-dessous. Cela va juste aller de l'avant et vous donner un cadre où vous pouvez commencer à supprimer différentes captures d'écran de tous les éléments dans des catégories spécifiques. Cela vous donnera un aperçu d'un endroit pour ajouter des boutons, un endroit pour ajouter différents modèles de formulaire, vraiment juste vous aider à organiser et structurer votre inventaire d'interface. Vous souhaitez identifier toutes les différentes conceptions et choses qui se produisent fréquemment sur le site. Vous n'avez pas besoin de filmer nécessairement chaque instance d'un bouton, mais vous allez vouloir rechercher spécifiquement un bouton qui pourrait avoir un coin affilié par rapport à un coin carré, ou peut-être des icônes et des boutons par rapport aux non-icônes. Vous pouvez identifier tous les styles existants avec lesquels vous devez travailler. Une fois que tous ces éléments sont documentés et prêts à être corrigés, obsolètes ou inclus dans votre conception, nous sommes prêts à passer à l'étape suivante. Nous devrons décider quel style visuel est le plus logique pour votre application particulière. Quelque chose qui fonctionne bien dans une application peut ne pas être le mieux adapté à votre projet. Pensez à vos utilisateurs lorsque vous effectuez cette étape et pensez à l'expérience de votre site. Ensuite, vous devrez décider quels styles vous souhaitez adopter à l'avenir. Vous voulez vraiment éliminer les redondances. Il ne devrait y avoir qu'un seul bouton principal par exemple. Une fois que nous avons pris les décisions sur les styles qui vont aller de l'avant avec nous dans les prochaines phases de ce projet, nous sommes prêts à commencer à élaborer notre guide de style. 4. Introduction aux symboles de Sketch: Pour ceux d'entre vous qui sont flambant neufs à esquisser, je vais donner un aperçu rapide de l'interface afin que vous puissiez suivre avec le reste de la leçon. Si vous êtes intéressé à plonger un peu plus loin, je vais fournir quelques liens ci-dessous vers les éléments de croquis sur leur site Web. Ils ont de superbes vidéos d'introduction qui vous aideront vraiment à démarrer vos connaissances et à bouger très rapidement. Si vous avez plus d'expérience avec le croquis, cela pourrait être un léger commentaire pour vous. Vous êtes les bienvenus pour aller de l'avant ou rester avec nous et simplement obtenir un peu de rafraîchissement sur l'interface et comment utiliser certains de ces différents outils. Donc, quand vous allez télécharger Sketch pour la première fois, c'est vraiment facile. Vous pouvez télécharger un essai gratuit. Il y a aussi une option de licence très abordable. Ils rendent vraiment facile de commencer lorsque vous ouvrez l'esquisse pour la première fois, vous allez voir une interface similaire à celle-ci. Évidemment, tout ce contenu est personnel pour moi. Les années seront juste une toile vierge, mais pour l'instant nous allons juste nous concentrer sur les différents éléments de l'interface de croquis. Sur la droite, vous allez trouver l'inspecteur. Inspector va vous permettre d'ajuster les paramètres pour n'importe quel calque sélectionné en cours ou pour les options de l'outil actuel que vous utilisez. Lorsque vous avez sélectionné une couche, l'inspecteur se divise en plusieurs sections. Ceux-ci incluent les propriétés d'alignement, le dimensionnement, le style ainsi que certaines options d'exportation pour ces calques ou éléments individuels. Sur la gauche, vous trouverez le panneau Calques. Il s'agit d'une liste de calques qui contient toutes les couches de la page active. Vous pouvez afficher tous les attributs de couches, par exemple s'il est masqué ou verrouillé, ainsi que la possibilité d'organiser votre document en réorganisant et renommant les couches. Enfin, en haut, vous trouverez la barre d'outils. Sketch fait un excellent travail en illustrant vraiment ce que chaque outil fait et en le rendant facile à suivre. Surtout si vous avez utilisé Illustrator ou Photoshop dans le passé, vous allez vraiment être assez familier avec beaucoup d'outils que fournit le sketch. En cliquant avec le bouton droit en haut de la page, il y a une option de personnalisation de la barre d'outils, qui ouvrira une invite qui vous permet de faire glisser et déposer différents outils que vous souhaitez inclure dans votre barre d'outils. Pour l'instant, les réglages par défaut sont corrects, mais c'est génial une fois que vous commencez à utiliser Sketch plus fréquemment pour personnaliser cela et vous faire gagner encore plus de temps. Nous allons maintenant examiner comment créer des symboles, les insérer et les utiliser dans votre document. Nous allons commencer par un exemple très simple, explorant quelques formes de base. Mais cela aidera vraiment à illustrer la puissance des symboles et symboles imbriqués et comment ceux-ci peuvent être utilisés dans un vrai projet. Je vais commencer par ce document simple avec seulement quelques formes. Vous pouvez télécharger ceci et suivre avec moi et les ressources de la classe. Vous pouvez voir qu'il a créé plusieurs pages, ce qui peut être fait en appuyant sur le bouton plus ici, ce qui va créer une page complètement vierge que vous pouvez travailler lorsque vous êtes prêt à démarrer une nouvelle section. Pour l'instant, nous commençons dans cette première page intitulée Intro to symbols. Vous pouvez voir qu'il a créé plusieurs formes géométriques assez basiques. Grâce à Insert, Shape, rectangle, ovale, étoile, tout ce que vous êtes dans l'humeur de créer en ce moment. Nous allons donc commencer par faire ce rectangle vert un symbole que nous pourrons utiliser tout au long de notre projet. La première chose que nous allons faire est de cliquer sur sélectionner ce rectangle, puis sur le bouton Créer un symbole. Il vous permet de taper ce que vous voulez pour un nom. Pour l'instant, je vais juste garder celui-là appelé rectangle. À première vue, on ne dirait pas qu'il s'est vraiment passé grand-chose. Mais si vous double-cliquez sur ce rectangle, vous pouvez voir qu'il m'a amené à une page appelée symboles. Ce rectangle est maintenant dans la page des symboles. Si nous voulions ajouter une autre instance de ce rectangle est maintenant disponible pour nous dans la bibliothèque de symboles. J' ai quelques autres symboles qui sont ici pour les leçons à venir, mais vous pouvez voir que notre symbole rectangle a également été ajouté à cette section. Si je sélectionne l'option rectangle, j'ai maintenant une autre instance du rectangle à ajouter dans mon projet. Cela devient vraiment intéressant lorsque vous souhaitez apporter des modifications à l'un de ces changements sur la route. Donc, disons que je travaillais sur un projet et que je voulais changer ce rectangle pour être violet. Dans le passé, cela pourrait être assez lourd, creuser à travers une application entière ou toutes mes maquettes et vraiment trouver chaque exemple de ce rectangle et s'assurer que nous mettons à jour chacun pour être une nouvelle couleur. Mais avec ce nouveau processus de symboles d'esquisse, je peux juste revenir dans le symbole d'origine et mettre à jour la couleur en jaune, puis quand je suis retourné à ma page d'origine, vous pouvez voir que ces deux instances sont devenues jaunes. Donc, la prochaine chose que je veux examiner est comment organiser vos symboles et s'assurer qu'ils sont faciles à trouver, même si vous travaillez seul. Mais plus important encore, si vous travaillez avec une équipe de designers, il est très important de pouvoir trouver rapidement de nombreux symboles différents. Disons que j'ai un autre symbole que je veux créer, c'est un autre rectangle, mais c'est une version de contour au lieu de l'inversion remplie ici. Donc, quand je vais créer un symbole, disons que j'aimerais que ces deux symboles soient regroupés dans un dossier. Peut-être que je veux que le dossier s'appelle rectangle. Je vais commencer par rectangle, puis en ajoutant une barre oblique inverse et un autre nom qui ajoutera ce symbole dans un dossier appelé rectangle. Donnons un nom à celui-ci, contour rectangle. Quand on double-clique sur celui-ci, ça va nous emmener ici aussi. Puisque j'ai déjà nommé ce rectangle original, je vais devoir aller dans mon panneau Calques ici pour le modifier. Mais tout ce que j'ai à faire est d'ajouter le mot rempli. Ce serait rectangle, barre oblique inverse, rectangle de remplissage. Maintenant, quand je vais à la liste déroulante de mes symboles ici, vous pouvez voir que j'ai un dossier appelé rectangle et deux instances à l'intérieur qui représentent ces différents rectangles. On va aller de l'avant et faire la même chose avec ces deux ovales. Flash ovale, remplissage ovale, et contour de barre oblique ovale. Maintenant, je vais vous montrer la partie amusante et c'est là que les symboles imbriqués deviennent vraiment importants. Ce que nous allons faire est de créer un autre rectangle, un plus grand, et de renvoyer les bordures dans ce panneau d'inspecteur ici. On va créer un symbole à partir de ça. Je vais nommer cette carte. Disons que c'est une conception de carte que j'ai sur une application sur laquelle je travaille. Dans cette carte, il y a des éléments différents qui changent d'instance en instance, mais la conception globale est la même à chaque fois. Lorsque nous double-cliquez sur cela, je peux alors entrer et concevoir ma carte pour être beaucoup plus dynamique. Je peux insérer un symbole dans un autre symbole, ce qui me permettra d'avoir des remplacements. Laissez-moi vous montrer comment ça marche. C' est donc un peu plus simple à comprendre. Quand je vais et je peux insérer un symbole dans cette carte symboles. Peut-être que je veux qu'un rectangle de remplissage descende dans ce coin. Je voudrais qu'un ovale de contour monte ici dans ce coin. Quand je retourne à mon instance de cette carte, vous pouvez maintenant voir qu'il y a ces deux options de remplacement qui n'étaient pas là auparavant. C' est parce qu'il y a ces deux symboles dans ce symbole lui-même. Dans cette liste déroulante, je peux maintenant choisir parmi toutes mes différentes formes. Vous pouvez voir comment cela serait vraiment puissant lorsque vous créez des éléments dans l'esquisse. Si vous créez une liste de maison, par exemple, sur Airbnb, vous pouvez souhaiter que l'image change d'une carte à l'autre, même le nom ou l'avatar de l'utilisateur qui était l'hôte. En créant ce symbole de la carte, vous pouvez y placer d'autres symboles qui peuvent être à jour dynamiquement dans chaque instance de votre site. Quelques choses à noter ici avant de passer à autre chose. Ces symboles sont tous disponibles en tant qu'options de remplacement , car chacun de ces quatre symboles est de la même taille. Si cela notre conseil a été rétréci à ces juste un peu plus petit. Vous verrez que maintenant, toutes ces options ne sont pas disponibles en tant que substitutions. Donc, c'est certainement quelque chose à noter. Si vous incluez beaucoup de remplacements dans vos conceptions, vous voulez vous assurer que chacun de nos tableaux est vraiment dimensionné uniquement pour les éléments que vous souhaitez afficher dans ce panneau de remplacements. Une autre grande chose à noter est de regarder comment ces noms apparaissent dans le panneau Remplacements. Si vous avez des incidents où vous avez 30 options de remplacement différentes, vous voulez vous assurer qu'elles sont nommées et ordonnées d'une manière vraiment stratégique. Il est facile de modifier vos composants. Si nous devons regarder dans ce design de voiture, je voudrais peut-être nommer cette couche ici, l'objet 1 et celui-ci, l'objet 2. Maintenant, quand je retourne à mon instance d'origine, vous pouvez rapidement voir une modification, laquelle je vais éditer. Une dernière chose à noter est de penser aux éléments d'un composant ne vont pas changer d'instance en instance. Vous avez peut-être une carte où il y a un symbole. Disons que c'est notre contour ovale. Il est toujours présent dans ce coin supérieur gauche sur chaque instance, juste pour que vous n'obtenez pas un panneau de remplacement très gonflé et difficile à suivre. Tu vas vouloir aller de l'avant et verrouiller cette couche. En cliquant avec le bouton droit sur elle et en appuyant sur la couche de verrouillage. Maintenant, lorsque vous revenez à votre symbole d'origine, vous pouvez voir que cet objet n'apparaît pas dans le panneau Remplacements. C' est certainement un excellent outil lorsque vous construisez composants beaucoup plus complexes à utiliser et à retenir. Maintenant que nous comprenons les bases de l'esquisse et que nous savons un peu plus en profondeur comment créer, modifier et manipuler des symboles et utiliser la puissance des symboles imbriqués et des remplacements de symboles, nous sommes prêts à déplacer pour créer des éléments personnalisés spécifiques à l'application que vous avez sélectionnée pour votre projet. 5. Personnalisez votre modèle: chose la plus importante à propos d'avoir un système de conception est vraiment d'avoir tout ce dont vous avez besoin dans un seul fichier, sorte que vous êtes prêt à partir et capable de vous concentrer sur des choses plus importantes que la collecte de tous les éléments de l'interface utilisateur pour commencer à construire des maquettes. Aujourd'hui, j'ai inclus un modèle pour vous de commencer et vraiment sauter dans la création d'un guide de style très rapidement. Le modèle peut être trouvé dans les ressources de classe ci-dessous, et il va inclure beaucoup de ressources dont vous aurez besoin pour commencer à créer votre application ou votre site Web. C' est quelque chose qui peut être utilisé encore et encore lors du démarrage des projets. Il est particulièrement idéal pour les pigistes ou les personnes qui travaillent souvent sur divers systèmes et qui veulent créer rapidement des guides de style pour leurs projets. Cela peut être une grande valeur ajoutée pour les clients et peut vraiment être utile pour accélérer votre processus de conception. Lorsque vous téléchargez ce modèle à partir des ressources de classe, vous allez vouloir aller de l'avant et l'ouvrir. Ici, vous verrez qu'il y a trois pages que j'ai créées. Le premier est une page de symboles. Ne sois pas trop débordée quand tu regardes ça pour la première fois. Ce sont tous les symboles que j'ai déjà créés pour vous et qui vont être mis à jour dynamiquement au fur et à mesure que nous personnalisons le guide de style de votre application sur laquelle vous travaillez. Je vais entrer un peu plus en détail sur tous ces composants individuellement, mais d'abord, nous allons commencer par nous concentrer sur cette section qui dit la configuration initiale. Ici, j'ai mis en place un système qui sera très facile à mettre à jour et qui pourra démarrer tout votre processus de conception. Dans la première étape, nous allons aller de l'avant et mettre à jour les couleurs dans notre application. Vous pouvez voir ici que ces couleurs sont des symboles, vous pouvez le dire par l'écriture violette qui est en haut. En outre, lorsque vous en sélectionnez un, vous verrez qu'il y a cette icône à côté du nom du calque, ce qui indique qu'il s'agit d'un symbole. Ces contenus ci-dessous vont être ce qui est réellement dans ce symbole lui-même. ne peut y avoir qu'un seul élément, mais comme nous l'avons déjà mentionné, les symboles imbriqués vont inclure plusieurs symboles dans ce symbole. Vous verrez plusieurs éléments sous ce nom de symbole qui incluent tous les symboles qui y sont imbriqués. Pour cet exemple, nous allons aller de l'avant et sélectionner cette case ici. Vous verrez dans l'inspecteur qu' une couleur de remplissage est appliquée qui correspond à la couleur de cette zone. Cette couleur est en fait la couleur Skillshare. Mais je vais aller de l'avant et apporter quelques modifications juste pour que vous voyez comment cela peut affecter la conception globale de tous les composants de ce modèle. Disons que la couleur de l'application que je construisais était, diriez-vous de cette couleur rouge ici ? Instantanément, vous pouvez voir que tous ces boutons et différents éléments ici ont été mis à jour pour refléter ce changement que j'ai fait. Cela peut être très pratique si vous avez besoin d'apporter des modifications à l'ensemble de votre application, ou si vous souhaitez personnaliser quelque chose de très rapidement en fonction commentaires d'un autre membre de l'équipe ou d'un client. Allez-y et mettez à jour tous ces éléments ici et comme vous le faites chacun, vous allez vouloir aller de l'avant et synchroniser cette couleur. Ce que cela fait est de synchroniser la couleur dans votre palais sur l'ensemble du modèle afin qu'il soit là pour votre référence à l'avenir. Je vais aller de l'avant et changer cela en arrière puisque nous voulons suivre guide de style Skillshare et je vais aller de l'avant et rafraîchir ceci. Vous pouvez voir que tout est retourné à notre couleur bleue. Allez-y et prenez soin de ceux-ci. Vous n'avez pas besoin d'utiliser tout le monde. J' ai inclus ce que je pensais être un nombre assez typique de couleurs, mais vous n'avez pas besoin d'utiliser toutes ces options. La prochaine chose que nous allons faire est de personnaliser notre police de caractères. Vous pouvez voir à gauche de cet écran que j'ai inclus tous les styles de police inclus dans ce modèle. Vous pouvez toujours ajouter plus ou utiliser moins, mais j'ai pensé que c'était un bon point de départ pour nous donner une idée de la façon dont les styles de type fonctionnent et comment nous pouvons les appliquer tout au long de notre conception. Si vous voulez ajouter plus, vous pouvez le faire à l'avenir. Pour l'instant, nous allons commencer par simplement sélectionner tous ces styles de type. Vous pouvez voir ici qu'il y a une place pour la police de caractères. Ici, vous serez en mesure de sélectionner police dont vous souhaitez que toutes vos polices se trouvent sur votre site. Pour moi, je sais que Skillshare utilise Proxima Nova. Je vais aller de l'avant et sélectionner Proxima Nova et appuyer sur le bouton de synchronisation. Maintenant, vous pouvez voir n'importe quel texte ici a été mis à jour pour être dans police Proxima Nova et cela sera cohérent dans toute application de taxe tout au long de mon application. La prochaine chose que nous pouvons faire est de sélectionner des couleurs de police spécifiques. Disons que je veux que mon texte principal soit vert. On peut aller de l'avant et synchroniser ces styles. Vous pouvez voir que c'est un peu plus difficile parce qu' il n'y a pas toutes les applications de textile dans ces composants, mais partout où ce texte a été appliqué, vous pouvez maintenant voir ces changements dans l'application. Je vais aller de l'avant et annuler cela puisque je veux que mon texte soit bleu, mais vous pouvez mettre à jour l'un de ces styles pour répondre à vos besoins. Je dirais dans l'ensemble, il est certainement la meilleure pratique d'avoir, au moins, une ou deux versions d'une police grise ou noire que vous pouvez utiliser dans toute l'application, ainsi que quelque chose qui est blanc dans chaque taille afin que vous puissiez appliquer celles sur plus foncées ou une interface utilisateur plus foncée. Maintenant que nous avons personnalisé notre type et synchronisé ces styles dans l'application, nous pouvons également personnaliser les bordures. C' est certainement une étape facultative parce que j'ai déjà inclus l'option affiliée, une option arrondie, ainsi qu'une option carrée de bordure. Mais s'il y a quelque chose de coutume que vous cherchez à inclure, allez-y. Sélectionnez toutes ces bordures et apportez les modifications souhaitées au rayon, l'épaisseur de la bordure ou à tout autre élément que vous pourriez trouver adapté à votre application spécifique. Vous ne savez pas vraiment ou vous n'êtes pas sûr de ce que vous voulez faire, ne vous inquiétez pas de cette étape pour le moment. Cela devient un peu plus dans le minutieux et pourrait être utile lorsque vous travaillez sur un autre projet à l'avenir. La dernière étape consiste à ajouter votre logo. Cet exemple, je viens d'utiliser Google rapidement. Vous pouvez utiliser ajouter dans votre logo pour votre application. Vous voulez certainement vous assurer que les bords extérieurs de votre logo vont jusqu'aux côtés de ce tableau d'art ou conteneur de symboles ici. Nous avons un endroit où vous pouvez avoir votre logo blanc ainsi que votre logo sombre. Vous pouvez voir que ceux-ci sont nommés dans la structure que j'ai mentionnée plus tôt. Ceux-ci apparaîtront dans un dossier de logo avec les deux options disponibles. Vous pouvez également y ajouter différentes options de couleur ou variantes de votre logo, en fonction de vos besoins. Maintenant, nous avons fait tout ce travail pour personnaliser notre modèle ici. Nous pouvons jouer avec certains de ces symboles que j'ai ajoutés juste pour avoir une idée la puissance de tous ces symboles imbriqués et la personnalisation que nous avons fait dans ce modèle. Un excellent exemple est cette forme. Vous pouvez voir qu'il y a des options pour changer la couleur du texte avec tous les styles de texte que nous avons précédemment configurés. Si je voudrais que le texte soit ma couleur bleue, vous pouvez voir ici qu'il est maintenant mis à jour. Il est également très facile d'éditer ce texte. Vous pouvez dire, Titre du formulaire, et cela va se mettre à jour très rapidement. Vous pouvez également mettre à jour une partie du style ici. Si vous vouliez un type de formulaire différent, peut-être, vous vouliez une icône là-dedans, il serait vraiment rapide d'ajouter cela aussi. Vous pouvez également voir que mon texte est un peu rogné. Heureusement, ce composant est réactif pour moi, ce que nous allons apprendre à faire dans les leçons futures, mais je suis capable de cliquer et de faire glisser et de m'assurer que tout mon texte est bien adapté. Je peux également personnaliser ce texte et faire toutes les autres options que je pourrais souhaiter à partir d'ici. Si je veux que ma bordure soit aussi bleue, ou que ma couleur d'arrière-plan soit bleue, c'est très facile à modifier. La même chose avec ce bouton. Vous pouvez voir que je suis maintenant capable de faire des changements très rapidement. Voici comment vous mettez rapidement à jour les instances de symboles dans votre application. Après avoir personnalisé ce modèle, je suis sûr que vous avez maintenant une bien meilleure compréhension de la puissance ces systèmes de conception avec tous les outils de symboles imbriqués qui sont dans les nouvelles versions de Sketch. J' espère que vous êtes tout aussi excité que je le suis à propos de tous ces outils et prêt à aller de l'avant avec la création d'éléments plus personnalisés pour l'application sur laquelle vous travaillez. 6. Utiliser des symboles dans votre flux de travail: Je vais juste parcourir rapidement et vous montrer un peu plus sur certains de ces différents composants que j'ai déjà créés pour que vous puissiez utiliser dans vos futurs projets. J' ai essayé de garder les choses assez basiques. Vous ne voulez certainement pas créer ces systèmes de conception d'une manière que vous finissiez avec tant d'éléments et de symboles dans votre fichier qu' il est vraiment difficile de gérer et de garder une trace de toutes les différentes options. J' ai inclus ce que je pensais que vous aurez besoin pour commencer, vous êtes évidemment le bienvenu pour supprimer et ajouter des choses au besoin. Je vais courir dans la leçon suivante, comment créer des composants personnalisés. Pour l'instant, je vous ai donné des options pour des add-ons tels que des curseurs, quelques avatars, beaucoup de boutons et badges. Ce sont certainement des éléments d'interface utilisateur très courants qui vont apparaître fréquemment dans votre application ou site Web. J' ai également inclus beaucoup de formulaires qui sont très communs aussi. Options de paramètres telles que les radios, les cases à cocher et d'autres systèmes d'étiquetage, ainsi que les éléments de liste et de menu qui apparaissent fréquemment, en particulier dans les applications iOS et Android. également des éléments de navigation tels que des en-têtes, des barres d'état et d'autres éléments qui vont apparaître fréquemment comme une barre d'onglets qui apparaît en bas d'une application. Une autre chose à noter est, tous ces styles de texte qui sont affichés ici sous forme d'éléments. Si vous souhaitez que vos styles de texte soient modifiables, vous devez les ajouter à un composant en tant que symbole plutôt qu'en tant que style de texte. Si vous voulez que le texte soit toujours d'une certaine taille, poids et couleur, vous n'avez pas nécessairement besoin qu'il soit assemblé. Mais si vous voulez pouvoir remplacer le texte blanc pour noir sur un bouton différent d'une instance à l'autre, il est important d'ajouter cela dans votre symbole comme un autre symbole. Par exemple, dans ces boutons, vous pouvez voir qu'il s'agit en fait de symboles de texte. regardant ici, dans le panneau Calque, vous pouvez voir cette petite icône qui indique qu'il s'agit d'un symbole textuel. Cela me permettra de le remplacer par d'autres symboles de texte de la même taille. C' est certainement pratique pour les boutons, mais il y a aussi des instances comme dans les formulaires et d'autres éléments d'en-tête et de navigation que vous allez parfois vouloir utiliser des textes noirs, parfois utiliser du blanc, et vous ne voulez pas avoir à créer un symbole différent pour chaque couleur de texte. Ce serait redondant et va définitivement à l'encontre du but des remplacements de symboles et d'esquisse. La même chose s'applique pour différentes couleurs et remplissages de boutons. Parce que vos différents éléments d'interface utilisateur peuvent varier en couleur d'une instance à l'autre. Vous voulez vous assurer que ces couleurs sont disponibles en tant que substitutions de symboles dans ce symbole spécifique. Vous verrez certainement cela entrer en jeu plus tard dans le processus. Mais même dans des cas comme vos icônes ou différentes balises, vous voudrez que la couleur de cet arrière-plan sur la balise soit modifiable. Vous pouvez voir ici que le conteneur, est en fait un symbole et qui me permet d'éditer le remplissage de l'interface utilisateur pour être différentes couleurs en fonction de l'instance que j'utilise. Disons que nous voulions y aller et ajouter un autre style de texte ici de ce 20 point. Je vais vous montrer cet exemple sur le texte, mais vous êtes certainement le bienvenu de faire ce processus similaire pour d'autres éléments cette page ou à d'autres composants simples de blocs de construction tels que ceux-ci, partout où vous vous sentez nécessaire pour votre application. Si nous allons de l'avant et copions ce symbole, tout ce que je fais c'est de garder le contrôle et de faire glisser. Vous pouvez également simplement sélectionner le symbole et appuyer sur 'Commande D qui le dupliquera pour vous. L' un ou l'autre est d'excellentes options. Ici, vous pouvez voir qu'il s'agit d'un duplicata car il a le mot « Copier » à la fin. Mais je vais probablement vouloir le renommer. Disons que celui-ci sera primaire, qui indiquera que c'est ma couleur primaire, qui ici est bleue et elle va être audacieuse. La couleur d'arrière-plan sur ce symbole est noire, seulement pour vous permettre de voir que ce texte blanc est ici. On n'en a pas besoin puisque mon texte sera bleu. Donc, je vais aller de l'avant et éteindre cela, mais je vais sélectionner ce texte et je vais créer un nouveau style, et cela va être appelé 20 mobile normal, puis à nouveau, primaire, gras. Tout ce que je dois faire, c'est aller et mettre à jour ceci pour être ma couleur bleue et appuyer sur 'Sync'. Maintenant, nous avons un symbole qui est ma couleur bleue primaire et il va être interchangeable avec l'un de ces autres symboles lorsqu'ils sont utilisés dans des symboles imbriqués. Pour tester cela, nous pouvons aller de l'avant et créer rapidement une nouvelle page. Allons de l'avant et insérons mon symbole. Si nous allons aux symboles, puis sous le texte 20, normal, puis primaire gras. C' était un symbole que nous venons de créer. Vous pouvez voir que maintenant cela est interchangeable entre tous ces différents éléments. Ceci est certainement encore plus utile s'il est imbriqué à l'intérieur d'un autre symbole. Si je retourne à ma page de symboles, allons de l'avant et testons comment cela pourrait être utilisé. Disons que, je sais que ce style de taille 20 est utilisé dans mon bouton, de grands symboles. Allons de l'avant et créez une nouvelle page en cliquant sur ce signe plus. C' est juste pour un exemple donc nous n'avons pas besoin de le nommer. Nous allons aller de l'avant et insérer un symbole et ce sera notre grand symbole de bouton. Faisons juste un bouton de gauche ici. Je veux que mon texte soit, oh, il est, texte 20 points normal primaire gras. C' est le symbole que nous venons de créer et vous pouvez voir qu'il est maintenant interchangeable en dynamique dans ce symbole imbriqué. Une fois que je sélectionne cela, je veux probablement un fond différent. Vous pouvez voir déjà maintenant je suis en mesure de sélectionner parmi toutes ces nouvelles couleurs d'arrière-plan. Peut-être que je veux un fond gris clair. Maintenant, vous pouvez voir en ayant toutes ces options différentes, j'ai créé un système vraiment dynamique pour créer des styles de boutons. Espérons que vous pouvez maintenant voir toute la puissance des symboles imbriqués et comment créer rapidement un guide de style, ce qui accélérera vraiment votre flux de travail. Dans la leçon suivante, nous allons commencer à créer des composants plus personnalisés et complexes que vous pouvez utiliser dans la conception de votre application. 7. Construire des composants personnalisés avec des symboles: Pour faire un résumé rapide, les composants peuvent être considérés comme des éléments plus grands qui sont constitués de petits éléments simples au sein de votre interface utilisateur. Il peut s'agir d'un bouton composé d'un style de texte, d'une couleur d'arrière-plan. Il pourrait également être des éléments beaucoup plus complexes. Une carte de classe sur Skillshare ou une inscription sur Airbnb sont tous les deux de bons exemples. Il peut également y avoir des éléments plus généraux qui sont utilisés dans toutes les conceptions d'interface utilisateur, tels que des formulaires, des modèles et d'autres éléments que vous verrez généralement sur les sites Web et les applications. Lorsque vous avez fait votre inventaire d'interface, vous avez probablement remarqué beaucoup de ces composants dans votre interface utilisateur, et avez probablement une bonne idée de certains d'entre eux qui pourraient être une bonne chose pour vous de construire et d'esquisser. En les construisant en tant que composants dynamiques et flexibles, vous serez en mesure d'utiliser un seul élément plusieurs fois tout au long de votre conception d'esquisse et de gagner du temps au lieu de créer une édition de chaque symbole. Ensuite, il faut revenir en arrière et mettre à jour chacun individuellement si des modifications doivent être apportées. Nous allons aller de l'avant et sélectionner 1-3 composants que vous souhaitez construire et esquisser. Ils vous seraient utiles lors de la création de votre interface dans votre guide de style. Pour commencer, je suggère de choisir quelque chose de assez simple avec seulement quelques éléments. Ensuite, nous pouvons construire sur quelque chose de plus complexe qui a mises à jour plus dynamiques qui doivent être faites tout au long de l'interface. Allez-y et pensez à quelque chose que vous avez vu couramment dans votre interface que vous souhaitez construire en tant que composant. Si vous pensez à un exemple comme Airbnb dont nous avons discuté, ils ont ce composant très souvent répété qui est une liste d'une location spécifique. Cet élément lui-même ne change pas, mais les choses qu'il contient sont mises à jour d'instance en instance. Vous pouvez voir ici, beaucoup d'options différentes d'annonces de maison qui sont toutes les mêmes composantes, mais qui sont très dynamiques pour refléter les besoins de chaque offre individuelle. D' autres exemples que vous pouvez voir ici d'Airbnb montrent combien de composants sont réellement utilisés dans une interface. Vous pouvez avoir des centaines de composants différents qui sont suffisamment dynamiques et flexibles pour créer des écrans pleins dans l'ensemble de votre application. En regardant l'application Skillshare, j'ai identifié trois composants que je souhaite construire en tant que composants d'esquisse flexibles. J' ai essayé de choisir des choses qui n'étaient pas trop compliquées juste pour illustrer comment nous pouvions les construire très rapidement. Mais alors je voulais aussi construire quelque chose de plus complexe comme une rangée de plusieurs classes qui pourraient être insérées très rapidement, personnalisées, et se sentir comme une véritable application live. Pour commencer, je voulais construire cet état vide de notre application. Cela se produit fréquemment tout au long de la conception de l'application, mais l'icône, le texte, le bouton, le style et le contenu peuvent être différents sur chaque instance. Ceci est un excellent exemple de quelque chose que vous pourriez vouloir construire en tant que symbole imbriqué. La première chose que nous ferons lorsque nous commencerons à penser à la construction de ces composants est voir quels éléments changent et quels éléments sont cohérents tout au long de la conception. Pour nous vraiment, tout va changer dans cet exemple spécifique, sauf peut-être l'espacement entre chaque élément et la largeur globale. Je suis allé de l'avant et copié certains de ces éléments d'en bas juste pour retirer seulement les éléments spécifiques avec lesquels nous allons travailler. Comme nous l'avons mentionné précédemment, un symbole imbriqué est juste un symbole qui contient d'autres symboles à l'intérieur de celui-ci. Nous allons commencer par créer un symbole qui a tout simplement tout le contenu de cet élément ici. Il suffit de créer un symbole. Pour l'instant, nous pouvons l'appeler État vide. Plus tard, au fur et à mesure que nous commencerons à construire plus de composants, nous voudrons certainement être plus conscients de la façon dont nous nommons ceci, et comment cela s'intégrera dans la structure de fichiers du reste de nos symboles. Quand je double-clique dessus, cela me ramènera à notre page de symboles, et vous pouvez voir qu'il a créé un symbole ici. S' il se retrouve dans un groupe, vous pouvez vous dégrouper là pour voir ce qu'il y a ici. Pour moi, j'utilisais déjà une icône pour cette conception spécifique, qui est génial parce que maintenant je suis capable d' utiliser le panneau de remplacements pour sélectionner d'autres icônes dans cette option. Si vous n'utilisez pas d'icônes ou d'autres symboles ici, vous devriez aller de l'avant et répondre à ces choses en tant que symboles. Par exemple, vous voyez que ce bouton n'est en fait qu'un groupe. Ce n'est pas un symbole de bouton, nous allons donc vouloir le remplacer par un symbole de bouton afin que nous puissions le remplacer dynamiquement dans différentes instances. Si nous allons à notre liste déroulante Symboles et que nous allons à Bouton, je vais aller de l'avant et sélectionner un bouton Petit et Centré. Vous pouvez voir que le style est un peu différent. Cela illustre vraiment le but d'avoir un guide de style. Cette conception de bouton n'était pas incluse dans mon guide de style, ce qui signifie que c'était un design singulier qui n'était pas aligné avec le reste de l'interface utilisateur dans l'application. Il est vraiment important de vous assurer de garder un bon inventaire de vos styles et de ne pas laisser le système devenir trop gonflé au fur et à mesure que votre application se développe. Nous allons aller de l'avant et en fait juste enlever ce vieux bouton puisque nous avons celui-ci ici maintenant. Dans ce panneau de remplacement, je suis capable de mettre à jour le contenu, peut-être que je voulais juste dire bouton exemple pour l'instant. Puisque nous concevons ceci comme un composant qui va être utilisé tout au long de ma conception, il n'a pas besoin d'être spécifique à cet état vide. Je peux aller de l'avant et ajouter ceci ici. Nous devons réfléchir à la façon dont cet état vide va être utilisé. Est-ce que ces textes vont devoir changer de style ? Pourrions-nous vouloir un gris clair dans certains cas, un gris foncé dans certains, peut-être qu'il serait bleu parfois. Je ne suis pas sûr, mais juste pour être en sécurité, je veux aller de l'avant et utiliser un symbole texte ici pour qu'il soit beaucoup plus flexible sur la route. Encore une fois, c'est la taille 17. Je vais aller de l'avant et dire, « Symboles ». Nous allons aller au Text 17, et nous serons centrés, et nous en voulons un gris. Maintenant, nous avons notre texte de titre, et je vais aller de l'avant et ajouter une copie d'espace réservé, et nous allons en faire toute la largeur, et nous allons le mettre juste là-dedans. Maintenant, nous pouvons supprimer l'original. Ensuite, nous voulons aussi avoir nos sous-textes. Ajoutons un autre symbole qui est Texte, et celui-ci a la taille 14. On va faire le centrage, et peut-être commencer par la deuxième année. Quelle que soit l'option de style que vous sélectionnez à l'origine sera l'option par défaut qui apparaît lorsque vous insérez ce symbole en bas de la route, mais vous n'êtes pas collé à cette conception. Normalement, j'essaie juste de sélectionner le style que je pense que je vais utiliser le plus couramment, mais à partir de là, vous pouvez le modifier à chaque instance. Allez-y et mettez à jour ceci pour qu'il soit la bonne hauteur. La prochaine chose que nous voulons faire est en fait d'utiliser un plug-in pour Sketch qui va vraiment rendre beaucoup plus facile d' organiser ces éléments d'une manière qu'ils puissent varier les hauteurs dans différentes instances et avoir toujours le même espacement . Disons que cette liste déroulante est composée de trois lignes ou d'une ligne au lieu de deux lignes. Avec la façon dont il est actuellement conçu, ce bouton ne répondrait pas à ce changement et vous auriez donc quelques problèmes d'espacement. Ce que nous allons faire est de télécharger un plugin appelé Launchpad for Sketch. J' inclus un lien pour cela ci-dessous dans détails de la classe, mais c'est gratuit et c'est très facile à installer, suffit de télécharger, double-cliquer, et il va être installé automatiquement sur Sketch pour vous. Une fois que vous aurez installé cela, il apparaîtra dans votre coin inférieur droit de votre écran et vous verrez quelques fonctionnalités supplémentaires. La fonctionnalité que nous allons examiner en ce moment est cette fonctionnalité de mise en page automatique, mais le reste peut être exploré à travers le site Web des applications. Dans le nouveau composant que vous avez créé, vous allez aller de l'avant et sélectionner tous les différents calques, ce qui vous donnera beaucoup d' options ajoutées qui ne sont pas incluses dans Sketch pour commencer. instant, nous voulons aligner verticalement tous nos éléments. D' autres options seraient la doublure à gauche, mais nous allons nous en tenir à une ligne verticale et ensuite cela va vous permettre de spécifier l'espacement entre chaque élément. Peut-être que nous voulons 15 pixels entre chaque élément, peu importe le nombre de lignes de texte dans chacun d'eux ou la taille de l'icône. Nous voulons également, pendant que nous sommes toujours dans notre symbole, voulons nous assurer que la superposition de cet objet est logique que nous pourrons comprendre lorsque nous examinerons les panneaux de remplacement. Par exemple, en ce moment, ce titre est tout en bas. Peut-être un peu déroutant puisque ce bouton est en fait le dernier élément. Nous voulons aller de l'avant et déplacer ceci pour être juste en dessous de l'icône, puis nous aurons le sous-texte ici, et nous pourrions même nommer ceci afin de renommer cette couche, Sous-en-tête, et ensuite nous nommerons cette couche En-tête, et ensuite nous nommerons celui-ci CTA. Super, donc maintenant quand nous revenons à nos composants, nous pouvons voir que l'en-tête et le sous-en-tête sont clairement étiquetés de sorte que nous n'avons pas à deviner quels textes nous devrions éditer. Peut-être que nous voulons que notre sous-en-tête ne soit qu'une seule ligne. Vous pouvez voir que le bouton est automatiquement déplacé vers le haut pour tenir compte de ce changement espacement afin que notre espacement soit corrigé, quelles que soient les instances dans. C' est un excellent outil à utiliser lorsque vous créez ces symboles plus dynamiques que vous n'êtes pas vraiment sûr de la durée de chaque élément de texte ou de la taille des différents éléments graphiques qui permettent beaucoup plus d'espacement cohérence dans l'ensemble de l'application. La prochaine chose que je vais faire est de parcourir un autre exemple d' un composant légèrement plus complexe qui serait utilisé très fréquemment dans l'application iOS Skillshare. Ici vous pouvez voir la maquette complète d'une page de classe assez standard sur Skillshare. Ceci est certainement utilisé lorsque vous naviguez, lorsque vous effectuez une recherche, lorsque vous découvrez de nouveaux contenus, ou même lorsque vous consultez le contenu recommandé sur votre page d'accueil. C' est un élément très fréquemment utilisé que nous voulons vraiment être réutilisable, facile à mettre à jour et personnalisable à différentes pages d'un site. Je vais vous expliquer un peu la logique de la façon dont je pourrais construire un élément comme celui-ci. Je commencerais par examiner quels éléments sont flexibles et changeants, et ceux qui pourraient être plus cohérents dans chaque instance. Vous voyez cette ligne de cheveux, c'est quelque chose qui va être dans chaque cas ce composant. Lorsque vous regardez vers le bas, vous pouvez voir qu'il est appliqué à presque toutes les lignes de classes. Dans ce cas, et vraiment sur toutes nos pages. Évidemment, quelque chose qui ne serait pas mis à jour. Aussi capable de voir toutes les classes, c'est probablement quelque chose qui va être sur chaque instance. Nous considérons cela plus comme un élément statique. Le texte des classes de tendance est quelque chose qui serait sur chaque élément, mais peut ou ne pas changer autant que la copie va. Nous aimerions que cela soit souple, mais nous aurions toujours cette option dans cette composante. Pour chaque classe individuelle, nous voudrions toujours afficher l'heure, mais le temps réel écrit peut varier d'une instance à l'autre. Ainsi que le titre, l' artiste et l'image de fond de la couverture de la classe. La façon dont je pense à construire cela serait de commencer par construire un seul élément d'une classe , puis de construire un seul élément de cet en-tête et ensuite de pouvoir compiler cela dans un plus grand, plus symbole imbriqué qui peut être appliqué en tant que ligne de classe globale. Je suis déjà allé de l'avant et j'ai mis en place ça un peu, mais je vais vous expliquer une partie de la logique ici. J' ai commencé par créer cet élément de classe unique, et il n'est vraiment composé que de quatre choses spécifiques. L' un étant cette image de fond de classe, l' autre étant le temps, puis nous avons le titre et les artistes, puis nous avons le titre et le professeur. Nous voulons vraiment y penser. Il s'agit de trois points spécifiques, mais nous sommes déjà allés de l'avant et nous les avons regroupés en un groupe appelé Time. Nous sommes également allés de l'avant et avons regroupé l'image de classe et le Temps car ils sont vraiment dans le même objet et nous voulons garder ceux imbriqués ensemble. Nous avons également veillé à utiliser un style de texte spécifique. Nous allons aller de l'avant et utiliser la taille 12, normale et nous allons aller de l'avant et faire blanc gras ici. Maintenant, c'est un style d'ensemble qui va correspondre à tout le reste dans notre application. Nous avons également utilisé une icône spécifique dans cette conception afin qu'elle puisse être modifiée et mise à jour pour devenir d'autres icônes si jamais nous avions besoin de cette fonctionnalité à l'avenir. Cela permet également de maintenir la cohérence. Si jamais nous voulons mettre à jour l'icône de l'horloge sur le site, il nous sera très facile de mettre à jour à un seul endroit dans notre système de conception. Nous voulons faire la même chose avec le titre de classe et le professeur. Pour cela, nous allons de l'avant et appliquer le style de texte ainsi que pour le professeur. Il existe ici un paramètre qui vous permet d'ajuster le contenu de cette carte en fonction de la taille du plan de travail. Quand je devrais annuler cela si jamais nous ajustons la taille globale du plan de travail ici. Je vais désactiver cela juste pour éditer ceci, et ensuite nous pouvons le réactiver afin que le symbole adopte chaque fois que nous changeons la taille de l'instance. Je vais couvrir cela plus en profondeur dans la prochaine leçon, mais c'est juste important lors de l'édition de ces symboles. Je suis également allé de l'avant et j'ai appliqué notre fonctionnalité de groupe empilé, et vous pouvez voir quand je frappe ma couche de groupe empilée, je peux aller voir à nouveau les paramètres afin que je puisse toujours le modifier pour être plus proche ensemble ou plus éloigné. Revenons dans mon plan de travail global et regardons plus cette composition. Vous pouvez voir que nous aurions deux instances de cet objet de classe, puis nous aurions une instance de cet élément d'en-tête. Je pense que la prochaine chose que je ferais est de construire cet en-tête. J' ai déjà commencé cela dans ma bibliothèque de symboles comme vous pouvez le voir. J' ai commencé par créer un composant simple qui a deux styles de texte ici. L' un étant le voir tout et l'autre étant des classes populaires, ainsi que cette ligne horizontale, et comme je l'ai mentionné précédemment, ces lignes horizontales cohérentes dans toutes les instances. Je vais aller de l'avant et verrouiller cette couche. Cela va le cacher du panneau de remplacement et rendre tout un peu plus facile à travailler avec. Maintenant, quand je retourne à mes symboles, vous pouvez le voir sous « Contenu », qui est la façon dont je les ai imbriqués. J' ai maintenant une option pour un en-tête de section ainsi qu'une seule classe. Je vais aller de l'avant et ajouter mon en-tête de section ici, et je peux supprimer ces objets qui ne sont plus assemblés. Vous pouvez voir que j'ai maintenant trois symboles où il s'agissait d'une liste entière de calques. Beaucoup plus simple à voir sur mon panneau de calques et à comprendre ce que je regarde. La prochaine chose que je ferais ici serait de créer un symbole parmi ces trois. Ce n'est pas nécessairement quelque chose que vous auriez à faire, mais je sais que puisque cette ligne va être utilisée plusieurs fois dans l'application, je préférerais que tous ces éléments soient ensemble au lieu d'avoir toujours à insérer trois symboles. Pour moi, cela a le plus de sens dans ce cas. Je suis allé de l'avant et créé ce composant de ligne de classe de contenu qui a deux classes ainsi que cet en-tête de section que nous avons créé précédemment. Vous pouvez voir dans cet objet, il y a un groupe empilé déjà créé et il va avoir l'en-tête ainsi qu'un groupe qui a deux classes dedans. Lorsque vous créez un groupe, la fonctionnalité de groupe empilé comptera effectivement ce groupe comme un seul élément. Parce que nous les avons regroupés en premier, ceux-ci peuvent être directement adjacents les uns aux autres. Les styles de la mise en page automatique ne seront pas appliqués à chacun de ces composants individuellement. Maintenant, nous avons un composant assez flexible qui peut être utilisé encore et encore. Maintenant, je veux vous montrer à quel point ces composants peuvent être flexibles. Lorsque nous revenons à notre page d'origine, vous pouvez voir que nous avons quelques instances que je pourrais vouloir appliquer ce nouvel objet. Si nous allons à notre « Symbole » et allons à notre section « Contenu » et nous regardons une ligne de classe. Je peux aller de l'avant et insérer ceci ici, le mettre dans le même positionnement, puis aller de l'avant et supprimer l'ancien. Maintenant, nous avons une ligne complète avec tout le même contenu qu'avant, mais maintenant nous sommes en mesure de remplacer et de personnaliser rapidement toutes ces options sans avoir à les manipuler individuellement à grande échelle. C' est vraiment pratique. Si jamais vous voulez faire des changements ou faire quelque chose qui ressemble à une maquette très réaliste sans avoir à faire autant de personnalisation. Même en choisissant une image de classe ici, nous pouvons entrer et j'en ai sauvé quelques, aller et mettre à jour ces très rapidement, et vous pouvez voir, au lieu d'avoir un faux contenu, vous pouvez vraiment rendre les choses convaincantes, ce qui est idéal pour les clients, même présenter aux détenteurs de participations si vous travaillez dans une plus grande entreprise. Ceci est certainement utile lorsque vous présentez votre travail à d'autres personnes. Une dernière chose que je veux montrer dans cette leçon est comment apporter des modifications à ces symboles complexes peut être un gain de temps. entrant et en cliquant sur notre symbole, vous pouvez également double-cliquer sur un symbole dans assembler pour vous amener à ce symbole. Ce sera très pratique si vous n'êtes pas sûr de l'endroit où se trouve ce symbole dans votre fichier. Il suffit de double-cliquer vous sautera directement dans ce symbole et vous permettra de le modifier à partir de là. Disons que j'ai décidé qu'au lieu d'avoir ce texte noir, nous voulions vraiment changer cela, un de mes clients, disons me demande de mettre à jour ceci pour être un texte bleu et gras. Je peux juste mettre à jour cela dans ce seul emplacement, et maintenant vous pouvez voir qu'il est mis à jour dans ce symbole ainsi que d'être également mis à jour dans la maquette finale. Si j'avais cela appliqué 100 fois dans mon projet, ils sont tous maintenant mis à jour, m'a permis de gagner beaucoup de temps d'aller localiser chaque instance et de les mettre à jour individuellement. Espérons que cela illustre vraiment la puissance et les capacités de gain de temps de ces symboles et composants imbriqués dans Sketch. 8. Paramètres de redimensionnement de Sketch: Vous voulez en savoir un peu plus sur les paramètres de redimensionnement, que nous pouvons rendre nos composants encore plus flexibles et réactifs. Ceci est vraiment utile, surtout si vous concevez pour plusieurs tailles d'écran ou appareils. Redimensionner les paramètres peut être un peu compliqué lorsque vous commencez, mais j'ai inclus quelques grandes ressources dans le fichier d'esquisse de ressources de classe, dans la description de classe ci-dessous, qui peuvent s'ouvrir et avoir une bonne idée de beaucoup de les options et la façon dont ils fonctionnent dans des applications réelles. En regardant ce fichier d'esquisse dans les paramètres de redimensionnement ici, vous pouvez voir qu'il y a un exemple avec quatre applications très simples, mais des paramètres de redimensionnement différents. Dans le premier exemple, vous pouvez voir qu'aucun paramètre de redimensionnement n'est appliqué. Cela signifie que cette boîte blanche va simplement s'étirer pour s'adapter au même rapport et aux mêmes proportions que l'ensemble du groupe lui-même. Donc, quand je vais sur ce groupe global et que je vais le redimensionner, vous pouvez voir que cette boîte blanche s'étire simplement pour correspondre au même rapport que je fais glisser l'objet global aujourd'hui. Dans le deuxième exemple, différents paramètres de redimensionnement sont appliqués. Celui-ci a tous les quatre coins de peinture. Cela signifie que le nombre de pixels entre le bord extérieur de cette boîte verte et cette boîte blanche sur les quatre côtés restera constant, quelle que soit la taille globale de cet objet. Quand je vais redimensionner tout ce groupe, vous pouvez voir que l'espacement sur les côtés de l'objet et le haut sont cohérents. Dans le troisième exemple, vous pouvez voir que nous avons appliqué une largeur fixe et une hauteur fixe à cette boîte blanche. Cela signifie que lorsque je clique sur le groupe global et que je passe à redimensionner, la boîte blanche ne change pas réellement de taille quelle que soit la taille du groupe global. Dans le quatrième exemple ici, paramètres similaires sont appliqués, mais nous appliquons également la broche dans le coin supérieur droit. Donc, il est épinglé à droite et en haut ici. Vous pouvez voir qu'une chose similaire se passe exception de l'objet est maintenant épinglé en haut à droite. Comprendre ces quatre types de paramètres est vraiment utile lors du démarrage et de l'application des paramètres de redimensionnement aux objets de vos composants. Pour voir quelques exemples plus complexes, vous pouvez voir ici plusieurs groupes d'objets qui forment ensemble une galerie plus grande, potentiellement avec un avatar et quelques objets fiscaux ou différents. Il pourrait être appliqué de différentes manières. Pour vous familiariser avec le fonctionnement de certains de ces paramètres de redimensionnement dans ces groupes plus importants, vous pouvez aller de l'avant et commencer à jouer avec cet exemple de groupe à droite. En apportant quelques modifications à la taille et au ratio de cet objet, puis en réréférençant ces paramètres appliqués ici, vous aurez une meilleure compréhension de la façon dont ceux-ci fonctionnent sur composants réels et comment ils peuvent être appliqués à vos composants spécifiques pour la conception de votre application. Pour donner des exemples un peu plus réalistes, mais encore assez simples, je veux référencer cet élément de menu ici, ainsi que ce champ de formulaire que j'ai appliqué dans ce fichier. C' est un excellent exemple parce que les formulaires sont certainement quelque chose qui est utilisé sur différents appareils et de nombreuses applications différentes avec des contraintes différentes. Donc, cette instance semble fonctionner assez bien ici, mais disons que nous voulons en faire une copie. Si nous allions appliquer ce même design sur mobile, nous pourrions être contraints dans la largeur de nos objets. Si je vais de l'avant et réduit cela, vous pouvez voir maintenant que le texte s'étend sur deux lignes. Cela pourrait certainement être un problème. Ce n'est pas très lisible et ce n'est pas très réaliste chercher à quoi cela ressemblerait sur une application en direct. Si je vais ajuster la hauteur ici, vous pouvez voir que j'ai configuré cela de sorte que le champ lui-même ait une hauteur flexible réactive, mais ces autres objets, comme cette petite icône ici sont une largeur fixe et une hauteur fixe et ils ont différents paramètres de redimensionnement. En appliquant ces paramètres de manière stratégique, vous pouvez rendre chaque élément très adaptable et personnalisé à ses besoins spécifiques. Pour un autre exemple, pour cet élément de menu ici, si nous devions réduire la largeur pour être beaucoup plus étroite, vous pouvez voir que maintenant mon texte est recadré. Je veux peut-être augmenter la hauteur pour qu'elle soit plus lisible et plus réaliste, mais vous remarquez que mon avatar a des paramètres qui étaient la largeur fixe, hauteur fixe dans la broche à coin, tandis que certains de ces autres éléments sont plus réactifs et capable d'envelopper le texte sans modifier le rapport du composant global. Maintenant, je veux aller de l'avant et revenir dans notre autre fichier d'esquisse avec notre modèle ici, et vous montrer comment certains de ces paramètres pourraient être appliqués à notre composant d'état vide que nous avons fait dans la dernière leçon. regardant le composant dans notre fichier d'origine, vous pouvez voir quand je vais le redimensionner, qu'il y a certainement certains problèmes qui ne sont probablement pas idéaux. Vous pouvez voir que notre bouton est vraiment juste étirement pour s' adapter à la taille de la composante globale que je suis en train d'adapter, mais cela ne fonctionne pas vraiment bien pour la taxe ou la lisibilité de l'un de ces objets. En outre, je pense que cette icône en haut pourrait être meilleure si elle était une taille cohérente. Je n'aime pas vraiment comment il s'adapte, grandit et se rétrécit avec le composant que je déplace cela autour. Donc, je vais double-cliquer et revenir dans la page Symboles et faire quelques ajustements. La première chose que je vais faire, c'est m'occuper de ce bouton. Je voulais certainement être une largeur fixe, je ne veux pas qu'il soit capable d'être si étroit que le texte ne tient plus dans le bouton. Je veux aussi fixer la hauteur. Si je dois faire glisser la hauteur de cet objet dans l'ensemble, je ne veux pas que mon conteneur de bouton se développe et se rétrécit. La deuxième chose que je vais faire est d'ajouter une largeur fixe et une hauteur fixe à mon icône ici. Donc maintenant, quand je retourne à ma page d'origine et vous pouvez toujours dire, définir à la taille d'origine comme une option, ce qui est une grande chose à avoir. Maintenant, vous pouvez voir quand je reviens et en redimensionnant la taille de ceci, le bouton est beaucoup plus cohérent et l'icône est une taille cohérente aussi, qui est ce que je cherchais avec ce composant. Ainsi, vous pouvez voir qu'en apportant ces petites modifications aux paramètres de ces éléments individuels au sein d'un composant, ils deviennent beaucoup plus personnalisés et flexibles à votre application spécifique ainsi que dynamiques, si vous sont conçus pour différents appareils ou tailles d'écran différentes. Espérons que cela aide à rendre vos composants et vos conceptions beaucoup plus flexibles et utilisables pour votre application. 9. Partager votre guide de style: Maintenant que nous avons mis en place un système de conception beaucoup plus complet, y compris des composants réactifs et dynamiques qui sont conçus uniquement pour une application spécifique. Je pense qu'il est temps que nous apprenions à partager ce Système avec d'autres membres de notre équipe, ou même avec d'autres ordinateurs. Même si vous n'êtes qu'un Freelancer travaillant seul, c'est une excellente idée d'avoir le système stocké sur plusieurs appareils et avec un accès facile au cas où vous sautez ou souhaitez partager avec des clients. Le premier outil que nous allons regarder est un plugin appelé Craft par InVision. Certains d'entre vous connaissent peut-être InVision comme un logiciel de prototypage grec. Ils ont aussi de grands plugins pour le sketch. Il y en a plusieurs, mais celui que nous allons aborder aujourd'hui s'appelle Bibliothèque. Vous allez aller de l'avant et télécharger Craft en ligne. Très facile, outil gratuit que vous pouvez télécharger et installer très rapidement. Il va vous donner Craft Manager installé dans votre barre d'outils où vous pouvez voir toutes les différentes options à installer, ainsi que lorsque vous avez des mises à jour comme je le fais actuellement, vous serez en mesure de mettre à jour directement à partir d'ici. Comme je l'ai déjà installé, vous verrez un panneau juste à côté mon inspecteur qui me permet d'accéder rapidement aux outils qu'ils fournissent. Cette deuxième option est un outil Bibliothèque. Lorsque vous cliquez dessus, vous verrez une interface assez simple qui vous permet d'importer une bibliothèque ou d'en créer une nouvelle. Dans ce cas, puisque nous sommes ceux qui créent le guide de style, nous allons créer une nouvelle bibliothèque. Tu peux nommer ça comme tu veux. Je vais aller de l'avant et appeler mon partage de compétences. Ensuite, vous devrez choisir une destination. Je vais simplement choisir mon bureau pour l'instant, mais vous allez vouloir choisir un endroit tel que Dropbox ou un dossier partagé si vous voulez partager cela entre plusieurs équipes ou même plusieurs ordinateurs. Il suffit de cliquer sur Créer une bibliothèque et maintenant vous verrez une interface qui vous permet d'ajouter des éléments. Lorsque nous allons dans notre, je vais aller à ma page Symboles afin que je puisse voir tout le contenu que je voudrais ajouter ici. Bibliothèques d'artisanat, certainement un excellent outil pour stocker tous vos paramètres de type, toutes vos couleurs, tout ce qui est plus d'un paramètre de style que vous allez vouloir voir sur tous les appareils, c'est un excellent outil pour cela. En ce qui concerne le stockage des composants globaux, je vais aborder cela dans l'outil suivant que je partage dans la leçon suivante. Pour l'instant, nous allons ajouter quelques couleurs à notre bibliothèque Craft. Lorsque vous appuyez sur « Ajouter un nouvel élément », vous pouvez voir que vous obtenez un dialogue pour saisir différentes couleurs de votre écran. Vous pouvez simplement saisir directement à partir de votre page de symboles et commencer à ajouter toutes ces couleurs dans votre bibliothèque Craft. Une chose qui est une excellente idée à faire est après avoir ajouté ces éléments pendant que vous les ajoutez, allez-y et donnez-leur un nom qui correspondra à la façon dont vous faites référence à la couleur de vos équipes. Cela pourrait être, cependant, vos développeurs ont référé à la couleur dans leur base de code, ou il pourrait simplement être comment vous voulez la mémoriser dans toutes vos références de guide de style. Une fois que vous avez ajouté tous ces styles, vous pouvez également aller de l'avant et ajouter vos styles de texte. Une excellente façon de le faire, sera simplement de sélectionner tous ces textiles que nous avions comme référence avant et de cliquer sur « Ajouter un nouvel article ». Ça pourrait prendre une minute, juste une minute si vous faites des multiples en même temps. Mais vous pouvez voir très rapidement maintenant j'ai tous mes styles de texte comme point de référence dans ma bibliothèque Craft. À ce stade, il est vraiment facile de partager cela, comme je l' ai mentionné, sur plusieurs ordinateurs ou avec des coéquipiers. Aussi ce que nous devons faire pour utiliser les mêmes bibliothèques, vous seriez d'avoir ce même dossier accessible à eux. Je recommande la synchronisation Dropbox comme une excellente option, mais il existe de nombreuses façons de partager ces fichiers entre les équipes. Quand quelqu'un va dans la bibliothèque d'Ava à son panneau d'artisanat, il suffit de sélectionner, « Ajouter une nouvelle bibliothèque », « Importer la bibliothèque », puis il serait en mesure de choisir rapidement ce même emplacement. Cela vous permet de mettre à jour la bibliothèque Craft et de faire en sorte que ces modifications soient répercutées sur un ordinateur de coéquipiers ou sur votre ordinateur personnel, si vous avez apporté des modifications au travail. Certainement un excellent moyen de rester sur la même page avec toute votre équipe, en veillant à ce que les changements soient reflétés sur tous les ordinateurs et toutes les instances de ces symboles. Le prochain outil que je vais partager avec vous aujourd'hui est nouveau dans le sketch version 47, qui est la version la plus récente de Sketch. Cela va vous permettre d'ajouter tous vos symboles dans une seule bibliothèque qui peut être référencée à partir de tous vos fichiers d'esquisse. Encore une fois, c'est idéal pour les équipes, mais c'est aussi idéal pour tous ceux qui travaillent sur plusieurs fichiers qui veulent partager le même guide de style sur tous ces fichiers ou plusieurs ordinateurs qui veulent avoir la même référence de bibliothèque. Ce que nous allons faire pour utiliser les bibliothèques Sketch, c'est que nous allons aller à nos « préférences Sketch ». et nous allons cliquer sur l'onglet de la bibliothèque. Cela facilite l'ajout de nouvelles bibliothèques dans votre dossier de bibliothèques partagées. Tout ce que vous allez faire est de sélectionner « Ajouter une bibliothèque » et sélectionner un fichier réel à utiliser comme bibliothèque. Dans ce cas-là, vous voudrez peut-être sélectionner le fichier sur lequel nous travaillons réellement en tant que votre bibliothèque Sketch. Ce que cela va faire, si vous deviez en sélectionner un, j'ai un exemple de mon autre guide de style pour la version de bureau de partage de compétences. J' ai ajouté cela ici comme un exemple de guide de style, et ce que vous pouvez voir est que maintenant tous mes symboles de ma version de bureau de guide de style sont disponibles pour moi ici. C' est un excellent moyen de réduire la taille du fichier et rend les symboles beaucoup plus faciles à accéder car ils ne sont pas réellement stockés dans ce fichier que nous travaillons , ils sont stockés dans le fichier de bibliothèque. Nous n'avons pas besoin d'avoir tous les symboles listés dans notre page de symboles, nous pouvons avoir un fichier de référence volumineux qui contient tous ces symboles pour nous. Cela nous permet également d'apporter des modifications à la bibliothèque de symboles une fois, et cela est ensuite reflété dans n'importe quel fichier d'esquisse qui fait référence à cette bibliothèque. Si je devais avoir un fichier sur lequel j'ai travaillé il y a six mois, mais que cette même bibliothèque soit intégrée, lorsque j'ouvrirai à nouveau ce fichier, cela m'avertirait que tous mes styles seraient mis à jour pour refléter les changements qui ont été faites dans cette bibliothèque de symboles. C' est certainement un bon outil, surtout pour les grandes équipes, si quelqu'un est responsable d'apporter des modifications, il met à jour cette bibliothèque de symboles, cela rend notre travail beaucoup plus facile car il suffit de faire il en un seul endroit et tout le monde sera automatiquement mis à jour, qu'ils ont besoin de re-synchroniser avec la bibliothèque. Comme vous pouvez le voir, certainement les conventions de nommage et les outils d'organisation que je vous ai enseignés dans leçons précédentes étaient un excellent moyen d'aider tout le monde sur la même page et de permettre à tout le monde de travailler sur la même bibliothèque. Espérons que ces outils vous ont vraiment aidé, que vous soyez un freelance travaillant sur plusieurs ordinateurs ou travaillant sur une grande équipe pour vraiment rendre votre flux de travail plus efficace et garder des guides de style plus cohérents sur tous vos fichiers. 10. Récap: Je veux que tout le monde se souvienne que ce système est censé fonctionner pour toi. Ce n'est certainement pas une taille unique et n'hésitez pas à modifier ce processus, ou même à l'approche pour mieux répondre aux besoins de votre projet ou de votre style de travail. Je suis vraiment excité de voir certains des travaux que vous produisez les gars et j'aimerais que tout le monde publie des projets et des captures d'écran dans la section des projets ci-dessous dans cette classe. Certainement, j'aime entendre toutes les questions que vous avez, problèmes que vous rencontrez, ou tout ce que vous aimeriez savoir sur la création guides de style et de systèmes de conception pour vos projets. Il y a certainement tellement d'informations à apprendre sur ce sujet. Il y a beaucoup de gens qui sont très actifs dans la communauté avec lesquels j'aime rester à jour. Je vais poster quelques ressources ci-dessous, en particulier de grandes entreprises qui font des choses vraiment de pointe avec des systèmes de conception, et qui poussent vraiment l'industrie à être beaucoup plus bien adaptée à la la façon dont les développeurs travaillent et la façon dont équipes de conception et les développeurs devraient travailler ensemble à l'avenir. Merci beaucoup d'avoir suivi ce cours. J' espère vraiment que cela a été utile pour vous montrer comment créer ces systèmes de conception personnalisés et dynamiques qui peuvent vraiment aider à faire évoluer votre processus de conception, ainsi que rendre votre application globale ou votre site Web plus cohérent.