Adaptive Flex Grid dans Sketch à l'aide de la disposition automatique et des groupes de piles

Amélioration des systèmes de conception pour la structure, la modularité et l'échelle

Des outils comme FlexBox en CSS, UIStackView dans iOS et FlexboxLayout dans Android ont longtemps donné aux développeurs les workflows nécessaires pour gérer la multitude de vues adaptatives et réactives qui existent aujourd'hui.

Cependant, pour les concepteurs, le processus de conception de la mise en page de certains de nos outils de conception préférés a toujours été plus manuel, plus statique, plus fastidieux et généralement moins précis sur le plan mathématique. Mais grâce au travail incroyable des gens d'Anima, nous pourrons bientôt avoir la structure et la flexibilité dont nous avons besoin pour mieux combler cet écart.

Avec la nouvelle fonctionnalité Stacks intégrée au dernier plug-in Auto-Layout, nous avons maintenant un flux de travail qui prend mieux en charge la sortie de l'interface utilisateur et nous permet d'obtenir plus de cohérence et de maintenabilité dans nos systèmes de conception. (Avis de non-responsabilité - Ce concept est encore à un stade précoce. Tous les types de disposition ne bénéficieront pas de ce système, alors mélangez-les comme bon vous semble)

La démo

Dans la vidéo ci-dessous, j'ai mis en place une disposition de grille flexible de preuve de concept pour mettre en valeur la beauté des piles. Il s'agit d'un plan de travail qui reflète la structure d'une page Web de base.

Bien qu'elle en soit encore aux premiers stades exploratoires, les fonctionnalités suivantes sont intégrées au modèle:

  • Du bureau au mobile en quelques clics.
  • Les plans de travail sont redimensionnables et l'alignement / la distribution de la grille ne se casse pas
  • Grille structurée par:
  • Corps
     - Entête
     - Principale
     - -sections
     - - - groupes de lignes (a une couche de dimensionnement de boîte frère)
     - - - - rangées
     - - - - - colonnes
     - - - - - - modules
     - - - - - - - composants (symboles imbriqués avec logique interne)
     - Bas de page
  • Utilisez des symboles imbriqués, définis par une combinaison de propriétés de redimensionnement d'esquisse, d'épinglage de mise en page automatique et de groupes de piles pour créer un système modulaire de composants échangeables.
  • La mise en page s'adapte à la largeur du plan de travail (le contenu a une largeur maximale de 1200 px et le mobile a des gouttières intégrées).
  • Variété de distributions de colonnes et réduction / modification facile des gouttières.
  • et
    grandissent et rétrécissent indépendamment de
    .
  • Les changements de hauteur à
    poussent le
    vers le bas dans le plan de travail, tout en gardant les marges et les rembourrages intacts comme le ferait une page Web.
  • La hauteur de peut être ajustée pour affecter la hauteur des colonnes enfants
  • L'alignement des colonnes (haut, milieu, bas, étirement) peut être défini au niveau de la ligne.
  • L'ajout d'une nouvelle colonne (ou sa suppression) de la ligne ajuste automatiquement la largeur des colonnes frères pour qu'elles s'adaptent en conséquence.
  • L'ajout d'un nouveau module enfant dans la colonne fera croître cette colonne verticalement (les modules contiennent un nombre illimité de types de contenu, tels que des images, du texte, des listes, des tableaux, des groupes et des symboles)
  • L'alignement des modules (gauche, centre, droite, étirement) peut être défini au niveau de la colonne.
  • échange de symboles pour remplacer le contenu ou épingler de nouveaux calques au composant existant.
  • Le plan de travail de bureau a été configuré pour utiliser une grille de référence de 8 pt.

Le fichier d'esquisse

C'est ici. N'hésitez pas à l'améliorer de quelque manière que ce soit et faites-le moi savoir.
* IMPORTANT * - Le fichier ne fonctionnera PAS sauf si vous disposez de la dernière version d'Auto Layout with Stacks Support (.0.2.0 au moment de la rédaction de cet article).

https://cl.ly/2v2I373P2E1f

Quelques réflexions finales

J'espère que cela a été utile à certaines personnes. Je sais que j'explorerai plus en profondeur les possibilités de la mise en page automatique et des piles. Depuis cette version, j'ai remarqué quelques petites bizarreries avec l'arrondissement des mathématiques, mais j'espère que celles-ci seront triées à temps. Parmi certaines des demandes que j'ai suggérées aux développeurs, je pense que celles-ci pourraient être utiles.

  • La possibilité d'ajouter un arrière-plan à un groupe empilé (ligne parent des colonnes) sans affecter la logique de la pile. En HTML / CSS, cela se ferait simplement au niveau ou "div", mais Sketch ne permet pas pour l'instant de le faire.
    Il existe une approche pour le faire en ce moment qui implique de regrouper un calque d'arrière-plan avec un groupe empilé et d'épingler le bg en haut / à gauche / 100% de largeur et de hauteur, et bien que l'arrière-plan s'agrandisse pour accueillir le contenu, il ne rétrécit pas lorsque le le contenu est supprimé. Je pense que le rétrécissement figure déjà sur la liste des choses à faire de l'équipe.
  • L'introduction de points d'arrêt dans le plan de travail et l'échange de symboles basé sur le plan de travail (échange d'un nav de 4 éléments avec une icône de hamburger lorsque le plan de travail est <400 px, ou mieux encore, en utilisant une approche de requêtes de conteneur.
  • Avec ces points d'arrêt, la possibilité de basculer entre les groupes empilés horizontaux et verticaux, de sorte que les colonnes s'empilent les unes sur les autres lorsque l'espace est insuffisant. Et pour les colonnes à encapsuler si spécifié.
  • La possibilité de spécifier un pourcentage de largeur par colonne.
    (Mise à jour - Une version de cette idée vient d'être implémentée dans le plugin en utilisant la fonction Weights)
  • Bien que cela ne relève pas nécessairement de l'équipe Anima, Sketch devrait également introduire la prise en charge des variables, en particulier maintenant avec des propriétés telles que l'espacement, les hauteurs min et max, et d'autres valeurs qui doivent être cohérentes sur plusieurs couches. Ces variables pourraient également être utilisées pour établir une correspondance avec les couleurs et aider au processus de transfert Sass.

C’est tout ce que j’ai! Je voulais juste remercier une fois encore l'équipe d'Anima. Ils sont incroyablement talentueux, réactifs et accueillants, alors assurez-vous de soutenir leur travail acharné! Rejoignez leur page Facebook.

Si vous avez des questions ou des commentaires (sympas!), N'hésitez pas à poster ci-dessous ou à contacter Twitter.