Tout a commencé par une demande de système de conception. Notre équipe de système de conception a été invitée à ajouter une option de plus grande taille à notre composant de bouton existant. Après avoir examiné les autres tailles, nous pourrions extrapoler une autre taille, mais cela m'a rendu curieux… « comment toutes les tailles de composants se comparent-elles dans notre système de conception ? Existe-t-il des règles universelles à suivre pour le dimensionnement ? »

Malheureusement, la réponse était non. Certaines valeurs étaient communes, mais rien n'était cohérent. Il n'y avait aucune règle en place pour aider à assurer un dimensionnement, un espacement et une mise à l'échelle cohérents dans notre système.

Revenir à l'essentiel

Un bon design repose généralement sur la maîtrise des fondamentaux. Pour de nombreux designers (comme moi), la typographie est l'élément fondamental le plus important du design. Nous avons examiné notre échelle de types pour voir comment nous pouvions créer des conceptions proportionnelles mises à l'échelle en fonction de ratios et de méthodes communs.

Présentation de la proportionnalité

Proportio est une application Web permettant aux concepteurs de créer les bases d'un système de conception proportionnelle. Vous pouvez explorer les échelles typographiques et la manière dont elles peuvent être appliquées aux icônes, à la taille, à l'espacement et à la composition d'un composant. Avec un système de conception proportionnel, la taille et la densité des composants sont un jeu d'enfant.

Créer des systèmes fondamentaux

Vous commencez par définir votre échelle de type, qui sera utilisée pour une grande partie du reste de votre système. Une taille de police de base est utilisée, ainsi qu'un facteur d'échelle tel que la tierce mineure (1:1,125). Toutes les autres tailles de police sont basées sur ce rapport.

Les icônes sont automatiquement dimensionnées en fonction de l'échelle de type, car l'appariement de la typographie et des icônes est un élément commun et important dans les systèmes de conception.

L'espacement entre le texte et l'icône est également proportionnel, en fonction de l'échelle du texte. Cela garantit que l'espacement entre eux est relatif et équilibré. De même, vous pouvez créer des échelles de dimensionnement proportionnelles, des échelles de rayon et même des échelles d'élévation (ombre portée).

Le système de composants

C'est là que les choses deviennent vraiment intéressantes.

Une fois que vous avez nos systèmes de base, vous pouvez choisir d'utiliser soit notre échelle de type ou notre échelle d'espacement pour dimensionner nos rembourrages et hauteurs de composants. Le composant de taille de base (par défaut) utilise la taille de votre type de base (par défaut, 16px).

Vous pouvez ajouter des tailles plus petites et plus grandes, qui sont générées dans l'interface utilisateur en fonction des incréments de vos échelles sélectionnées.

Vous pouvez également ajouter des options plus ou moins denses. La densité est comme la taille, bien qu'elle n'affecte que le rembourrage et la hauteur du composant - les tailles de texte et d'icône restent les mêmes. Celles-ci sont également générées en fonction de vos échelles et vous pouvez modifier la vitesse à laquelle vos densités augmentent ou diminuent.

Vous pouvez basculer la vue du composant pour voir comment votre composant apparaît lorsqu'il n'y a que du texte, qu'une icône ou les deux. Vous pouvez également basculer une vue pour afficher les spécifications du composant.

Le système de conteneurs

Tout comme le système de composants, Proportio vous permet de créer des conteneurs proportionnellement mis à l'échelle.

Par exemple, un popover pourrait être un petit conteneur (petit rayon d'angle et rembourrage). Les conteneurs plus grands comme les cartes peuvent avoir un rayon d'angle et un rembourrage plus grands. Les dialogues modaux peuvent être considérés comme des conteneurs encore plus grands et nécessitent le plus de rembourrage et le plus grand rayon d'angle pour paraître appropriés dans un système d'interface.

En utilisant les mêmes systèmes proportionnels, vous pouvez créer des conteneurs avec un remplissage mis à l'échelle, un rayon mis à l'échelle et même une élévation (si vous en avez besoin).

Exporter des valeurs

Une fois que vous avez créé un système que vous souhaitez utiliser, ils peuvent être exportés sous forme de jetons de conception (format de brouillon W3C) ou de variables CSS. Cela facilite le transfert de votre système aux ingénieurs.

Actuellement, il n'y a aucun moyen d'extraire ces valeurs directement dans Figma . Ainsi, dans son état actuel, il est plus utile comme prototype pour définir ce que vous aimeriez utiliser dans votre système, plutôt qu'un véritable « outil de conception ». Mais cela dit, cette fonctionnalité pourrait être ajoutée si vous vous sentez si enclin, car Proportio est un outil open source.

Open source

Proportio est un projet open-source . Je crois fermement qu'il faut redonner à la communauté des systèmes de conception pour aider à partager ou provoquer de nouvelles idées afin que nous puissions tous grandir ensemble.

L'outil en est encore à ses balbutiements, mais il existe des fonctionnalités supplémentaires en préparation pour vous aider à tirer le meilleur parti de Proportio pour la conception et le développement.