Ressources Thunkable figma – Ressources Magic Makers

Crée un compte

Clique sur le lien FIGMA

Indique ton adresse email comme identifiant Choisis un mot de passe

Dans le tableau qui s’ouvre, indique ton nom ou pseudo, ton utilisation de Figma (choisis Other) et ton secteur d’activité (choisis teaching)

Connecte toi avec google

Clique sur le lien FIGMA

Si tu n’as pas créé de compte, connecte toi directement avec ton compte Gmail

Sinon saisis ton adresse mail et ton mot de passe

Gère tes profils

Gére tes profils

Clique sur ton avatar en haut à droite de ton écran

A la 1ère connexion, dans le menu déroulant tu ne vois pas apparaître COMMUNITY PROFILE qui te permet de publier tes projets, de suivre d’autres profils … Il faut créer ce profil en choisissant SETTINGS puis l’onglet

COMMUNITY qui propose de créer un profil communautaire.

Il te reste à créer ton nom de profil sous la forme @XXXXXX(de ton choix).

Lors des connexions suivantes, tu pourras accéder à ton profil communautaire en cliquant sur COMMUNITY PROFILE

En cliquant sur INTERNAL PROFILE, tu as accès à tes drafts et projets.

Crée ou importe un draft

Sur l’espace de ton compte Figma se trouve à gauche un menu vertical : RECENTS / DRAFTS

Clique sur le + de l’onglet DRAFTS (brouillons) pour créer un NEW DESIGN FILE.

Note que tu as aussi la possibilité d’importer des projets enregistrés localement au format .fig.

Consulte la communauté

Clique sur EXPLORE COMMUNITY dans la barre de menu à gauche de ton avatar.

Tu accèdes à un menu où tu peux choisir une sélection des drafts publiés dans la communauté.

Choisis le design qui te plait dans la sélection proposée puis clique sur le bouton GET A COPY.

Le principe de la communauté FIGMA est le remix : tu peux donc utiliser le projet téléchargé.

Crée des teams

Tu peux créer des équipes en saisissant simplement l’adresse mail du collaborateur à inviter.

Tu disposes d’une offre gratuite jusqu’à 3 projet et 2 collaborateurs « éditeurs ». Le nombre de fichiers et de collaborateurs « spectateurs » est illimité.

Sauvegarde un draft

Dans l’espace de travail, clique sur le symbole FIGMA dans la barre de menu horizontale puis sur l’item File.

Choisis l’option Save a local copy.

Le fichier est enregistré au format .fig.

Publie un projet

Dans l’espace de design, clique sur le bouton SHARE puis sur l’onglet PUBLISH dans la fenêtre pop-up qui s’ouvre.

Clique ensuite sur le bouton PUBLISH

Tu dois avoir préparé un screenshot de ton projet au format png que tu drag and drop en tant que thumbnail (miniature).

Tu saisis le nom, une courte description et surtout des #tags pour identifier ton projet.

Partage ton projet

Une fois que ton projet est publié, clique sur l’onglet INVITE de la fenêtre pop-up.

Puis clique sur l’icone COPY LINK pour obtenir le lien qui te permetta d’importer ton projet FIGMA dans THUNKABLE.

Importe ton projet sur thunkable

Utilise le lien que tu viens de créer.

Dans le menu vertical de la version DRAG AND DROP à gauche de ton écran, clique sur l’icone ASSETS.

Puis sur + à côté de FIGMA FILES.

Dans la fenêtre POP UP qui s’ouvre, copy ton lien FIGMA et vérifier à bien choisir la page que tu importes.

Crée une frame

Crée un frame à la tête de ton projet

Choisis le format iPhone 8 qui correspond au seul format géré par Thunkable pour les simulations Live.

Tu peux créer autant de Frames que tu souhaites gérer de Screens dans Thunkable

Utilise les formes pour dessiner

Si tu souhaites dessiner les formes de ton design, tu disposes de formes basiques que tu peux insérer dans ton frame

Clique sur la forme : toutes les caractéristiques se trouvent dans le menu vertical qui s’affiche à droite de ton écran (couleur, forme, taille …)

Utilise Pen et Pencil pour dessiner

Clique sur l’icone qui représente la plume d’un stylo dans le menu pour utiliser les

fonctionnalités PEN et PENCIL.

PEN est très intéressant pour compléter un dessin qui utilise des formes.

PENCIL permet de réaliser des dessins vectoriels (courbes de Bézier)

Clique sur les dessins pour afficher leurs caractéristiques dans le menu à droite et les modifier.

Utilise texte pour créer des textes et des contenus

L’icone T te permet d’insérer du texte et de gérer des titres à l’intérieur de ta frame ou de tes formes.

Déplace des frames

Pour déplacer chaque frame sur l’espace de travail, clique gauche simplement dessus et déplace le dans l’espace de travail. Figma te propose des lignes pour aligner tes formes.

Pour déplacer l’ensemble de tes frames, clique sur l’icone qui représente une main ouverte.

Utilise des plugins

Importe des icones standard très utiles (navigation par exemple ) grâce au plugin FONT AWESOME ICONS qui se trouve dans la bibliothèques de plugins de FIGMA .

Utilise les illustrations undraw

Undraw est une plateforme en ligne qui te permet de télécharger des illustrations parlantes pour mobiles.

Elle propose de jouer sur les couleurs pour créer une charte graphique.

Télécharge les désigns au format png et insère les simplement dans tes frames.

Crée des groupes

Maintiens la touche SHIFT de ton clavier et sélectionne avec clic gauche les composants de ta frame que tu souhaites grouper pour les déplacer plus facilement.

Renomme ton groupe.

Place en premier dans la liste du groupe les éléments que tu souhaites voir apparaître en premier plan.

Installe des icônes

Utilise le plugin FONT AWESOME ICONS pour télécharger les icones qui se placent sur ton espace de dessin.

Dispose les ensuite grâce aux lignes de positionnement verticales et horizontales.

Rafraîchis les frames figma sur thunkable

Quand tu importes les FIGMA FILES dans Thunkables tous les fichiers sont chargés au format .svg dans les MEDIA FILES.

Le modèle est chargé dans les FIGMA FILES.

Dans le DESIGNER, toute l’arborescence des composants FIGMA apparaît comme des composants THUNKABLE.

Tu peux modifier un frame FIGMA et le mettre à jour dans THUNKABLE en cliquant sur l’icone mise à jour qui se trouve à droite.

EXPERIMENTER