Formation en conception Web avec Framer

Leçon 1 • Créer et gérer des projets

Enseigne la création de projets, l'organisation des fichiers et l'historique des versions. Lie les habitudes de travail dans l'espace 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 construire des primitives d'interface utilisateur. Initie les étudiants aux outils de dessin utilisés dans tous les projets.

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 à 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. Assure que les étudiants peuvent styliser 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 dimensions 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 mise en page 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 ordinateur de bureau. Produit des mises en page 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 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 style

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. Lie la gestion des styles à des systèmes de design évolutifs et maintenables.

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

Explique l'exposition des propriétés de texte, d'image et booléennes pour les remplacements au niveau de l'instance. 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 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, d'actif, de désactivé et autres états d'interface utilisateur. Permet de créer des composants interactifs et conscients des états 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ébordement

Enseigne la direction du défilement, le recadrage du 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 d'appui avec l'assouplissement et la 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 les cadres avec correspondance des 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 à partir d'API REST dans des composants de code à l'aide de 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 offre.

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 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 dans le 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 • Principes 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 à la conception de pages dynamiques.

Leçon 3 • Listes et grilles de collections

Enseigne la construction de composants de liste de collection qui se répètent par entrée CMS. Produit des fils d'actualité, 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 le nom du site, le favicon, les polices globales et la configuration des métadonnées Open Graph. Assure que chaque site publié a une image de 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 travail 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 sécurisé et itératif sans perturber le site de production en direct.

Leçon 1 • Remise du design et collaboration avec les développeurs

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

Leçon 2 • Intégrations tierces

Enseigne l'intégration d'analytiques, de services de formulaires, de widgets de clavardage et d'outils de paiement par code personnalisé. Étend les sites Framer avec des fonctionnalités tierces de qualité professionnelle prêtes pour la fabrication.

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 la rapidité. Réduit les tâches répétitives et maximise la qualité du résultat par heure de travail de design.

Leçon 4 • Meilleures pratiques d'accessibilité

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