Share
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 son implémentation pour le Web ou comme une application iOS ou Android fonctionnelle. Le workflow fonctionne comme ceci: tout d’abord, un concepteur crée un projet Web, iOS ou Android pouvant contenir un nombre quelconque de dessins. Ces conceptions 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 offre 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:
L'utilisation de Sympli en tant que développeur commence par le téléchargement et l'installation d'un plug-in pour Android Studio ou Xcode. L'installation de ces plugins est très facile, et les tutoriels vidéo montrés sur les pages de téléchargement liées vous aideront si vous avez des problèmes..
Le plug-in Sympli pour Android et Xcode donne accès à des 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 à la mise en œuvre de la conception dans votre application..
Comme le montre la capture d'écran suivante, Sympli vous fournit toutes les informations dont vous pourriez avoir besoin sur une vue particulière, ce qui vous permet d'implémenter manuellement une conception au pixel près dans le code ou dans Interface Builder ou Layout Editor..
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 plug-in Sympli affichera les règles de redimensionnement appliquées aux widgets dans Sketch, ce qui aidera les développeurs à définir les valeurs de contrainte appropriées..
L'une des principales fonctionnalités de Sympli pour les développeurs est la possibilité de simplement faire glisser des vues d'un dessin dans un fichier Storyboard Android XML ou iOS. Sympli prend en charge la plupart des problèmes lors de la création d'interfaces en positionnant et en dimensionnant vos vues exactement telles qu'elles apparaissent dans la conception d'origine. De plus, Sympli peut également configurer de nombreux autres attributs, tels que la couleur de fond 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 "Maj", puis faites glisser l'élément de conception dans la vue..
Pour générer un code de style pour les vues créées par programme, faites un glisser-déposer dans le code de votre contrôleur avec le bouton droit de la souris enfoncé..
À partir de là, il vous suffit de modifier les contraintes de vos vues pour qu'elles puissent s'adapter à vos attentes sur des appareils dotés de tailles d'écran différentes. Pour iOS, cela impliquerait l'ajout de contraintes de mise en page automatique et, pour Android, de configurer les vues dans le type de mise en page adapté à votre conception..
En plus de la génération de code de style pour les vues standard, le plugin 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 le Xcode Playground afin de continuer à créer une vue personnalisée avec un aperçu en direct du jeu immédiatement..
Ceci est extrêmement utile pour toutes les applications nécessitant un dessin manuel des vues à l'écran..
Tant que tout a été configuré et chargé correctement par le concepteur, Sympli peut importer 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 en fonction des meilleures pratiques de la plate-forme. Par exemple, si une image appelée Image 1 est en cours de téléchargement sur un projet Android, Sympli demandera au concepteur de le renommer image_1. Cela vous évite de perdre votre temps de développement à renommer des fichiers pour pouvoir les charger facilement. En outre, les développeurs peuvent créer des règles de changement de nom 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 dessin les importera dans votre projet..
Sympli est très intelligent pour importer des actifs. Il mettra des images dans vos catalogues d'actifs sur iOS et dans le dossier de ressources de votre projet sous Android. il va même créer automatiquement des versions à l'échelle pour différents appareils.
Remarque: Sympli a annoncé qu’il allait bientôt ajouter une option permettant aux plug-ins Android Studio et Xcode d’exporter des ressources vectorielles (PDF pour iOS et VectorDrawable) à partir de n’importe quel calque vectoriel de la maquette.
Par défaut, Sympli active la synchronisation automatique de la conception de votre projet dans les plugins Xcode et Android Studio. Cela signifie que, même si 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 à un dessin, Sympli téléchargera automatiquement la dernière version du dessin et vous avertira 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 quand il a apporté des modifications.
En plus de télécharger automatiquement les copies les plus récentes des conceptions de 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 quelle conception..
Cela peut être particulièrement utile si vous n'êtes pas sûr des modifications qui ont été apportées à la dernière version d'un dessin spécifique. Dans l'application Web de Sympli, vous pouvez facilement passer d'une version à l'autre de la même conception pour voir quelles modifications ont été apportées:
Enfin, cet arriéré de versions précédentes peut également s'avérer très utile si une révision de votre application nécessite l'utilisation d'une conception plus ancienne. Évitez les tracas de chercher un ancien fichier dans vos téléchargements dans un courrier électronique. Sympli vous permet simplement de sélectionner une version dans une simple liste déroulante du plug-in IDE:
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, les suppressions et les autres mises à jour immédiatement visibles, augmentant ainsi la productivité des équipes. De plus, les développeurs peuvent également voir les modifications apportées au niveau d'une 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 plusieurs fois sur Sympli, il y aura un bouton "Parcourir les modifications" dans la barre supérieure qui ouvrira un navigateur de modifications côte à côte. Sélectionnez les versions de maquette que vous souhaitez comparer et cliquez sur les régions mises en surbrillance pour voir les modifications réelles..
6. Résumé du projet
Les applications Sympli Web et IDE peuvent vous montrer une Résumé pour tout projet. Cet écran récapitulatif vous montre toutes les couleurs et les polices utilisées tout au long du projet. Cela peut être très utile si vous devez obtenir les détails d'une couleur ou d'une police spécifique et si vous ne savez pas exactement dans quel design est utilisée cette ressource. Elle peut également servir de référence toujours disponible lors du développement de votre application si vous le souhaitez. besoin d'utiliser une couleur ou une police exacte quelque part où un dessin ne vous a pas été fourni.
Comme vous pouvez le constater, 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 de fichiers PSD ou Sketch en un Storyboard pour iOS ou un XML pour Android. Ce gain de temps grâce à Sympli peut être utilisé de manière plus productive. Par exemple, vous pouvez consacrer votre temps à la fonctionnalité réelle plutôt que de copier fastidieusement des codes de couleur et des images.!
Si vous souhaitez en savoir plus sur Sympli ou si vous voulez l'essayer vous-même, rendez-vous sur leur site Web et découvrez quelques-uns de leurs didacticiels vidéo sur la procédure d'installation et d'utilisation des plugins Xcode et Android Studio..
Comme toujours, veillez à laisser vos commentaires dans les commentaires ci-dessous..
Accentsconagua