Système de conception en développement. Comment éviter une routine inattendue.

Quatre choses simples à retenir avant le développement du système de conception

Si vous développez des systèmes de conception, vous avez probablement appris que la séquence est importante. Lorsqu'un composant ou un symbole a été créé et que vous l'avez multiplié avant qu'il ne soit doté des propriétés nécessaires, le risque d'une routine est devenu possible.

Exemple: vous avez créé le composant à partir de symboles imbriqués. Si vous avez oublié de spécifier à temps les paramètres / contraintes de redimensionnement, tous les clonés sont correctement redimensionnés.

Accélère les délais de conception et de développement jusqu'à 50%

Le système de conception de matériel pour Figma comprend exactement 512 composants d'interface utilisateur et 1171 icônes de matériau.

  • Architecture unique pour une personnalisation rapide
  • Equipé d'une documentation simple et claire
  • Dédié aux applications de bureau et mobiles
  • Fait avec les directives de conception de matériel suivantes
  • Utilise les fonctions Figma «Instance» au maximum
  • Prise en charge de l'API Web Figma pour une intégration en temps réel
  • Les clients supportent 7 jours par semaine!

En savoir plus → http://setproduct.com/material

Si vous avez encore des doutes, je vous recommande de regarder la vue d'ensemble

Former une liste d'éléments récurrents

Identifiez et regroupez tous les objets répétitifs dans une présentation, un prototype ou un concept exact. Pas seulement des boutons dans la liste. Étiquettes, icônes, entrées, titres, etc. Cela vaut la peine d’ajouter des paramètres d’arrière-plan et même d’ombre, si vous voulez construire un système suffisamment flexible. Ci-dessous, vous apprendrez le but de ces actions.

Certains composants répétés

② Déterminer tous les états possibles

Maintenant, commencez à former une liste d’éléments pour lesquels la réponse du système est possible, ou l’utilisateur sera probablement en interaction avec lui. Si votre mission nécessite de décrire même les états de survol, je recommanderais de garder ce processus plus tard, aux toutes dernières étapes du développement, lorsque tous les composants sont visuellement connus et que vous pouvez alors vous demander: «Lequel d'entre eux doit être cloné pour des états supplémentaires ? "

Peu d'états possibles pour la saisie de texte

Ajustez les contraintes ou les paramètres de redimensionnement

Procurez-vous une règle: «lorsque je travaille sur un composant, je garde toujours à l'esprit son évolution». Pouvez-vous rappeler l'exemple à partir duquel j'ai commencé ce post? En bout de ligne, vous devez définir les paramètres de contraintes / redimensionnement immédiatement après la conversion du cadre en composant. Sinon, vous serez bloqué par la routine au cas où vous deviez l’ajuster manuellement pour chaque élément ultérieurement.

Icônes de redimensionnement paramétrées pour s'aligner à droite

④ Les noms accessibles venaient en premier, États - après

Votre composant est-il prêt et vous le clonez pour d'autres états? Excellent, mais pour la première fois, appliquez-lui un nom accessible. Prenez soin de vous et de l'équipe de développeurs et utilisez des noms clairs. Gardez à l'esprit que le composant cloné conserve le nom du parent. Si vous préférez l'ordre, je m'attends à ce que votre champ de texte ressemble à ceci:

Champs de texte / souligné / par défaut

Maintenant, le composant peut être cloné en toute sécurité. Détachez ensuite l’instance, appliquez les modifications visuelles nécessaires et il ne reste plus qu’à modifier à la fin:

Champs de texte / Souligné / Actif

Quelque chose pour le dessert

Pas de routine. Mon processus de conception est maintenant associé au système de conception et diffusé en direct sur YouTube:

La ligne du bas ⤑ garder la séquence

C’est la base pour aujourd’hui. Aucun doute, il y a beaucoup plus de nuances dans le développement de systèmes de conception, peut-être que je décrirai plus tard. S'il vous plaît, partagez dans les commentaires vos propres méthodes / étapes lorsque vous démarrez concevoir le système à partir de zéro. À votre santé.

Et après? Lancez rapidement votre projet de conception de matériel avec cette bibliothèque Figma

Créé avec le système de prototypage de matériaux pour Figma
❶ Explorez le système → http://setproduct.com/material
Vue d'ensemble des composants → http://setproduct.com/material/components
❸ Plus de vidéos → http://setproduct.com/material/videos
❹ Achat et téléchargement → http://setproduct.com/material/download
1000+ icônes matérielles → http://setproduct.com/material/icons_pro