How to convert your Figma design to React?

In this video, I tried to explain how you can convert your Figma design to code. (React)
You can also refer to my website for a better understanding of this topic. fewv.dev/
The design I used: www.uxcrush.com/fintech-figma...
The design above is not mine. Got it from (www.uxcrush.com/figma-website...)
Thank you for watching :)
If you have any queries feel free to ask me in the comment section below.
Chapters:
0:00 Intro
0:12 What is Figma?
0:27 Login to Figma
1:11 Working with the project
1:49 Install the locofy plugin
2:33 Create a new project
7:37 Download the code
8:15 Testing it on the local machine
9:50 Wrap Up / Thank You :)

Пікірлер: 92

  • @jonathankewe9415
    @jonathankewe9415 Жыл бұрын

    Thank you Vishakha! Love the strucuture of your website!

  • @fewv.

    @fewv.

    Жыл бұрын

    Hi Jonathan, Actually, that's not my website/design. I used a template that was available on this site (www.uxcrush.com/figma-website-templates/) for this video. Thank you :)

  • @gauravchakrawarti6175
    @gauravchakrawarti617510 ай бұрын

    Thank you so much.... I really need it

  • @mdshafqatullah4996
    @mdshafqatullah499610 ай бұрын

    Very nice 👍 your voice literally define all ui😊

  • @navruz_usmonov
    @navruz_usmonov6 ай бұрын

    Very useful content, thank you Vishakha :)

  • @fewv.

    @fewv.

    6 ай бұрын

    Happy that it was helpful.☺️

  • @sathyadevv7987
    @sathyadevv79877 ай бұрын

    You explained locofy very well in 10 minutes 👏

  • @fewv.

    @fewv.

    7 ай бұрын

    Happy that it helped you.☺️

  • @arpidubey4735
    @arpidubey473511 ай бұрын

    Amazing explanation Thankyou✨👍

  • @fewv.

    @fewv.

    11 ай бұрын

    I’m glad you liked it. Thank you.☺️

  • @landrhykopp9836
    @landrhykopp98369 ай бұрын

    Thank you for this video. hmm that voice😘 !

  • @Ashik_al_gorba
    @Ashik_al_gorba10 ай бұрын

    nice information thank you

  • @entrop9831
    @entrop98318 ай бұрын

    your voice's really cute, comfortable and video make everything clear real quick, i love it

  • @fewv.

    @fewv.

    8 ай бұрын

    Thank you!☺️

  • @kennethmburu6262
    @kennethmburu62629 ай бұрын

    am fullstack and i hate spending hours on front-end especially css part now you have gaved me the magic to speed up my projects

  • @fewv.

    @fewv.

    9 ай бұрын

    Glad you found it helpful.☺️

  • @user-li9it6cf6o
    @user-li9it6cf6o8 ай бұрын

    The best tuto, thank you so much

  • @fewv.

    @fewv.

    8 ай бұрын

    Thanks to you!☺️

  • @krishnachaitanyap4050
    @krishnachaitanyap405011 ай бұрын

    Good explanation with your sweet voice 👍🏻

  • @fewv.

    @fewv.

    11 ай бұрын

    Thank you!☺️

  • @extramail1775
    @extramail177510 ай бұрын

    Cool it works thank you very much❤❤

  • @fewv.

    @fewv.

    10 ай бұрын

    Thank you.☺❤

  • @TsTheSeason
    @TsTheSeason7 ай бұрын

    You are the best, Thank you!

  • @fewv.

    @fewv.

    7 ай бұрын

    Thank you.☺️

  • @mateusfabricio9137
    @mateusfabricio913711 ай бұрын

    Fantastic. Congratulations.

  • @fewv.

    @fewv.

    11 ай бұрын

    Thank you! ☺

  • @mdhridoybd6503
    @mdhridoybd65039 ай бұрын

    Amazing explain good work ❤

  • @fewv.

    @fewv.

    9 ай бұрын

    Thank you!❤

  • @hansolo-7625
    @hansolo-76253 ай бұрын

    You're awesome!!

  • @studioak90
    @studioak909 ай бұрын

    i like to watch this tutorial series

  • @jaber-jsr
    @jaber-jsr11 ай бұрын

    Always ❤ hand code. Though those code builders are time saving but most of the time not perfect code generate. But hopefully better to be next 😅.

  • @fewv.

    @fewv.

    11 ай бұрын

    Absolutely. I agree that hand-coding offers a deeper understanding and control, even though code builders are time-savers. ☺

  • @adeema664
    @adeema6648 ай бұрын

    Awesome Mam I love it 💖

  • @fewv.

    @fewv.

    8 ай бұрын

    Thank you!☺️

  • @arnaudakotonou6254
    @arnaudakotonou625411 ай бұрын

    Amazing

  • @fewv.

    @fewv.

    11 ай бұрын

    Glad you liked it.☺️

  • @ZeshanMukhtar1
    @ZeshanMukhtar110 ай бұрын

    Thanks

  • @s.vishnuvardhan2509
    @s.vishnuvardhan250921 күн бұрын

    Im requesting to you that can you prepare a video of complete front end and backend website? so that we can understand the entire structure of the website. by the way your teaching and explanation was so good..

  • @fewv.

    @fewv.

    20 күн бұрын

    Will surely keep that in mind and work on it. Thank you 😊

  • @chandrachoodR
    @chandrachoodR9 ай бұрын

    Thank you , possibly another one on how do you solve the issues could he interesting

  • @fewv.

    @fewv.

    9 ай бұрын

    You're welcome. For sure, I'll.☺

  • @P1pavankumar
    @P1pavankumar25 күн бұрын

    in visual studio code what is command for installing packages for mobile application server

  • @ganeshchavan5299
    @ganeshchavan52996 ай бұрын

    Will my buttons that i have set to go to next page will it work ??

  • @muhammadaneeq1121
    @muhammadaneeq112111 ай бұрын

    Mam i am trying to include responsiveness in the site but it didn't work for me as i adjust the width of page to 780px for tablet but width remains 1728px. Can you help in this regard

  • @fewv.

    @fewv.

    11 ай бұрын

    For responsiveness, it's important to have a Figma design that has multiple breakpoints, for different devices and screen sizes. So you have to first design a website with multiple breakpoints. I hope this helps you. ☺

  • @haiffy
    @haiffy9 ай бұрын

    This is much better than writing from scratch, thank you

  • @fewv.

    @fewv.

    9 ай бұрын

    Glad you found it useful. Thank you.☺️

  • @Yuryi_Abrokov
    @Yuryi_Abrokov11 ай бұрын

    It's amazing. I will try. Dear Vishakha, can you advise me where to download template for Figma from?

  • @fewv.

    @fewv.

    9 ай бұрын

    Thank you, Yuryi!☺For figma design You can download them from here: www.uxcrush.com/figma-website-templates/

  • @LorenzoJimenez
    @LorenzoJimenez6 ай бұрын

    Hi, I lost you in minute 3, because I selected react native and there are less options than the react project. Anyways, I selected a wireframing with several screens, but cannot select all, I have to do the export for each one. Thanks for the video.

  • @robinbreed2439
    @robinbreed243910 ай бұрын

    Looks great, but a bummer that the button styling didn't come through properly in the end.

  • @fewv.

    @fewv.

    10 ай бұрын

    Thank you. I’ll make sure to improve that in my next video.☺️

  • @mrinmoyhalder7293
    @mrinmoyhalder729311 ай бұрын

    npm is not recognized in Visual Studio

  • @fewv.

    @fewv.

    11 ай бұрын

    This means npm is not installed on your computer. So, just open the terminal and run the command ( npm install -g npm ) and then run the command ( npm -v ), and if this gives you the npm version that means, now you have npm installed globally. Or check this guide: docs.npmjs.com/downloading-and-installing-node-js-and-npm Hope this helps. :)

  • @lastspoil5547
    @lastspoil55476 ай бұрын

    As a frontend or email developer, will we ever write HTML and CSS code from scratch, or will we just use AI tools, including Anima App and Locofy?

  • @fewv.

    @fewv.

    6 ай бұрын

    As a frontend developer, its a YES. But sometimes we prefer tailwind, bootstrap, etc. And also there are going to be times when we don’t write HTML, CSS from scratch and use template instead. So don’t worry, just keep learning and growing!!☺️

  • @minhnguyenhainhat234
    @minhnguyenhainhat2349 ай бұрын

    the ant UI library in4:57, we must purchase ant and add it to figma, right?

  • @fewv.

    @fewv.

    9 ай бұрын

    No, if you're using an individual account for Figma, you can use it for free.☺

  • @vadlasaikrishna4307
    @vadlasaikrishna430711 ай бұрын

    I am unable to see any plugin option in my figma account

  • @fewv.

    @fewv.

    11 ай бұрын

    Hi Vadla, I'm sorry, I'm unfamiliar with that issue. However, you could update your Figma app or clear your cache if you are on the browser. Hopefully, that will resolve the problem for you.

  • @javialexarias
    @javialexariasАй бұрын

    Thank so much, I want more videos like this. I´m doing a web, and react it´s new for me. But this video really help me! So, do you know something channel for learn react that you can recommed me?

  • @fewv.

    @fewv.

    Ай бұрын

    Glad it was helpful.😊 And as for learning React the best would be the React's official documentation: react.dev/learn and if you want to learn it through videos maybe try some udemy courses?

  • @javialexarias

    @javialexarias

    Ай бұрын

    @@fewv. Thanks!! Yes I have react courses in udemy :)

  • @fewv.

    @fewv.

    Ай бұрын

    You're Welcome! 😊

  • @pandian2001
    @pandian20019 ай бұрын

    will this code also contains the animations, effects, i've done in figma??? or the exported code will be in a static mode

  • @fewv.

    @fewv.

    9 ай бұрын

    Of course it will also export them. Just make sure to include them when you’re working with styling and layouts. I hope this helps.😊

  • @pandian2001

    @pandian2001

    9 ай бұрын

    tq@@fewv.

  • @kee04O
    @kee04O3 ай бұрын

    And i want to ask that if i want to edit or fix some problems, should i learn react or just html enough(actually both i just know little lol)

  • @fewv.

    @fewv.

    3 ай бұрын

    MUST KNOW THE CONCEPT OF REACT. ✨ then it’ll be easier to solve the problems. ☺️

  • @geeks3097
    @geeks309711 ай бұрын

    But this will give fixed pixels and it wont be responsive it will break once size of screen changes like for mobile device or any other device how to make it responsive

  • @fewv.

    @fewv.

    11 ай бұрын

    Yes, you're right. To make your Figma design responsive you have to work with Figma frames with constraints. Create a design that adapts and looks good on various screen sizes and devices and then convert it into code. I hope this helps. :)

  • @navaneetha.a258
    @navaneetha.a2583 ай бұрын

    There is no option plugin in my figma website

  • @fewv.

    @fewv.

    3 ай бұрын

    Please make sure you have a Figma file opened on Figma website and have access to that file, if not please use the free templates.☺ I hope this helps.

  • @avinashpatil4839
    @avinashpatil48392 ай бұрын

    Very nice but i got error for index.html file can you possible for show your file. Please solve my error somebody know this error to please explain how to solve it

  • @fewv.

    @fewv.

    2 ай бұрын

    Can you please tell me what error message are you getting?

  • @Glitchnavigator
    @Glitchnavigator9 ай бұрын

    create one video like xd code to react as like figma to code.

  • @user-qu4he7bo6p
    @user-qu4he7bo6p9 ай бұрын

    what about responsiveness? implement that as well i wanna learn

  • @fewv.

    @fewv.

    9 ай бұрын

    For responsiveness, the Figma design should have multiple breakpoints for different devices. I'll surely try to make a video on that too. Stay tuned. ☺

  • @kee04O
    @kee04O3 ай бұрын

    Actually, it based on ai generated right? So, one day i think locofy would be charged either. So is there another way?

  • @fewv.

    @fewv.

    3 ай бұрын

    There are several other plugins like this too. For instance builder.io.😁 till the time they charge, let’s enjoy. And I truly believe that free plugins will keep on coming.😆

  • @kee04O

    @kee04O

    3 ай бұрын

    @@fewv. hahaha good idea ths for your reply

  • @wwe2kgamer
    @wwe2kgamer9 ай бұрын

    Mam can you upload in Hindi

  • @fewv.

    @fewv.

    9 ай бұрын

    Thank you for your opinion. ☺I'll surely try. However, now there's an option on KZread where you can enable subtitles in your preferred language. ☺

  • @ExploreSciFi
    @ExploreSciFi2 ай бұрын

    Are you on paid Plan of Locofy?

  • @fewv.

    @fewv.

    2 ай бұрын

    No. It's a free one.

  • @Samir51245
    @Samir512459 ай бұрын

    What about backend😂

  • @fewv.

    @fewv.

    9 ай бұрын

    we have to work hard for its implementation.😂

  • @lifewithG-bengs
    @lifewithG-bengs8 ай бұрын

    Is it free?

  • @Sky-yy
    @Sky-yy5 ай бұрын

    The reason why frontend development is gonna be dead .

  • @TryerDev-yi1lu

    @TryerDev-yi1lu

    24 күн бұрын

    ? How about crm systems, hard render logic (react rerender), abd architecture of app ...

  • @abhisarsingh1376
    @abhisarsingh137611 ай бұрын

    Hello Ms. Vishakha, I've been thoroughly enjoying your KZread channel! Your content is truly insightful and engaging. However, I noticed that there isn't an option available on your website to ask questions or seek clarification. It would be incredibly helpful if you could consider adding a way to contact you for doubts and inquiries.

  • @fewv.

    @fewv.

    11 ай бұрын

    Hello Abhisar! I wanted to express my gratitude for your kind words. If you're interested, you can connect with me on Discord using this link: discord.gg/PmSSrncq. I'm always here, ready to chat and provide assistance in any way I can. If, by any chance, the link doesn't work, you can also find it on the About page. ☺