-
-
Notifications
You must be signed in to change notification settings - Fork 999
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Exporting from Figma to Remotion #1378
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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!
title: Exporting designs from Figma to Remotion | ||
--- | ||
|
||
Say you're collaborating as a Frontend Engineer with a design team, and you want a way to get a real-time representation of some of the design assets you have on Figma. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
|
||
![Thumbnail](/static/img/export-figma/banner.png) | ||
|
||
Click on any of the vector graphics. Make sure you're selecting the 3D element alone. Don't select the whole container, the image below illustrates this. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'll work on improving these changes.
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 |
@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. |
@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 🤩 |
How does this look @JonnyBurger 👇🏼 video.mp4I'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 |
@kaf-lamed-beyt Works for me, if you can implement it! 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)`} |
This worked just fine. Thank you for the video too! 😁 |
Hi @JonnyBurger, I've updated the doc. Kindly take a look |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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. |
@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. |
Great, I'll do that now. |
@JonnyBurger, I just added the change |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks! 🙌
My pleasure! 😎 @JonnyBurger I'd also love to take on another issue. Which one would you recommend |
@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? |
I think it took me roughly 20 hours — splitted across three days |
#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: