Figma tout-en-un dans un seul volume
 |
Description
Introduction au livre
De la planification au développement web adaptatif, réalisez tout avec Figma.
Figma n'est plus seulement un outil de conception ; il s'est imposé comme une plateforme collaborative reliant la planification, la conception et le développement.
Ce livre est un guide pratique qui démontre la véritable valeur de Figma.
Avec Figma, les planificateurs peuvent créer des plans efficaces, les concepteurs peuvent créer des interfaces utilisateur conviviales pour les développeurs et ces derniers peuvent apprendre à connecter naturellement les conceptions au code grâce au mode développeur.
Il est structuré selon une approche conviviale et pratique que même les débutants peuvent suivre, permettant ainsi à ceux qui découvrent Figma de se lancer sans difficulté.
Vous pouvez apprendre chaque fonction et concept étape par étape grâce à des exemples concrets tirés de l'écran. Il ne s'agit pas simplement d'un exemple à reproduire, mais d'une méthode pour comprendre le raisonnement derrière chaque étape et l'appliquer directement à des situations réelles.
Ce guide sera une ressource précieuse pour ceux qui ont déjà utilisé Figma au moins une fois mais qui se sont sentis perdus face à ses applications pratiques.
À la fin du livre, vous pourrez expérimenter l'ensemble du processus, de la planification à la conception et au transfert aux développeurs, en créant un projet web adaptatif appelé « Euro Bike Tour » sur le concept d'agence de voyages.
Apprenez à optimiser l'efficacité de la collaboration grâce à des techniques pratiques de conception de composants, de mise en page automatique, de variables et de prototypage, directement applicables sur le terrain.
Il contient du contenu directement applicable à la pratique, reflétant la dernière interface Figma UI3 et les mises à jour récentes de la configuration.
De plus, l'effet d'apprentissage sera encore plus important si vous le regardez en même temps que la conférence de l'auteur sur YouTube (M. Oh's Niga Study).
Il s'agit d'un guide pratique et complet destiné aux planificateurs, concepteurs et développeurs qui souhaitent obtenir de meilleurs résultats avec Figma.
Ce seul livre vous permettra d'apprendre tout en une seule fois, de la planification à la conception, en passant par le prototypage et la mise en œuvre de sites web adaptatifs.
Si vous suivez les étapes du début à la fin, vous constaterez que votre projet est devenu plus clair, plus rapide et plus complet.
Figma n'est plus seulement un outil de conception ; il s'est imposé comme une plateforme collaborative reliant la planification, la conception et le développement.
Ce livre est un guide pratique qui démontre la véritable valeur de Figma.
Avec Figma, les planificateurs peuvent créer des plans efficaces, les concepteurs peuvent créer des interfaces utilisateur conviviales pour les développeurs et ces derniers peuvent apprendre à connecter naturellement les conceptions au code grâce au mode développeur.
Il est structuré selon une approche conviviale et pratique que même les débutants peuvent suivre, permettant ainsi à ceux qui découvrent Figma de se lancer sans difficulté.
Vous pouvez apprendre chaque fonction et concept étape par étape grâce à des exemples concrets tirés de l'écran. Il ne s'agit pas simplement d'un exemple à reproduire, mais d'une méthode pour comprendre le raisonnement derrière chaque étape et l'appliquer directement à des situations réelles.
Ce guide sera une ressource précieuse pour ceux qui ont déjà utilisé Figma au moins une fois mais qui se sont sentis perdus face à ses applications pratiques.
À la fin du livre, vous pourrez expérimenter l'ensemble du processus, de la planification à la conception et au transfert aux développeurs, en créant un projet web adaptatif appelé « Euro Bike Tour » sur le concept d'agence de voyages.
Apprenez à optimiser l'efficacité de la collaboration grâce à des techniques pratiques de conception de composants, de mise en page automatique, de variables et de prototypage, directement applicables sur le terrain.
Il contient du contenu directement applicable à la pratique, reflétant la dernière interface Figma UI3 et les mises à jour récentes de la configuration.
De plus, l'effet d'apprentissage sera encore plus important si vous le regardez en même temps que la conférence de l'auteur sur YouTube (M. Oh's Niga Study).
Il s'agit d'un guide pratique et complet destiné aux planificateurs, concepteurs et développeurs qui souhaitent obtenir de meilleurs résultats avec Figma.
Ce seul livre vous permettra d'apprendre tout en une seule fois, de la planification à la conception, en passant par le prototypage et la mise en œuvre de sites web adaptatifs.
Si vous suivez les étapes du début à la fin, vous constaterez que votre projet est devenu plus clair, plus rapide et plus complet.
- Vous pouvez consulter un aperçu du contenu du livre.
Aperçu
indice
Recommandation x
Préface xii
À propos de ce livre xiv
PARTIE I : Introduction à Figma 1
CHAPITRE 01 Pourquoi utiliser Figma ? 3
LEÇON 01 UI/UX 4 pour comprendre le développement d'applications Web
LEÇON 02 : Le processus complet de développement web 7
LEÇON 03 : 9 raisons pour lesquelles les concepteurs doivent étudier le développement pour la collaboration
LEÇON 04 : 10 raisons pour lesquelles les développeurs devraient apprendre Figma pour la collaboration
CHAPITRE 02 Installation et interface de Figma 11
LEÇON 01 : Comment installer Figma 12
__Inscrivez-vous sur le site web de Figma 12 / Téléchargez l'application de bureau Figma 17 / Téléchargez l'application mobile Figma 19
LEÇON 02 Vérification de l'interface Figma 20
__Vérifiez l'interface complète 20 / Menu principal 22 / Types de boîtes à outils 23 / Types de panneaux 26 / Paramètres du mode sombre de l'interface 28
LEÇON 03 Mise à niveau de votre compte pour utiliser le mode développeur 29
PARTIE II Transfert aux développeurs 31
CHAPITRE 03 Vérification des éléments de conception Figma 33
LEÇON 01 Types de composants de conception Figma 34
LEÇON 02 Sélection d'éléments à l'aide de l'outil Déplacement et du panneau Calques 35
LEÇON 03 Vérification de l'espacement entre les éléments du design 38
LEÇON 04 Fonction d'édition multiple 39
__Redimensionner tous les éléments du cadre 39 / Modifier le texte sur différentes couches simultanément 41
CHAPITRE 04 Vérification du style 43
LEÇON 01 Style de couleur 44
Création d'un style de couleur 44 / Application et suppression d'un style de couleur 49 / Création d'un groupe de styles de couleur 51 / Création d'un groupe juste après la création d'un style de couleur 52
LEÇON 02 Style de texte 56
Création de styles de texte 56 / Application et suppression de styles de texte 59
LEÇON 03 Style de grille 61
Création d'une grille 62 / Enregistrement d'un style de grille 65
LEÇON 04 Effet Style 69
__Types d'effets 69 / Enregistrement des styles d'effets 76 / Application des styles d'effets 78
CHAPITRE 05 Collaboration 81
LEÇON 01 Comment utiliser l'outil de commentaires 82
__Publier un commentaire 82 / Consulter les commentaires 83 / Répondre à un commentaire 84 / Afficher tous les commentaires 85 / Masquer les commentaires 86 / Masquer les commentaires résolus du panneau 87 / Supprimer les commentaires 87
LEÇON 02 Comment partager des fichiers 88
Inviter dans l'équipe 88 / Envoyer l'adresse du fichier 95 / Partager le fichier directement 98
LEÇON 03 Aperçu du prototype 100
Afficher les fichiers en mode prototype 100 / Partager le mode prototype 102
CHAPITRE 06 Sauvegarde des images 103
LEÇON 01 Format d'image 104
Formats d'image importables depuis Figma 104 / Importation des formats GIF dans Figma 105
LEÇON 02 Exportation d'images 109
__Exportation d'images à partir de fichiers de conception 109 / Comprendre la résolution 114 / Exportation d'images par résolution 120 / Sélection d'un cadre et exportation en tant qu'image 124 / Exportation d'un plan au format PDF 126
LEÇON 03 : Utilisation d’APNG sur GIF 132
__Exporter le fichier GIF 132 / Exporter le fichier APNG 136
CHAPITRE 07 Vérification du code CSS 139
LEÇON 01 : Vérification du code en mode développeur 140
Passage en mode développeur (fichier d'équipe 140) / Utilisation du mode développeur (143) / Vérification des fonctionnalités du mode développeur (147)
LEÇON 02 Connexion VS Code 151
Connexion de VS Code et Figma 151 / Utilisation de Figma Design dans VS Code 154
LEÇON 03 Connexion de Zeppelin et Figma 157
Inscrivez-vous à Zeppelin et intégrez-le à Figma 158 / Installez le plugin Zeppelin dans Figma 162 / Consultez les fichiers Figma liés à Zeppelin 165
PARTIE III Composants de construction adaptés au développement 167
CHAPITRE 08 Création de composants 169
LEÇON 01 Comment utiliser les composants 170
LEÇON 02 : Rétablir le composant d’origine 173
LEÇON 03 Version de l'instance 176
LEÇON 04 Utilisation du panneau Actifs 179
LEÇON 05 Instances au sein des composants 182
CHAPITRE 09 Mise en page automatique 187
LEÇON 01 Rembourrage et marges 188
Exercices de remplissage 190 / Exercices de remplissage et de marge 194
LEÇON 02 Auto 200 pour l'espacement
LEÇON 03 Mise en page automatique Taille Unité 204
LEÇON 04 Fonction d'alignement automatique 210
LEÇON 05 Ignorer la mise en page automatique 212
CHAPITRE 10 : TECHNIQUES DE DÉVELOPPEMENT WEB RESPECTIF 217
LEÇON 01 Tri et contraintes 218
__Alignement automatique de la mise en page 218 / Alignement des composants 220 / Alignement du cadre 224
LEÇON 02 Largeur minimale et largeur maximale 230
__min-width 230 / min-height 234 / Application de min-width aux éléments enfants 237 / max-width 240 / max-height 243 / Application de max-width aux éléments enfants 246 / Exemple d'application de size 248
LEÇON 03 Mise en page automatique : habillage 256
LEÇON 04 Programmation avec le mode développeur et VS Code 262
PARTIE IV PROTOTYPAGE 289
CHAPITRE 11 Présentation des variantes 291
LEÇON 01 Comprendre les variantes 292
LEÇON 02 Création d'une case à cocher 295
LEÇON 03 : Création d'un interrupteur à bascule 301
LEÇON 04 Création d'un bouton de connexion 305
LEÇON 05 Création de champs de saisie 308
LEÇON 06 L'erreur 312 se produit lorsque les noms des composants de variante sont différents.
CHAPITRE 12 PROTOTYPE 315
LEÇON 01 : Concepts de prototype et d'interaction (316)
Panneau prototype 316 / Sélectionner le périphérique 318 / Créer une connexion 321 / Fenêtre d'interaction 321 / Exécuter le prototype 324
LEÇON 02 : Prototype de page de connexion utilisant des variantes 326
LEÇON 03 Prototype de diaporama d'images 335
LEÇON 04 Prototype de superposition 349
LEÇON 05 Prototype de position 353
Implémentation de la fonction fixe 354 / Implémentation de la fonction fixe 358 / Défilement vers le prototype 361
CHAPITRE 13 PROTOTYPES VARIABLES 365
LEÇON 01 Types de variables 366
Enregistrement de la variable couleur 367 / Enregistrement de la variable numérique 374 / Enregistrement de la valeur de mise en page automatique de la variable numérique 380 / Enregistrement de la variable chaîne 385 / Traitement des groupes de variables 390 / Enregistrement de la variable booléenne 393
LEÇON 02 Prototype de variable de type chaîne 398
__Modification des chaînes de caractères en fonction des variables 398 / Variables de chaînes et variantes 408 / Activation/désactivation des boutons 416
LEÇON 03 : Prototype de variable numérique 423
Thermomètre utilisant des variables numériques 423 / Contrôle du volume utilisant des variables numériques 435
LEÇON 04 Prototype d'instruction conditionnelle 444
Contrôle du volume à l'aide des conditions 445 / Contrôle du nombre de bannières publicitaires 457
LEÇON 05 MODE VARIABLE 469
Bannière produit utilisant le mode variable 470 / Gestion du mode sombre utilisant le mode variable 487
PARTIE V : Conception Web Responsive 501
CHAPITRE 14 : Élaboration d'un plan 503
LEÇON 01 Création d'un modèle de présentation 504
__Sélection de la taille du cadre 505 / Créer avec des composants d'espace commun 505
LEÇON 02 Utilisation de la fonction Hyperlien 509
Chargement d'un fichier d'exemple 509 / Application d'un lien hypertexte à un texte 510 / Application d'un lien hypertexte à un élément 512
LEÇON 03 : Module d’extension Autoflow pour l’architecture de l’information et les diagrammes de flux de travail 515
__Conception de l'information - Traitement des connexions 515 / Diagramme de flux de travail - Traitement des connexions 519
LEÇON 04 Guide de style 521
Chargement des fichiers d'exemple 521 / Guide des couleurs 522 / Guide des polices 522 / Guide des logos 525 / Guide des icônes 526
LEÇON 05 : Création d'un tableau 529
Création de tableaux à l'aide de plugins 529 / Création de tableaux pour le storyboard 536
LEÇON 06 : Création de wireframes 540
Générateur de wireframes 541 / Formulaires 543 / Composants pratiques 545 / Utilisation des wireframes fournis 546
CHAPITRE 15 : Mise en œuvre de la conception 553
LEÇON 01 : Création d’un guide de style 554
Enregistrement du style de couleur 555 / Enregistrement du style de texte 558 / Enregistrement du style de grille 561
LEÇON 02 : Contraintes de la conception Web adaptative 575
Contraintes de la zone d'en-tête 575 / Contraintes de la zone de pied de page 578 / Traitement basé sur la taille 580
LEÇON 03 : Prototype de bureau 585
Création du menu principal 585 / Création de l'image principale 599 / Création de la barre d'onglets 606 / Lecture vidéo 611 / Création de diapositives 617
LEÇON 04 Prototype mobile 624
Création de l'image principale 624 / Création du carrousel 630 / Création du tiroir 636
LEÇON 05 : Éléments à vérifier avant le transfert 643
Organisation des calques 643 / Vérification des composants et des groupes 644 / Nombres et zones 644 / Exportation 645
Préface xii
À propos de ce livre xiv
PARTIE I : Introduction à Figma 1
CHAPITRE 01 Pourquoi utiliser Figma ? 3
LEÇON 01 UI/UX 4 pour comprendre le développement d'applications Web
LEÇON 02 : Le processus complet de développement web 7
LEÇON 03 : 9 raisons pour lesquelles les concepteurs doivent étudier le développement pour la collaboration
LEÇON 04 : 10 raisons pour lesquelles les développeurs devraient apprendre Figma pour la collaboration
CHAPITRE 02 Installation et interface de Figma 11
LEÇON 01 : Comment installer Figma 12
__Inscrivez-vous sur le site web de Figma 12 / Téléchargez l'application de bureau Figma 17 / Téléchargez l'application mobile Figma 19
LEÇON 02 Vérification de l'interface Figma 20
__Vérifiez l'interface complète 20 / Menu principal 22 / Types de boîtes à outils 23 / Types de panneaux 26 / Paramètres du mode sombre de l'interface 28
LEÇON 03 Mise à niveau de votre compte pour utiliser le mode développeur 29
PARTIE II Transfert aux développeurs 31
CHAPITRE 03 Vérification des éléments de conception Figma 33
LEÇON 01 Types de composants de conception Figma 34
LEÇON 02 Sélection d'éléments à l'aide de l'outil Déplacement et du panneau Calques 35
LEÇON 03 Vérification de l'espacement entre les éléments du design 38
LEÇON 04 Fonction d'édition multiple 39
__Redimensionner tous les éléments du cadre 39 / Modifier le texte sur différentes couches simultanément 41
CHAPITRE 04 Vérification du style 43
LEÇON 01 Style de couleur 44
Création d'un style de couleur 44 / Application et suppression d'un style de couleur 49 / Création d'un groupe de styles de couleur 51 / Création d'un groupe juste après la création d'un style de couleur 52
LEÇON 02 Style de texte 56
Création de styles de texte 56 / Application et suppression de styles de texte 59
LEÇON 03 Style de grille 61
Création d'une grille 62 / Enregistrement d'un style de grille 65
LEÇON 04 Effet Style 69
__Types d'effets 69 / Enregistrement des styles d'effets 76 / Application des styles d'effets 78
CHAPITRE 05 Collaboration 81
LEÇON 01 Comment utiliser l'outil de commentaires 82
__Publier un commentaire 82 / Consulter les commentaires 83 / Répondre à un commentaire 84 / Afficher tous les commentaires 85 / Masquer les commentaires 86 / Masquer les commentaires résolus du panneau 87 / Supprimer les commentaires 87
LEÇON 02 Comment partager des fichiers 88
Inviter dans l'équipe 88 / Envoyer l'adresse du fichier 95 / Partager le fichier directement 98
LEÇON 03 Aperçu du prototype 100
Afficher les fichiers en mode prototype 100 / Partager le mode prototype 102
CHAPITRE 06 Sauvegarde des images 103
LEÇON 01 Format d'image 104
Formats d'image importables depuis Figma 104 / Importation des formats GIF dans Figma 105
LEÇON 02 Exportation d'images 109
__Exportation d'images à partir de fichiers de conception 109 / Comprendre la résolution 114 / Exportation d'images par résolution 120 / Sélection d'un cadre et exportation en tant qu'image 124 / Exportation d'un plan au format PDF 126
LEÇON 03 : Utilisation d’APNG sur GIF 132
__Exporter le fichier GIF 132 / Exporter le fichier APNG 136
CHAPITRE 07 Vérification du code CSS 139
LEÇON 01 : Vérification du code en mode développeur 140
Passage en mode développeur (fichier d'équipe 140) / Utilisation du mode développeur (143) / Vérification des fonctionnalités du mode développeur (147)
LEÇON 02 Connexion VS Code 151
Connexion de VS Code et Figma 151 / Utilisation de Figma Design dans VS Code 154
LEÇON 03 Connexion de Zeppelin et Figma 157
Inscrivez-vous à Zeppelin et intégrez-le à Figma 158 / Installez le plugin Zeppelin dans Figma 162 / Consultez les fichiers Figma liés à Zeppelin 165
PARTIE III Composants de construction adaptés au développement 167
CHAPITRE 08 Création de composants 169
LEÇON 01 Comment utiliser les composants 170
LEÇON 02 : Rétablir le composant d’origine 173
LEÇON 03 Version de l'instance 176
LEÇON 04 Utilisation du panneau Actifs 179
LEÇON 05 Instances au sein des composants 182
CHAPITRE 09 Mise en page automatique 187
LEÇON 01 Rembourrage et marges 188
Exercices de remplissage 190 / Exercices de remplissage et de marge 194
LEÇON 02 Auto 200 pour l'espacement
LEÇON 03 Mise en page automatique Taille Unité 204
LEÇON 04 Fonction d'alignement automatique 210
LEÇON 05 Ignorer la mise en page automatique 212
CHAPITRE 10 : TECHNIQUES DE DÉVELOPPEMENT WEB RESPECTIF 217
LEÇON 01 Tri et contraintes 218
__Alignement automatique de la mise en page 218 / Alignement des composants 220 / Alignement du cadre 224
LEÇON 02 Largeur minimale et largeur maximale 230
__min-width 230 / min-height 234 / Application de min-width aux éléments enfants 237 / max-width 240 / max-height 243 / Application de max-width aux éléments enfants 246 / Exemple d'application de size 248
LEÇON 03 Mise en page automatique : habillage 256
LEÇON 04 Programmation avec le mode développeur et VS Code 262
PARTIE IV PROTOTYPAGE 289
CHAPITRE 11 Présentation des variantes 291
LEÇON 01 Comprendre les variantes 292
LEÇON 02 Création d'une case à cocher 295
LEÇON 03 : Création d'un interrupteur à bascule 301
LEÇON 04 Création d'un bouton de connexion 305
LEÇON 05 Création de champs de saisie 308
LEÇON 06 L'erreur 312 se produit lorsque les noms des composants de variante sont différents.
CHAPITRE 12 PROTOTYPE 315
LEÇON 01 : Concepts de prototype et d'interaction (316)
Panneau prototype 316 / Sélectionner le périphérique 318 / Créer une connexion 321 / Fenêtre d'interaction 321 / Exécuter le prototype 324
LEÇON 02 : Prototype de page de connexion utilisant des variantes 326
LEÇON 03 Prototype de diaporama d'images 335
LEÇON 04 Prototype de superposition 349
LEÇON 05 Prototype de position 353
Implémentation de la fonction fixe 354 / Implémentation de la fonction fixe 358 / Défilement vers le prototype 361
CHAPITRE 13 PROTOTYPES VARIABLES 365
LEÇON 01 Types de variables 366
Enregistrement de la variable couleur 367 / Enregistrement de la variable numérique 374 / Enregistrement de la valeur de mise en page automatique de la variable numérique 380 / Enregistrement de la variable chaîne 385 / Traitement des groupes de variables 390 / Enregistrement de la variable booléenne 393
LEÇON 02 Prototype de variable de type chaîne 398
__Modification des chaînes de caractères en fonction des variables 398 / Variables de chaînes et variantes 408 / Activation/désactivation des boutons 416
LEÇON 03 : Prototype de variable numérique 423
Thermomètre utilisant des variables numériques 423 / Contrôle du volume utilisant des variables numériques 435
LEÇON 04 Prototype d'instruction conditionnelle 444
Contrôle du volume à l'aide des conditions 445 / Contrôle du nombre de bannières publicitaires 457
LEÇON 05 MODE VARIABLE 469
Bannière produit utilisant le mode variable 470 / Gestion du mode sombre utilisant le mode variable 487
PARTIE V : Conception Web Responsive 501
CHAPITRE 14 : Élaboration d'un plan 503
LEÇON 01 Création d'un modèle de présentation 504
__Sélection de la taille du cadre 505 / Créer avec des composants d'espace commun 505
LEÇON 02 Utilisation de la fonction Hyperlien 509
Chargement d'un fichier d'exemple 509 / Application d'un lien hypertexte à un texte 510 / Application d'un lien hypertexte à un élément 512
LEÇON 03 : Module d’extension Autoflow pour l’architecture de l’information et les diagrammes de flux de travail 515
__Conception de l'information - Traitement des connexions 515 / Diagramme de flux de travail - Traitement des connexions 519
LEÇON 04 Guide de style 521
Chargement des fichiers d'exemple 521 / Guide des couleurs 522 / Guide des polices 522 / Guide des logos 525 / Guide des icônes 526
LEÇON 05 : Création d'un tableau 529
Création de tableaux à l'aide de plugins 529 / Création de tableaux pour le storyboard 536
LEÇON 06 : Création de wireframes 540
Générateur de wireframes 541 / Formulaires 543 / Composants pratiques 545 / Utilisation des wireframes fournis 546
CHAPITRE 15 : Mise en œuvre de la conception 553
LEÇON 01 : Création d’un guide de style 554
Enregistrement du style de couleur 555 / Enregistrement du style de texte 558 / Enregistrement du style de grille 561
LEÇON 02 : Contraintes de la conception Web adaptative 575
Contraintes de la zone d'en-tête 575 / Contraintes de la zone de pied de page 578 / Traitement basé sur la taille 580
LEÇON 03 : Prototype de bureau 585
Création du menu principal 585 / Création de l'image principale 599 / Création de la barre d'onglets 606 / Lecture vidéo 611 / Création de diapositives 617
LEÇON 04 Prototype mobile 624
Création de l'image principale 624 / Création du carrousel 630 / Création du tiroir 636
LEÇON 05 : Éléments à vérifier avant le transfert 643
Organisation des calques 643 / Vérification des composants et des groupes 644 / Nombres et zones 644 / Exportation 645
Image détaillée
Dans le livre
Quiconque a travaillé sur un projet d'application web a probablement vécu d'innombrables moments où la collaboration ne s'est pas déroulée sans heurts.
Il est probable que les urbanistes aient déjà rencontré des concepteurs qui ne comprennent pas vraiment l'objectif de leurs plans, ou des développeurs qui affirment que la mise en œuvre est impossible.
Il vous est peut-être déjà arrivé de vivre une situation où le concepteur s'est contenté de concevoir selon le plan, mais où le développeur a réagi en déclarant que la conception n'avait aucun sens, ou en soulignant que le concepteur ne comprenait pas le concept d'interface utilisateur/d'expérience utilisateur.
Si vous êtes développeur, vous avez probablement déjà vu des planificateurs ou des concepteurs se demander s'il y a quelque chose qu'un ordinateur ne peut pas faire, ne pas comprendre pourquoi le développement est impossible, ou même remettre en question vos compétences.
--- p.3
Si vous travaillez sur le développement d'applications web, je vous recommande vivement d'apprendre Figma dès que possible.
J'ai déjà enseigné Figma en entreprise.
Alors que de nombreuses entreprises prennent conscience de l'importance de Figma, les individus doivent également apprendre activement à l'utiliser.
Il est également important de développer une compréhension plus approfondie de l'UI/UX, ce qui signifie littéralement expérience utilisateur.
Par conséquent, la méthode d'apprentissage la plus efficace consiste à devenir soi-même utilisateur et à expérimenter différents sites web et applications.
--- p.6
Lorsqu'un développeur reçoit un design créé avec Figma, il doit d'abord vérifier comment ce design est structuré.
Figma propose une grande variété de composants de conception, il est donc important de choisir les bons.
De plus, l'ajustement de l'espacement entre les éléments est une partie essentielle du processus de développement.
De nombreux développeurs ont probablement déjà fait l'expérience de vérifier l'espacement à l'œil nu, puis de l'implémenter, pour ensuite se faire critiquer par le concepteur.
Il est donc nécessaire d'utiliser l'outil de déplacement pour sélectionner précisément les éléments et vérifier minutieusement l'espacement entre les contenus du design.
--- p.33
Avec le lancement du mode développeur de Figma en juin 2023, Figma présente une nouvelle vision.
Par ailleurs, des fonctionnalités ont été ajoutées afin d'adapter davantage les éléments de conception à l'environnement de développement.
La plupart des sites web actuels sont conçus de manière adaptative, en tenant compte du web mobile.
Pour ce faire, Figma propose diverses fonctionnalités qui rendent la collaboration entre développeurs et concepteurs plus efficace.
Dans la partie 3, nous examinerons d'abord les composants existants, la mise en page automatique et les fonctionnalités de contraintes, puis nous verrons quelles sont les nouvelles fonctionnalités disponibles pour le Web réactif.
Découvrons comment créer plus efficacement des designs adaptés à votre environnement de développement grâce aux fonctionnalités offertes par Figma.
--- p.168
L'une des raisons pour lesquelles Figma a eu plus de succès auprès des concepteurs d'interface utilisateur/d'expérience utilisateur qu'Adobe XD lors de sa sortie initiale résidait dans sa polyvalence en matière de prototypage.
Figma prend en charge un large éventail d'événements et de fonctionnalités, vous permettant de créer une grande variété de prototypes.
Lorsque les concepteurs créent des prototypes bien réalisés, les développeurs peuvent plus facilement comprendre l'ensemble du processus, ce qui réduit le temps consacré à la communication pour comprendre ce processus.
(Omission) Dans la partie 4, nous examinerons les fonctions de variante et de prototype de Figma.
Voyons comment la création efficace d'un prototype de conception peut vous faire gagner beaucoup de temps et d'efforts lorsque vous travaillez avec des développeurs.
--- p.290
Nous avons examiné de nombreuses fonctionnalités de Figma dans les parties 1 à 4.
Dans la partie 5, nous utiliserons ces fonctionnalités pour créer un site web adaptatif.
Nous nous chargeons de tout, des bases de la planification à la conception et à la mise en œuvre du prototype.
Le terme « responsive web » désigne un site web qui reconnaît et s'adapte aux appareils tels que les ordinateurs de bureau, les tablettes et les appareils mobiles.
Nous vous montrerons comment gagner du temps en créant des designs pour ordinateurs, tablettes et mobiles, et même comment créer des prototypes pour faciliter la communication avec les développeurs.
Dans la partie 5, nous allons créer un projet web adaptatif appelé « Euro Bike Tour » sur le thème des agences de voyages.
Il est probable que les urbanistes aient déjà rencontré des concepteurs qui ne comprennent pas vraiment l'objectif de leurs plans, ou des développeurs qui affirment que la mise en œuvre est impossible.
Il vous est peut-être déjà arrivé de vivre une situation où le concepteur s'est contenté de concevoir selon le plan, mais où le développeur a réagi en déclarant que la conception n'avait aucun sens, ou en soulignant que le concepteur ne comprenait pas le concept d'interface utilisateur/d'expérience utilisateur.
Si vous êtes développeur, vous avez probablement déjà vu des planificateurs ou des concepteurs se demander s'il y a quelque chose qu'un ordinateur ne peut pas faire, ne pas comprendre pourquoi le développement est impossible, ou même remettre en question vos compétences.
--- p.3
Si vous travaillez sur le développement d'applications web, je vous recommande vivement d'apprendre Figma dès que possible.
J'ai déjà enseigné Figma en entreprise.
Alors que de nombreuses entreprises prennent conscience de l'importance de Figma, les individus doivent également apprendre activement à l'utiliser.
Il est également important de développer une compréhension plus approfondie de l'UI/UX, ce qui signifie littéralement expérience utilisateur.
Par conséquent, la méthode d'apprentissage la plus efficace consiste à devenir soi-même utilisateur et à expérimenter différents sites web et applications.
--- p.6
Lorsqu'un développeur reçoit un design créé avec Figma, il doit d'abord vérifier comment ce design est structuré.
Figma propose une grande variété de composants de conception, il est donc important de choisir les bons.
De plus, l'ajustement de l'espacement entre les éléments est une partie essentielle du processus de développement.
De nombreux développeurs ont probablement déjà fait l'expérience de vérifier l'espacement à l'œil nu, puis de l'implémenter, pour ensuite se faire critiquer par le concepteur.
Il est donc nécessaire d'utiliser l'outil de déplacement pour sélectionner précisément les éléments et vérifier minutieusement l'espacement entre les contenus du design.
--- p.33
Avec le lancement du mode développeur de Figma en juin 2023, Figma présente une nouvelle vision.
Par ailleurs, des fonctionnalités ont été ajoutées afin d'adapter davantage les éléments de conception à l'environnement de développement.
La plupart des sites web actuels sont conçus de manière adaptative, en tenant compte du web mobile.
Pour ce faire, Figma propose diverses fonctionnalités qui rendent la collaboration entre développeurs et concepteurs plus efficace.
Dans la partie 3, nous examinerons d'abord les composants existants, la mise en page automatique et les fonctionnalités de contraintes, puis nous verrons quelles sont les nouvelles fonctionnalités disponibles pour le Web réactif.
Découvrons comment créer plus efficacement des designs adaptés à votre environnement de développement grâce aux fonctionnalités offertes par Figma.
--- p.168
L'une des raisons pour lesquelles Figma a eu plus de succès auprès des concepteurs d'interface utilisateur/d'expérience utilisateur qu'Adobe XD lors de sa sortie initiale résidait dans sa polyvalence en matière de prototypage.
Figma prend en charge un large éventail d'événements et de fonctionnalités, vous permettant de créer une grande variété de prototypes.
Lorsque les concepteurs créent des prototypes bien réalisés, les développeurs peuvent plus facilement comprendre l'ensemble du processus, ce qui réduit le temps consacré à la communication pour comprendre ce processus.
(Omission) Dans la partie 4, nous examinerons les fonctions de variante et de prototype de Figma.
Voyons comment la création efficace d'un prototype de conception peut vous faire gagner beaucoup de temps et d'efforts lorsque vous travaillez avec des développeurs.
--- p.290
Nous avons examiné de nombreuses fonctionnalités de Figma dans les parties 1 à 4.
Dans la partie 5, nous utiliserons ces fonctionnalités pour créer un site web adaptatif.
Nous nous chargeons de tout, des bases de la planification à la conception et à la mise en œuvre du prototype.
Le terme « responsive web » désigne un site web qui reconnaît et s'adapte aux appareils tels que les ordinateurs de bureau, les tablettes et les appareils mobiles.
Nous vous montrerons comment gagner du temps en créant des designs pour ordinateurs, tablettes et mobiles, et même comment créer des prototypes pour faciliter la communication avec les développeurs.
Dans la partie 5, nous allons créer un projet web adaptatif appelé « Euro Bike Tour » sur le thème des agences de voyages.
--- p.502
Avis de l'éditeur
De la planification au développement web adaptatif, réalisez tout avec Figma.
Figma n'est plus seulement un outil de conception ; il s'est imposé comme une plateforme collaborative reliant la planification, la conception et le développement.
Ce livre est un guide pratique qui démontre la véritable valeur de Figma.
Avec Figma, les planificateurs peuvent créer des plans efficaces, les concepteurs peuvent créer des interfaces utilisateur conviviales pour les développeurs et ces derniers peuvent apprendre à connecter naturellement les conceptions au code grâce au mode développeur.
Il est structuré selon une approche conviviale et pratique que même les débutants peuvent suivre, permettant ainsi à ceux qui découvrent Figma de se lancer sans difficulté.
Vous pouvez apprendre chaque fonction et concept étape par étape grâce à des exemples concrets tirés de l'écran. Il ne s'agit pas simplement d'un exemple à reproduire, mais d'une méthode pour comprendre le raisonnement derrière chaque étape et l'appliquer directement à des situations réelles.
Ce guide sera une ressource précieuse pour ceux qui ont déjà utilisé Figma au moins une fois mais qui se sont sentis perdus face à ses applications pratiques.
À la fin du livre, vous pourrez expérimenter l'ensemble du processus, de la planification à la conception et au transfert aux développeurs, en créant un projet web adaptatif appelé « Euro Bike Tour » sur le concept d'agence de voyages.
Apprenez à optimiser l'efficacité de la collaboration grâce à des techniques pratiques de conception de composants, de mise en page automatique, de variables et de prototypage, directement applicables sur le terrain.
Il contient du contenu directement applicable à la pratique, reflétant la dernière interface Figma UI3 et les mises à jour récentes de la configuration.
De plus, l'effet d'apprentissage sera encore plus important si vous le regardez en même temps que la conférence de l'auteur sur YouTube (M. Oh's Niga Study).
Il s'agit d'un guide pratique et complet destiné aux planificateurs, concepteurs et développeurs qui souhaitent obtenir de meilleurs résultats avec Figma.
Ce seul livre vous permettra d'apprendre tout en une seule fois, de la planification à la conception, en passant par le prototypage et la mise en œuvre de sites web adaptatifs.
Si vous suivez les étapes du début à la fin, vous constaterez que votre projet est devenu plus clair, plus rapide et plus complet.
Contenu principal
● Comprendre l'installation et l'interface de base de Figma
● Fonctionnalités de collaboration et méthodes de transfert pour les concepteurs et les développeurs
● Configuration du système de conception, y compris les styles de couleur, de texte, de grille et d'effets
● Utilisation de composants, de la mise en page automatique et des contraintes
● Entraînez-vous à créer des prototypes tels que des pages de connexion, des diaporamas d'images et des menus déroulants.
● Fournit les fichiers de composants de wireframe créés par l'auteur
● Collaborez au développement grâce à l'intégration du mode développeur, de VS Code et de Zeplin.
● Formation pratique complète en planification, conception et prototypage de pages web adaptatives
Figma n'est plus seulement un outil de conception ; il s'est imposé comme une plateforme collaborative reliant la planification, la conception et le développement.
Ce livre est un guide pratique qui démontre la véritable valeur de Figma.
Avec Figma, les planificateurs peuvent créer des plans efficaces, les concepteurs peuvent créer des interfaces utilisateur conviviales pour les développeurs et ces derniers peuvent apprendre à connecter naturellement les conceptions au code grâce au mode développeur.
Il est structuré selon une approche conviviale et pratique que même les débutants peuvent suivre, permettant ainsi à ceux qui découvrent Figma de se lancer sans difficulté.
Vous pouvez apprendre chaque fonction et concept étape par étape grâce à des exemples concrets tirés de l'écran. Il ne s'agit pas simplement d'un exemple à reproduire, mais d'une méthode pour comprendre le raisonnement derrière chaque étape et l'appliquer directement à des situations réelles.
Ce guide sera une ressource précieuse pour ceux qui ont déjà utilisé Figma au moins une fois mais qui se sont sentis perdus face à ses applications pratiques.
À la fin du livre, vous pourrez expérimenter l'ensemble du processus, de la planification à la conception et au transfert aux développeurs, en créant un projet web adaptatif appelé « Euro Bike Tour » sur le concept d'agence de voyages.
Apprenez à optimiser l'efficacité de la collaboration grâce à des techniques pratiques de conception de composants, de mise en page automatique, de variables et de prototypage, directement applicables sur le terrain.
Il contient du contenu directement applicable à la pratique, reflétant la dernière interface Figma UI3 et les mises à jour récentes de la configuration.
De plus, l'effet d'apprentissage sera encore plus important si vous le regardez en même temps que la conférence de l'auteur sur YouTube (M. Oh's Niga Study).
Il s'agit d'un guide pratique et complet destiné aux planificateurs, concepteurs et développeurs qui souhaitent obtenir de meilleurs résultats avec Figma.
Ce seul livre vous permettra d'apprendre tout en une seule fois, de la planification à la conception, en passant par le prototypage et la mise en œuvre de sites web adaptatifs.
Si vous suivez les étapes du début à la fin, vous constaterez que votre projet est devenu plus clair, plus rapide et plus complet.
Contenu principal
● Comprendre l'installation et l'interface de base de Figma
● Fonctionnalités de collaboration et méthodes de transfert pour les concepteurs et les développeurs
● Configuration du système de conception, y compris les styles de couleur, de texte, de grille et d'effets
● Utilisation de composants, de la mise en page automatique et des contraintes
● Entraînez-vous à créer des prototypes tels que des pages de connexion, des diaporamas d'images et des menus déroulants.
● Fournit les fichiers de composants de wireframe créés par l'auteur
● Collaborez au développement grâce à l'intégration du mode développeur, de VS Code et de Zeplin.
● Formation pratique complète en planification, conception et prototypage de pages web adaptatives
SPÉCIFICATIONS DES PRODUITS
- Date d'émission : 4 décembre 2025
- Nombre de pages, poids, dimensions : 660 pages | 188 × 245 × 28 mm
- ISBN13 : 9791194587866
Vous aimerez peut-être aussi
카테고리
Langue coréenne
Langue coréenne
![GQ KOREA Mark (Mensuel) : décembre [2025]](http://librairie.coreenne.fr/cdn/shop/files/8ef265dbbfbf186523ed75ba7319009d.jpg?v=1765340328&width=3840)
