Formation en web design 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. Relie les habitudes de travail à une gestion de projet efficace à long terme.

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

Couvre les outils rectangle, ellipse, ligne et plume pour la construction de primitives d'interface utilisateur. Fonde les étudiants dans les outils de dessin utilisés tout au long de chaque projet.

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

Présente les cadres comme conteneur principal et explique l'empilement et l'imbrication des calques. Fournit la logique structurelle nécessaire pour 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 styliser un texte lisible et cohérent avec la marque dès le début.

Leçon 1 • Contraintes et épinglage

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

Leçon 2 • Espacement et rythme visuel

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

Leçon 3 • Points de rupture et cadres responsives

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

Leçon 4 • Grilles et colonnes

Couvre les grilles de colonnes, les grilles de lignes et les superpositions de grilles personnalisées pour des mises en page structurées. Enseigne la discipline d'alignement essentielle pour un résultat de design professionnel.

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

Couvre la création de tokens 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 surcharges de composants

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

Leçon 3 • Organiser et partager des composants

Enseigne l'organisation des bibliothèques 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 de composants

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

Leçon 1 • Lier des cadres et la 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ébordement

Enseigne la direction de défilement, le rognage par débordement et le comportement des éléments collants. Permet des zones de contenu défilables réalistes et des modèles de navigation fixes.

Leçon 3 • Animations de survol et de clic

Explique la configuration des 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 fluides entre les cadres avec correspondance de calques. É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 la récupération de données depuis des API REST à l'intérieur des composants de code en utilisant useEffect. Permet des prototypes qui affichent un contenu dynamique réel ou réaliste.

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

Enseigne l'écriture de composants fonctionnels React qui apparaissent dans le canevas de Framer. Permet la création d'éléments d'interface utilisateur au-delà de ce que l'éditeur visuel fournit.

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 minimales en codage 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 à l'intérieur des composants de code. Produit des animations fluides basées sur la physique qui ne sont pas réalisables dans l'éditeur visuel.

Leçon 1 • Filtrage et recherche CMS

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

Leçon 2 • Principes fondamentaux du CMS Framer

Présente les collections CMS, les champs et les flux de travail de saisie de contenu. Établit les bases du modèle de données nécessaires pour toute conception de page dynamique.

Leçon 3 • Listes et grilles de collections

Enseigne la construction 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 pilotés par les données automatiquement.

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

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

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 du plan du site. Maximise la découvrabilité organique pour chaque site Framer publié.

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

Enseigne l'utilisation des liens de prévisualisation, des environnements de préproduction et des contrôles de publication. Permet un déploiement itératif sûr sans perturber le site de production en direct.

Leçon 1 • Passation 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 passation développeur. 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 des flux de travail et plugins

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

Leçon 4 • Bonnes pratiques d'accessibilité

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