• 1. Introduction
    • Les outils du développeur
  • 2. HTML
    • La syntax
      • Balise inline ou block ?
      • Les balises les plus utiles
      • Balises avec attributs
    • Une page html
      • Le nommage en WEB
      • Créer un fichier HTML
      • Structure de base
  • 3. CSS
    • La syntax
      • Les unités
      • Les sélecteurs
    • Une feuille css
      • Créer un document CSS
      • Lier le CSS
    • Positions
    • Flexbox
    • Grid
    • Responsive (Media queries)
  • 4. JS
    • La syntax
      • Les variables
    • Un fichier js
    • Exercices
  • 5. CMS
    • Introduction aux CMS
    • Installation de XAMPP (serveur local)
    • Joomla
      • Architecture
      • Le thème enfant
      • Les modules
      • Les menus
      • Custom fields
      • Language overrides
      • Tips&tricks
    • Wordpress
      • Initiation d'un wordpress
      • Le thème enfant
  • 6. SEO
    • Pourquoi la sémantique ?
  • 7. Mise en ligne
  • 8. UI / UX Design
    • Figma
      • Comprendre l'interface
      • Les pages et les calques
      • Raccourci clavier
    • Introduction
      • Les outils et aides de créations
      • Déroulement type d'un projet
Contact & horaire
  • fr
  • de

Les pages et les calques

Les pages

Les pages vous aident à organiser vos fichiers de conception. Chaque page à sa propre zone de travail.

On les utilisent généralement pour :

  • Gérer les conceptions par étape ou par statut
  • Organiser les composants
  • Garder un bloc-notes d'idées
  • Archiver les anciennes conceptions Page%20list%20with%20creative%20page%20names

Les calques

Les conceptions sont généralement créées à partir d'une combinaison de formes, de texte et d'autres éléments.

Lorsque vous ajoutez des objets sur votre zone de travail, Figma traite chaque objet comme un calque distinct. Avoir des calques séparés vous permet de modifier ou d'éditer les propriétés de chaque calque individuellement.

Comme la création ci-dessous pour une publication sur les réseaux sociaux, qui comprend un nom (profile name) , une photo de profil (profile picture), une image (post image) et une légende (caption).

Social%20media%20post%20with%20multiple%20layers

Vous n'avez pas besoin d'être un expert en géométrie pour utiliser Figma. Mais il est utile de savoir que nous travaillons avec trois dimensions sur la toile.

Nous avons les axes X (horizontal) et Y (vertical) qui nous donnent les coordonnées d'un calque sur la toile. Nous avons également une troisième dimension, l'indice Z (profondeur), qui nous donne la profondeur du calque ou l'ordre dans lequel il apparaît.


Types de calques

Chaque calque a un nom et une icône pour le type de calque. Vous avez peut-être remarqué que certaines de ces icônes apparaissent dans la barre d'outils. Vous pouvez sélectionner cet outil dans la barre d'outils ou utiliser le raccourci clavier pour créer plus de calques de ce type.

Explore-design-files-%E2%80%93-Figma-Learn-Help-Center


Hiérarchie et ordre des calques

La superposition des calques sur la zone de travail est directement influencée par leur ordre dans le panneau des calques.

Prenons l'exemple suivant :
Dans la configuration ci-dessous, le calque de couleur bleu se trouve en haut de la pile. Cela signifie qu'il apparaît au-dessus des autres calques sur la zone de travail, car il est également placé en haut dans le panneau des calques. À l'inverse, le calque de couleur orange, étant le dernier dans l'ordre du panneau des calques, se retrouve derrière tous les autres sur la zone de travail.


Panneau des calques Zone de travail
pannel-layers example-layers-order

Table of Contents

  • Les pages
  • Les calques
  • Types de calques
  • Hiérarchie et ordre des calques