Construire des mises en page CSS dans un outil de conception

Parmi les outils de conception, Penpot tient une place particulière. Il s’agit d’un outil de conception open source, destiné aux concepteurs et aux développeurs pour travailler ensemble et les aider à parler le même langage. C’est également le premier outil de conception à être entièrement open source et basé sur des normes Web ouvertes.

C’est un choix parfait pour les concepteurs et les développeurs travaillant en étroite collaboration, car l’approche de Penpot peut aider à améliorer radicalement les processus de conception aux processus de développement et à les rendre sans effort transparents et plus rapides.

En tant que logiciel open source, Penpot évolue également à une vitesse fulgurante, alimenté par le soutien de la communauté. Quand j’étais premier écrit sur Penpot il y a quelques mois, j’ai partagé mon enthousiasme pour les fonctionnalités de mise en page de l’application qui apportent 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 a encore amélioré la création de mises en page, elles méritent donc un autre regard. J’ai vraiment aimé jouer avec les nouvelles fonctionnalités de Penpot, et je pense que vous voudrez peut-être aussi les essayer.

Concevoir des mises en page bien faites

Si vous avez déjà écrit ou lu du code CSS, il y a de fortes chances que vous soyez déjà tombé sur Flexbox. C’est la pierre angulaire de la création de mises en page pour le Web moderne, et il est fort probable que chaque site Web que vous visitez quotidiennement l’utilise.

Flexbox est le pain et le beurre de la création de mises en page simples et flexibles. C’est la manière la plus courante de positionner les éléments : les empiler en lignes et en colonnes et 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 pas rarement chronophage et causant des frictions entre la conception et le développement. Habituellement, les développeurs essaient de traduire les maquettes statiques en code en reconstruisant les mises en page créées par les concepteurs à partir de zéro. Comme 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 le Flex Layout de Penpot entre en jeu. Les mises en page intégrées à Penpot n’ont pas besoin d’être fastidieusement traduites en code. Même si les concepteurs peuvent les créer à l’aide d’une interface visuelle familière, ils se présentent sous la forme d’un code prêt à l’emploi et prêt à l’emploi. Et même s’ils ont besoin d’être peaufinés, ils peuvent toujours faire gagner beaucoup de temps et de conjectures aux développeurs, car ils suivent une logique qui leur est 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 conceptions de bâtiments avec Flex Layout dans la pratique !

Premiers pas avec la mise en page Flex

Comme mentionné précédemment, Flexbox peut être compris comme une boîte à outils pour créer des éléments de mise en page et de positionnement.

Chaque Flex Layout est généralement un tableau, une liste d’éléments. Cette liste peut être triée de gauche à écriture, de droite à gauche, de haut en bas ou de bas en haut.

Flex Layout vous permet de contrôler la manière dont les éléments de ces listes sont alignés les uns par rapport aux autres.

Vous pouvez également contrôler la disposition des éléments dans les conteneurs.

Les mises en page flexibles peuvent également s’étendre sur plusieurs lignes. Vous pouvez également les imbriquer indéfiniment pour créer des mises en page 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 voir, la mise en page Flex vous offre beaucoup plus de possibilités et de précision que la plupart des outils de conception. 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 de Penpot a créé un modèle Playground complet à essayer. Si vous n’avez pas encore de compte Penpot, allez-y et créez-en un maintenant. Ensuite, dupliquez le fichier et essayez de jouer avec vous-même ! Le fichier vous emmènera dans un voyage à travers chaque fonctionnalité de mise en page Flex, avec des exemples et des définitions clairs, afin que vous puissiez commencer à créer des mises en page complexes et robustes en un rien de temps.

Construire un exemple ensemble

Pour vous donner une meilleure compréhension de ce qu’est le travail 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.

Pour les premiers éléments, nous pouvons utiliser Flex Layout pour nos boutons. En quelques clics, nous pouvons nous assurer qu’ils répondent à la taille de l’icône et de l’étiquette à l’intérieur, et 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 écart négatif entre les éléments fait l’affaire. Nous avons également un contrôle total sur l’ordre des éléments. Nous pouvons disposer 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, créant des mises en page et des dépendances plus complexes. Dans ce cas, nous allons créer une mise en page Flex distincte pour la barre de navigation et une autre pour la grille de tuiles ci-dessous.

N’oubliez pas que 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, comme le ferait CSS.

Mais que se passe-t-il si certains des éléments n’appartiennent pas à la grille ? Parallèlement à Flexbox, Penpot fournit un support pour le positionnement absolu. Cela signifie que n’importe quel élément peut être récupéré à partir de la mise en page Flex pour rester 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 Flex Layout. Maintenant, nous avons un design qui est non seulement facile à utiliser et à modifier, mais qui est également 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 redimensionner le tableau.

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 dupliquer ce fichier.

Pour approfondir et en savoir plus sur l’utilisation de Flex Layout, n’oubliez pas de essayez le modèle Flex Layout.

Si vous êtes bloqué ou si vous avez des questions, Communauté Penpot serait le meilleur endroit pour chercher de l’aide.

Il y a aussi un grand 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 voir, 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 sur la scène des outils de conception et un changement dans la bonne direction. Aider les concepteurs à mieux contrôler leur travail et aider les développeurs à travailler aussi efficacement que possible.

Prochainement : prise en charge de la grille CSS

Peut-être pensez-vous maintenant la même chose que moi : les mises en page CSS ne sont 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 à l’aide de CSS Grid. Flexbox et Grid fonctionnent mieux lorsqu’ils sont combinés – 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 de la prochaine Penpot Festival. Au cours de l’événement, l’équipe de Penpot partagera son plan et une démo de la prochaine fonctionnalité Grid Layout. N’hésitez pas à nous rejoindre (virtuellement ou en personne), si vous souhaitez en savoir plus sur les prochaines étapes pour Penpot.

(il)