Shadowing Practice: Learn Figma Motion in 8 minutes - Learn English Speaking with Video
בחר מצב תרגול
כל מצב פותח חדר תרגול במסך מלא.
63 משפטים
אם המשפטים קצרים או ארוכים מדי, לחץ על ערוך כדי להתאים אותם.
1
Great motion shouldn't be an afterthought. It's what transforms a good digital experience into a memorable one.
2
With Figma Motion, you can create, refine, and ship animations without ever leaving your design file.
3
In this video, we'll walk through everything you need to get started.
4
The best way to learn motion design is to start animating, so open up a design file and follow along.
5
Start by adding a frame to the canvas with a basic rectangle inside. We'll have that moving before this video is over.
6
You can access Figma Motion in any design file by switching the toolbar toggle to Motion.
7
Once enabled, you'll see the same Figma editor you're used to with a few key changes.
8
Most notably is the timeline along the bottom of the screen. This is where you'll add, refine, and preview your animations.
9
To zoom in and out of the timeline, use this slider, pinch or spread two fingers on your track pad, or hold the modifier key while using your mouse wheel.
10
You can also click and drag the top of the timeline to resize it, or click Collapse timeline to minimize it.
11
Now that we're more familiar with the timeline, we can start adding animations.
12
Select the rectangle you created earlier.
13
With an object selected, you can now see an animation section in the right sidebar, along with new key frame controls next to each property. The animation section is where you can browse pre-built animations that let you quickly apply common motion effects like position, scale, or rotation without having to worry about adding individual key frames. We'll add an opacity animation to our rectangle so that it fades into view over the course of one thousand milliseconds or one second.
14
Once you add an animation, you'll also see it reflected on the timeline.
15
From here, you can click and drag the layer track to reposition it on the timeline or select the handles on either side of the track to change the animation's duration.
16
Now that we've added an animation, we can preview it by clicking play or pressing space bar.
17
Looks good. You can adjust the length of the timeline by clicking and dragging this handle or from the duration field in the timeline controls. Let's set the timeline duration to twelve hundred milliseconds.
18
The timeline controls also let you move the play head to a specific point in time, change the units displayed on the timeline, and toggle between different playback modes.
19
The playback is currently set to loop, so the animation will repeat until we press pause or hit space bar again.
20
For more granular control, you can manually add key frames to the timeline.
21
A key frame marks a point in time where you set a specific value for a layer property, such as opacity, position, or rotation.
22
When you set a second key frame for the same property, but with a different value, Figma Motion will animate the transition between them.
23
Let's try that out together.
24
Grab the play head and move it to the start of the timeline. This is where we'll add our first key frame. You'll notice that the rectangle layer is no longer visible.
25
That's because the fade in animation hasn't started at this point on the timeline.
26
But we can still select the layer even if it isn't currently visible. Click the diamond icon next to the rotation field in the right sidebar to add a new key frame to the start of the timeline.
27
We won't change the value here because we want it to rotate over the course of the animation.
28
Move the play head to the one thousand millisecond mark and click the diamond again to add another key frame. This will sync our rotation with the fade in animation we applied earlier.
29
This time, we'll change the rotation value to one eighty.
30
Then we'll press space bar to see how the rotation looks as the animation plays. If you want to preview an animation on its own, you can hide other animations on the timeline by clicking the eye icon next to the animation name.
31
For faster key frame creation, you can enable auto key frame.
32
While active, updating any property in the right sidebar or adjusting an object on the canvas will automatically add new key frames to the timeline.
33
Let's see that in action.
34
Move the play head to the one thousand millisecond mark. You can hold Shift to align it with the other key frame we added earlier. With auto key frame enabled, click and drag the rectangle to the right of the screen.
35
You'll notice that a new set of position key frames is automatically added to the timeline.
36
Go ahead and press space bar to preview the changes.
37
Great work.
38
Before moving on, click to disable auto key frame so it doesn't add any additional key frames.
39
Key frames define what changes and when. Easing defines how it gets there by controlling whether an animation accelerates, decelerates, or both.
40
It's what separates motion that looks correct from motion that feels correct. To see how much of a difference the correct easing can make, take a look at these two examples.
41
The first uses linear movement or motion that is the same from start to finish.
42
The second uses an ease in and out curve.
43
Notice how it starts slowly, builds speed through the middle, then settles into its final position. That subtle shift is what makes the motion feel grounded rather than mechanical.
44
Now that we know the principles behind easing, let's take a look at the easing controls in Figma Motion. To adjust easing, select an animation on the timeline and open the easing drop down menu or click the line in between two key frames.
45
From here, you can either select a default easing curve or use the curve editor to create a custom one.
46
Custom curves let you go beyond standard motion and create bespoke movement that matches your product's personality.
47
When used consistently, that character becomes part of your brand's motion language.
48
Custom curves can be saved as variables, making them reusable across your entire design system.
49
To learn more about variables and custom curves, check out our help center.
50
Let's adjust the easing on our position animation. Click the line between the two keyframes and select Ease in and out back from the menu. Now our rectangle moves with a bit more expressiveness before settling into its final position.
51
As your animations become more ambitious, the Figma agent can help handle the heavy lifting so you can focus on the craft.
52
Describe the motion you're after and let the agent add the initial keyframes.
53
Then fine-tune the details directly on the timeline or re-prompt the agent until the motion is just right. This can be a real time saver, especially for complex or repetitive animations.
54
For example, I can prompt the agent to create a number counter animation that uses an easing variable for my design system.
55
In just a few moments, it gives me a solid starting point that I can keep refining until I'm happy.
56
And because the animation is a component, I can reuse it across all of my designs.
57
Once you're happy with how everything moves, it's time to get it into the hands of your developers.
58
Dev Mode eliminates the guesswork and gives developers a complete picture of what you built so nothing gets lost in translation.
59
The read-only timeline lets developers scrub through and inspect the animation at full fidelity. From there, they can copy the underlying code in whatever format fits their workflow: CSS for standard animation code, React for framework-ready implementation, or JSON for raw timing values.
60
Figma Motion is also MCP compatible, so you can pass your full animation context, including keyframes, timing, and easing, directly to your coding agent using the Figma MCP server.
61
And if you want to share your animation with others or save a copy outside of Figma, you can also export it in a variety of different formats.
62
That's everything you need to get started with Figma Motion. Now you're ready to get your own projects moving.
63
To learn more about Figma Motion, check out the resources linked in the video's description, including the Motion Design Fundamentals collection, which covers the concepts behind effective motion design and includes hands-on projects to keep you moving forward.
הורד אפליקציה
כל מה שאתה צריך כדי לדבר בשטף
הגיית AIציון לכל משפט
תרגול IPAשלוט בכל צליל
אוצר מיליםבנה את מאגר המילים שלך
משחק אוצר מיליםלמד תוך כדי משחק
אותו ערוץ
FOR YOU
המלץ על סרטון
B2181 משפטים
Animation Basics in 14 Minutes (6 Big ideas for beginners)
Daily ConversationWorking Adults
B22
65 משפטים
Figma Finally Launches Folders! + More New Updates
Daily ConversationWorking Adults
B21
49 משפטים
Learn UX Storyboarding in 5 Minutes: w/ Steps and Examples | UXtweak
Daily ConversationUniversity StudentsWorking Adults
B117 משפטים
Shortened: Meet MotionKit – Create Powerful Animations Across Any Page Builder
Daily ConversationWorking Adults
B21
50 משפטים
Video
Daily ConversationUniversity StudentsWorking Adults
B237 משפטים
How to Create & Style Closed Captions Fast in ActivePresenter 10.5
Daily ConversationWorking Adults
B23
443 משפטים
Complete Roadmap for Backend Software Engineers (START HERE!)
Daily ConversationUniversity StudentsWorking Adults
B21
111 משפטים
how to edit vlogs
Daily ConversationWorking Adults
B21
162 משפטים
Wonderful website design
Daily ConversationWorking Adults
C11
254 משפטים
Figma Agent Skills | How to write skills you will actually use
Daily ConversationWorking Adults
B21
331 משפטים
Dear Higgsfield, I reverse engineered you in 12 hours
Daily ConversationUniversity StudentsWorking Adults
B2155 משפטים
80% of Interior Design Basics in 10 minutes
Daily ConversationWorking Adults
אוצר מילים והערות הגייה לשיעור הזה
שיעור הדיבור הזה ברמה B2 מבוסס על הסרטון “Learn Figma Motion in 8 minutes”. המילים שחוזרות הכי הרבה: animation, timeline, motion, key, frame. בסרטון הזה יש 63 משפטים ו-1410 מילים לתרגול Shadowing. הדיבור נמשך 8:21. הדובר מדבר בקצב טבעי של כ-169 מילים בדקה, קרוב לשיחה יומיומית. רק 78% מהמילים נמצאות בין 3,000 המילים הנפוצות ביותר באנגלית, כך שאוצר המילים מאתגר.
אוצר מילים מרכזי בסרטון הזה
15 המילים המתקדמות ביותר בסרטון, עם ההגייה והמשמעות שלהן:
| מילה | הגייה | משמעות |
|---|---|---|
| animation שם עצם | /ˌæn.ɪˈmeɪ.ʃən/ | הַנְפָּשָׁה |
| rectangle שם עצם | /ˈrɛktæŋɡl̩/ | מַלְבֵּן |
| curve שם עצם | /kɚv/ | עקימה |
| adjust פועל | /əˈd͡ʒʌst/ | כוונן, התאים |
| automobile שם עצם | /ˈɔː.tə.məˌbil/ | מְכוֹנִית |
| duration שם עצם | /dʒʊˈɹeɪ.ʃən/ | מֶשֶׁךְ |
| developer שם עצם | /dɪˈvɛləpɚ/ | מְפַתֵּחַ |
| canvas שם עצם | /ˈkæn.vəs/ | קַנְבָס |
| icon שם עצם | /ˈaɪ.kɑn/ | אִיקוֹנִין |
| fidelity שם עצם | /fᵻˈdɛlədi/ | דיוק, נאמנות למקור |
| accelerate פועל | /ɪkˈsɛl.əˌɹeɪt/ | האיץ |
| scrub פועל | /skɹʌb/ | קִרְצֵף |
| pinch פועל | /pɪnt͡ʃ/ | צבט |
| ambitious שם תואר | /æmˈbɪʃ.əs/ | שאפתני |
| compatible שם תואר | /kəmˈpæt.ə.bəl/ | תואם, מתאים |
Phrasal verbs שתשמעו
| מילה | משמעות |
|---|---|
| check out פועל | בדק |
משפטים שכדאי לחזור עליהם
משפטים קצרים ושלמים מהסרטון שאפשר להשתמש בהם בשיחה יומיומית:
- We'll have that moving before this video is over.
- Let's set the timeline duration to twelve hundred milliseconds.
- Let's try that out together.
- This is where we'll add our first key frame.
- Let's see that in action.
דקדוק בסרטון הזה
המבנים שהדובר משתמש בהם הכי הרבה, עם המילים המדויקות מהסרטון:
| מבנה | בסרטון |
|---|---|
| סביל (Passive voice) be + past participle — הדגש הוא על מה שקורה, לא על מי שעושה את הפעולה | is currently set · is automatically added · can be saved |
| הווה מושלם (Present perfect) have/has + past participle — פעולה שקרתה בעבר ועדיין יש לה חשיבות או השפעה עכשיו | we've added · hasn't started |
הגייה ששווה לשים לב אליה
הדובר משתמש ב-23 קיצורים וצורות מקוצרות, כמו we'll, you'll, you're. אמרו אותם בצורה הקצרה, כפי שאתם שומעים אותם.
- הצלילים של “sh” ו-“zh”: animation /ˌæn.ɪˈmeɪ.ʃən/, rotation /ɹoʊˈteɪʃən/, duration /dʒʊˈɹeɪ.ʃən/, ambitious /æmˈbɪʃ.əs/
- מילים ארוכות — שימו לב להטעמה: animation /ˌæn.ɪˈmeɪ.ʃən/, millisecond /ˈmɪlɪˌsɛkənd/, automobile /ˈɔː.tə.məˌbil/, developer /dɪˈvɛləpɚ/, opacity /oʊˈpæsɪti/
צלילים שדוברי עברית מתקשים בהם:
- /æ/ — פתוח יותר מה-“אֶ” העברית, לא כמו “a” ב-“cup”: animation /ˌæn.ɪˈmeɪ.ʃən/, rectangle /ˈrɛktæŋɡl̩/, variable [ˈvæɹ.i.ə.bl̩], animate /ˈæn.ə.mət/, opacity /oʊˈpæsɪti/
- /r/ — הלשון לא נוגעת בשום מקום, לא ה-“ר” הגרונית: rectangle /ˈrɛktæŋɡl̩/, rotation /ɹoʊˈteɪʃən/, preview /ˈpɹiːvjuː/, keyframe /ˈkiˌfɹeɪm/, refine /ɹɪˈfaɪn/
- עיצור קולי בסוף מילה — /b/, /d/, /g/, /z/, /v/ בלי להפוך אותם לאטומים: curve /kɚv/, millisecond /ˈmɪlɪˌsɛkənd/, fade /feɪd/, repetitive /ɹɪˈpɛtɪtɪv/, browse /bɹaʊz/
איך לתרגל עם הסרטון הזה
- הקשיבו לכל הסרטון פעם אחת בלי לדבר, ורשמו את המילים שאתם לא מכירים.
- התחילו במהירות 0.75×, תרגלו Shadowing משפט אחר משפט, וחזרו למהירות רגילה כשזה מרגיש קל.
- הקליטו את עצמכם והשוו למקור, תוך תשומת לב למילים כמו animation, rectangle, curve.
מהי טכניקת השאדואינג?
שאדואינג היא טכניקת למידת שפה מבוססת מדע שפותחה במקור להכשרת מתורגמנים מקצועיים ופופולרית על ידי הפוליגלוט ד"ר אלכסנדר ארגואלס. השיטה פשוטה אך עוצמתית: אתה מקשיב לאודיו באנגלית ילידית וחוזר עליו בקול רם מיד — כמו צל העוקב אחרי הדובר עם עיכוב של 1–2 שניות בלבד. בניגוד להאזנה פסיבית או תרגילי דקדוק, שאדואינג מכריח את המוח והשרירים בפה לעבד ולשחזר דפוסי דיבור אמיתיים בו זמנית. מחקרים מראים שזה משפר משמעותית את דיוק ההגייה, האינטונציה, הקצב, הדיבור המחובר, הבנת השמיעה ושטף הדיבור — מה שהופך אותו לאחת השיטות היעילות ביותר להכנה לIELTS Speaking ולתקשורת באנגלית בעולם האמיתי.