diff --git a/rules/figma-prototypes/auto-layout.gif b/rules/figma-prototypes/auto-layout.gif
new file mode 100644
index 00000000000..10c17616a6a
Binary files /dev/null and b/rules/figma-prototypes/auto-layout.gif differ
diff --git a/rules/figma-prototypes/figma-prototype-1.gif b/rules/figma-prototypes/figma-prototype-1.gif
new file mode 100644
index 00000000000..72973e3535d
Binary files /dev/null and b/rules/figma-prototypes/figma-prototype-1.gif differ
diff --git a/rules/figma-prototypes/rule.md b/rules/figma-prototypes/rule.md
new file mode 100644
index 00000000000..571931c5705
--- /dev/null
+++ b/rules/figma-prototypes/rule.md
@@ -0,0 +1,40 @@
+---
+type: rule
+title: Do you build interactive prototypes in Figma?
+uri: figma-prototypes
+authors:
+  - title: Joseph Fernandez
+    url: https://ssw.com.au/people/joseph-fernandez/
+created: 2023-12-15T04:29:01.737Z
+guid: a0836b52-0b01-44e5-a110-8c7496b1a7a9
+---
+Figma is a powerful design tool that offers several prototyping features that are valuable for UI designers. Here are a few of the top Figma prototyping features:
+
+`youtube: https://youtu.be/-d6zNGeF59M?si=dYJCN_Hf3zKXiHTX`
+**Video: Figma Tutorial: Prototyping & Transitions (5 min)**
+
+## Interactive Components:
+
+Figma's Interactive Components feature allows UI designers to easily create dynamic and interactive user interfaces. You can define different states of a component, such as default, hover, active or focus and make transitions between these states. This helps simulate how users interact with the final product, providing a more realistic representation of the user experience.
+
+:::good
+![Figure: SSW Rewards interactive prototype](figma-prototype-1.gif)
+:::
+
+## Responsive Layout:
+
+Responsive design is the backbone of creating exceptional user experiences across various devices, and in the realm of design, Figma stands out as an invaluable tool for bringing this concept to life. Responsive design is not just about adapting to different screen sizes; it's about crafting interfaces that seamlessly adjust to diverse contexts, ensuring usability and visual coherence. Figma provides a comprehensive set of features that enable designers to create responsive layouts, preview designs across breakpoints, and streamline the entire responsive design process.
+
+:::good
+![Figure: SSW Rewards Admin responsive navigation](auto-layout.gif)
+:::
+
+## Smart Animate:
+
+Smart Animate is a transition feature in Figma that allows for smooth and automatic animations between frames. It intelligently analyzes changes in layers and properties between frames, creating fluid animations without the need for manual adjustments. This feature is particularly useful for creating realistic transitions between different states of your prototype, enhancing the overall user experience.
+
+:::good
+![Figure: SSW Rewards claim prize](ssw-rewards-transitions.gif)
+:::
+
+These features, combined with Figma's collaborative capabilities and cloud-based platform, make it a preferred choice for many UI designers for both design and prototyping phases of the product development process.
diff --git a/rules/figma-prototypes/ssw-rewards-transitions.gif b/rules/figma-prototypes/ssw-rewards-transitions.gif
new file mode 100644
index 00000000000..ae97356fafc
Binary files /dev/null and b/rules/figma-prototypes/ssw-rewards-transitions.gif differ