90-Day Framer Web Editing Tool Study Plan

 

A comprehensive 90-Day Framer Web Editing Tool Study Plan, expanded into a complete curriculum with detailed lecture text and step-by-step instructions for every single day and topic.

Phase 1: Foundations (Days 1–20)

Day 1: Interface Basics

• Lecture Text: Framer is a canvas-based design and web-publishing tool that bridges graphic design and frontend web architecture. Understanding the user interface is your first step. The interface is split into three primary zones: the Left Sidebar (Layers, Pages, Assets, CMS, and Components), the central Canvas (where you design visual structures), and the Right Properties Panel (where you control styles, dimensions, positioning, and layout rules).

• Instruction:

  1. Open Framer and click + New Project from the Dashboard.

  2. Locate the navigation bar at the top left. Click the Frame tool (Hotkey: F).

  3. Click and drag on the central canvas to draw a desktop workspace container.

  4. Practice canvas navigation: hold the Spacebar and click-drag to Pan. Use Cmd/Ctrl + Scroll or Cmd/Ctrl + + / - to Zoom in and out. Press Shift + 1 to zoom to fit all canvas content.

Day 2: Frames

• Lecture Text: Unlike static design applications where artboards are mere display boxes, Framer Frames are HTML <div> elements under the hood. A Frame acts as a structural container that holds content, defines visual bounds, and determines layout structure. Learning to nest frames inside other frames is fundamental to building structured web pages.

• Instruction:

  1. Select the Frame tool (F). Click directly on the canvas to insert a default desktop frame (1200px width).

  2. Go to the Right Properties Panel. Under Size, set the width to 1440px and height to 900px.

  3. Double-click the frame name in the top-left corner of the canvas (or in the Left Layers Panel) and rename it to Hero Section.

  4. Draw a smaller frame inside Hero Section. Observe in the Layers Panel how the new frame automatically nests inside the primary frame. Rename the nested frame to Card Container.

Day 3: Shapes

• Lecture Text: Vector graphics and decorative shapes form the visual foundations of web UI, including background accents, badges, callout cards, and divider lines. Framer provides native vector shape tools that render clean CSS styling without requiring heavy raster images.

• Instruction:

  1. Press R to select the Rectangle tool. Draw a rectangle inside your main Frame.

  2. In the Right Panel, find the Fill section. Click the color box and change the color to #0066FF.

  3. Find the Border / Stroke section. Click + to add a border, set its color to #000000, style to Solid, and width to 2px.

  4. Locate the Radius setting. Type 16 to create rounded corners (or click the individual corner icon to set custom radii per corner).

  5. Select the Circle/Oval tool (O) and draw a circle. Adjust its opacity to 50% under the Style panel.

Day 4: Text Tool

• Lecture Text: Web text in Framer maps directly to CSS typography properties (font-family, font-size, line-height, letter-spacing). Establishing strong typography hierarchy using distinct sizes and weights ensures readability and visual structure across your pages.

• Instruction:

  1. Select the Text tool (T) and click once on the canvas. Type: Build stunning websites fast.

  2. In the Right Panel under Text, change the Font to Inter (or your preferred typeface) and set the Weight to Bold.

  3. Set the Font Size to 48px and Line Height to 1.2 (120%). Set Alignment to Center.

  4. Press T again and click below your heading. Type a paragraph of body copy: Framer combines design and publishing into a single seamless visual workflow.

  5. Set this body text to 16px, Weight Regular, and Line Height 1.5.

Day 5: Colors

• Lecture Text: Consistent color usage reinforces visual branding and prevents style fragmentation. Framer allows you to store color values as reusable global styles (Variables). Updating a global color style updates every element linked to it across your entire site.

• Instruction:

  1. Select any element on your canvas with a Fill color.

  2. In the Right Panel, click the Fill color preview square to open the color picker.

  3. Choose your desired brand primary color (e.g., #6366F1).

  4. Click the Grid / Color Styles icon (four dots) in the top-right corner of the color picker popover.

  5. Click the + button, type Brand/Primary, and press Enter to save the color style.

  6. Select a secondary element, open its Fill popover, click Styles, and choose Brand/Primary to apply it consistently.

Day 6: Layers Panel

• Lecture Text: The Layers Panel (left sidebar) displays your design’s Document Object Model (DOM) tree. Clean layer naming, logical grouping, and explicit hierarchy make complex visual designs maintainable and easy to iterate on.

• Instruction:

  1. Press Cmd/Ctrl + 1 to ensure the Layers Panel is open on the left sidebar.

  2. Select two or three elements on your canvas by holding Shift and clicking them.

  3. Right-click the selection and choose Group (Hotkey: Cmd/Ctrl + G) or Stack (Hotkey: Option/Alt + Cmd/Ctrl + G).

  4. Double-click the newly created group layer in the panel and rename it to Feature Card.

  5. Click and drag layers up or down in the panel to reorder Z-index stacking (elements higher in the panel overlap elements below them).

Day 7: Alignment Tools

• Lecture Text: Precision alignment creates visual balance. Framer provides automated alignment controls to snap elements along shared X or Y axes and space objects with mathematical accuracy.

• Instruction:

  1. Create three separate frame elements on your canvas and scatter them unevenly.

  2. Click and drag a selection box over all three elements to select them together.

  3. Look at the top of the Right Properties Panel for the alignment buttons.

  4. Click Align Top to align their top edges on the horizontal plane.

  5. Click Distribute Horizontally to ensure equal horizontal spacing between each element.

  6. Select a single frame inside a parent container and click Align Center and Align Middle to center it within the parent.

Day 8: Grids

• Lecture Text: Layout grids establish structural boundaries, column widths, and gutter margins for web pages. They guide placement for text columns, images, and visual components to maintain alignment across multiple device screens.

• Instruction:

  1. Select your main desktop page Frame (1440px wide).

  2. In the Right Panel, locate the Layout or Grid section and click +.

  3. Set the Grid Type to Columns. Set the column count to 12.

  4. Set the Margin (outer margin) to 80px and the Gutter (space between columns) to 24px.

  5. Drag your header, text blocks, and shape containers so their left and right edges snap precisely to the column boundaries.

Day 9: Components

• Lecture Text: Components are reusable UI assets. Modifying the master component automatically pushes changes to every instance across your project, saving time and keeping your design system unified.

• Instruction:

  1. Design a button structure: create a Frame, add a text layer inside reading Get Started, and set a background fill.

  2. Right-click the Frame and select Create Component (Hotkey: Cmd/Ctrl + K). Name it Primary Button.

  3. Notice the canvas switches to the Component Isolation View. Click Back to Canvas in the top left.

  4. Duplicate the component instance (Cmd/Ctrl + D) three times across your canvas.

  5. Double-click any instance to edit the master component. Change the fill color to red; observe all instances update instantly.

Day 10: Variants

• Lecture Text: Variants let you define different interactive or structural states for a single component (such as Default, Hover, Pressed, and Disabled states) within one master element.

• Instruction:

  1. Double-click your Primary Button component to enter component isolation mode.

  2. In the Right Panel, find the Variants section and click + to add a new variant. Rename it Hover.

  3. Select the Hover variant frame and change its fill color to a darker shade.

  4. Add another variant by clicking + and rename it Disabled. Set its fill color to gray (#CCCCCC) and text color to dark gray.

  5. Click Back to Canvas. Select an instance on your main canvas and use the Variant dropdown in the Right Panel to switch between Default, Hover, and Disabled.

Day 11: Images

• Lecture Text: Images in Framer function as background fills on Frames rather than floating elements. This prevents layout distortion and makes cropping, masking, and responsiveness straightforward.

• Instruction:

  1. Drag an image file (.jpg or .png) directly from your desktop into the Framer canvas. Framer automatically embeds it within a Frame with an Image Fill.

  2. Select the frame, go to Fill in the Right Panel, and click the image thumbnail to open image settings.

  3. Switch the fill mode between Cover, Contain, and Fill to see how the image scales relative to its frame boundaries.

  4. Change the frame's Radius to 100% or 12px to observe how frames automatically mask their image fills.

  5. Build a 3-image photo grid by placing three equal-sized image frames side-by-side.

Day 12: Icons

• Lecture Text: Scalable Vector Graphics (SVG) ensure icon graphics render sharply on crisp, high-DPI retina displays without ballooning file sizes.

• Instruction:

  1. Open an icon source (or copy an SVG code snippet to your clipboard).

  2. Paste (Cmd/Ctrl + V) the SVG code directly onto your Framer canvas.

  3. Alternatively, open the Insert Panel (Hotkey: I), navigate to Icons, and drag a native icon component (e.g., Feather or Lucide icons) onto your canvas.

  4. Select the icon, navigate to the Right Panel, and adjust its Color, Size (e.g., 24x24px), and Stroke Width.

Day 13: Basic Prototyping

• Lecture Text: Prototyping connects static frames into interactive user flows. Triggers (such as On Click or On Hover) execute transitions between screens to simulate a live application or website.

• Instruction:

  1. Create two distinct main frames side-by-side: Home (Frame 1) and About (Frame 2).

  2. Place a Primary Button component inside the Home frame.

  3. Select the button. Look for the circular connector handle on its right border (or open the Interaction section in the Right Panel and click +).

  4. Click and drag the connector line from the button to the About frame.

  5. In the interaction popover, set Trigger to On Click, Target to About, and Transition to Magic Motion or Ease-In-Out.

Day 14: Preview Mode

• Lecture Text: Testing interactive flows in Preview mode ensures navigation routes, transition speeds, and layout hierarchies behave as expected before publishing.

• Instruction:

  1. Click the Play / Preview button in the top-right toolbar of the Framer window (Hotkey: Cmd/Ctrl + P).

  2. Interact with the preview window by clicking your button to test the transition from Home to About.

  3. Toggle between Desktop, Tablet, and Mobile preview frames using the viewport selector at the top of the preview window.

  4. Close the preview window (Esc) to return to editing mode and adjust any navigation errors observed.

Day 15: Responsive Design Basics

• Lecture Text: Modern web design requires layouts to adapt seamlessly across different viewports. Framer uses structural breakpoints to reconfigure layout rules dynamically from desktop down to mobile screens.

• Instruction:

  1. Select your primary canvas frame (Home).

  2. In the top bar or Right Panel, click the Breakpoints icon (+) and choose Tablet (768px) and Mobile (390px).

  3. Observe how primary styles inherit from Desktop down to smaller viewports.

  4. Select the Mobile breakpoint. Resize the primary heading text size down from 48px to 28px.

  5. Notice that edits made on smaller inherited breakpoints do not break or override your primary Desktop layout.

Days 16–20: Build a Simple 3-Page Website Prototype

• Lecture Text: Consolidate your foundational knowledge by building a functional 3-page website prototype featuring Home, About, and Contact pages.

• Instruction:

  • Day 16 (Structure): Create three main desktop frames (1440px). Establish a top navigation bar (Logo text + 3 page nav links) and turn it into a reusable component across all pages.

  • Day 17 (Home Page): Build a Hero section (Heading, Subheading, Call-To-Action button, Hero Image) using Grids and vector shapes. Apply dynamic global color styles.

  • Day 18 (About Page): Layout a 2-column About section (Profile image frame on the left, text description and bio on the right).

  • Day 19 (Contact Page): Design a user contact form section featuring text inputs (Name, Email, Message frame) and a Submit Button component with interactive hover states.

  • Day 20 (Flow & Polish): Link navigation buttons across all pages using Interaction links (On Click). Open Preview Mode (Cmd/Ctrl + P) and verify all pages navigate correctly.

Phase 2: Core Design & Interactivity (Days 21–40)

Day 21: Auto Layout (Stacks)

• Lecture Text: Auto Layout in Framer is called Stack. Stacks automatically manage spacing, alignment, and distribution of child elements dynamically, mimicking flexbox layout engines in modern CSS.

• Instruction:

  1. Select two or more elements (e.g., an icon frame and a text layer).

  2. Press Shift + A or right-click and choose Add Stack.

  3. In the Right Panel under Stack, set direction to Horizontal (Row).

  4. Set Gap to 12px and Alignment to Center.

  5. Double-click the text layer inside the Stack and change the text length; observe how the surrounding frame resizes automatically without manual positioning.

Day 22: Constraints

• Lecture Text: Constraints dictate how nested elements resize or reposition relative to their parent container frame when viewports expand or contract.

• Instruction:

  1. Create a parent frame (800px width) and place a small child frame inside it.

  2. Select the child frame and look at the Size / Constraints panel on the right.

  3. Set Width to Relative (50%) or Fill (100%).

  4. Set Constraints to Pin Left and Pin Right.

  5. Click and drag the handles of the parent frame to resize it; observe how the child frame scales proportionally based on your constraint rules.

Day 23: Padding

• Lecture Text: Padding creates negative space inside a container frame, pushing internal content inward away from the frame’s border edges.

• Instruction:

  1. Select a Stack container (e.g., a card or button container).

  2. Locate the Padding section in the Right Panel.

  3. Type 24 into the unified padding field to apply 24px of equal space on Top, Right, Bottom, and Left.

  4. Click the Per-side Padding icon to unlock individual values. Set Top/Bottom padding to 12px and Left/Right padding to 32px.

Day 24: Spacing

• Lecture Text: Consistent vertical and horizontal rhythm relies on controlled spacing tokens. Using Stacks removes manually guessed coordinates, setting exact gap values between adjacent items instead.

• Instruction:

  1. Select a vertical Stack containing a card title, body description, and CTA button.

  2. Under the Stack property section, locate Gap.

  3. Change the Gap value from 10px to 20px and observe all internal elements adjust instantly with equal distribution.

  4. Change Distribution from Start to Space Between to push items to the top and bottom bounds of the parent container automatically.

Day 25: Interactive Components

• Lecture Text: Interactive components respond locally to user input triggers (like hovering, clicking, or pressing) without navigating away to a new page frame.

• Instruction:

  1. Create a card component with a title, image fill, and background color #FFFFFF.

  2. Inside component isolation mode, add a secondary Variant named Hover.

  3. On the Hover variant, set the background color to #F0F4FF and apply an elevated Box Shadow in the Style panel.

  4. Draw an interaction connector line from the Primary variant frame to the Hover variant frame. Set the trigger to While Hovering with a Spring transition preset.

Day 26: Scroll Groups

• Lecture Text: Scroll Groups allow specific rectangular regions of a page to scroll content horizontally or vertically within defined boundaries, while the rest of the web page remains fixed.

• Instruction:

  1. Create a wide horizontal row of 5 image cards (2000px total width) inside a parent container (800px width).

  2. Select the row of cards, right-click, and choose Wrap in Scroll Group (or set Overflow to Scroll in the properties panel).

  3. In the Right Panel under Scroll, set Direction to Horizontal.

  4. Open Preview Mode (Cmd/Ctrl + P) and drag the card row horizontally to verify smooth scroll physics.

Day 27: Overlay

• Lecture Text: Overlays render content layers (such as slide-out panels, pop-up dialogs, or dropdown menus) on top of the active page view without requiring a full page redirect.

• Instruction:

  1. Create a new standalone Frame on your canvas (400px x 600px) and style it as a popup notification or mobile menu.

  2. Return to your primary page frame and select a button labeled Open Menu.

  3. Add an interaction: set Trigger to On Click and Action to Overlay.

  4. Select your standalone popup frame as the Overlay source. Set Position to Center or Slide In Right, and check Dismiss on Backdrop Click.

Day 28: Smart Animate (Magic Motion)

• Lecture Text: Smart Animate tracks matching layer names across two different frames and automatically interpolates changes in position, size, rotation, opacity, and color into smooth, continuous transitions.

• Instruction:

  1. Create Frame A with a small square layer named Box placed in the top-left corner.

  2. Duplicate Frame A to create Frame B. On Frame B, move Box to the bottom-right corner, increase its size, and change its fill color to green.

  3. Ensure the layer name (Box) remains identical on both frames.

  4. Add an interaction link from Frame A to Frame B on Click. Set transition type to Magic Motion (or Smart Animate) with a duration of 0.6s. Preview the smooth animated path.

Day 29: Plugins

• Lecture Text: Plugins extend Framer's core capabilities, allowing you to quickly import royalty-free photography, icon sets, vector assets, placeholder text, and external design files directly onto your canvas.

• Instruction:

  1. Open the Insert Panel (I) or navigate to the main Framer menu and select Plugins.

  2. Search for and launch a popular asset plugin (e.g., Unsplash or Feather Icons).

  3. Select a frame on your canvas, search for a keyword in the Unsplash plugin (e.g., Architecture), and click an image to populate the fill instantly.

  4. Practice importing vector icons using an icon plugin.

Day 30: Design Tokens

• Lecture Text: Design Tokens translate raw design values (colors, text styles, radii, spacing) into centralized reusable programmatic variables, establishing a single source of truth across a project.

• Instruction:

  1. Go to the Assets Panel on the left sidebar.

  2. Expand Text Styles and click + to define a new typography token. Name it Heading/H1 (Inter, Bold, 40px, 1.2 Line Height).

  3. Apply Heading/H1 to all primary headings across your design frames.

  4. Edit the Heading/H1 token from the Assets panel; observe every linked heading text layer across all frames update instantly.

Day 31: Collaboration

• Lecture Text: Framer supports real-time multi-user editing. Team members can simultaneously work on canvas frames, edit component systems, and refine layouts in a shared cloud workspace.

• Instruction:

  1. Look at the top-right toolbar and click the Share button.

  2. Type a teammate's email address or set link permissions to Anyone with link can edit.

  3. Copy the project link and open it in a secondary browser window (or send it to a colleague).

  4. Observe live multi-user cursors appear on canvas in real-time as edits occur.

Day 32: Comments

• Lecture Text: Contextual commenting allows reviewers, developers, and client stakeholders to leave targeted feedback pinned directly to visual canvas elements.

• Instruction:

  1. Select the Comment Tool from the toolbar (Hotkey: C).

  2. Click directly on a specific canvas element (e.g., a call-to-action button).

  3. Type a comment: Should we change this button background to green? and press Enter.

  4. Practice tagging a team member using @name, resolving a comment, and filtering resolved feedback in the Left Comments Panel.

Day 33: Version History

• Lecture Text: Version History automatically logs snapshots of your project over time, making it easy to audit changes, compare design variations, or restore past work safely.

• Instruction:

  1. Click the main project file menu icon in the top-left corner.

  2. Navigate to Version History.

  3. Browse through previous time-stamped revision points in the list.

  4. Select an earlier version snapshot to view a live preview of that past project state.

  5. Practice clicking Restore Version or duplicate the snapshot to safely branch off a historical design state.

Day 34: Export Assets

• Lecture Text: Exporting individual visual elements into optimized production-ready web formats (PNG, SVG, JPG, WebP) prepares static assets for external handoff.

• Instruction:

  1. Select a logo vector or image frame on your canvas.

  2. Scroll to the bottom of the Right Properties Panel and locate the Export section.

  3. Click + to add an export setting. Select Format (e.g., SVG for vectors, WebP/PNG for images) and scale factor (1x, 2x).

  4. Click the Export [Element Name] button to download the asset to your local hard drive.

Days 35–40: Build a 5-Page Responsive Website Prototype

• Lecture Text: Combine your core design skills, auto layout stacks, interactive components, overlays, and smart animate transitions into a fully interactive 5-page responsive website project.

• Instruction:

  • Day 35 (Site Structure): Set up 5 primary page frames: Home, Features, Pricing, Blog, and Contact. Add Desktop and Mobile breakpoints for all 5 pages.

  • Day 36 (Navigation & Overlays): Build an Auto Layout header component. Integrate a mobile slide-out menu drawer overlay linked to a hamburger icon button for mobile viewports.

  • Day 37 (Interactive Features Page): Build a features showcase section using interactive hover components and tabbed view switchers.

  • Day 38 (Pricing Toggle): Create a Pricing page featuring a custom interactive toggle switch component that toggles display values between Monthly and Annual pricing cards.

  • Day 39 (Blog & Smart Animate): Build a Blog list section with cards that expand smoothly into detailed article views using Magic Motion / Smart Animate.

  • Day 40 (System Audit & QA): Review all constraints, stack gaps, overlay links, and mobile breakpoints in Preview mode (Cmd/Ctrl + P) to verify cross-device consistency.

Phase 3: Creative Projects (Days 41–65)

Day 41: Wireframes

• Lecture Text: Low-fidelity wireframing focuses purely on layout architecture, structural placement, information hierarchy, and content flows before introducing high-fidelity visual styling like colors or typography.

• Instruction:

  1. Create a blank Desktop Frame.

  2. Set up a grayscale color palette using neutral gray fills (#E5E5E5, #CCCCCC, #1A1A1A).

  3. Use simple frames and basic text blocks to lay out structural placeholders for a landing page: Nav bar block, Hero section box, 3-column feature blocks, and a Footer frame.

  4. Avoid applying imagery or brand colors—focus strictly on spatial structure and layout balance.

Day 42: UI Kits

• Lecture Text: UI Kits provide ready-made libraries of pre-built UI components (inputs, cards, navigation items, buttons). Leveraging UI kits speeds up production workflows and establishes consistent design standards.

• Instruction:

  1. Open the Insert Panel (I) and browse through Framer's built-in Sample Kits or import an external Material Design UI library.

  2. Drag pre-constructed UI kit components (e.g., text fields, toggle switches, navigation bars) directly onto your canvas.

  3. Inspect the structural breakdown of these pre-built components in the Right Panel to learn how advanced Auto Layout and state settings are put together.

Day 43: Style Guide

• Lecture Text: A visual Style Guide centralizes brand rules—including typography scales, color swatches, button styles, icon sets, and surface elevation rules—into a single documentation canvas frame.

• Instruction:

  1. Create a dedicated canvas frame named Style Guide.

  2. Lay out sections for Colors (Primary, Secondary, Neutrals), Typography (H1, H2, H3, Body, Caption), and UI Elements (Buttons, Badges, Form Inputs).

  3. Ensure every displayed color and text sample is explicitly linked to your project's global Variables / Styles panel.

Day 44: Design Systems

• Lecture Text: A scalable Design System packages reusable master components, dynamic color/text variables, and layout rules into a structured framework that keeps team projects unified as they grow.

• Instruction:

  1. Consolidate your button, navigation, card, and input elements into master components.

  2. Group related master components neatly on a single canvas page named [DS] Components.

  3. Set up clear property control controls (Component Component Inputs/Props) for text labels, variant states, and visibility toggles in the Right Panel.

Day 45: Mobile App Design

• Lecture Text: Mobile application design requires adhering to platform-specific touch interface guidelines, including 48px minimum touch target sizes, thumb-zone ergonomics, bottom bar navigation, and native pull/swipe interactions.

• Instruction:

  1. Create a mobile viewport frame (390px x 844px iPhone format).

  2. Build a fixed Bottom Navigation Bar component featuring 4 tab icons (Home, Search, Cart, Profile).

  3. Design a mobile shopping feed featuring 2-column scrollable product cards with interactive heart/favorite buttons.

  4. Ensure all clickable buttons have a minimum hit target area of 48x48px.

Day 46: Web Design

• Lecture Text: Landing pages guide visitor attention using clear visual paths, strong headline typography, engaging visuals, social proof badges, and focused call-to-action sections.

• Instruction:

  1. Create a 1440px desktop frame.

  2. Build a compelling Hero section featuring an eye-catching headline, paragraph copy, an email opt-in input group, and a product preview image.

  3. Add a Social Proof Banner directly below the hero section featuring grayscale client brand logos spaced evenly inside an Auto Layout Stack.

Day 47: Dashboard Design

• Lecture Text: Analytics dashboards present complex data clearly using structured data cards, chart representations, side navigation systems, and clean visual density.

• Instruction:

  1. Create a desktop workspace frame (1440px).

  2. Design a vertical Sidebar Navigation on the left (240px wide) containing logo and page navigation items.

  3. Design a main content panel on the right displaying 4 top metric cards (e.g., Total Revenue, Active Users, Conversions, Churn) using Stacks and vector chart shapes.

Day 48: Portfolio Site

• Lecture Text: Personal portfolio sites highlight your work using clean project cards, clear case-study summaries, an overview of your skillsets, and direct contact options.

• Instruction:

  1. Create a landing page frame for your personal portfolio.

  2. Design a high-impact intro hero section: Hi, I'm [Name] — Digital Product Designer.

  3. Build a 2-column Featured Projects section using image cards with hover transitions that reveal case study details.

  4. Add an interactive Get In Touch footer button component that links directly to your email address or scheduling calendar.

Day 49: E-Commerce Site

• Lecture Text: E-commerce user flows must guide shoppers seamlessly from browsing items to completing a purchase, relying on clear product images, pricing callouts, filtering options, and streamlined cart drawers.

• Instruction:

  1. Design a Product Listing Page featuring product cards displaying image, title, price, and an Add to Cart button component.

  2. Build an interactive slide-in Cart Overlay showing selected items, quantity step controls, item subtotal calculation placeholders, and a Checkout CTA button.

  3. Connect the Add to Cart button on the product cards to open the Cart Overlay on click.

Day 50: Blog Layout

• Lecture Text: Content-focused article pages prioritize high-legibility typography, clear reading widths (max 680px–720px for body content), author attribution blocks, and organized user comments.

• Instruction:

  1. Design a Blog Article layout frame.

  2. Center the body text block container frame and constrain its max-width to 720px to optimize reading line length.

  3. Add an Author bio block at the bottom of the article using a horizontal Stack (profile image frame + name/title text stack).

  4. Design a nested user Comments Section featuring input fields and threaded user replies.

Day 51: Interactive Prototype

• Lecture Text: Combine dynamic scroll triggers, sticky header containers, hover actions, and slide-in overlays to build a realistic interactive prototype experience.

• Instruction:

  1. Take your E-Commerce or Portfolio prototype layout.

  2. Make the main Header navigation container Sticky (Set Position to Sticky in the Right Panel so it stays pinned to the top as the user scrolls down).

  3. Combine hover triggers on project cards with a sliding cart overlay to create a fully integrated browser experience.

Day 52: Micro-Interactions

• Lecture Text: Micro-interactions provide subtle visual feedback to user inputs (like a button bouncing when clicked, a checkbox filling in smoothly, or a heart icon pulsing when favorited), giving your app or site a refined, polished feel.

• Instruction:

  1. Create a standalone Like Button component (Heart vector icon + text count).

  2. Create 3 Variants: Default, Hover, and Active/Liked.

  3. On the Active/Liked variant, scale the heart icon up by 1.2x, change its stroke and fill to red (#FF3B30).

  4. Link Default to Active on Click using a Spring transition preset (Stiffness: 500, Damping: 15). Preview the animated click feedback.

Day 53: Accessibility

• Lecture Text: Accessible web design ensures digital experiences can be navigated by users of all abilities. This requires strong contrast ratios (WCAG AA standards, minimum 4.5:1 for body text), readable typography sizes, and clear focus indicators.

• Instruction:

  1. Select text elements across your design frames and verify light text on dark backgrounds (and vice-versa) achieves a contrast ratio of at least 4.5:1 using an online contrast checker.

  2. Ensure body text size is no smaller than 16px.

  3. Check that interactive buttons feature explicit text labels or clear aria-label descriptions rather than relying solely on abstract color coding or unlabeled icons.

Day 54: Testing

• Lecture Text: Usability testing catches broken user flows, confusing visual cues, and layout errors before publishing projects live.

• Instruction:

  1. Generate a shareable Preview Link of your interactive prototype.

  2. Send the link to a colleague or test user with a specific task prompt (e.g., “Try adding an item to your cart and reaching the contact page”).

  3. Observe where their cursor pauses, document any navigation confusion, and iterate on your button layout or link paths based on observed feedback.

Days 55–65: Create a Full Website Prototype (6+ Pages)

• Lecture Text: Spend 11 days designing, structuring, refining, and polishing a comprehensive, production-ready 6+ page responsive website prototype across Desktop, Tablet, and Mobile viewports.

• Instruction:

  • Day 55 (Concept & Architecture): Define site concept (e.g., SaaS Platform or Creative Agency). Map out page architecture: Home, Features, Pricing, About, Blog, Contact.

  • Day 56 (Design System Setup): Establish global typography styles, color swatches, button components, and nav headers.

  • Day 57 (Home Page Desktop & Mobile): Build the complete Hero, Feature Grid, Testimonials, and Footer.

  • Day 58 (Features Page): Create animated interactive feature tab-switchers showing product capabilities.

  • Day 59 (Pricing Page): Build interactive monthly/annual billing cards with comparison tables.

  • Day 60 (About Page): Design team bio cards with social hover micro-interactions.

  • Day 61 (Blog CMS Layout): Build a blog list grid and an article template page.

  • Day 62 (Contact & Forms): Build a contact form with input state variations (Focused, Error, Success).

  • Day 63 (Interactive Micro-Interactions): Add spring-animated hover states to all cards, buttons, and links.

  • Day 64 (Cross-Device Responsive QA): Adjust constraints, stack wraps, and typography sizing across Tablet and Mobile viewports.

  • Day 65 (Final Usability Run): Perform an end-to-end user flow test in Preview mode (Cmd/Ctrl + P) and resolve any remaining bugs.

Phase 4: Advanced Skills (Days 66–90)

Day 66: Advanced Smart Animate

• Lecture Text: Magic Motion / Smart Animate can morph complex visual scenes, such as expanding a small thumbnail card into an immersive, full-screen detail overlay seamlessly.

• Instruction:

  1. Create Frame 1 (Grid View) containing a small Card frame (300x200px) with an image fill and title layer named Project Title.

  2. Create Frame 2 (Detail View). On Frame 2, expand the same Card frame to full width (1200x600px) and add additional body text below it.

  3. Ensure layer names (Card, Project Title) match exactly on both frames.

  4. Connect Frame 1 to Frame 2 on Click with Magic Motion (0.8s, Spring curve). Watch the card expand continuously across the screen.

Day 67: Advanced Overlays

• Lecture Text: Advanced overlays leverage custom positioning, timed triggers, and background dimming filters to create contextual slide-out shopping carts, search drawers, and pop-up modals.

• Instruction:

  1. Build a full-height Slide-out Cart Panel frame (450px width x 100% height).

  2. Select the Cart trigger button on your main header frame. Add an interaction: Trigger On Click, Action Overlay.

  3. In overlay options, set Position to Right, set backdrop color fill to #000000 with 40% opacity, and enable Animate Transition (Slide-In).

Day 68: Advanced Interactive Components

• Lecture Text: Nesting interactive components inside other components creates advanced state machines, such as tabbed navigation bars with animated indicator highlights.

• Instruction:

  1. Build a 3-item Tab Bar Component (Tab 1, Tab 2, Tab 3).

  2. Add active states for each variant, including a floating accent pill shape placed behind the active text label.

  3. Add interactions inside component isolation mode to switch variant states on click with smooth spring transitions, creating a fluid navigation control.

Day 69: Advanced Scroll Groups

• Lecture Text: Nesting a horizontal scroll group inside a vertical page container allows users to browse horizontal product carousels while maintaining smooth vertical page scrolling.

• Instruction:

  1. Create a vertically scrolling long page layout frame.

  2. Mid-way down the page, insert a horizontal Scroll Group container containing 6 wide feature cards.

  3. Set horizontal overflow to Scroll and enable Lock Direction to prevent vertical page drift while panning horizontally.

Day 70: Advanced Design Systems

• Lecture Text: Advanced design system architecture leverages structured component property controls (Component Inputs), allowing designers to toggle visibility, swap icons, or update text strings directly from the Right Panel without breaking master component instances.

• Instruction:

  1. Select a master Button component in isolation view.

  2. Select the internal text layer. In the Right Panel under Text, click the small + circle icon next to Content to assign a Text Property Input named Label.

  3. Select an internal icon layer and assign a Visibility Property Input named Show Icon.

  4. Return to your primary canvas frame, select a button instance, and quickly change its label and toggle its icon using the clean property controls in the Right Panel.

Day 71: Developer Handoff

• Lecture Text: Framer streamlines engineering handoff by transforming visual designs into clean CSS layout values, production-ready vector assets, font parameters, and layout specs accessible via inspect mode.

• Instruction:

  1. Click Share in the top right and set project access permissions to Can Inspect for developer stakeholders.

  2. Open the project using an inspector view link.

  3. Click any visual element on canvas to display its CSS parameters (flex layout rules, background fills, border-radius values, typography styles, and spacing measurements in pixels).

Day 72: Collaboration Workflow

• Lecture Text: Managing team project workflows requires assigning clear user editing roles, collecting structured design feedback, and coordinating asset updates using centralized cloud files.

• Instruction:

  1. Open project Settings -> Collaborators.

  2. Practice managing team roles by switching permissions between Admin, Editor, and Viewer/Commenter.

  3. Leave structural task notes on canvas using the Comment tool (C) to manage feedback tasks with your team.

Day 73: Responsive Web Design Architecture

• Lecture Text: Advanced responsive web layouts rely on dynamic CSS rules (such as relative percentage sizing, min/max widths, and Auto Layout wrapping) to ensure content rearranges smoothly across any viewport width.

• Instruction:

  1. Create a Desktop Primary Breakpoint frame (1440px).

  2. Add a Tablet breakpoint (768px) and a Mobile breakpoint (390px).

  3. Select a 3-column feature card container stack on Desktop.

  4. On the Tablet breakpoint, change the stack direction from Row to Wrap.

  5. On the Mobile breakpoint, change the stack direction to Column (Vertical). Watch the layout automatically collapse into a single vertical reading column on mobile.

Day 74: Cross-Platform Design

• Lecture Text: Designing cross-platform web apps requires adapting navigation patterns, typography scales, and UI components to align with platform conventions (iOS Human Interface Guidelines vs Android Material Design).

• Instruction:

  1. Build an app screen layout using iOS navigation patterns (Centered header title, bottom tab navigation bar, iOS native back icon).

  2. Duplicate the frame and adapt it to Android Material Design rules (Left-aligned top app bar headline, floating action button [FAB], bottom navigation styling).

  3. Compare visual hierarchy and touch target distributions across both screens.

Day 75: Advanced Prototyping

• Lecture Text: Combine Smart Animate transitions, interactive components, overlays, dynamic scroll groups, and input fields to produce high-fidelity prototypes that behave like fully functional web apps.

• Instruction:

  1. Build an interactive E-Commerce Product flow:

  2. Clicking a product card expands its container smoothly into a detail page using Magic Motion.

  3. Clicking Add to Cart updates an interactive button state component and triggers a slide-in Cart Overlay.

  4. Test the entire end-to-end interactive flow in Preview mode (Cmd/Ctrl + P).

Day 76: Portfolio Project (Screen Architecture)

• Lecture Text: Initiate your comprehensive final portfolio project by mapping out user flows and visual screen architectures across a minimum of 6 key views.

• Instruction:

  1. Create 6 primary desktop page frames: Home, Product Overview, Interactive Demo, Case Studies, Pricing Plan, and Checkout/Contact.

  2. Establish Desktop (1440px) and Mobile (390px) breakpoints for every single screen.

  3. Connect basic frame navigation links to establish complete user flow routing before populating high-fidelity visual assets.

Day 77: Client Presentation

• Lecture Text: Presenting design work effectively requires walking stakeholders through key user flows in presentation mode while explaining design rationale, hierarchy decisions, accessibility choices, and branding consistency.

• Instruction:

  1. Open your project in Presentation Mode or full-screen Preview (Cmd/Ctrl + P).

  2. Practice delivering a 5-minute verbal walkthrough: explain how your hero section grabs visitor attention, how your auto-layout stacks ensure cross-device responsiveness, and how your call-to-action buttons drive user conversions.

Day 78: Usability Testing

• Lecture Text: Conducting usability audits on finalized high-fidelity prototypes uncovers user navigation friction, broken interactive triggers, or unexpected layout scaling issues prior to project launch.

• Instruction:

  1. Share your prototype link with 2 test users.

  2. Ask users to complete a specific goal (e.g., “Locate enterprise pricing and submit a custom sales request”).

  3. Document points where users hesitate or click non-interactive elements, and fix any observed layout or interaction bugs.

Day 79: Final Polish

• Lecture Text: Fine-tuning visual design details involves checking typographic hierarchy consistency, standardizing spacing tokens across sections, verifying color contrast compliance, and auditing layer naming.

• Instruction:

  1. Audit all headings to ensure they follow your global typography tokens (H1, H2, H3).

  2. Verify that section padding values follow a standardized spacing scale (e.g., all primary desktop page sections use 80px or 120px top/bottom padding).

  3. Clean up the Left Layers Panel by grouping orphaned layers and renaming raw frame layers.

Days 80–85: Major Project Execution

• Lecture Text: Spend 6 dedicated days designing, building, responsive-testing, and animating an end-to-end multi-page web platform project featuring complex interactions, scroll groups, overlays, and developer specs.

• Instruction:

  • Day 80 (Architecture & System): Construct all 6 screen frames across Desktop and Mobile viewports. Define global design tokens (colors, fonts, radii, component props).

  • Day 81 (Hero & Interactive Nav): Build a responsive hero section and sticky navigation header with slide-out mobile drawer overlays.

  • Day 82 (Interactive Features & Scroll Groups): Build animated interactive feature showcases and horizontal scroll group product carousels.

  • Day 83 (Pricing Toggle & Modals): Integrate dynamic pricing switchers and slide-in modal overlays for lead generation forms.

  • Day 84 (Smart Animate Transitions): Apply Magic Motion transitions across page transitions and expandable detail view cards.

  • Day 85 (Cross-Device QA & Spec Audit): Test all interactive triggers across desktop and mobile preview viewports. Ensure developer inspect specs render clean CSS properties.

Day 86: Portfolio Reel

• Lecture Text: A short video portfolio reel highlights your best interactive UI transitions, micro-interactions, and responsive layouts, capturing client and employer attention in under 2 minutes.

• Instruction:

  1. Screen record (Cmd/Ctrl + Shift + 5 or screen capture software) your interactive Framer prototype in action.

  2. Record key moments: expanding Smart Animate cards, sliding overlays, responsive viewport resizing, and micro-interaction button hovers.

  3. Edit clips into a 60–90 second video reel featuring clean transition edits and upbeat background music.

Day 87: Client Workflow Simulation

• Lecture Text: Simulating real-world client workflows involves receiving an abrupt design change request brief, implementing revisions efficiently using design tokens and master components, and delivering revised work under tight timelines.

• Instruction:

  1. Simulate a client feedback request: “Change our primary brand color from Blue to Purple, update all button radii to fully rounded pills, and decrease body text size.”

  2. Open your global Variables / Styles panel. Update the primary color token to Purple (#7C3AED); observe every linked page updates instantly.

  3. Update the master Button component corner radius to 999px.

  4. Note how design tokens allow complex global revisions to be completed in minutes.

Day 88: Accessibility Audit

• Lecture Text: Performing a final accessibility compliance audit guarantees that your digital product meets WCAG standards for color contrast, readable text sizes, clear focus states, and screen-reader friendly structure.

• Instruction:

  1. Run an automated contrast checker across all body copy and button states to verify a minimum contrast ratio of 4.5:1.

  2. Ensure image frames feature clear alternative text parameters (alt descriptions) for screen readers.

  3. Confirm font sizes do not drop below 12px on mobile viewports.

Day 89: Final Presentation

• Lecture Text: Presenting a completed case study requires clearly explaining the initial project goal, user experience strategy, structural design system, technical implementation details, and final interactive prototype results.

• Instruction:

  1. Structure a Case Study presentation document or frame covering:

     • Problem Statement & Scope

     • Design System & Typography Architecture

     • Interactive Prototypes & Key User Flows

     • Responsive Breakpoint Strategy

     • Usability Testing Results & Solutions

  2. Deliver a full verbal presentation walkthrough of your completed project case study.

Day 90: Final Project — Portfolio Showcase

• Lecture Text: Congratulations on reaching Day 90! Today you finalize and publish your multi-platform design system and interactive web showcase project, preparing it for inclusion in your professional product design portfolio.

• Instruction:

  1. Open your completed major project in Framer.

  2. Conduct a final end-to-end audit: verify all Responsive Breakpoints (Desktop, Tablet, Mobile), test all Smart Animate transitions, confirm Overlays slide smoothly, and check that Developer Inspect settings are clean.

  3. Click Publish in the top-right corner of the Framer toolbar to deploy your site live to a Framer web domain (e.g., yourname.framer.website).

  4. Export high-resolution screenshots and screen-record video clips of your live published prototype.

  5. Feature your live link, case study walkthrough, and video reel in your professional design portfolio as proof of complete Framer web editing mastery!