Designer & Intégrer un Portfolio en Mobile First
-37% de réduction
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
- Fichiers sourcestélécharger
- Certificat
Formateur : Adrien Gazaix
-
GENIALISSISME comme d’ habitude avec Adrien ! Bravo et merci beaucoup. A trés bientôt. Eric
-
Au top bien expliqué vivement la suite !
-
Excellent tuto aussi chouette que l'épisode 1. Clair, structuré et très bien expliqué.
-
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
note moyenne
avis laissés