Sympli pour les développeurs

introduction

Si vous n’en avez jamais entendu parler auparavant, Sympli est un outil conçu pour simplifier le processus de prise d’une interface conçue dans Photoshop ou Sketch et de sa mise en œuvre pour le Web ou en tant qu’application iOS ou Android fonctionnelle. Le workflow fonctionne comme ceci: d’abord, un concepteur crée un projet pour le Web, iOS ou Android pouvant contenir un nombre illimité de dessins. Ces designs représentent les différents écrans qui devraient être disponibles dans l’application que vous développez. Ensuite, le développeur peut utiliser ces conceptions pour créer facilement une interface pour un site Web ou une nouvelle application.

Dans cet article, je vais vous montrer certaines des nombreuses fonctionnalités que Sympli propose aux développeurs pour créer facilement des applications pour iOS ou Android, en s’appuyant sur le travail effectué par les concepteurs.

Si vous voulez voir ce que Sympli a à offrir aux concepteurs, consultez cet article de Kezz Bracey:

1. Plugins IDE

L’utilisation de Sympli en tant que développeur commence par le téléchargement et l’installation d’un plugin pour l’un ou l’autre Studio Android ou Xcode. L’installation de ces plugins est très simple et les didacticiels vidéo affichés sur les pages de téléchargement liées vous aideront en cas de problème.

2. Inspection des maquettes de conception

Le plugin Sympli pour Android et Xcode permet d’accéder aux spécifications de conception interactives (certaines équipes utilisent le terme «documents de lignes rouges»). Ouvrez une maquette et cliquez sur les éléments de conception pour obtenir toutes les informations nécessaires pour implémenter la conception dans votre application.

Comme le montre la capture d’écran suivante, Sympli vous donne toutes les informations dont vous pourriez avoir besoin sur une vue particulière afin que vous puissiez implémenter une conception au pixel près manuellement dans le code ou dans Interface Builder ou Layout Editor.

Propriétés de la vue Sympli

Veuillez noter que Sympli convertit automatiquement les pixels des maquettes de conception en points, ainsi que d’autres paramètres tels que les remplissages, les ombres et les bordures en termes et unités spécifiques à Android ou iOS.

De plus, si la maquette a été créée dans Sketch, le plugin Sympli affichera les règles de redimensionnement appliquées aux widgets dans Sketch, ce qui aide les développeurs à définir les valeurs de contrainte appropriées.

Glisser-déposer des vues

L’une des principales fonctionnalités de Sympli pour les développeurs est la possibilité de simplement faire glisser et déposer des vues d’une conception dans un fichier Android XML ou iOS Storyboard. Sympli s’occupe de beaucoup de tracas lors de la création d’interfaces en positionnant et en dimensionnant vos vues exactement comme elles apparaissent dans la conception d’origine. En plus de cela, Sympli peut également configurer de nombreux autres attributs tels que la couleur d’arrière-plan et les polices personnalisées pour les vues de texte.

Pour appliquer un style à la vue existante dans Interface Builder dans Xcode, appuyez sur le bouton “Shift” puis faites glisser et déposez l’élément de conception dans la vue.

Pour générer un code de style pour les vues créées par programme, effectuez un glisser-déposer dans le code de votre contrôleur en appuyant sur le bouton droit de la souris.

À partir de là, il ne vous reste plus qu’à modifier les contraintes de vos vues afin qu’elles s’adaptent à vos attentes sur des appareils avec des tailles d’écran différentes. Pour iOS, cela signifierait ajouter des contraintes de mise en page automatique, et pour Android, cela signifierait configurer les vues dans le bon type de mise en page pour votre conception.

En relation :  Les meilleurs canaux de Telegram et comment les utiliser

Création de vues personnalisées avec Sympli

En plus de la génération de code de style pour les vues standard, le plug-in Sympli pour Xcode aide les développeurs à créer des contrôles personnalisés basés sur les données vectorielles de la maquette de conception.

Sélectionnez une forme vectorielle sur la maquette et appuyez sur le bouton “Extrait” à côté du nom d’un calque dans le panneau de détails. Cela fera apparaître une fenêtre contextuelle avec le code Swift qui dessine de la même manière qu’il a été conçu par programme. Il existe également une option pratique pour copier un code prêt pour Xcode Playground pour continuer à créer une vue personnalisée avec un aperçu en direct du terrain de jeu immédiatement.

Code graphique de base généré par Sympli

Ceci est extrêmement utile pour toutes les applications qui nécessitent un dessin manuel de vues à l’écran.

3. Importation d’actifs

Tant que tout a été configuré et téléchargé correctement par le concepteur, Sympli peut prendre en charge l’importation des images et des polices personnalisées utilisées dans la conception. Lors de l’importation, Sympli invite le concepteur à nommer l’image ou la police selon les meilleures pratiques de la plate-forme. Par exemple, si une image appelée Image 1 est en cours de téléchargement dans un projet Android, Sympli demandera au concepteur de le renommer image_1. Cela garantit que vous n’avez pas à perdre du temps de développement à renommer les fichiers afin qu’ils puissent être chargés facilement. En outre, les développeurs peuvent créer des règles de renommage afin qu’elles soient appliquées à chaque mise à jour de la maquette.

Dans les plugins Xcode et Android Studio, cliquer sur le bouton ci-dessous lors de la visualisation des images ou des polices dans un design les importera dans votre projet.

Bouton d'importation d'actif

Sympli est très intelligent sur l’importation d’actifs. Il mettra des images dans vos catalogues d’actifs sur iOS et dans le dossier de ressources de votre projet sur Android; il créera même automatiquement des versions mises à l’échelle pour différents appareils.

Importation d'images Sympli Xcode

Remarque: Le Sympli a annoncé qu’il allait bientôt ajouter une option pour les plugins Android Studio et Xcode pour exporter des actifs vectoriels (PDF pour iOS et VectorDrawable) à partir de n’importe quelle couche vectorielle de la maquette.

4. Synchronisation automatique des maquettes de conception

Par défaut, Sympli active la synchronisation automatique pour la conception de votre projet dans les plugins Xcode et Android Studio. Cela signifie que, même pendant que vous travaillez, si le concepteur apporte des modifications et les télécharge sur Sympli, le nouveau design sera immédiatement disponible dans Xcode et Android Studio.

Lorsque des modifications sont apportées à une conception, Sympli télécharge automatiquement la dernière version de la conception et vous informe de la mise à jour. Cela garantit que vous n’avez jamais à vérifier manuellement que vous travaillez avec les dernières conceptions et élimine également le besoin pour le concepteur de vous avertir lorsqu’il a apporté des modifications.

En relation :  Top 4 des constructeurs d'applications ioniques et des modèles ioniques universels

5. Versions de conception

En plus de simplement télécharger automatiquement les copies les plus récentes des conceptions pour votre projet, Sympli facilite également la visualisation des versions précédentes de toute conception. Tant dans les plugins IDE que dans l’application Web de Sympli, vous pouvez très facilement consulter les versions précédentes de n’importe quel design.

Cela peut être particulièrement utile si vous n’êtes pas sûr des modifications apportées à la dernière version d’une conception spécifique. Dans l’application Web de Sympli, vous pouvez facilement parcourir différentes versions du même design pour voir les modifications apportées:

Comparaison des versions de Sympli Design

Enfin, ce backlog des versions précédentes peut également être très utile si une révision de votre application nécessite l’utilisation d’un design plus ancien. En évitant les tracas d’essayer de trouver un ancien fichier dans vos téléchargements dans un e-mail, avec Sympli, vous pouvez simplement sélectionner une version à partir d’une simple liste déroulante dans le plugin IDE:

Sélecteur de version du plug-in Sympli

Sympli Webapp fournit un navigateur de modifications dans lequel vous pouvez comparer visuellement deux versions de la maquette de conception et voir les modifications côte à côte. Cela rend les ajouts, suppressions et autres mises à jour immédiatement évidents aux yeux, augmentant ainsi la productivité des équipes. Non seulement cela, les développeurs peuvent également voir les changements au niveau de la propriété, par exemple si une couleur change légèrement ou si une bordure devient 1px plus épaisse.

Pour toute maquette téléchargée sur Sympli plus d’une fois, il y aura un bouton “Parcourir les modifications” dans une barre supérieure qui ouvre un navigateur de modification côte à côte. Sélectionnez les versions de maquette que vous souhaitez comparer et cliquez sur les régions en surbrillance pour voir les changements réels.

6. Résumé du projet

L’application Web Sympli et les plugins IDE peuvent vous montrer un Sommaire pour tout projet. Cet écran récapitulatif vous montre toutes les couleurs et polices utilisées tout au long du projet. Cela peut être très utile si vous avez besoin d’obtenir les détails d’une couleur ou d’une police spécifique et que vous n’êtes pas entièrement sûr de la conception dans laquelle la ressource est utilisée. Elle peut également être utilisée comme référence toujours disponible lors du développement de votre application si vous besoin d’utiliser une couleur ou une police exacte à un endroit où un dessin ne vous a pas été fourni.

Écran récapitulatif Sympli

Conclusion

Comme vous pouvez le voir, Sympli facilite beaucoup le développement d’une application à partir de conceptions d’interface créées par quelqu’un d’autre. Sympli prend en charge une grande partie du travail manuel impliqué dans la conversion des fichiers PSD ou Sketch en un Storyboard pour iOS ou un XML pour Android. Ce temps gagné grâce à Sympli peut être utilisé de manière plus productive – par exemple, vous pouvez passer votre temps sur les fonctionnalités réelles plutôt que de copier fastidieusement les codes couleur et les images!

Si vous souhaitez en savoir plus sur Sympli ou si vous souhaitez l’essayer vous-même, rendez-vous sur leur site Internet et découvrez quelques-uns de leurs excellents didacticiels vidéo sur la façon d’installer et d’utiliser les plugins Xcode et Android Studio.

Comme toujours, assurez-vous de laisser vos commentaires et commentaires dans les commentaires ci-dessous.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.