update images + add figma links

Author: yyx990803

src/guide/built-ins/transition.md

@@ -85,6 +85,8 @@ There are six classes applied for enter / leave transitions.
 
 ![Transition Diagram](./images/transition-classes.png)
 
+<!-- https://www.figma.com/file/rlOv0ZKJFFNA9hYmzdZv3S/Transition-Classes -->
+
 1. `v-enter-from`: Starting state for enter. Added before the element is inserted, removed one frame after the element is inserted.
 
 2. `v-enter-active`: Active state for enter. Applied during the entire entering phase. Added before the element is inserted, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.

src/guide/components/images/named-slots.png

@@ -12,12 +12,16 @@ Usually, when we need to pass data from the parent to child component, we use [p
 
 ![props drilling diagram](./images/props-drilling.png)
 
+<!-- https://www.figma.com/file/yNDTtReM2xVgjcGVRzChss/props-drilling -->
+
 Notice although the `<Footer>` component may not care about these props at all - but it still needs to declare and pass them along just so `<DeepChild>` can access them. If there is a longer parent chain, more components would be affected along the way. This is called "props drilling" and definitely isn't fun to deal with.
 
 We can solve props drilling with `provide` and `inject`. A parent component can serve as a **dependency provider** for all its descendants. Any component in the descendant tree, regardless of how deep it is, can **inject** dependencies provided by components up in its parent chain.
 
 ![Provide/inject scheme](./images/provide-inject.png)
 
+<!-- https://www.figma.com/file/PbTJ9oXis5KUawEOWdy2cE/provide-inject -->
+
 ## Provide
 
 <div class="composition-api">

src/guide/components/images/provide-inject.png

@@ -30,6 +30,8 @@ The `<slot>` element is a **slot outlet** that indicates where the parent-provid
 
 ![slot diagram](./images/slots.png)
 
+<!-- https://www.figma.com/file/LjKTYVL97Ck6TEmBbstavX/slot -->
+
 And the final rendered DOM:
 
 ```html
@@ -213,6 +215,8 @@ To pass a named slot, we need to use a `<template>` element with the `v-slot` di
 
 ![named slots diagram](./images/named-slots.png)
 
+<!-- https://www.figma.com/file/2BhP8gVZevttBu9oUmUUyz/named-slot -->
+
 Here's the code passing content to all three slots to `<BaseLayout>` using the shorthand syntax:
 
 ```vue-html

src/guide/components/images/slots.png

@@ -4,6 +4,8 @@ Components allow us to split the UI into independent and reusable pieces, and th
 
 ![Component Tree](./images/components.png)
 
+<!-- https://www.figma.com/file/qa7WHDQRWuEZNRs7iZRZSI/components -->
+
 This is very similar to how we nest native HTML elements, but Vue implements its own component model that allow us to encapsulate custom content and logic in each component. Vue also plays nicely with native Web Components. If you are curious about the relationship between Vue Components and native Web Components, [read more here](http://localhost:3000/guide/extras/web-components.html).
 
 ## Defining a Component