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..88687dafd32
--- /dev/null
+++ b/rules/figma-prototypes/rule.md
@@ -0,0 +1,37 @@
+---
+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:
+
+## Interactive Components:
+
+Figma's Interactive Components feature allows UI designers to easily create dynamic and interactive user interfaces. You can define different states for a component, such as hover or pressed states, 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)
+:::
+
+## Auto Layout:
+
+Auto Layout is a powerful feature in Figma that simplifies the design process for responsive interfaces. When it comes to prototyping, Auto Layout ensures that your designs adapt seamlessly to changes in content or screen size. 
+
+This is crucial for creating prototypes that accurately reflect your UI's behaviour across various devices and screen resolutions.
+
+:::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.
+
+
+
+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.
\ No newline at end of file