Cours Framer

Leçon 1 • Création et gestion de projets

Enseigne la création de projets, l'organisation des fichiers et l'historique des versions. Lie les habitudes de travail à une gestion de projet efficace à long terme.

Leçon 2 • Outils de design de base et formes

Couvre les outils rectangle, ellipse, ligne et plume pour créer des primitives d'UI. Ancre les étudiants dans les outils de dessin utilisés dans chaque projet.

Leçon 3 • Cadres, calques et hiérarchie

Présente les cadres comme conteneurs principaux et explique l'ordre d'empilement et l'imbrication des calques. Fournit la logique structurelle nécessaire à tout travail de design ultérieur.

Leçon 4 • Typographie et style de texte

Enseigne l'insertion de texte, la sélection de polices et les propriétés typographiques. Garantit que les étudiants peuvent styler un texte lisible et cohérent avec la marque dès le départ.

Leçon 1 • Contraintes et ancrage

Explique comment les contraintes ancrent les éléments par rapport à leur cadre parent. Permet des designs qui se redimensionnent de manière prévisible sur différentes tailles d'écran.

Leçon 2 • Espacement et rythme visuel

Couvre les jetons d'espacement, les marges cohérentes et les principes de rythme visuel. Renforce la discipline de disposition qui élève la qualité et la cohérence du design.

Leçon 3 • Points de rupture et cadres réactifs

Enseigne la création de points de rupture et le redimensionnement des cadres pour mobile, tablette et bureau. Produit des dispositions qui s'adaptent de manière fluide à toute largeur de fenêtre.

Leçon 4 • Grilles et colonnes

Couvre les grilles de colonnes, les grilles de lignes et les superpositions de grilles personnalisées pour des dispositions structurées. Enseigne la discipline d'alignement essentielle pour un rendu professionnel.

Leçon 1 • Construire un système de couleurs et de styles

Couvre la création de jetons de couleur, de styles de texte et de styles d'effet pour une cohérence à l'échelle du système. Relie la gestion des styles à des systèmes de design évolutifs et maintenables.

Leçon 2 • Propriétés et substitutions de composants

Explique comment exposer les propriétés de texte, d'image et booléennes pour les substitutions au niveau des instances. Donne aux équipes des composants flexibles qui s'adaptent sans casser le maître.

Leçon 3 • Organiser et partager des composants

Enseigne l'organisation de la bibliothèque de composants, la recherche et les flux de travail de partage en équipe. Prépare les étudiants à collaborer sur des systèmes de design partagés à grande échelle.

Leçon 4 • Variantes et états des composants

Enseigne la création de variantes pour les états de survol, actif, désactivé et autres états d'UI. Permet de créer des composants interactifs et conscients de leur état sans écrire de code.

Leçon 1 • Lier des cadres et navigation

Couvre la création de liens entre les cadres pour simuler la navigation entre les écrans. Construit le flux de prototype fondamental utilisé dans tout travail d'interaction ultérieur.

Leçon 2 • Interactions de défilement et de dépassement

Enseigne la direction de défilement, le rognage du dépassement et le comportement des éléments collants. Permet de créer des zones de contenu défilables réalistes et des schémas de navigation fixes.

Leçon 3 • Animations de survol et de clic

Explique comment configurer les déclencheurs de survol, de clic et de tap avec des courbes d'assouplissement et une durée. Produit des micro-interactions qui rendent les prototypes soignés et réalistes.

Leçon 4 • Animation intelligente et transitions

Couvre l'animation intelligente pour des transitions transparentes entre des calques correspondants. Élève la fidélité du prototype à un design de mouvement de qualité quasi-production.

Leçon 1 • Connexion à des sources de données externes

Enseigne comment récupérer des données depuis des API REST dans des composants de code à l'aide de useEffect. Permet de créer des prototypes qui affichent un contenu dynamique réel ou réaliste.

Leçon 2 • Construire des composants de code personnalisés

Enseigne comment écrire des composants fonctionnels React qui apparaissent dans le canevas de Framer. Permet de créer des éléments d'interface au-delà de ce que fournit l'éditeur visuel.

Leçon 3 • Introduction à l'éditeur de code de Framer

Couvre l'éditeur de code intégré, la structure des fichiers et les bases de TypeScript dans Framer. Prépare les étudiants avec les connaissances de codage minimales nécessaires pour les composants personnalisés.

Leçon 4 • Animations Framer Motion dans le code

Couvre l'utilisation des API animate, variants et gesture de Framer Motion dans les composants de code. Produit des animations fluides basées sur la physique, impossibles à réaliser dans l'éditeur visuel.

Leçon 1 • Filtrage et recherche CMS

Couvre l'ajout de contrôles de filtre et de champs de recherche qui interrogent les collections CMS. Offre aux utilisateurs une découverte de contenu interactive sans logique backend personnalisée.

Leçon 2 • Fondamentaux du CMS Framer

Présente les collections CMS, les champs et les flux de travail de saisie de contenu. Établit la base du modèle de données nécessaire pour tout design de page dynamique.

Leçon 3 • Listes et grilles de collections

Enseigne la création de composants de liste de collections qui se répètent par entrée CMS. Produit des flux de blog, des grilles de produits et des galeries de portfolio à partir de données en direct.

Leçon 4 • Lier les données CMS au design

Couvre la connexion des champs de collection aux calques de texte, d'image et de lien sur le canevas. Transforme les designs statiques en modèles basés sur les données automatiquement.

Leçon 1 • Paramètres du site et métadonnées

Couvre le nom du site, le favicon, les polices globales et la configuration des métadonnées Open Graph. Garantit que chaque site publié a une marque et des données de partage social correctes.

Leçon 2 • Configuration de domaine personnalisé

Enseigne la connexion d'un domaine personnalisé, la configuration des enregistrements DNS et l'activation de HTTPS. Prépare les étudiants à lancer des sites professionnels sur leur propre domaine.

Leçon 3 • SEO et optimisation des pages

Couvre les titres SEO par page, les descriptions, les URL canoniques et la génération de sitemap. Maximise la découvrabilité organique pour chaque site Framer publié.

Leçon 4 • Flux de publication et préproduction

Enseigne l'utilisation des liens d'aperçu, des environnements de préproduction et des contrôles de publication. Permet un déploiement itératif sécurisé sans perturber le site en production.

Leçon 1 • Remise des fichiers de design et collaboration développeur

Explique l'utilisation du panneau d'inspection de Framer, des paramètres d'exportation et des liens de partage pour la remise aux développeurs. Rationalise la transition du design au développement de production.

Leçon 2 • Intégrations tierces

Enseigne l'intégration d'analytiques, de services de formulaires, de widgets de chat et d'outils de paiement via du code personnalisé. Étend les sites Framer avec des fonctionnalités tierces de qualité production.

Leçon 3 • Optimisation du flux de travail et plugins

Couvre les raccourcis clavier, l'installation de plugins et les opérations par lots pour gagner du temps. Réduit les tâches répétitives et maximise la qualité du rendu par heure de travail de design.

Leçon 4 • Bonnes pratiques d'accessibilité

Couvre les labels ARIA, la navigation au clavier, le contraste des couleurs et la gestion du focus. Garantit que les sites publiés respectent les normes de design inclusif pour tous les utilisateurs.