Share
Jetons un coup d'oeil à Sympli; une plateforme de collaboration pour les concepteurs et les développeurs. Cela fonctionne avec Xcode, Android Studio, Sketch et Photoshop. Dans ce tutoriel, nous couvrirons le point de vue du concepteur, puis, dans un article ultérieur, nous verrons comment Sympli fonctionne du point de vue du développeur..
Lorsque vous avez une équipe qui travaille sur une interface utilisateur d'application (que ce soit pour un projet Android, iOS ou HTML5), la phase de transition de la conception au code devient souvent difficile, peu efficace et parfois un peu pénible..
Une fois qu'une conception Photoshop ou Sketch est terminée, elle est généralement transmise telle quelle à l'équipe de développement. À partir de là, l'équipe de développement doit extraire les ressources de l'image, mesurer les dimensions et déterminer manuellement les couleurs, les paramètres de police et le contenu du texte à traduire en code. Si des modifications sont apportées aux fichiers de conception d'origine, le transfert des documents mis à jour via Dropbox (ou par courrier électronique) est lent, fastidieux et difficile à suivre..
Toutes ces étapes prennent beaucoup de temps au processus de développement et exigent en outre que les codeurs accèdent aux applications de conception et les apprennent sans avoir besoin de ces applications. Cela signifie des dépenses supplémentaires en licences logicielles et en temps passé à traiter manuellement les tâches qui tombent dans le «no man's land» entre la conception et le codage..
C'est ici que Sympli intervient pour proposer une solution. Plutôt que de laisser les développeurs gérer manuellement ces étapes «intermédiaires», Sympli vise à automatiser l’ensemble du processus de transition. Une fois que le concepteur a terminé son interface utilisateur, elle l’exporte vers Sympli, qui gère ensuite automatiquement la préparation des ressources, la mesure des dimensions de la mise en page, la génération de la palette de couleurs, l’extraction des paramètres de police, etc..
Les développeurs peuvent alors oublier que Photoshop ou Sketch existent, et visualiser à la place des conceptions via Sympli où tout ce dont ils ont besoin pour entrer directement dans le secteur de la programmation leur est accessible..
Les concepteurs n’ont besoin que d’installer le plugin Sympli pour Photoshop ou Sketch, tous deux disponibles en téléchargement gratuit:
https://sympli.io/downloads/webLes codeurs ont la possibilité d’utiliser le plugin pour Android Studio, le plugin pour Xcode ou l’application Web de Sympli pour les projets HTML5 et CSS. Ces trois logiciels sont tous gratuits pour un seul projet. Si vous souhaitez suivre ce tutoriel, dirigez-vous vers sympli.io et créez-vous un compte..
Cet article est le premier d'une série en deux parties. Nous commencerons par examiner l'aspect conception de l'équation, en expliquant comment configurer au mieux vos documents de conception et les exporter vers Sympli. Nous nous concentrerons également sur le codage orienté Web, en examinant le fonctionnement de l'application Web Sympli. Dans le didacticiel suivant, nous allons utiliser Sympli avec Android Studio et Xcode..
Commençons par le tout début: installer le plugin Sympli dans votre logiciel de conception préféré..
La première chose à faire est de vous rendre sur la page des téléchargements, puis de récupérer et d'installer le plug-in Sympli pour votre application de création préférée. Sketch ou Photoshop.
Après l’installation, dans Sketch, vous pouvez accéder au plugin sous Plugins> Sympli> Exporter vers Sympli. Dans Photoshop, vous le trouverez sous Fenêtre> Extensions> Sympli.
Notez que lorsque vous exécutez le plug-in pour la première fois, vous devez vous connecter pour activer la communication avec votre compte Sympli..
Les «projets» sont au cœur de la collaboration avec Sympli. Chaque projet peut contenir plusieurs "Designs", ou écrans, et vous pouvez avoir plusieurs fichiers source PSD ou Sketch alimentant un seul projet si vous choisissez.
Les projets peuvent être créés pour Web, iOS ou Android avec des résolutions 1 ×, 2 × et 3 × prises en charge pour chacun. Comme mentionné précédemment, dans ce didacticiel, nous allons nous concentrer sur le Web et un autre didacticiel sera prochainement consacré aux projets iOS et Android..
Vous pouvez créer un nouveau projet en ligne via l'interface «Projets» de Sympli:
Alternativement, vous pouvez le faire depuis le Projets onglet dans le plugin Photoshop:
Ou dans le plugin Sketch, en cliquant sur Créer un nouveau projet puis en choisissant vos options préférées:
Que vous travailliez avec Sketch ou Photoshop, le meilleur moyen de préparer les conceptions pour la synchronisation avec Sympli consiste à utiliser des planches de dessin. Chaque maquette d'interface utilisateur distincte doit figurer dans son propre tableau de travail, par exemple:
La raison en est qu’après l’exportation vers Sympli (que nous traiterons plus loin), chaque planche d’art sera récupérée et traitée séparément. Vous pourrez ensuite y accéder individuellement afin de récupérer leurs actifs et les informations relatives au code. Chaque planche graphique sera visible en tant que "Design" dans l'interface Web de Sympli, comme suit:
Sympli est conçu pour prendre en compte les exigences de mise à l'échelle pour les résolutions 1 ×, 2 × et 3 ×. Cela divisera les dimensions de la mise en page par deux ou trois, le cas échéant. Il est donc important de savoir à l'avance le facteur de dimensionnement dont vous avez besoin pour obtenir les bons résultats..
Par exemple, si vous concevez une interface utilisateur à résolution 2 × pour l'iPhone 6, dont la taille d'affichage est de 375 px par 667 px, vous devez vous assurer que vos planches sont chacune deux fois plus grandes, avec une résolution de 750 px par 1134 px..
Lorsque vous exportez un projet Web 2 × vers Sympli, toutes les dimensions de votre mise en page sont divisées par deux, y compris celles qui sont générées dans le code CSS généré (nous en reparlerons plus tard à propos de CSS). Vos planches artistiques de 750px à 1134px seront reconnues comme étant des designs Sympli de 375px par 667px, avec une résolution 2 ×, comme illustré dans le coin inférieur gauche de la capture d'écran ci-dessous..
Sympli extraira automatiquement les ressources pour vous à toutes les résolutions requises, mais vous devrez d’abord lui dire quelles parties de la conception doivent être converties en images. Le processus pour ce faire est un peu différent entre Sketch et Photoshop.
Dans Esquisse, sélectionnez le calque ou le groupe de l’élément à exporter, puis cliquez sur le bouton. Rendre exportable + bouton en bas de la colonne de droite.
La première fois que vous cliquez sur le bouton, une image de résolution 1 × est préparée pour l'exportation. Vous devez donc cliquer dessus plusieurs fois pour obtenir des résolutions supplémentaires telles que 2 ×, comme indiqué ci-dessous..
Si vous travaillez avec Photoshop, sélectionnez le calque ou le groupe de l'élément, puis dans le panneau des plugins Sympli Utilitaire Actifs onglet cliquez Marquer comme un atout. Il ajoutera le préfixe «AST:» à la couche, ce qui en fera un atout. Vous pouvez également renommer manuellement les couches pour ajouter ce préfixe si vous préférez..
Lorsque votre conception d'interface utilisateur est prête, sélectionnez la ou les planches que vous souhaitez exporter. Si vous n'avez pas déjà configuré votre projet, vous pouvez le faire maintenant via le plugin Sympli pour votre logiciel de conception. Dans le cadre de ce processus, vous aurez la possibilité de synchroniser / exporter immédiatement votre conception..
Si vous avez déjà configuré un projet, assurez-vous d’identifier celui qui convient dans le plug-in Photoshop / Sketch, puis appuyez sur le bouton correspondant. Sync ou Synchroniser maintenant bouton.
Sympli passera un moment à exporter des images et à télécharger vos créations. Une fois votre projet exporté, vous pouvez l'afficher à partir de la page "Projets" de Sympli. À partir de là, vous pouvez sélectionner n’importe quel design / planche d’art et y accéder via l’application Web pour une inspection plus précise..
Une fois le projet exporté, il est prêt à être transmis à l'équipe de développement. Les collaborateurs peuvent accéder au projet via un lien qui peut être copié et envoyé directement par courrier électronique à partir de l'application Web Sympli ou du plug-in de Sketch ou Photoshop..
Au cours du processus d'exportation, Sympli aura préparé et téléchargé tous les actifs que vous avez définis dans votre document de conception source. Ces ressources peuvent être téléchargées en une fois via le logiciel Tout télécharger bouton dans l'application Sympli ou individuellement en cliquant sur l'icône de flèche grise vers le bas, à la droite de l'élément.
Chaque fichier peut être téléchargé sous forme de fichier bitmap (PNG) ou vectoriel (SVG)..
Une fois téléchargées en tant que bitmaps, les images seront téléchargées à chacune des résolutions spécifiées lors de la configuration du projet, par exemple. 1 ×, 2 ×, 3 ×.
Une fois exporté vers Sympli, vous pouvez également utiliser le «mappage» pour renommer des actifs à la volée. Le système de «mappage» mémorise l'ancien nom de l'actif et l'associe au nouveau que vous avez ajouté. Ainsi, si le fichier source est réexporté, les actifs seront mis à jour correctement mais conserveront leur nouveau nom..
Dans l'application Web, vous verrez une petite barre sur le côté gauche qui vous fournit des outils utiles..
En développant l'outil Calques, vous obtenez une représentation complète des calques de votre document source d'origine. Ceci est particulièrement utile pour sélectionner des couches qui pourraient être masquées derrière d'autres couches et donc difficiles à sélectionner avec une souris..
Le deuxième outil est un ensemble de deux règles qui se croisent et dont vous pouvez faire glisser le réticule autour de la page pour mesurer la distance entre les bords de l'interface utilisateur et le point central de la règle..
Le troisième outil offre la possibilité d’ajouter des commentaires grâce auxquels vous pouvez communiquer avec votre équipe. Activez l’outil de commentaires, cliquez sur une position du motif, puis tapez votre message et cliquez sur Envoyer.
L'une des fonctionnalités disponibles dans l'application Web de Sympli est le CSS généré automatiquement. Vous voudrez probablement écrire votre propre code de disposition réactif étant donné que le CSS de Sympli est parfaitement pixelisé et parfaitement positionné, mais lorsque vous travaillez à partir de conceptions Sketch, il existe un excellent CSS copier / coller généré pour des éléments tels que les dégradés, les arrière-plans, les paramètres de texte, les ombres, etc.
Permettez-moi de partager quelques astuces pouvant vous être utiles lors de la création d'éléments d'interface utilisateur à convertir en CSS par Sympli..
Grâce à Sympli, il est très facile d’obtenir la taille de différents éléments de conception ainsi que l’espacement entre eux. Cliquez sur un élément du dessin ou sélectionnez-le via l'outil «Calques». Vous verrez alors les règles apparaître avec des lectures de cotes, comme illustré ci-dessous:
Vous obtiendrez les dimensions de l'élément lui-même, ainsi que sa distance par rapport aux bords et aux voisins proches dans la présentation..
Lorsque vous sélectionnez un élément de texte, si vous regardez l'écran du côté droit de l'application Web, vous verrez une lecture indiquant la famille de polices, la taille de la police, l'alignement et la couleur du texte. Vous verrez également du code avec tous ces éléments dans la section CSS générée automatiquement..
En dessous de la lecture, il est également possible de cliquer sur le bouton intitulé Copie saisir le contenu de l'élément de texte, prêt à être collé dans le code.
Si vous sélectionnez le troisième onglet à droite intitulé Aa vous pouvez voir toutes les familles de polices utilisées dans la conception actuelle.
De plus, toutes les polices utilisées dans le projet global sont visibles dans Résumé section, dont nous parlerons sous peu.
Les couleurs sont automatiquement extraites de vos documents et sont accessibles au format RVB ou Hexcode..
Vous pouvez afficher les couleurs utilisées dans n’importe quel élément de votre conception en cliquant dessus pour le sélectionner, puis en affichant les informations dans le panneau de droite..
Vous pouvez également voir une palette de couleurs complète détectée dans votre conception en vous assurant que rien n'est sélectionné, puis en cliquant sur le deuxième onglet du panneau de droite avec l'icône en forme de gouttelette..
Comme pour les polices, toutes les couleurs de l’ensemble du projet sont accessibles depuis le Résumé surface. Jetons un coup d'oeil à cela maintenant.
Pour accéder au projet Résumé l'écran aller à la page de niveau supérieur du projet, puis sélectionnez le Résumé onglet, situé après le Dessins languette. Ici, vous pouvez voir toutes les couleurs et les polices utilisées tout au long du projet..
Cette sélection de couleurs et de polices peut être sauvegardée dans ce que Sympli appelle un «Brandbook». Les brandbooks sont comparables aux guides de style, vous permettant de garder une trace des couleurs et des polices associées à des marques particulières..
Si des modifications doivent être apportées aux documents source, vous pouvez les ajouter au projet Sympli correspondant de la même manière que lors de l’exportation initiale. Sélectionnez la planche graphique qui a été modifiée, puis exécutez le processus d'exportation décrit précédemment.
Si vous visualisez un dessin via l'application Web Sympli lorsqu'une modification est téléchargée, celle-ci détecte les modifications et vous invite à ouvrir la version mise à jour..
Sympli, fidèle à son nom, semble en effet simplifier le processus de collaboration «design to dev». Pour en savoir plus sur ce que fait Sympli et sur la raison de sa création, consultez la présentation de son fondateur, Max Ignatyev, développeur de mobiles expérimenté:
Restez à l'écoute pour le prochain tutoriel, où nous verrons comment utiliser les plugins Sympli pour Android Studio et Xcode.
Et si vous souhaitez essayer Sympli par vous-même, rendez-vous sur sympli.io.
Accentsconagua