Turn Design into React Code | From prototype to Full website in no time

hi everyone so if you've always struggled with converting or moving from design and prototypes into a real world working code well in this video tutorial we will speak about and we're just going to go like step by step into converting a fully working prototype from figma into a real world react application so steps needed in here actually i'm going to be using something called anime which is actually a prototyping tool and it does allow us to pretty much just move on from enema designs and prototype from anima exactly to the way we want it into real world reacts component or even you can use them with html of course all the styles all the css and everything you would need are actually auto generated for you so all you need to do is just copy these components and make them fit together in your application so in this video just go ahead and first here this is actually a really cool design it's called the miss cupcake and before we just go ahead and take this design it has actually multiple uh you know like aspect ratio so it is fully responsive so there's a desktop version of the design there's the tablet version of the design and there's as well the mobile version of design so we've got all of these all like the three different aspects with three different designs in here i'm just going to move from this particular design into like a prototype like a real world working person from figma and of course we're going to generate a real word working reacts code so yeah it's actually clearly seen here so the design is pretty simple pretty straight to the point in here seriously just like a cupcake e-commerce store where you just like sell a cupcakes like a local store for selling cupcakes with videos working background there's also maps working so all of these are actually going to be content that we're going to be just automate and make them work right off the bat so all of these gonna actually work as well as like the video included in here as well alongside some cool animation so for this like cupcake image in here uh you will see like an animation once the page loads up this animation is gonna just like work right off the bat so all of this actually happens right here from figma i'm just going to use the animate tool in history to see so this is the anime application so yeah we just like scroll the way up uh we've got design developments unites.least so yeah you can you can just dig deeper and read more about what is anima but the main point about here is actually turning a design into a project and generating react code so the arcs actually version or the react feature for generating reacts components has been recently released so yeah you got the point in that uh still currently a new feature but still worth trying worth working with so you can go to start free and you create your projects and you can get started here and the other thing you would need pretty much is actually install an anima plugin because it is widely needed to get started with figma otherwise we won't be able to get started so you have to install the anime plugin you can just grab it after creating an account in here it's just gonna find the link to download this or you can just head out into the figma plug-in store and to find anime and then you can use it so make sure to create an account first because it needs the authentication in order to make things works in uh the right way so here we got plugins here you see we've got anima so once we click on that plugin we're going to get the anime plugin right off the bat i also i already did the login thing the authentication so here the first thing we just see is actually what projects going to be syncing in uh here i've got personal cupcake or like what animal product you're going to be syncing that into you can create a new project or you can choose one from these uh which i already created right here and here's actually some options that you need to be covering for that to be working so let's go ahead and first um let's see what we can do with these like desktop a laptop or pretty much tablet and mobile designs and how can they unite them so if you're using it already detecting the brick points if they choose this frame this particular home page frame and make sure to like put all of your designs inside of frames in order to be able to manipulate them easily and in order to allow anima to recognize this so here we got homepage mobile which is like 375 pixels and we got 960 pixels for the home page and tablets and last but not least we got home page 1440 so yeah those actually are breakpoint links which means that if we change like the width from 1440 to 960 in the responsiveness manner yeah the response is going to work and just like the design going to be automatically changed for us uh throughout this so you can just go and link the breakpoints in here just by choosing this and for example you want to link this like home page frame with something like um let's see where is the tablet so you have to select both of these just alexa with this and as well just like select it with the mobile frame and just go ahead and like you can you can do an edit here i can as you see i already just selected home page mobile and tablet click done and there you go so we got all the breakpoints uh to get started and you can also select like a single frame and make sure it is set as a home page otherwise um just like it won't set the default home page so make sure to set that in order to tell anyone that this is actually the first home page that we're going to be landing on and there's also a couple of other different offer options from smart layers so you can add hover effects to work with that entrance animation which means it gets played once you enter you can also add a video gif or a lottery so if it's like this here you see there's already a video playing in here click edit and there's actually autoplay so you give it like which url this video is going to be playing from and you give it like autoplay so it automatically gets played let me just zoom in here you can see um so this is actually the video you can loop through there's no controls and cover so feel the most of the page pretty cool it's pretty simple to actually go ahead and like make the video playable on anymore just throughout this settings and it just like is super easy and of course you can upload your own video file if you would like to or you can play it from a url but if we go back here um if we're just going to select this map thing we got an embedded code and of course you can embed a custom code as well so if we select that we got like an iframe being competitive so you can go into like google maps and grab throughout your api uh grab the iframe and you can just select it and paste in here you can even paste other code like a real website code with something like google analytics um i don't know something that uh you pretty much need to embed into your web page like you would do with something like a website builder like wix or sandbox or something like that so yeah the same thing in here it works like a charming and it can be easily embedded of course with the text input as well you can make sure that you add some text input so if it selects for example um so you got the actually text input let me let me just see where is that so um i think yeah there you go so we got this actually the text input and yeah you select like this is a text type and a placeholder what gets placed out in here as a placeholder you could mark it as required which means it has to be filled and you can you can do a different form options in here and you can create a full forms just throughout this from from this single animal plug-in so yeah it makes things way way much faster and way way much easier so after finishing this after just putting all the designs together after just like putting all the options together what you can definitely do later on is actually go ahead and do a preview in the browser so this preview of the browser already does just gonna like go ahead and process all of your like designs and everything from that and just like it takes it into the animal application so you're going to find a dashboard and you can start prototyping there but there's one thing to notice before doing this because anima won't let you actually link between designs because it already reads the prototypes from figma so that point what we can do is go ahead and add or edit the prototype right into our figma so um let me just go ahead and zoom out real quick in here and obviously the home page so here is actually the home page real quick and uh we can go into the actual prototype section so for scene prototype if we select pretty much uh this is actually the home page so you see those all of these are actually our prototypes and prototype links like this homepage we click first navigation bar which is going to take us to our story so you do like interaction details on click navigate to our story and the animation is actually instant you can change that too and you can play with all of these and make sure to work with your prototypes so the main point in here is actually you have to do both the design and the prototype and figma it also supports stuff like sketch and xd or adobe xd so you can use those too but here i prefer to use stigma it's much better and much easier to integrate it with so straight to the point and for the precise as i said before you make sure to add all the prototypes clearly in here it's fully added with all of different prototypes and just like make sure it works like a real word application and make sure to select like what frame so it's the entrance frame or the uh the beginner frame and just like everything's going to be working as charming as it could be so for example let's try to go ahead and play the prototype using uh you know figma present feature and yeah we got this actually cool presentation so everything looks pretty great if you try to go and try to actually click something uh like our story in here so yeah the prototype works pretty fine so make sure to like all of your prototypes works the best way i don't know for some reason the video is not playing it kind of like uh there is something wrong with the connection or something but anyhow so yes you see the map in here still not works fully so you have to move it into animal in order to make the actual iframe the embedded code you've embedded works right into into the web page so actually this is actually the best part about anime that i like and it's going to make everything look pretty much fine now since our prototypes are looking pretty great so far so yeah we can just get rid of them and uh yeah make sure it's all the options in here so whenever you find uh if you want for example something like interest animations cruising here uh you can go and edit that and like you could move it right move it or rotate it up blur it with an effect and you can just give it all the different options you can do with animation like the delay and you can even edit the custom css of it so yeah you can have all of these working right here with the different animations uh right from bats from from pretty much the animal uh plugging in here so yeah you can you can have all different stuff in here all different effects so after just fixing every single piece of your design and make sure all the prototype is pretty much working the way you expect it to be now it's actually the time to go ahead and preview the browsers not exporting code because it's going to directly export some html code which we don't need it we want a react code so yeah you can go ahead and preview this in the browser so just click preview in the browser and it starts immediately processing the designs and clearly seeing here i've got is being processed into the cupcake inside of like anima personal and for slash cupcakes so it's uploading is all the files and it just like makes all the uh processing stuff so yeah you can you can just pretty much wait for this and you're just gonna do all the job for it and pretty cool so i already did that so i can just jump into my project.animateop.com so it's actually the dashboard where you find all of your projects and everything else uh regarding that so here's actually the project you're going to be working on which is you know submitted from the figma file that we have processed a little bit and there you go so we got here all all frames which means each frame represents a single page and we've got all the frames right here so it's actually the home page if you try to view the screen of the home page uh pretty much here we go the anime dashboard so we got like for example miss cupcake and we got you can shop now we got the image all the different images being exported right so we get designs in here so everything pretty much looking absolutely the same as our figma design so there is definitely no change in here so if you take a look let me just move on back into the design section and yes there's there's pretty much no changes the design is being sported the same way um yeah everything looking pretty great so far and also if we try to go with some responsiveness so if you try to go tablet yeah the tablet's responsive design still works fine so yeah everything seems sweet if you go with mobile so 375 pixels yeah pretty great so the mobile design as well looking so far so good and yeah i don't find any issues with design so make sure to double check your designs before submitting them and yeah we've got everything looking here absolutely fine you can even choose the responsive mode and you can pretty much go fully responsive just like moving around between the different stuff and by the way you can add more presets so if you add like a laptop preset or an extra large disk stock presets all of them going to be appearing here so just make sure to add them and your figma designs and link them throughout the anima plugin and yeah you can you can have all of different stuff in here so the prototypes and everything working absolutely fine screw this in here still the prototype works with this over effect and everything else so this is all being done behind the scenes from there so so far so good looking absolutely amazing so i've clicked that as well one miscake so we got everything looking um so far so good with the play mode right here and yeah let's try to go back to the shop so this is actually currently the home page that you're going to be working on and here for the cards it also works with the hover effects and uh with the pop-up or the pop-over effect you can have pop-overs too throughout this so you can go the checkouts and stuff like that but nevertheless let's go back to the shop now the most important part of this video is actually how we can export code it's pretty simple using animate to be honest so all you have to do is just go ahead into the code section and you're gonna have this like code section kind of thingy uh which pretty much gonna allow us to export code either throughout into an html code or you can select react which is what we want and here you can go into the settings that you can change what syntax you prefer like functions or classes like functional components or legacy classes for react so we just leave it as functions and uh yeah that should do the job perfectly right now uh without further ado so you can also go ahead and view that or like view the full design here using codepen it does the auto generation automatically for you which is pretty great now how we can explore this just by selecting each element for example go ahead and select this image in here it just like takes a little bit and it grabs us the fully uh generator current here like function app and this is actually the image and it gives you the url and it's curious in here anime uses amazon s3 buckets for uploading their assets which is pretty good so you have got all of your assets being backed up into the animal um storage so all you've got to do just point to the url and you got the image or whatever assets you would like to uh run of the bad and uh yeah so you get different components like multiple components and with the fully compatible components like it's already split up for you so you got here's actually a function of components for the image and here's the main application where you render the actual image throughout uh the pretty much the application and you got the imports you need the exports pretty good so so far yeah it looks it looks amazing so far so now we got this actually the image what we want we got the full web page so to do so i'm going to select like the full div and just by selecting like the full div which means all the elements in here all the nested elements all the images text and everything just like seeing that it might take a little bit of time and there you go so this is actually the fully generated code for all of the components um yeah it's clear to see all styles so let me just make that goes a little bit bigger and there you go it's actually the full home page but only for the desktop so so far this is actually the only desktop implementation so select that and we can go and select this again we go with the div um let me just let me just do this again so only just make sure to select the desktop real quick and select the dev here so to be able to select the fully uh the full home page and get the full design code so yeah it might take a little bit of time [Music] just waiting for it so there you go so we got here only for the desktop and if you want like the tablet and the mobile well you've got to just export all of these and make sure to combine them together using you know some logic you know to get things rendered but yeah it's not the best implementation to be honest because there's something like props are missing some props are not maintainable the names aren't that great so when it comes to naming some props here and there well yeah it's not the great naming uh it's not meant so much for maintainability but well so far so good it does good job when it just like you know it just exports all of that with a css style so all you've got to do just copy paste it and since you want something real quick to do and move on from design into development in no time well animal will do perfectly the job for you in that particular case so here we can do pretty much is actually copy the um the pretty much the code we want in here the react code and you can go into a project so i've already created a simple project using create react app and this is actually the application so all i need to do is let me just remove all of that and it can paste this in here um so we can have like just go ahead and save the uh image or pretty much the code here so it's not the image and yeah there you go so all got all the code in here and for create react up make sure to go ahead and install node sas because if you noticed here in css section uses sas so you make sure to use or to install sas in order to make the pre-compilation uh possible from the creature x and so yeah you make sure to do so so just go ahead and do like node says and yarn or just add not start so yarn add note says and all the things will be working astronomy for you so let's go ahead and do like i'm gonna create style.scss and go back here and i'm just going to copy all the css code just paste it in where it says so i'm going to paste that in and make sure to import the css in here otherwise it won't work so i can do style the css now it's going to run the actual application so just beyond start and there you go so the server has been started and we already got some issue in here so the code generation doesn't actually do a perfect job so you have to remove this export default because we're already exporting the application but yeah nevertheless just remove this export default and you got things right into the point so let me just see the reacts application uh refresh it again and there you go so we got the design fully working for us without any issues of finishing here for the desktop version it pretty much works as smooth as possible with all the images and here you got the homepage with all like add to cart and everything else you would like to but this is only for desktop so if we try to go and you know try to do some responsiveness to this um let's try to inspect it real quick we go with the uh mobile view and there you go so it chooses like iphone x it's not doing any responsiveness whatsoever so this is kind of a problematic because here anime doesn't actually do the full export of all the responsiveness and does all the logics now it only exports it for this particular um you know just like the particular design that is currently playing out like for desktop or tablet or mobile so if we just toggle it with mobile uh real quick and we select everything up again so if we go back up all the way up um so where is this let me just choose so i can i can pretty much go ahead and select the full designs in here you know to get everything else experiencing here we got a completely different component so we got x1 homepage mobile and this component is particularly specific for only rendering components and how we can make that possible from our end so to use this we can use a package called react responsive so this package allows us to detect using media queries of course like css media queries and tell whether or not it is actually currently a mobile device screen or a desktop screen or a tablet screen and so on and so forth so yeah using cs media queries we can do that and we can re-render everything out throughout our functional components so let's go ahead and install this real quick um so we got this actually the node i'm just gonna you know get back in here so i'm gonna just do yarn add and react responsive and make sure you just go ahead and add it real quick just submit it and you are good to go so i already did that i already installed it so i don't need anything more than that so now we can just toggle between both of these components depending on the actual media query or the screen size that is currently you know displaying our web page but before doing any further let me just gonna like refactor this code and make it look a little bit prettier because right now it's complete mess so what i can do i can um i think i can copy this yeah real quick i can go into the src and create new components so sorry for this um so src i can do like or containers i can create a folder called containers for holding on web pages and here i can create another folder which called home page so inside of that i can have like index.js x okay so this one you can import react into it and this one is going to represent well i think um yeah it's not the best way to go with this because we got different like you know designs for each like desktop tablet and mobile so how to approach this the best approach is uh we can go through this by creating like a desktop.dsx and also we can create another file mobile.jsx and each one of these files has a different components that represents that because you know anime has got that so we've got to work around this with this particular work around of course so here i can import um react camera guys and i can export a function well i can name it home page mobile okay i don't need any props or something and yeah so this is actually the mobile and here we got the desktop let's do the same thing again so export again a function which is homepage desktop real quick and for that particular case we're going to return our components that we've just copied so yeah just return all that and everything will be working fine so i don't know what is this issue here yeah it has uh okay i don't need that anyway pretty much i do but let me just have things working perfectly let me just copy that because this is actually the calling uh once we call the components and try to render it out we don't need this we only need the implementation for now so i can have this here um so we've got already the return statements i'm already exporting that [Music] let me see seems like definitely there is something wrong with this at some point i don't know okay didn't copy it right okay so we expected [Music] yeah there you go so this is actually just like a simple formatting issue and yeah so we got the x1 home page which which i don't need yet i need this song okay our home page desktop so this is actually the components for our desktop homepage and also for the style we need the same thing going on here so let me just go back into the upload.js and here for the rendering we're going to be rendering is uh you know this desktop or home page disks up and copy all the attributes so we can have all of this in here so you need these attributes otherwise you won't be able to render it right with the right data and make sure to hear include like home page disks operates that i'm not even exporting this let me just export it okay home page desktop and let's go and import it real quick um we can go inside of containers and we can go home page and we can do your desktop okay cool all right now for this css style but right here uh we've got to copy this i don't need this anymore so i'm just going to completely get rid of it and go to the home page create a new file i'm going to name it like desktop style.css so this is actually specifically for the desktop and paste the same design because i've copied the css code from there and yeah how old are you let's just import the style here so it's called desktop file scss and yes should you should do the job let me just um double check this but just copy pasting some paranoia of course and yeah oh yeah now it should work pretty much fine if you go back sorry guns up does not exist and it has no default exports so let me just do like export default application just fix the issue real quick now if you go back into the react application we still got our design so let me just see um there you go so if you refresh it we got the same design for desktop design no changes whatsoever oh yeah we got no issues so far now let's just introduce the mobile design that you've got from here so real quick let me just copy this um okay where is this [Music] so we got this actually the x home page where is that yeah i've got like a lot of code to copy oh i think by far this has been doing good okay so we can copy this into mobile.jsx and just return this okay cool all right um yeah we copied all that we don't actually need this or do we just let me just um okay i'm going to copy this i'm just going to get rid of that and have the export and everything and just one thing let's remove the curly brace at the end okay all right cool now we got here and also we have to include the style as well for it so create a new file mobile style dot scss and for that particular case you've got the full style here so let me just copy the style and just paste it right here and make sure to include it as well otherwise it won't work so mobile style css and last but not least we have to call that which means uh as we did with the desktop in here so we have to call it with the right data of the right props in order to make sure it works fine so for that particular case i'm just going to copy the code uh what is this okay yeah it's quite messy when you're trying to copy a code just like a little bit not really that great so go all the way up there you go go return x1 homepage and yeah voila so here we got both of these and of course here we can't render both of these unless uh we decide like if it is currently being displayed in a desktop screen like a really large screen we can display the two stop components otherwise just render out the mobile components or the tablet or whatsoever so as i did before in this particular case uh let me just let's let's skip about and we already installed react responsive so we can use this react responsive to pretty much grab if it is currently displayed in mobile or desktop using css media queries so we can grab this uh let me just import from react responsive so a use media query and this is actually a hook so from react responsive and there you go and here we can do is mobile so use media query and this one can take a query throughout an object so this is definitely a media query or a css media query and already just prepared that just real quick so we got a file here called responsive.js and this has just like some standard um sizes of different screens from mobile tablet and desktop and also we got some simple css media queries so we got here like mobile query has a maximum width of like a mobile like 468 pixels and we got a tablet query as well with a minimum width of a mobile and a maximum width of the tables and just including pixels and so on and so forth so it's pretty simple in here just encoded this particular file uh for just like making things go as fast as possible without any issues and yeah so there you go we've got the app.jsx in here and we can include this query right over here so just include media queries [Music] and say dots um or is mobile query cool now if we also need to check is disk soft use media query query media queries again and uh yeah we can do this song super cool now we've got both of these and both are booleans and if one of these booleans actually just changes for example we change the size of the browser at some point the full application is going to be like re-rendered which means it's going to allows us to render everything from scratch using this video occurs with these booleans now here we can do just a simple if else statement so if it is actually a mobile all we've got to do is simply return the components you've got for some reason these files has some like weird termination so just fix the file real quick fix that again and voila so i think it already says just include that here and it should do the job so if it is a mobile we return the mobile component otherwise so just say else um some reason there's an issue so it's called x1 homepage is not defined yeah definitely because here we're going to do home page so i think it happens like yeah i still haven't renamed this so i'm just gonna do just remove the x1 and everything should be working fine super cool also let's go ahead and pull this real quick so i'm using homepage from containers home page and we can do mobile cool i can copy this paste it right here and it should do the job so if you go back right to the else statements um let me just check out this and yeah just for some reason vs code has a buggy thing that says there is an error while there's none but yeah anyways just fix that real quick and there you go so we got both in here if you like we find this mobile render the mobile components otherwise render the desktop components and of course you can also include the tablet components here doing the same thing in here there are any issues now here we got the desktop and especially it's not fully desktop because it has only a size of like 1440 pixels well my screen currently i'm recording on 1980 pixels so yeah you got the points there's actually some differences so yeah you can you can pretty much add more design and you can just make it bigger on terms of the width but that is not a programmatic thing now if we try to go with the responsiveness real quick as clearly seen here the responsiveness works pretty fine so actually see we got everything and now we got the mobile view if you go back here so this is pretty much the same thing as the mobile view as it looks on animal or either on figma and your prototypes and everything so yeah it's identical and it looks absolutely the same thing so without any issues so you got everything all images the footer designed just pretty much everything working absolutely fine of your code so yeah pretty pretty well made up uh from pretty much the animal and it just like makes us generate both of these components real quick so no this is definitely not the best solution you can go with it just copy paste in all this code what you can do of course you can go ahead and copy code and just copy the generator code from any main here so you can of course get access to it because it is being such a huge help to us as a developers but what you can do of course you can copy that and you can just add some i don't know maintainable just kind of like i don't know a feather into it so you can just make it a little bit more readable just maintain it just try to refactor it a little bit put it on different components and try to fix the style a little bit of course just manipulate it from here and there in order to get the best out of this then of course you can just use it the same way as we did in here otherwise if you just like want to speed up projects and you would like want to instantly convert design into code and just like no matter time like an hour or two you can go with this way and if curious here it works absolutely amazing without any issues of course i'm not going to just go through all the slides in here you can of course have full access to this design and you can play with it if you want and you can just like have it's absolutely as you want it to be but this is pretty much the same way to work with different designs from desktop to mobile to tablets and and vice versa so all of these actually working fine now the other point i want to speak about is actually if you want to link all of these pages like you want to move from one page to another you can use pretty much react router and it does the job perfectly so you can use react router introduce multiple pages and you can browse from one page like the home page first slash and then you can go to like photoslice checkout and four slash cards and so on and so forth so you can have a lot of a plethora of possibilities and to go through from this application perspective so we just want to show you this and you can how you can go through all this uh from just like generating different codes from like different responsive code and how you can play with prototypes and stuff like that and of course you can have full access to all the different pages you've got so yeah there's no exceptions the page you export from figma you get on animal and you've got the full access to them clearly seen here so there is definitely no issues whatsoever so you can have absolutely full access and you can just work with them and you can manipulate them as you want but yeah so this is actually the video tutorial i just want to show you how you can go ahead and design or move from design real quick to code in no time it's curious in here we created a responsive design just like from a figma design into this code it's just like no time i just like spent absolutely no time rather than just explaining how the concept works into working into this website so you can add definitely more pages and you can add more responsive designs to it to make it the way you would like to be so anyways guys thanks for watching i hope you guys have enjoyed so yeah if you enjoyed this video tutorial give us a thumbs up why not subscribe just to because we've got different video stories coming up and then there are all hearts like design and different reacts tutorials on front end and backhand and stuff like that so make sure to press that red button and yeah we will all be very happy i think i was watching this before hope you guys enjoyed and catch you all in the next ones [Music] [Music] [Music] you

Channel: CoderOne

Views: 63,294

Rating: 4.8475895 out of 5

Keywords: React, Figma, Sketch, Adobe xd, Adobe XD, xd, Figma Design, Design to code, code from design, generate code, generate code from design, Anima, Anima 4, Anima with Figma, Generate React code, Generate React components, Design to full website, website from design, generate website from design, React website, HTML website, HTML from design, Figma React, Design websites, build websites, CSS design, CSS Figma, React CSS, React components, React code from figma, Sketch website

Id: 0xhu_vgKZ8k

Length: 40min 32sec (2432 seconds)

Published: Sat Oct 31 2020