• 1. Einführung
    • Die Werkzeuge des Entwicklers
  • 2. HTML
    • Syntax
      • Inline- oder Block-Tag?
      • Die nützlichsten Tags
      • Tags mit Attributen
    • Une page html
      • Die Namensgebung in WEB
      • Eine HTML-Datei erstellen
      • Grundlegende Struktur
  • 3. CSS
    • Die Syntax
      • Die Units
      • Die Selektoren
    • Une feuille css
      • CSS-Dokument erstellen
      • CSS binden
    • Positionen
    • Flexbox
    • Grid
    • Responsive (Media queries)
  • 4. JS
    • Der Syntax
      • Variablen
    • Ein JS-File
    • Übungen
  • 5. CMS
    • Einführung zu CMS
    • Installation de XAMPP (serveur local)
    • Joomla
      • Architektur
      • Das Thema Kind
      • Die Module
      • Die Menüs
      • Custom fields
      • Sprachliche Überschneidungen
      • Tips&tricks
    • Wordpress
      • Initiation d'un wordpress
      • Le thème enfant
  • 6. SEO
    • Warum Semantik?
  • 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

Inhaltsverzeichnis

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