Figma - Prototypage de sites web

1 . Définition

* Figma est une plateforme en ligne de prototypage * Elle utilise un système de drap & drop qui permet de visualiser en temps réel quel sera le design de votre application. * La plateforme est 100% en Anglais, une petite base d’anglais informatique est donc nécessaire 😊. * Pour l’utiliser vous devez au préalable vous créez un compte ([rendez-vous ici](https://www.figma.com/))

2 . Création d’une maquette

Rendez-vous sur le site : [ici]( https://www.figma.com/) puis, après avoir créé un compte, retournez sur la page d’accueil et vous pourrez cliquer sur le bouton « **New design file**»  Vous allez arriver sur l’interface de création de votre prototype.  Dans ce tutoriel nous allons créer un prototype de site basique d’un freelanceur.

3 . Le site

Nous allons prendre un rectangle en haut à gauche de votre écran  Et vous pourrez créer votre barre en la dessinant  Vous pouvez bien sur la personnaliser   Nous allons maintenant mettre du texte :   Pour changer la police et la taille vous pouvez aller sur la droite :  Vous pourrez ainsi créer une simple barre de navigation avec des faux onglets, voici un exemple :  Nous allons maintenant faire une petite carte pour présenter le freelanceur. Pour cela, refaite un rectangle en dessous de la barre de navigation.  Nous allons placer une image grâce à Ellipse. Sélectionnez-le puis mettez le sur votre site comme ceci :   Petite astuce : quand vous avez fait votre rond changer la couleur directement. Vous allez ensuite devoir aller sur « Place image… », sélectionner l’image que vous voulez puis placez-là dans le cercle.   Vous pouvez maintenant créer votre site, voici un exemple de ce qui est possible avec ce que nous avons vu depuis le début du tutoriel :  

4 . Partager son prototype

Pour publier votre site vous devrez aller en haut à droite sur le bouton « **Share** » puis cliquez sur « **Copy Link** »