finish up rough draft of figma article

figma_animation/figma_animation.md

@@ -87,16 +87,59 @@ This is how you want your splash screen to look once the animation completes. Yo
 Nice work! Now you're ready to start animating your frames.
 1. In the upper right corner, click on `Prototype`.
 2. Hover your mouse over your Frame named `initial splash`. A small, blue plus symbol in a circle should appear. Click and drag the plus symbol over to the next Frame, `vehicles appear`. This will create a Prototype connection indicated by a blue arrow.
+
+<video width="800" controls>
+  <source src="./create_prototype_connection.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+
 3. In the dialog, set it to `After Delay` with a duration of 300ms. Select `Navigate to`, `Dissolve`, and `Custom bezier` with a duration of 1000ms for the animation style. You can edit this dialog at any time by clicking `Prototype` and clicking on the blue arrow.
+
+![Image of dialog box for first prototype connection](./prototype_1.png)
+
 4. Create another Prototype connection from `vehicles appear` to `vehicles arrive`. In the dialog, set it to `After delay` with a duration of 1ms, `Navigate to`, `Smart Animate`, and `Custom Spring` (1750ms).
 
+![Image of dialog box for second prototype connection](./prototype_2.png)
+
+5. Now that you've created your Prototype flow, give it a descriptive name, such as `my cool animation` by double clicking on the blue box next to your `initial splash` frame.
+![Image of dialog box for first prototype connection](./play_prototype.png)
+
 # Test your prototype
 Nice work! Now you’re ready to test your animation.
-1. Hover over your first frame in Prototype mode and click the Play icon on the right of the flow. A dialog box will open and play your animation. To repeat the animation, press `R`. 
+1. Hover over your first frame in Prototype mode and click the Play icon on the right of the flow. A dialog box will open and play your animation. To repeat the animation, press `R`.
+
 2. Make any adjustments to your animation as you see fit.
 
 # Gather feedback
 Now that your animation behaves as you intended, it's time to iterate on feedback from your teammates and peers.
 1. In the upper right corner, click the Play icon.
 2. In Prototype mode, click `Share prototype` in the upper right. In the options, share it with specific emails or click `anyone with the link`. Set the visibility to `view only` so people don't edit your project on accident.
-3. Keep a log of the feedback from others. What would you change or add? 
+3. UI/UX design is a collaborative process. Keep a log of the feedback from others. What would you change or add?
+
+{: .note-title }
+> Note
+>
+> Creating multiple versions of your animation can help you and your peers decide which one to bring into the final project.
+
+# Iterate on feedback and add finishing touches
+
+1. Review the feedback from your peers. Here is some sample feedback you might receive.
+> Peer 1: The word "My" slides in from below the screen. That doesn't match the other text which comes in from the side. Would it be a good idea to have "My" also come in from the left or right side?
+
+You can apply Peer 1's feedback and change the animation so the text slides in horizontally.
+
+<video width="800" controls>
+  <source src="./getting_rid_of_vertical.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+
+> Peer 2: Would it be better to swap the directions of "My" and "Transit"? That way it looks more symmetrical with the word "Rate". Things look a bit odd with "Rate my" sliding in from the left and "transit" from the right.
+
+2. Based on the feedback your peers provided, decide on a final version of the animation. All of the peers agreed that the vertical motion for the word "My" should be changed to slide in from the side instead. After seeing your update, one peer thinks it would look more symmetrical for "transit" to slide in from the left and "my" to slide in from the right. From their advice, let's swap the directions of "My" and "Transit" for a more symmetrical look.
+
+<video width="800" controls>
+  <source src="./arriving_at_final_version.mp4" type="video/mp4">
+  Your browser does not support the video tag.
+</video>
+
+We have now arrived at our final version of the animation. Nice work!