#Tuto 💎 SKETCH x CRAFT DATA💎

Comment les fonctionnalités “Data” x “Duplicate” ont changé la dimension de mes maquettes

Il m’est souvent arrivé de me prendre le chou 🙃 et de perdre mon temps, sous PHOTOSHOP, afin de rendre mes maquettes de listing vraiment réalistes (images, titres, label, etc.). Puis il m’a fallu 3 clics sous Sketch à l’aide du plugin CRAFT…

First things first : POURQUOI ?

Par soucis de perfection, présentation ou bien parce que : “Je n’arrive pas à me projeter avec le même bloc image et le faux texte partout, pourrais-tu y mettre du vrai contenu ?”. Il nous a tous fallu passer des heures entières à récupérer du contenu, l’insérer et réitérer l’opération en cas de modifications, et bien c’est FINI 🙌 !

🖐🖐🖐 Bon ok tu vas parler de CRAFT, mais c’est quoi ?

Ce plug-in lancé par InVision App (https://www.invisionapp.com), il permet de mieux travailler de manière collaborative sous SKETCH en proposant de créer librairies, pages de style, outils d’annotations, et ❗️ outil de ressources “DATA” ❗️

Pour le télécharger c’est par ici 👇👇

Craft by InVision

CRAFT nous est présenté, sous SKETCH, par une barre latérale dockée à droite de l’écran à la section de personnalisation.

Maintenant que vous êtes bien installés et équipés, on peut commencer !

Les 3 modes

La fonctionnalité DATA est le troisième icône (représenté par une fiche de données) en partant du haut.

Cette fonctionnalité est un véritable générateur aléatoire de données personnalisables, et j’insiste bien là dessus ! Chaque onglet de DATA…

…présente un mode différent d’ajout de données réaliste à sa maquette.

Pour schématiser, voici la marche à suivre que j’utilise dans chacun des cas.

Créer > Symboliser > Appeler > Dupliquer

#0- Créer & Symboliser

Il vous faut une base. Dans mon cas, je souhaite créer une liste : donc je créé un premier item “article” (rectangle, titre, description, séparation), que je transforme en symbole. Ce sera mon MASTER

⚠️ N’importez pas d’image pour votre thumbnail… Créez un rectangle de la bonne dimension à la place, afin que CRAFT fonctionne correctement.

👉 Petit récap’ de base : le bouton de création de symbol est le 4ème icône en partant de la gauche dans la barre d’outils du haut

#1- WEB 🛰

Le deuxième onglet de DATA …

(“ Hein❓❗️mais il saute un onglet là ❗️”… Oui, mais c’est purement par logique d’utilisation car les onglets CUSTOM et JSON se rejoignent en un point, mais je reviendrai dessus plus bas ! Don’t worry)

…est la fonctionnalité qui vous amènera au plus proche de la réalité si vos sources proviennent d’un site internet déjà en ligne (souvent le cas du re-design) !

Naviguez et obtenez un résultat dynamique immédiat…

TIPS D’UTILISATION :

👉 Naviguez dans votre page web (comme dans un navigateur) en maintenant “cmd”

👉 et un simple clic de souris 🐭 vous permettra d’atteindre la source souhaitée (image, texte)

(#Parenthèse DUPLICATE)

La fonctionnalité DUPLICATE permet elle de puiser dans les ressources appelées par DATA afin d’étendre notre maquette à un listing aléatoire, mais cohérent (nous l’utilisons dans chaque cas).

TIPS D’UTILISATION :

👉 Inscrire le nombre de duplication souhaitées (rangées horizontales ,colonnes verticales)

👉 Inscrire les marges souhaitées entre les duplications (l’unité est en px)

👀 APPUYER SUR DUPLICATE 👀 et c’est tout…😱

#2- CUSTOM x JSON

Ce premier onglet (CUSTOM) est le plus personnalisable du point de vue du designer ! (même si en soit, grâce aux overrides, tout reste ultra personnalisable)

Il permet de puiser plusieurs types de data dans des textes dans des bases de données prédéfinies par CRAFT.

👉 Des textes (factices) : titres, noms, dates, articles, villes, pays, email…

👉 Des images : par thème (personnalisable) récupérées de banques d’images en ligne telles que http://www.unsplash.com

MAIS SURTOUT… 👀

Il permet de personnaliser soi-même le contenu (idéalement en organisant bien au préalable les données que l’on souhaite appeler)

RESSOURCES NÉCESSAIRES :

👉 Un fichier google sheets : tout type de contenu texte inséré par rangée est considéré comme appartenant à un même thème (ex : titre, sous titre, description etc. dans le rang 1).

👉 Un “sheet to API converter software” tel que SHEETSU

Sheetsu.com | The simplest backend stack you ever used - Google Spreadsheets

👉 Un dossier : listing d’images présélectionnées en local

⚠️ OU BIEN… Si vous souhaitez absolument un ordre précis, le dossier d’images peut être directement hébergé sur votre drive en public. ⚠️ Il vous suffira ensuite d’insérer les liens URL de chaque images dans une énième colonne de votre google sheet (image 1 dans rangée ID 1. etc. : logique quoi 👀) et de les appeler lors de la sélection via CRAFT.

#3- Zoom sur JSON

Plus besoin de démonstration de l’onglet JSON si vous avez suivi le dernier procédé (GIF plus haut… je vous avais bien dit que ces onglets se rejoignaient dans certains cas !) Vous avez compris comment il fonctionne !

Dans l’onglet JSON :

👉 On upload (en local)/ ou 👉 on appelle un URL .JSON,

👉 On rechercher dedans directement via l’onglet de CRAFT, les flux images/texte qui nous intéressent.

IT’S DONE, YOU’RE READY

Je me permet des petit tips/rappels de fin d’article :

• Tous les appels de data se font sur les éléments, dans la page symbol
• Je ne l’ai pas précisé à chaque étape, mais comme vous avez pu le voir sur chaque GIF. Le DUPLICATE fait tout le travail sur la page de vos artboards.
• ⚠️ Construisez bien vos symbols “maîtres” from scratch pour chaque “flux” s’ils n’ont pas le même format ⚠️ ️(j’ai parfois rencontré des dysfonctionnements de flux en voulant dupliquer un artboard de symbol et refaire un format à partir de ce dernier)
• Restez rigoureux 😎
• Don’t forget to CLAP (half a hundred times ?) 👏 ☮️ !

👏 Even Will does it ! 👏

✌️RAPPEL ✌️

Pour télécharger CRAFT, c’est par ici 👇👇

Craft by InVision

Vous pouvez retourner au Guide de Bienvenue en cliquant ici
ou passer à l’article suivant sur l’utilisation de la librairie dans Sketch