Exportation d'une tranche dans Sketch avec un fond transparent autour

En utilisant Sketch 3, vous voulez exporter une icône, les icônes elles-mêmes sont 24x24 mais elles se trouvent dans une zone de 32x32.

J'ai compris comment le faire en combinant deux couches différentes, une 24x24 et l'autre 32x32, mais c'est un processus fastidieux. Je dois le faire pour chaque icône.

Existe-t-il un flux de travail plus rapide?

Appuyez sur Apour créer un plan de travail , sélectionnez la taille (ou définissez la vôtre en cliquant sur +en bas à droite) et commencez à exporter. Pas besoin de créer des couches supplémentaires.

C'est en fait très facile si vous savez comment le faire :)

Supposons que vous ayez une icône au format 24x24px et que vous souhaitiez que le png soit 32x32px. Vous devez créer une tranche sur l'icône. La tranche doit être de 32x32px. Regroupez ensuite la tranche et l'icône ensemble. Enfin et surtout: cliquez sur la tranche et dans l'inspecteur, vous verrez quelque chose comme ceci:

Assurez-vous de cocher «Exporter le contenu du groupe uniquement». Les autres options doivent être décochées.

De cette façon, vous exporterez un png transparent, même s'il n'y a pas d'arrière-plan transparent sous l'icône.

Si vous souhaitez exporter uniquement le calque d'icône (24 x 24), faites simplement glisser le calque sur le bureau.

Utilisez-le pour exporter vos actifs. Le problème avec Sketch lui-même et la plupart des autres plugins est qu'il néglige les calques invisibles lors de l'exportation. Par conséquent, les limites invisibles ne fonctionnent pas.

J'ai même essayé de réduire l'opacité d'une borne à 0 afin d'essayer de tromper Sketch pour l'exporter. Mais l'exportation native de Sketch n'est pas si naïve.

Vous pourriez voir une horde de plugins de Sketch qui aident à exporter facilement des actifs pour Android. Ils pourraient réduire les étapes impliquées, mais cela ne résout pas le problème des limites.

Celui-ci le fait.

https://github.com/GeertWille/sketch-export-assets

Il vous permet d'exporter des actifs pour iOS, Android et Windows pour toutes les résolutions tout en gardant les limites intactes.

Enregistre tous ces efforts de plan de travail.

Cette méthode a fonctionné pour moi: placez le calque de tranche de taille correcte au - dessus du calque sur lequel se trouve votre icône et assurez-vous qu'ils ne sont pas groupés .

J'espère que cela aide

J'ai passé plus de temps qu'il n'aurait fallu manuellement pour aller un par un mais je n'ai pas abandonné et j'ai trouvé une solution qui fonctionne bien:

1. Copiez toutes les icônes que vous souhaitez exporter dans un nouveau fichier
2. Convertissez-les en symboles
3. Depuis qu'ils sont devenus des symboles, ils auront leurs propres plans de travail (il vous suffit de double-cliquer sur l'un des symboles pour accéder à la page des symboles)
4. Lorsque vous êtes sur la page des symboles, assurez-vous que tous les symboles sont réduits Affichage> Liste des calques> Réduire tous les groupes et sélectionnez-les tous cmd + A
5. Maintenant, vous pouvez continuer et sélectionner rendre exportable et les exporter tous
6. Voila! Si vous les avez nommés correctement, vous les aurez également dans de petits dossiers soignés

j'espère que cela a aidé!

J'ai trouvé une solution de contournement n'impliquant pas la création de plans de travail séparés. C'est un peu hacky, mais ça a marché pour moi. Je voulais que les icônes de mon design soient exportables dans Zeplin. Ainsi, la création de nouveaux plans de travail rendrait plus difficile pour les développeurs de trouver les icônes.

J'ai donc fait 1% d'opacité du fond carré avec le mode de fusion "Darken". Vous ne pouvez pas le voir du tout. Ensuite, j'ai groupé cela avec l'icône et rendu le groupe exportable. Super simple.