Photo : Andry York - unsplash
Il suscite l’attrait des développeurs iOS, macOS mais pas seulement…
Depuis sa présentation, une multitude de designers présentent le framework de la marque à la pomme comme un parfait complément aux populaires logiciels de conception d’interface comme Sketch et Figma. Ces logiciels apportent une flexibilité inégalée jusqu’à aujourd’hui notamment grâce à un large panel d’extensions et de plugins qui facilitent grandement la conception de wireframes et de maquettes. Cela dit, Sketch comme Figma ont des limitations qui augmentent significativement le temps de conception. C’est là que SwiftUI se révèle être le saint Graal dont vos designers ne pourront plus se passer.
SwiftUI est un framework ou infrastructure de développement reposant sur le dernier langage de programmation : Swift. Ce framework s’articule autour d’une écriture déclarative directement intégrée dans le logiciel de développement application d’Apple : Xcode. Logique et facile à comprendre, la construction de l’interface se fait d’une manière qui rappelle le HTML. Dans l’environnement de développement d’Apple, ce mode de programmation change radicalement les habitudes des développeurs utilisant UIKit et son système de contraintes. Pour les designers, cette nouvelle architecture suit une logique structurelle de l’interface naturelle à laquelle ils peuvent rapidement s’adapter.
Par exemple à l’instar de Sketch avec son système de symboles réutilisables, une interface construite avec SwiftUI se compose d’une multitude de composants que chaque designer peut créer, modifier, adapter à des données de tests et réutiliser à volonté de part et d’autre dans sa maquette.
Photo : Hans Rietmann
Avec Xcode, il est possible de pré-visualiser le résultat du code que vous écrivez en temps réel et sur plusieurs appareils différents. Du Mac à l’iPhone en passant par l’iPad et l’Apple Watch, SwiftUI traduit automatiquement et sans effort supplémentaire chaque composant déclaré dans le code selon l’appareil. Bien qu’il soit toujours possible d’éditer chaque composant manuellement pour chaque plateforme, SwiftUI offre l’opportunité de développer rapidement une maquette parfaitement fonctionnelle sur toutes les plateformes que propose Apple.
D’un appareil à l’autre, la navigation change drastiquement. Là où un mac peut avoir plusieurs onglets dans plusieurs fenêtres, une Apple Watch ne pourra évidemment afficher qu’une seule fenêtre sans onglet de par sa taille. Jusqu’à SwiftUI, chaque éditeur d’apps était libre d’adapter la navigation selon sa convenance, mais cela nécessitait pour de repenser (parfois entièrement !) le système de navigation. Avec son nouveau framework, Apple standardise la navigation en l’adaptant d’elle-même selon la plateforme. Un même composant de navigation utilisé pour l’iPhone sera naturellement adapté à l’interface de l’Apple Watch ou celle du Mac. Apple ne s’est cependant pas arrêté uniquement à la standardisation de la navigation.
La sélection et la création d’icônes ainsi que de la typographie peut demander beaucoup d’itérations au maquettage d’un Wireframe d’autant plus quand il faut adapter ces éléments à une multitude de terminaux de tailles et différents dans leurs usages. Avec Xcode 11 et les versions ultérieures, Apple a mis en place une collection d’icônes complète : les SF Symbols.
Intégrée à même ses systèmes d’exploitation et son environnement de développement, cette collection reprend la plupart des icônes que la pomme utilise dans ses propres apps. Lorsqu’on utilise ces icônes avec du texte dans un projet SwiftUI, chacune de ces icônes s’adapte à : la graisse, la taille de la police et à l’alignement avec la baseline du text.
En parlant de typographie, Apple normalise ses polices directement dans SwiftUI. En utilisant un simple modifié (une fonction permettant d’éditer un paramètre d’un composant), votre texte et votre icône ajusteront leur taille selon l’appareil sur lequel ils devront se présenter.
#section de code#
——
Group {
Image(systemName: “apps.iphone”) // Icône de SF Symbols
Text(“Services Mobiles”)
}
.font(.footnote) // Modifier qui adapte la police
——
Même si votre designer n’a pas d’expérience dans la programmation, il pourra apprendre rapidement et facilement à utiliser SwiftUI. Apple a développé un tutoriel en ligne détaillé, gratuit et d’une facilité enfantine. Aucun pré-requis en programmation n’est nécessaire néanmoins, une bonne compréhension de l’anglais est indispensable pour comprendre les subtilités. En suivant cette formation, tout designer peut profiter d’un outils qui accéléreront le prototypage et le maquettage de wireframe mutliplateforme.
Si vous souhaitez aller plus loin dans l’intégration de SwiftUI dans vos équipes, profitez d’un WorkShop One To One que nous proposons avec des experts du domaine.