Create Rule “Do you build interactive prototypes in Figma?” (#7592)

* Create Rule “figma-prototypes/rule”

* Update Rule “figma-prototypes/rule”

* Update rule.md

* Update rule.md

* Update rule.md

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.