• 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

Comprendre l'interface

Les points clés de l'interface

Les fichiers de design ont quatre zones distinctes :

  • une barre d'outils
  • une barre latérale gauche
  • une barre latérale droite
  • le canvas, soit la zone de travail

La barre d'outils

La barre d'outils contient une sélection d'outils et d'actions importants. Il y a quatre groupes : outils, actions, collaboration et options de vue

tools-bar

Outils (tools) :

  • Passez d'un outil à l'autre pour explorer le fichier, sélectionner et déplacer des calques, ou les redimensionner.
  • Trouvez des outils pour créer des cadres, des formes, du texte, et d'autres calques ci-dessous. Ce seront les éléments de base de vos conceptions.
  • Utilisez le menu pour accéder à davantage de fonctions, d'actions, et de paramètres. Ou ajustez vos préférences, comme le mode sombre ou le comportement de défilement.

Actions :

  • Accédez aux actions au niveau du fichier, telles que les bibliothèques et l'historique des versions.
  • Ou, avec des calques sélectionnés, accédez aux fonctions pour combiner des calques. Comme l'application de masques, la création de composants, ou l'édition de formes.

Collaboration :

  • Trouvez des outils pour partager vos conceptions et collaborer en temps réel. Partagez le fichier, voyez qui d'autre est ici, discutez par audio, et plus encore.

Options de vue :

  • Consultez les prototypes ou ajustez votre zoom personnel et les options de vue. Les modifications que vous apportez ici s'appliquent uniquement à votre vue.

Barre latérale gauche

La barre latérale gauche vous donne accès :

  • aux calques (layers)
  • aux pages (pages)
  • aux éléments (assets) Simplified%20UI%20of%20left%20sidebar%20highlighted

Consultez une liste des pages dans le fichier, sélectionnez une page à afficher, puis explorez les calques sur la toile. Utilisez le panneau des éléments pour afficher les composants locaux ou trouver des composants provenant de bibliothèques.


Barre latérale droite

La barre latérale de droite est l'endroit où vous pouvez accéder à plus d'informations sur vos conceptions. Vous pouvez explorer les propriétés de votre sélection actuelle. C'est ici que vous éditerez et intégrer les spécifications de vos créations. Vos autorisations détermineront ce que vous pouvez voir dans la barre latérale et les actions que vous pouvez effectuer.

Right%20sidebar%20with%20edit%20access


Zone de travail (canvas) :

La zone de travail est où vous disposerez les calques pour créer vos conceptions.

Simplified%20UI%20with%20canvas%20highlighted

Pour se déplacer sur la zone de travail :

Utilisez le déplacement pour naviguer dans le fichier et voir ce qui se trouve d'autre sur la toile.

  • Souris : Maintenez enfoncée la barre d'espace, puis cliquez et faites glisser pour vous déplacer autour de la toile.
  • Trackpad : Avec deux doigts, faites glisser dans n'importe quelle direction pour déplacer la toile. Figma utilise les paramètres de direction de défilement par défaut de votre ordinateur.
Zoom avant et arrière :

Zoom avant pour examiner de plus près, ou zoom arrière pour voir l'ensemble. Consultez le niveau de zoom actuel dans le coin supérieur droit de l'écran.

  • Souris : Maintenez enfoncées les touches ⌘ Command/Ctrl et espace, puis faites défiler vers le bas pour zoomer et vers le haut pour dézoomer.
  • Trackpad : Pincez deux doigts ensemble pour dézoomer ou `étirez deux doigts séparément pour zoomer.

Move%20around%20the%20canvas


En résumé

La barre d'outils vous offre les outils et les fonctions nécessaires pour créer et combiner des calques. Vous pouvez ensuite disposer ces calques sur la zone de travail pour créer vos conceptions.

La barre latérale gauche est l'endroit où vous pouvez explorer et organiser vos calques.

La barre latérale droite est l'endroit où vous pouvez voir les propriétés des calques.


Raccourci clavier

  • Télécharger le PDF complet
  • lien vers l'article du PDF

Inhaltsverzeichnis

  • La barre d'outils
  • Barre latérale gauche
  • Barre latérale droite
  • Zone de travail (canvas) :
  • En résumé
  • Raccourci clavier