23.09.2026 - 16.10.2026 | Week 1 - Week 4
Maisarah binti Mohd Sufian | 0358458
Advanced Interactive Design | Bachelor of Design (Hons) in Creative Media
Exercise 1: Component Sandbox & Micro-Interactions
___________________________________________________________________________________
LECTURES
Week 1
For this week we went through the assignments and final project for the module
Week 2
This week we learned the UI and basics of using framer, using frames to create components. I understood how to set dimensions for responsiveness, setting text, the functions of layout, creating stacks and variables within components (like buttons). We also shared our sketches for the first exercise.
 |
| Building a hero section exercise |
Week 3
We showed progress on our components in framer, we also did an exercise to further understand how to create stacks within a frame and padding/layout settings.
 |
| Building a card exercise |
Week 4
We learned how to make simple animations (transitions) within a component, creating components within a component and setting variables to a master component. Creating variables allows a master component to be duplicated and altered without making changes to the original. Such as creating buttons that lead to different links and changing it's appearance. We also created interactions within a component by linking it to it's different variants based on different user interactions (click, mouse enter, mouse leave, etc.). We also finished up our first exercise for submission.
 |
| Building a dock component |
 |
| Creating button components within the dock |
___________________________________________________________________________________
EXERCISE 1 - Component Sandbox & Micro-Interactions
Instructions
1. Overview & Context
In modern interactive design, high-quality user experiences rely heavily on micro-interactions—the subtle, functional animations and state changes that provide feedback, guide navigation, and delight users.
This exercise serves as your technical foundation in Framer. Before jumping into full page layouts and site architecture, you will focus on component state logic, variant transitions, and motion physics inside an isolated Component Sandbox.
2. Learning Outcomes
Upon completing this exercise, you will be able to:
Construct Multi-State Components: Utilize Framer’s Variant engine to model complex interaction flows (Idle, Hover, Active, Loading, Success, Error).
Fine-Tune Motion Physics: Apply spring curves, transition easing, and timing to create natural, responsive UI feedback.
Build Reusable UI Systems: Structure clean, modular components that can be integrated directly into larger digital products and your final thematic website.
Document Interaction Intent: Clearly present UI behaviors and triggers within a structured design system showcase.
3. Project Task & Requirements
You are required to build an Interactive Component Sandbox on a single Framer canvas. Your sandbox must feature at least three (3) advanced, dynamic micro-interactions selected from (or inspired by) the following categories:
Component Categories & Ideas
Dynamic Action / State Sequence (e.g., Add-to-Cart button with loading & success morphs, dynamic download/upload indicator, multi-step submit button).
Expanding / Spatial Navigation Element (e.g., Expanding Floating Action Button (FAB), dynamic dock/bar that morphs on click/hover, segmented pill control with sliding active indicator).
Interactive Content Card / Module (e.g., Product/Editorial card with hover reveals, multi-state bookmarking/liking micro-feedback, dynamic rating trigger).
Technical & Execution Constraints
Component Variants: Every micro-interaction must be built as a self-contained Framer Component with distinct Variants.
Transition Logic: Avoid hard linear cuts. Use Framer’s spring animations (tuning stiffness, damping, and mass) or custom curves tailored to the interaction type.
Interactivity: All interactions must function dynamically when viewed in Framer Preview mode and on the published link.
4. Deliverables & Submission Guidelines
Framer Remix / Project Link: Shared view/edit link to your Framer project workspace.
Published Live URL: Working site link where your component sandbox can be previewed and interacted with live in the browser.
Documentation: Processes of the exercise in your e-portfolio.
We are required to create three different components based on the given categories within a single framer canvas.
1. Sketches
 |
| Sketches for my three different components |
2. Layout & Interactions
I made separate frames to contain each of my components in my canvas, designing the default state of each component. Each component also has it's own frame. I also watched this
Youtube video to understand setting up my canvas better.
For my floating navigation button I used a different variant to create it's expanded state, so when you press the plus icon more buttons expand outward. I turned those buttons into it's own components and added effects like press and hover to change it's appearance when the user interacts with them. Subtle effects like the button shrinking when it's pressed, and expand/change colour when it's hovered. Because the frame is smaller than the actual component I also set the overflow to visible.
My content card is similar to the nav button but a bit more complicated, I created a second variant where the images expand when hovered, and I followed this
Youtube tutorial to actually make the rotating effect. The images are contained into one frame, and I used the loop effect to add 360 rotation to the frame. I also added -360 loop rotation to each of the individual images so when the main frame is rotating one way, the images rotate the other and stay in upright position. I changed the appearance of the default card when hovered as well and added like/play sound/share button which are each it's own components that changes states when hovered/pressed.
For the heart meter, I used masking to create the effect of the meter filling up, as the user clicks on the heart the mask moves so that it looks like the meter is rising. I also adjusted the pulsing loop effect to make it look like a heart beating. When the heart is filled to the max, I actually used a combination of scaling the heart to 0 and
this emoji burst component to make it look like the heart explodes, then I added a start over button that appears after. I did this by creating an extra variant that looks empty (variant 7) but it actually contains the heart scaled to 0 and only has the emoji burst component in it. When its clicked the component restarts to it's default state.
3. Website Link
___________________________________________________________________________________
FEEDBACK
Week 2:
General feedback: Try not to make your components too similar to given examples and don't use AI.
Specific feedback: Third sketch (dynamic state sequence is too simple) can be worked on
Week 3:
General feedback: Focus on the micro-interactions to make smooth transitions. Keep in mind the principles of usability when creating the components.
Specific feedback: Make the animation smoother
Week 4:
Specific feedback: Good can submit :]
___________________________________________________________________________________
REFLECTION
Experience
I really enjoy using framer so far because it's UI is very similar to Figma and it's very easy to use, even with a free version and no coding I was able to make quite interesting interactions. It's almost exactly like designing prototypes but I can actually just publish it. It was a bit of trial and error getting my components to work properly in the beginning but it didn't take that long for me to understand what I needed to do.
Observation
I like having physical classes more because it's easier to follow and show our work but I don't like how because you need internet to use Framer, the campus Wifi is really bad and sometimes I can't tell if my component is glitching because of the internet, my laptop or if it's something I need to fix within the component. It's not too bad though because your work is saved and synced so I can just work on it at home on a better device and bring it to class.
Findings
There's a lot of things you can create even with just basic knowledge, I watched a few Youtube videos but it's kinda hard to look for videos that can show you exactly how to make the component you have envisioned in your head. There's also not that many video tutorials in general because a lot of the time people will just use presets that have been uploaded by other Framer users. However, I was still able to take the basic functions I learned in those videos and apply them in different ways to get almost exactly what I wanted. I also realised it's really important to set your component layouts and variables properly when you first make them before going in and making changes, animations/interactions as it makes the process a lot smoother/easier.
Comments
Post a Comment