Exporting from Figma to Remotion

[kaf-lamed-beyt]

#1361

Hi @JonnyBurger, I'm having an issue with previewing the changes I made when I start the docusaurus server.

In sidebar.js I added the appropriate item under the "Techniques" category. But, I'm having an error related to the id of the doc.

Kindly take a look. Thanks!

---

IssueHunt Summary

Referenced issues

This pull request has been submitted to:

• #1361: Write a tutorial for how to export from Figma to Remotion

---

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
remotion	✅ Ready (Inspect)	Visit Preview	Oct 11, 2022 at 2:55PM (UTC)

[kaf-lamed-beyt]

Hi @JonnyBurger, I've been able to fix the docusaurus id error.

Apparently, it was due to my capitalization. But there's this current issue I'm facing, when I start the server, I'm getting this error below.

I've also created a new issue that I'd love to work on, #1379. Kindly take a look.

[JonnyBurger]

Thanks a lot for the PR!

I have solved the error where it could not be displayed in Docusaurus, you should now be able to see a Preview through the Vercel link.

Right now I see two problems with the article:

• The example is not very good because it essentially exports a PNG from Figma (embedded in an SVG which is awkward since then you cannot change properties via code). If one wants to do that, it would be better if they exported a PNG and used an <Img> tag.
• There is no demonstration of how one can animate the image now like it was shown in the sample video. It is just static.

So I don't feel good about shipping it to the homepage in the current state. I am willing to accept the PR if you revise it, let me know if you would like to do so!

[JonnyBurger]

The main usecase is not necessarily Figma -> Web handoff I would say, it is that you design something static using Figma, then animate it. It does not have to be different people.

[JonnyBurger]

Why emphasize to only select the 3D element? If I import mockups from Figma, I actually do the opposite and select the whole frame, because then I can match the dimensions with the video.

[kaf-lamed-beyt]

I'll work on improving these changes.

[kaf-lamed-beyt]

Thanks a lot for the PR!

I have solved the error where it could not be displayed in Docusaurus, you should now be able to see a Preview through the Vercel link.

Right now I see two problems with the article:

• The example is not very good because it essentially exports a PNG from Figma (embedded in an SVG which is awkward since then you cannot change properties via code). If one wants to do that, it would be better if they exported a PNG and used an <Img> tag.
• There is no demonstration of how one can animate the image now like it was shown in the sample video. It is just static.

So I don't feel good about shipping it to the homepage in the current state. I am willing to accept the PR if you revise it, let me know if you would like to do so!

I'd definitely love to revise it.

Thank you so much for clarifying that the file was just exported as a PNG file embedded inside a SVG element.

I'll try the alternative you mentioned here

...and thank you for fixing the docusaurus error

[JonnyBurger]

@kaf-lamed-beyt Appreciate that! A safe way to go would be if you transformed the video I linked into a tutorial, but feel free to choose another vector-based example.

[kaf-lamed-beyt]

@kaf-lamed-beyt Appreciate that! A safe way to go would be if you transformed the video I linked into a tutorial, but feel free to choose another vector-based example.

Your video was a bit fast-paced. Perhaps you can point me to resources where I can see the practical application of the simplex-noise and SVG path-properties libraries, so I can try applying it to any example I want to use.

[JonnyBurger]

@kaf-lamed-beyt There is also a simplified version of that tutorial that does not use noise but animate a path: https://twitter.com/JNYBGR/status/1564878825091112960

[kaf-lamed-beyt]

@kaf-lamed-beyt There is also a simplified version of that tutorial that does not use noise but animate a path: https://twitter.com/JNYBGR/status/1564878825091112960

Awesome!! this looks straight-forward 🤩

[kaf-lamed-beyt]

How does this look @JonnyBurger 👇🏼

video.mp4

I'd love to make the rocket exit the frame though (more of a translateY animation), but I haven't been able to get a hang of how this can be done with the spring library.

Kindly let me know what your thoughts are when you see this

[JonnyBurger]

@kaf-lamed-beyt Works for me, if you can implement it!
Add transformOrigin: "center center", transformBox: "fill-box" to the rocket to animate it from the center rather than the top left (another Twitter video: https://twitter.com/JNYBGR/status/1575744503511760897 😆)

and then use interpolate() to make translateY spring animation like so:

const spr = spring({...})
const style = {transform: `translateY(${interpolate(spr, [0,1], [0, -2000])}px)`}

[kaf-lamed-beyt]

Add transformOrigin: "center center", transformBox: "fill-box" to the rocket to animate it from the center rather than the top left (another Twitter video: https://twitter.com/JNYBGR/status/1575744503511760897 😆)

This worked just fine. Thank you for the video too! 😁

[kaf-lamed-beyt]

Hi @JonnyBurger,

I've updated the doc. Kindly take a look

[JonnyBurger]

Thanks, it is better now!

I tried to make the text a bit lighter to read by removing some in my opinion non-essential information.

At the end, the animation is explained, but only in an external blog post. Can you make it so that the animation is explained in the article itself? You can also use the same text if you like and put your blog post in a "See also" section at the bottom of the page.

[kaf-lamed-beyt]

Thanks, it is better now!

I tried to make the text a bit lighter to read by removing some in my opinion non-essential information.

At the end, the animation is explained, but only in an external blog post. Can you make it so that the animation is explained in the article itself? You can also use the same text if you like and put your blog post in a "See also" section at the bottom of the page.

Thank you for simplifying the changes further! 😄

When you talk about explaining the animation, you mean in the same figma.md file, yeah?

...and how do you think I can go about creating the "see more" section. Should I just wrap it in a link with markdown syntax? Or there's a better way.

[JonnyBurger]

@kaf-lamed-beyt It is not explained in the document how to animate the rocket. At the end of the tutorial it is just static.
I am asking if you can copy the steps that are currently in your blog post inside the document.

[kaf-lamed-beyt]

Great, I'll do that now.

[kaf-lamed-beyt]

@JonnyBurger, I just added the change

[JonnyBurger]

Thanks! 🙌

[kaf-lamed-beyt]

Thanks! 🙌

My pleasure! 😎

@JonnyBurger I'd also love to take on another issue. Which one would you recommend

[JonnyBurger]

@kaf-lamed-beyt Sorry I forgot to ask, I'm going to make a statistic at the end of Hacktoberfest and was wondering how long do you estimate you spent on this issue?

[kaf-lamed-beyt]

I think it took me roughly 20 hours — splitted across three days