Designer un Portfolio - Episode 2 : Tablette & Bureau

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 !