10,00

Tuto Designer un Portfolio - Episode 2 : Tablette & Bureau avec Figma

10,00

  • Une formation vidéo de 1h23s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Designer un Portfolio - Episode 2 : Tablette & Bureau

ajouter ce cours aux favoris retirer ce cours des favoris

Dans ce tuto Figma en vidéo, nous allons apprendre ensemble les différentes étapes de création pour designer un Portfolio en version tablette & bureau.

En effet, ce tuto fait suite à l'épisode 1 que vous pouvez suivre sur tuto.com et qui est consacré à la version mobile. Mais celui-ci reste optionnel bien évidemment.

Nous prendrons pour exemple le portfolio d'une photographe qui voudrait présenter son travail classé dans différentes catégories.

Ce que nous allons voir dans cet épisode :

  • Création d'une frame pour tablette et bureau
  • Création de grilles personnalisées avec plusieurs colonnes
  • Copier les éléments de la version mobile et les adapter sur les autres versions du site
  • Découverte des composants interactifs pour éviter la duplication inutiles des maquettes lors du prototypage
  • Mise en place d'une lightbox au clic sur une image de la galerie
  • Trier les images en fonction d'une catégorie grâce au prototype
  • Créer un dark mode rapidement grâce aux couleurs de sélection du document
  • Coller/remplacer une icône rapidement
  • Créer une galerie d'images différente de la version mobile en s'appuyant sur la puissance des grid en css
  • Créer des pages différentes pour chaque version du site pour être mieux organisé et surtout pouvoir changer le device utilisé sur le prototype
  • et d'autres astuces bien sur...

Pour avoir une idée de ce que l'on va réaliser ensemble, vous pouvez visionner l'extrait vidéo sur la fiche du tuto.
Les maquettes Figma des deux épisodes sont inclus avec la vidéo.
N'hésitez pas à me soumettre des questions dans le salon d'entraide si vous rencontrez des difficultés pendant ou après le visionnage de la vidéo.
Bon tuto !

Table des matières de cette formation Figma (durée : 1h23s)

    • Intro, création de la frame tablette, grille & colonnes 00:05:32
    • Créer le header sur tablette 00:03:22
    • Positionner le titre et le sous titre sur tablette 00:04:54
    • Filtres, galerie photos et footer sur tablette 00:07:36
    • Mise en place d'une lightbox sur tablette 00:06:15
    • Création de la version bureau 00:12:50
    • Découverte et utilisation des composants interactifs 00:08:54
    • Prototype sur le filtrage des images, dark mode et conclusion 00:11:00



Formateur : Adrien Gazaix

Adrien Gazaix a publié 198 tutoriels et obtenu une note moyenne de 4,8/5 sur 58 175 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

3
avis laissés
5 étoiles
3
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • Avec quelle version de logiciel ce tuto est-il compatible ?
    Figma
  • Que contient le fichier source ?
    Les maquettes Figma des épisodes 1 et 2.
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1449 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données