{"id":10819,"date":"2017-05-03T21:50:32","date_gmt":"2017-05-03T19:50:32","guid":{"rendered":"http:\/\/flaven.fr\/?p=10819"},"modified":"2026-09-16T10:10:02","modified_gmt":"2026-09-16T08:10:02","slug":"sketch-craft-utiliser-la-combinaison-sketch-et-craft-pour-la-conception-dapplications-android-et-ios","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2017\/05\/sketch-craft-utiliser-la-combinaison-sketch-et-craft-pour-la-conception-dapplications-android-et-ios\/","title":{"rendered":"Sketch, Craft – Utiliser la combinaison Sketch et Craft pour la conception d’applications Android et iOS"},"content":{"rendered":"

Il est certain que pour la conception de “wireframes” et\/ou de maquettes de cr\u00e9ation digitale (app, site web), on se doit parait-il d’\u00eatre toujours \u00e0 l\u2019aff\u00fbt du Graal. Je veux parler du logiciel “parfait” qui permettrait de concevoir des IHM au plus pr\u00e9s des “User Stories” si amoureusement document\u00e9es ou de garantir le respect absolu d’une exp\u00e9rience utilisateur r\u00e9ussie.<\/p>\n

Cette perle rare, elle semble exister en l’esp\u00e8ce avec le couple : Sketch, Craft. Craft est un plugin astucieusement d\u00e9velopp\u00e9 par Invisionapp pour favoriser l’int\u00e9gration horizontale de leur plate-forme avec les deux logiciels les plus populaires en mati\u00e8re de conception d\u2019\u00e9cran Sketch et Photoshop.<\/b><\/p>\n

Il est certain que ce qui se dessine, c’est la combinaison gagnante pour la cr\u00e9ation d’applications notamment : Sketch, Craft, Invisionapp.
\nSi, \u00e0 cette combinaison, vous ajoutez un outil comme Jira dans la gestion de projet, vous aurez alors entre vos mains ce qui se fait de mieux actuellement dans la cr\u00e9ation et la gestion la plus agile possible.<\/p>\n

Apr\u00e8s ces consid\u00e9rations un peu th\u00e9oriques, il est temps de voir les quelques aspects bluffants de la combinaison de Sketch et Craft.<\/p>\n

Le plus \u00e9tonnant, outre la facilit\u00e9 de cr\u00e9er les interfaces, c’est la capacit\u00e9 \u00e0 “cloner” du contenu ou\/et \u00e0 “brancher” des sources externes afin de cr\u00e9dibiliser vos maquettes en vue de les rendre plus s\u00e9duisantes pour tous, clients, graphistes, d\u00e9veloppeurs… etc<\/b><\/p>\n

Notre objectif est de cr\u00e9er “wireframes” pour un prototype d\u2019application pour iPhone iOS sous Sketch avec Craft install\u00e9<\/b>
\n\t\"Utiliser<\/p>\n

L’onglet “CUSTOM” du bouton “Data” de Craft pour brancher diff\u00e9rents types de contenu<\/b>
\n\t\"Utiliser<\/p>\n

L’onglet “WEB” du bouton “Data” de Craft pour brancher diff\u00e9rents types de contenu<\/b>
\n\t\"Utiliser<\/p>\n

L’onglet “JSON” du bouton “Data” de Craft pour brancher diff\u00e9rents types de contenu<\/b>
\n\t\"Utiliser<\/p>\n

Brancher le JSON d’une API ou d’un fichier JSON en local<\/h4>\n

Cr\u00e9er le mod\u00e8le d\u2019insertion<\/b>
\n\"Utiliser<\/p>\n

Lier les champs du Sketch avec les champs du JSON<\/b>
\n\"Utiliser<\/p>\n

Une fois branch\u00e9 le JSON sur vos champs, dupliquer le contenu \u00e0 l’aide du bouton “Duplicate” de Craft<\/b>
\n\"Utiliser<\/p>\n

Et voil\u00e0…, votre liste est compl\u00e9t\u00e9e et pas avec du “Lorem ipsum”<\/b>
\n\"Utiliser<\/p>\n

La liste se prolonge sous la tab bar notamment<\/b>
\n\"Utiliser<\/p>\n

Le PNG de cet \u00e9cran dans une \u00e9bauche de maquette<\/b>
\n\"Utiliser<\/p>\n

Le JSON<\/b>
\nLe fichier JSON que l’on a utilis\u00e9e provient directement de l’API Deezer. En voici, un tout petit extrait. On l’a utilis\u00e9 en local.<\/p>\n

\r\n\t{\r\n\t\"id\": \"908622995\",\r\n\t\"title\": \"Bain moussant #relax\",\r\n\t\"description\": \"Occupez-vous du bain moussant, on s'occupe de la playlist ! Si vous \u00eates partis pour une douche, \u00e7a se passe ici : http:\/\/dzr.fm\/ChanterSousLaDouche\",\r\n\t\"duration\": 12676,\r\n\t\"public\": true,\r\n\t\"is_loved_track\": false,\r\n\t\"collaborative\": false,\r\n\t\"rating\": 2,\r\n\t\"nb_tracks\": 54,\r\n\t\"fans\": 12726,\r\n\t\"link\": \"https:\/\/www.deezer.com\/playlist\/908622995\",\r\n\t\"share\": \"http:\/\/www.deezer.com\/playlist\/908622995?utm_source=deezer&utm_content=playlist-908622995&utm_term=9052677_1493752437&utm_medium=web\",\r\n\t\"picture\": \"https:\/\/api.deezer.com\/playlist\/908622995\/image\",\r\n\t\"picture_small\": \"https:\/\/e-cdns-images.dzcdn.net\/images\/playlist\/58d09305ea1f3983d602ec76ec6ac2a3\/56x56-000000-80-0-0.jpg\",\r\n\t\"picture_medium\": \"https:\/\/e-cdns-images.dzcdn.net\/images\/playlist\/58d09305ea1f3983d602ec76ec6ac2a3\/250x250-000000-80-0-0.jpg\",\r\n\t\"picture_big\": \"https:\/\/e-cdns-images.dzcdn.net\/images\/playlist\/58d09305ea1f3983d602ec76ec6ac2a3\/500x500-000000-80-0-0.jpg\",\r\n\t\"picture_xl\": \"https:\/\/e-cdns-images.dzcdn.net\/images\/playlist\/58d09305ea1f3983d602ec76ec6ac2a3\/1000x1000-000000-80-0-0.jpg\",\r\n\t\"checksum\": \"88e26744d54daf0a9b4c08c9fbe36320\",\r\n\t\"tracklist\": \"https:\/\/api.deezer.com\/playlist\/908622995\/tracks\",\r\n\t\"creation_date\": \"2014-06-27 09:09:31\",\r\n\t\"creator\": {\r\n\t\t\"id\": \"335777521\",\r\n\t\t\"name\": \"Rachel - Editor France\",\r\n\t\t\"tracklist\": \"https:\/\/api.deezer.com\/user\/335777521\/flow\",\r\n\t\t\"type\": \"user\"\r\n\t},\r\n\t\"type\": \"playlist\",\r\n\t\"tracks\": {\r\n\t\t\"data\": [{\r\n\t\t\t\t\"id\": \"347525111\",\r\n\t\t\t\t\"readable\": true,\r\n\t\t\t\t\"title\": \"Oh Woman Oh Man\",\r\n\t\t\t\t\"title_short\": \"Oh Woman Oh Man\",\r\n\t\t\t\t\"title_version\": \"\",\r\n\t\t\t\t\"link\": \"https:\/\/www.deezer.com\/track\/347525111\",\r\n\t\t\t\t\"duration\": \"275\",\r\n\t\t\t\t\"rank\": \"943279\",\r\n\t\t\t\t\"explicit_lyrics\": false,\r\n\t\t\t\t\"preview\": \"https:\/\/e-cdns-preview-c.dzcdn.net\/stream\/cc09270258d315a67e49d641339bb6a0-4.mp3\",\r\n\t\t\t\t\"time_add\": 1492790520,\r\n\t\t\t\t\"artist\": {\r\n\t\t\t\t\t\"id\": \"4771546\",\r\n\t\t\t\t\t\"name\": \"London Grammar\",\r\n\t\t\t\t\t\"link\": \"https:\/\/www.deezer.com\/artist\/4771546\",\r\n\t\t\t\t\t\"tracklist\": \"https:\/\/api.deezer.com\/artist\/4771546\/top?limit=50\",\r\n\t\t\t\t\t\"type\": \"artist\"\r\n\t\t\t\t},\r\n\t\t\t\t\"album\": {\r\n\t\t\t\t\t\"id\": \"39579411\",\r\n\t\t\t\t\t\"title\": \"Oh Woman Oh Man\",\r\n\t\t\t\t\t\"cover\": \"https:\/\/api.deezer.com\/album\/39579411\/image\",\r\n\t\t\t\t\t\"cover_small\": \"https:\/\/e-cdns-images.dzcdn.net\/images\/cover\/a9d9f74bcb05fc77105881295ce1cf22\/56x56-000000-80-0-0.jpg\",\r\n\t\t\t\t\t\"cover_medium\": \"https:\/\/e-cdns-images.dzcdn.net\/images\/cover\/a9d9f74bcb05fc77105881295ce1cf22\/250x250-000000-80-0-0.jpg\",\r\n\t\t\t\t\t\"cover_big\": \"https:\/\/e-cdns-images.dzcdn.net\/images\/cover\/a9d9f74bcb05fc77105881295ce1cf22\/500x500-000000-80-0-0.jpg\",\r\n\t\t\t\t\t\"cover_xl\": \"https:\/\/e-cdns-images.dzcdn.net\/images\/cover\/a9d9f74bcb05fc77105881295ce1cf22\/1000x1000-000000-80-0-0.jpg\",\r\n\t\t\t\t\t\"tracklist\": \"https:\/\/api.deezer.com\/album\/39579411\/tracks\",\r\n\t\t\t\t\t\"type\": \"album\"\r\n\t\t\t\t},\r\n\t\t\t\t\"type\": \"track\"\r\n\t\t\t},\r\n\t\t\t...\r\n\t\t\tTo be continued\r\n<\/pre>\n
Cr\u00e9er son propre contenu “Custom”<\/h4>\n
On peut aussi \u00e0 d\u00e9faut de consommer du JSON directement cr\u00e9er son propre type de contenu. On va cr\u00e9er une liste des d\u00e9partements fran\u00e7ais.<\/p>\n
Le volant pour cr\u00e9er votre “custom type”<\/b>
\n\"Utiliser<\/p>\n
Un simple copier-coller des d\u00e9partements (*)<\/i><\/b>
\n\"Utiliser<\/p>\n
On place le premier \u00e9l\u00e9ment et on va cloner…<\/b>
\n\"Utiliser<\/p>\n
On clone 45 items c’est \u00e0 dire dans notre exemple 45 d\u00e9partements, s\u00e9par\u00e9s de 3 pixels chacun<\/b>
\n\"Utiliser<\/p>\n
On obtient dynamiquement une liste de 45 d\u00e9partements. Craft parcoure lui-m\u00eame la liste que vous lui avez fourni<\/b>
\n\"Utiliser<\/p>\n
(*) Un extrait de la liste des d\u00e9partements fran\u00e7ais ayant servi \u00e0 la cr\u00e9ation de “custom type” departement_fr<\/code><\/b><\/p>\n
\r\nAin\r\nAisne\r\nAllier\r\nAlpes de Hautes-Provence\r\nHautes-Alpes\r\nAlpes-Maritimes\r\nArd\u00e8che\r\nArdennes\r\nAri\u00e8ge\r\nAube\r\nAude\r\nAveyron\r\nBouches-du-Rh\u00f4ne\r\nCalvados\r\nCantal\r\nCharente\r\nCharente-Maritime\r\nCher\r\nCorr\u00e8ze\r\nCorse-du-Sud\r\nHaute-Corse\r\nC\u00f4te-d'Or\r\nC\u00f4tes d'Armor\r\nCreuse\r\nDordogne\r\nDoubs\r\n... to be continued\r\n<\/pre>\n
Conclusion : On peut d\u00e9cemment penser que, en cet instant, cette suite logicielle Sketch + Craft, coupl\u00e9 au SaaS Invisionapp est un peu la “killer app” du moment. Il existe bien \u00e9videmment une danger, celle de la courbe d’apprentissage. Celle-ci peut s\u2019av\u00e9rer ardue, sachant qu’un outil n’a jamais remplac\u00e9 l’id\u00e9e de l’application.<\/b><\/p>\n
En savoir plus<\/h2>\n