From Figma to Code with Anima 4.0

Your information very useful and accurate very nice - good luck to u best best

Hello me your help is essential Can I contact you?

You guys, could I essentially get a Figma design from an artist and use Anima to get the code and integrate it into WordPress sites?

Great video

absolutely amazing...thanks!!!!

So would you share that Anima link with developers, who have their own account, so they can see the design and grab code as needed? Or would you download the React code, and hand that off to them? Would they login with your account, or would you need a Team subscription account?

its good but the way you explained it its not friendly for the first user of anima

Hi femke, great tutorial video! However, I encountered problems with putting my figma files in anima. Do some layers or frames should organize the way anima could read? Idk tho, sometimes it doesn't work like intended

Hello there, how's the export code feature? I'm thinking of buying premium to convert my figma to code.. So is it worth it if i use that code to host my website???

Que linda! 😍

Thanks for the video! What do you think of Handoff compared to Anima 4.0?

Ahhhh the slightly broken Italian blind slat is bugging my ocd!! We had that problem with our Italian blinds - I feel your pain

Hey Femke, I have a question about Anima. Every time I see someone use the program, they are only making it for one screen. Does Anima have the ability to create a prototype that links that different pages of a website or interface? So for example, I type something into a search bar or fill out a form and click submit, does Anima have the ability to continue the sequence to the next page?

I hope anima support tailwind css 🙌

great🔥

Great, thank you

Hi, great video! I just have 2 questions: 1. Upon export, my image layers are overlapping when landing in Anima and bullets are missing. What should the correct settings be when exporting for my tech to inspect the Code Framework: pure html or react, Syntax: function or classes and Styling: plain css or styled components? 2. What is the React option in Code Framework? Thank you in advance :)

This was a great video thanks 🙏🏾. For any one wondering about React you can also easily transfer html into react easily by just declaring a function with a return and input the html inside the return block then export the function so it can be accessed throughout your application for example:

import React from “react”;

function FUNCTION_NAME() {
return(
<html-goes-here></html-goes-here>
)};

export default FUNCTION_NAME;

There are plenty of ways to edit react JSX to make animations happen so easily. Of course there are advanced concepts with React but a rookie can skate by with the above sample code. This is coming from a Fullstack developer specializing in backend technologies.

Hi Femke, sorry if you have replied to this question already. But, I'd like to know if is necessary to select each Frame of the project on Figma and export it by separated to get all the pages codes of the entire website. I've got the 3 frame sizes for each device for my portfolio/website. Also, I've added the breakpoint for each of them on the Anima Plugin but I don't know if by just selecting the 3 mainframes for each device then Anima will recognize the rest of the unselected frames when exporting the HTML / CSS. Thanks in advance for all the info provided in the videos. Greetings from Barcelona, Spain. 👏🏼

Can we add payment gateway..

it is not match for developer , react code and style are not work on real world, tons of errors and reading and debugging thousands of codes in single component. May be it is good for designer who doesn't need code. anyway thank you for your tutorial.

Another super useful stuff from femke🙏🙏

Lovely designer and superb communication skills.

Well...You have convinced me to purchase Anima

I thank owner of this channel and anima for saving a lot of time

Thanks. Are you South African?

Very insightful video, helped me so much as I just joined a company as a UI Designer and struggling to collaborate with the engineering team.

I will be suggesting anima to them and I hope this solves our problem.

Thanks for this video.

I love the whole video, but why didn't you show us the code on a text editor, I Mean that's the whole point of the video,which you missed

How clean is the HTML/CSS that it exports though?

Next level shit! supports react ...ohhh yess

I was waiting for Supernova, but after several months of waiting they are on beta o something like that. Now, with your channel, I discovered Bravo and Anima. What software did you recommend for native app?

Thank you so much! This was such a good concise explanation of this tool.

Hi, I am trying out anima and zeplin at the same time, one question, if my ultimate goal is to export code, can i still enjoy the free plan? if not, which plan are you using?

Like some other dev's said in the comments, the code this put's out isn't really usable. As A front-end dev I would rather write all the code myself then let such a program write it for me. The code this puts out is unreadable and structured very weird. You'll probably save heaps of time in the future if you just build it from the ground up. It makes the code way more maintainable.

Can you make a video about scrolling? Like the scrolling bar moving as we scroll the prototype in the preview and how to make the bottom menu bar/ FAB stay within the size of the screen (even if we have really long frame with lots of content).

I got a bit confused about it, I make long frame like yours and i want to add FAB, if i put it on the bottom of the frame it won't show on the preview (screen size). I have to make the frame as the size of the device but the content is off the screen.
Thanks :)

Animeapp is for sale

Thank goodness I found this channel. Today was a good day 🎶

Hey Femke! I have a question... If I have my site created on figma and use anima plugin to do some interactions, which tool do I export to get a prototype link to send ? Figma or Anima?

Thats brilliant... saves a lot of time in coding the front-end... well done!

Hello! Thank you for your video! Can you please help me to understand. I want to decide which solution should I use to handoff my designs from Figma - Zeplin or Animaapp. Which one is the most useful and what the differences? Thank you^^

Hey femke,

so can this workflow work?

figma to anima, then the code can be used in wordpress?
just trying to see the best workflow from figam to wordpress if you have any insight on this

Can we copy react code in free version ??

Is it free?

This tool is awesome! Thanks for sharing.

Please just focus on target screen not on changing back and forth with your face

hey can you help me with respnsive design, there was white background when i am going from mobile to tablet to desktop

Will be interesting to hear from any frontend coders who are actually using this?

does it make front-end dev useless?

Esto es genial, gracias por compartir esta información, ya estamos instalando el plugin, eres lo máximo!

Is there anyway to use a regular cursor than the giant mouse cursor that Figma uses? It's really the only reason why I don't use Figma. It's so annoying and bulky. It really ruins the user experience for me, lol.