Construisez des systèmes de conception avec des composants Penpot

Si vous avez suivi notre série Penpot, vous connaissez déjà cet outil de conception open source passionnant et la façon dont il change la donne pour la collaboration concepteur-développeur. Auparavant, nous avons exploré celui de Penpot Disposition flexible et Disposition de la grille fonctionnalités, qui mettent la puissance du CSS directement entre les mains des concepteurs.

Aujourd’hui, nous abordons un autre aspect crucial de la conception et du développement Web modernes : Composants. Cette fonctionnalité fait partie de la version majeure 2.0 de Penpot, qui introduit une multitude de nouvelles fonctionnalités pour combler davantage le fossé entre la conception et le code. Explorons comment la mise en œuvre des composants par Penpot peut dynamiser votre flux de travail de conception et favoriser une collaboration encore meilleure entre les équipes.

À propos des composants

Les composants sont des éléments de base réutilisables qui constituent la base des interfaces utilisateur modernes. Ils encapsulent un élément d’interface utilisateur ou une fonctionnalité qui peut être réutilisé dans votre application. Ce concept de composabilité – construire des systèmes complexes à partir de pièces plus petites et réutilisables – est la pierre angulaire du développement Web moderne.

Pourquoi la composabilité est-elle importante ? Il y a plusieurs avantages clés :

• Source unique de vérité
  Les modifications apportées à un composant sont reflétées partout où il est utilisé, garantissant ainsi la cohérence.
• Flexibilité avec des dépendances plus simples
  Les composants peuvent être facilement échangés ou mis à jour sans affecter l’ensemble du système.
• Maintenance et évolutivité plus faciles
  À mesure que votre système se développe, les composants aident à gérer la complexité.

Dans le domaine du design, cette philosophie s’exprime mieux dans le concept de systèmes de conception. Lorsqu’ils sont bien faits, les systèmes de conception aident à rassembler votre conception et votre code, réduisant ainsi l’ambiguïté et rationalisant les processus.

Cependant, cela n’est pas si facile à réaliser lorsque vos conceptions sont construites en utilisant une logique et des normes très différentes du code auquel elles sont liées. Penpot s’efforce de résoudre ce défi grâce à son approche unique. Au lieu de créer des artefacts visuels qui imitent uniquement les interfaces du monde réel, les interfaces utilisateur de Penpots sont construites en utilisant les mêmes technologies et normes que les produits fonctionnels réels.

Cela nous donne une bien meilleure parité entre les médias et permet aux concepteurs de créer des interfaces déjà exprimées sous forme de code. Il favorise une collaboration plus facile car les concepteurs et les développeurs peuvent parler le même langage lorsqu’ils discutent de leurs composants. Le résultat final est plus maintenable, aussi. Les modifications créées par les concepteurs peuvent se propager de manière cohérente, ce qui facilite la gestion des systèmes à grande échelle.

Voyons maintenant comment fonctionnent les composants de Penpot dans la pratique ! À titre d’exemple, je vais utiliser la page de produit fictive suivante et la recréer dans Penpot :

Composants dans Penpot

Création de composants

Pour créer un composant dans Penpot, sélectionnez simplement les objets que vous souhaitez inclure et sélectionnez « Créer un composant » dans le menu contextuel. Cela transforme votre sélection en un élément réutilisable.

Création de variantes de composants

Penpot vous permet de créer des variantes de vos composants. Il s’agit de versions alternatives qui partagent la même structure de base mais diffèrent par des aspects spécifiques tels que la couleur, la taille ou l’état.

Vous pouvez créer des variantes en utilisant des barres obliques (/) dans le nom des composants, par exemple en nommant vos boutons Button/primary et Button/secondary. Cela vous permettra de basculer facilement entre les types de Button composant plus tard.

Imbrication de composants et utilisation de bibliothèques externes

Les composants de Penpot peuvent être imbriqués, vous permettant de créer des éléments d’interface utilisateur complexes à partir de pièces plus simples. Cela reflète la façon dont les développeurs structurent souvent leur code. En d’autres termes, vous pouvez placer les composants les uns dans les autres.

De plus, les composants que vous utilisez ne doivent pas nécessairement provenir du même fichier ni même de la même organisation. Vous pouvez facilement partager des bibliothèques de composants entre projets, tout comme vous importeriez du code de diverses dépendances dans votre base de code. Vous pouvez également importer des composants à partir de bibliothèques externes, tels que des kits d’interface utilisateur et des jeux d’icônes. Penpot maintient une liste croissante de ces ressources parmi lesquels choisir, y compris tout, des grands systèmes de conception comme Material Design aux bibliothèques d’icônes les plus populaires.

Organiser votre système de conception

La nouvelle version majeure de Penpot est livrée avec une version repensée Panneau Actifs, où se trouvent vos composants. Dans le panneau Actifs, vous pouvez facilement accéder à vos composants et les glisser-déposer dans les conceptions.

Pour une meilleure maintenance des systèmes de conception, Penpot vous permet de stockez vos couleurs et votre typographie sous forme de styles réutilisables. Tout comme les composants, vous pouvez nommer vos styles et les organiser en structures hiérarchiques.

Configuration des composants

L’un des principaux avantages de l’utilisation de composants composables dans les bibliothèques frontales telles que React est leur prise en charge des accessoires. Les accessoires de composants (abréviation de propriétés) vous offrent une grande flexibilité dans la façon dont vous configurez et personnalisez vos composants, en fonction de comment, où et quand ils sont utilisés.

Penpot offre des fonctionnalités similaires dans un outil de conception avec des variantes et des remplacements. Vous pouvez changer de variante, masquer des éléments, modifier les styles, échanger des composants imbriqués dans des instances ou même modifier l’ensemble de la disposition d’un composant, offrant ainsi une flexibilité tout en conservant le lien vers le composant d’origine.

Créer des systèmes flexibles et évolutifs

Vous permettant de modifier les dispositions Flex et Grid dans les instances de composants C’est là que Penpot brille vraiment. Cependant, la puissance de ces fonctionnalités de mise en page va au-delà des composants eux-mêmes.

Avec Flex Layout et Grid Layout, vous pouvez créer des composants beaucoup plus fidèles à leur code et plus faciles à modifier et à maintenir. Mais avoir ces fonctionnalités puissantes à portée de main signifie que vous pouvez également placer vos composants dans d’autres mises en page Grid et Flex. C’est un gros problème car cela vous permet de tester vos composants dans des scénarios beaucoup plus proches de leur environnement réel. Directement dans un outil de conception, vous pouvez voir comment votre composant se comporterait si vous le placiez à différents endroits de votre site Web ou de votre application. Cela vous permet d’affiner la manière dont vos composants s’intègrent dans un système plus vaste. Cela peut réduire considérablement les frictions entre la conception et le code et rationaliser le processus de transfert.

Génération du code des composants

Comme les composants de Penpot ne sont que du code prêt pour le Web, l’un des plus grands avantages de leur utilisation est la facilité avec laquelle vous pouvez exporter le code de vos composants. Cette fonctionnalité, comme toutes les capacités de Penpot, est entièrement gratuite.

À l’aide du panneau Inspecter de Penpot, vous pouvez rapidement récupérer toutes les propriétés et styles de mise en page ainsi que les extraits de code complets pour tous les composants.

Documentation et annotations

Pour rendre les systèmes de conception dans Penpot encore plus maintenables, il inclut des fonctionnalités d’annotation pour vous aider à documenter vos composants. Ceci est crucial pour maintenir un système de conception clair et assurer un transfert en douceur vers les développeurs.

Résumé

L’implémentation de composants par Penpot et sa prise en charge de véritables mises en page CSS en font un outil remarquable pour les concepteurs qui souhaitent travailler en étroite collaboration avec les développeurs. En adoptant les standards du Web et en fournissant des composants puissants et flexibles, Penpot permet aux concepteurs de créer des conceptions plus conviviales pour les développeurs sans sacrifier la créativité ou le contrôle.

Toutes les fonctionnalités de Penpot sont entièrement gratuites pour les concepteurs et les développeurs. En tant que logiciel open source, Penpot vous permet de vous approprier pleinement votre expérience d’outil de conception et de la rendre accessible à tous, quels que soient la taille de l’équipe et le budget.

Prêt à plonger ? Vous pouvez explorer le fichier utilisé dans cet article en le téléchargeant et en l’important dans votre compte Penpot.

Alors que le paysage des outils de conception continue d’évoluer, Penpot se charge de rapprocher les concepteurs et les développeurs. Que vous soyez un concepteur cherchant à comprendre le processus de développement ou un développeur cherchant à rationaliser votre flux de travail avec les concepteurs, le système de composants de Penpot mérite d’être exploré.

(ouais)