Parmi les outils de conception, Penpot occupe une place à part. Il s’agit d’un outil de conception open source, conçu pour que les concepteurs et les développeurs travaillent ensemble et les aident à parler le même langage. C’est également le premier outil de conception entièrement open source et basé sur des standards Web ouverts.
C’est une solution idéale pour les concepteurs et les développeurs qui travaillent en étroite collaboration, car l’approche de Penpot peut aider à améliorer radicalement les processus de conception au développement et à les rendre plus simples et plus rapides.
En tant que logiciel open source, Penpot évolue également incroyablement rapidement, alimenté par le soutien de la communauté. Lorsque j’ai écrit pour la première fois sur Penpot il y a quelques mois, j’ai partagé mon enthousiasme pour les fonctionnalités de conception de l’application qui offrent enfin la parité entre la conception et le code et suivent les mêmes règles que CSS. Depuis lors, l’équipe derrière Penpot s’est encore améliorée dans la création de designs, ils valent donc un autre regard. J’ai vraiment aimé jouer avec les fonctionnalités du nouveau Penpot et je pense que vous voudrez les essayer aussi.
Conception de la mise en page bien faite
Si vous avez déjà écrit ou lu du code CSS, il y a de fortes chances que vous ayez déjà rencontré Flexbox. C’est la pierre angulaire de la conception pour le Web moderne, et il est probable qu’il soit utilisé par tous les sites Web que vous visitez chaque jour.
Flexbox est votre pain quotidien pour créer des mises en page simples et flexibles. C’est la façon la plus courante de positionner les éléments : les empiler en lignes et en colonnes, décider comment ils sont censés être alignés et distribués.
Par conséquent, la création de mises en page Flexbox est une partie essentielle de la plupart des processus de transfert Web. Et ce n’est pas rare, cela prend beaucoup de temps et provoque des frictions entre la conception et le développement. Les développeurs essaient généralement de convertir des maquettes statiques en code en reconstruisant à partir de zéro des mises en page conçues par des concepteurs. Étant donné que la plupart des concepteurs n’écrivent pas de code CSS et que la plupart des outils de conception suivent une logique différente de celle du CSS, beaucoup peuvent se tromper ou se perdre dans la traduction.
C’est là que la conception flexible du Penpot entre en jeu. Les conceptions intégrées à Penpot ne nécessitent pas de traduction de code fastidieuse. Bien que les concepteurs puissent les créer à l’aide d’une interface visuelle familière, ils sont prêts à l’emploi sous forme de code prêt à la production. Et même s’ils ont besoin d’être peaufinés, ils peuvent faire gagner beaucoup de temps et de conjectures aux développeurs en suivant une logique déjà familière et compréhensible.
Donc, en fin de compte, cela profite à tout le monde. C’est moins de travail pour les développeurs car ils obtiennent immédiatement le code dont ils ont besoin. C’est mieux pour les concepteurs, car ils ont un contrôle plus précis sur l’effet final et une meilleure compréhension des technologies pour lesquelles ils conçoivent. Et enfin, c’est bon pour les affaires car cela fait gagner du temps à tout le monde.
Tout cela sans alourdir d’un pouce le travail du concepteur ni l’obliger à écrire une seule ligne de code. Voyons maintenant à quoi ressemblent les mises en page de construction avec Flex Layout dans la pratique !
Premiers pas avec la conception flexible
Comme mentionné ci-dessus, Flexbox peut être compris comme un ensemble d’outils permettant de créer des éléments de mise en page et de positionnement.
Chaque mise en page Flex est généralement un tableau, une liste d’éléments. Cette liste peut être triée de gauche à droite, de droite à gauche, de haut en bas ou de bas en haut.
Flex Layout vous permet de contrôler la façon dont les éléments de ces listes s’alignent les uns avec les autres.
Vous pouvez également contrôler la manière dont les éléments sont distribués dans les conteneurs.
Les conceptions flexibles peuvent également être enveloppées dans plusieurs lignes. Vous pouvez également les imbriquer indéfiniment pour créer des conceptions aussi complexes que vous le souhaitez.
Et ce n’est que le début. Il y a beaucoup plus d’options à explorer. Comme vous pouvez le constater, Flex Layout vous offre bien plus de possibilités et de précision que la plupart des outils de mise en page. Créer avec lui n’est pas seulement un meilleur processus, mais un plus puissant.
Pour explorer toutes les fonctionnalités possibles de Flex Layout, l’équipe Penpot a créé un modèle Playground complet que vous pouvez essayer. Si vous n’avez pas encore de compte Penpot, allez-y et créez-en un maintenant. Puis dupliquez le fichier et essayez de jouer avec lui vous-même ! Le fichier vous emmènera dans un voyage à travers chaque fonctionnalité de conception dans Flex, avec des exemples et des définitions clairs, afin que vous puissiez commencer à créer des conceptions complexes et robustes en un rien de temps.
Construire ensemble un exemple
Pour vous donner une meilleure compréhension de ce que c’est que de travailler avec Flex Layout dans la pratique, regardons un exemple pratique. Dans les prochaines étapes, nous allons creuser dans la structure de cette petite maquette et en reconstruire chaque partie avec Flex Layout.
Les premiers éléments pour lesquels nous pouvons utiliser Flex Layout sont les boutons. En quelques clics, nous pouvons nous assurer qu’ils correspondent à la taille de l’icône et de l’étiquette à l’intérieur, définir les rembourrages et les distances entre les éléments enfants.
Nous pouvons également utiliser Flex Layout pour la pile d’avatars. Pour que les images se chevauchent, un espace négatif entre les éléments fonctionne. Nous avons également un contrôle total sur l’ordre des éléments. Nous pouvons placer la pile dans n’importe quelle direction. Nous pouvons également contrôler l’ordre de pile de chaque élément individuellement. C’est grâce à la prise en charge par Penpot du z-index, une autre propriété CSS utile.
Les mises en page flexibles peuvent être imbriquées en créant des mises en page et des dépendances plus complexes. Dans ce cas, nous allons créer une mise en page flexible distincte pour la barre de navigation et une autre pour la grille de tuiles ci-dessous.
Rappelez-vous comment les éléments des mises en page Flex peuvent être enveloppés ? Voyons cela en action. Dans ce cas, nous pouvons créer une disposition multidimensionnelle flexible d’éléments qui répondent au conteneur parent et le remplir de blocs à la fois verticalement et horizontalement, tout comme le ferait CSS.
Mais que se passe-t-il si certains éléments n’appartiennent pas à la grille ? Avec Flexbox, Penpot prend en charge le positionnement absolu. Cela signifie que vous pouvez prendre n’importe quel élément de la mise en page flexible et le laisser dans le même conteneur, mais ignorer les règles de mise en page. C’est exactement ce dont nous avons besoin pour le bouton « Modifier ».
Finalement, nous pouvons transformer l’ensemble du tableau en une mise en page flexible. Maintenant, nous avons un design qui est non seulement facile à travailler et à modifier, mais aussi totalement flexible. Vous vous demandez comment votre design fonctionnerait sur un écran plus petit ou plus grand ? Tout ce que vous avez à faire est de changer la taille du tableau.
Les prochaines étapes
Si vous souhaitez jeter un œil au fichier source de la mise en page que nous venons de créer, allez-y et dupliquez ce fichier.
Pour approfondir et en savoir plus sur l’utilisation de Flex Layout, n’oubliez pas d’essayer le modèle Flex Layout.
Si vous êtes bloqué ou avez des questions, la communauté Penpot serait le meilleur endroit pour chercher de l’aide.
Il existe également un excellent didacticiel vidéo qui explique comment les concepteurs et les développeurs peuvent travailler ensemble à l’aide de Flex Layout.
résumé
Comme vous pouvez le constater, avec Flex Layout, les possibilités de structurer vos conceptions sont infinies. Je pense que des fonctionnalités comme celle-ci sont un changement bienvenu dans la scène des outils de conception et un changement dans la bonne direction. Aidez les concepteurs à mieux contrôler leur travail et aidez les développeurs à travailler aussi efficacement que possible.
Prochainement : Prise en charge de la grille CSS
Vous pensez peut-être la même chose que moi en ce moment, mais les mises en page CSS ne concernent pas seulement Flexbox, n’est-ce pas ? Si vous travaillez avec CSS, vous savez probablement que Flexbox seul ne suffit pas. Les mises en page plus complexes sont souvent mieux construites avec CSS Grid. Flexbox et Grid fonctionnent mieux ensemble, combinés pour créer des sites Web précis mais complexes et entièrement réactifs.
Penpot ne prend pas encore en charge CSS Grid, mais cela est sur le point de changer ! Vous pouvez en savoir plus à ce sujet lors du prochain Penpot Fest. Au cours de l’événement, l’équipe Penpot partagera son plan et une démonstration de la prochaine fonctionnalité de mise en page de la grille. N’hésitez pas à vous joindre (virtuellement ou en personne), si vous souhaitez plus d’informations sur les prochaines étapes pour Penpot.
(Illinois)
