How to convert your Figma design to React?

Поделиться
HTML-код
  • Опубликовано: 8 сен 2024

Комментарии • 92

  • @kennethmburu6262
    @kennethmburu6262 11 месяцев назад +5

    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.  11 месяцев назад +1

      Glad you found it helpful.☺️

  • @sathyadevv7987
    @sathyadevv7987 8 месяцев назад +1

    You explained locofy very well in 10 minutes 👏

    • @fewv.
      @fewv.  8 месяцев назад

      Happy that it helped you.☺️

  • @s.vishnuvardhan2509
    @s.vishnuvardhan2509 2 месяца назад

    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.  2 месяца назад +1

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

  • @krishnachaitanyap4050
    @krishnachaitanyap4050 Год назад +2

    Good explanation with your sweet voice 👍🏻

    • @fewv.
      @fewv.  Год назад

      Thank you!☺️

  • @navruz_usmonov
    @navruz_usmonov 8 месяцев назад +1

    Very useful content, thank you Vishakha :)

    • @fewv.
      @fewv.  8 месяцев назад +1

      Happy that it was helpful.☺️

  • @entrop9831
    @entrop9831 10 месяцев назад

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

    • @fewv.
      @fewv.  10 месяцев назад

      Thank you!☺️

  • @jaber-jsr
    @jaber-jsr Год назад +2

    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.  Год назад +2

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

  • @jonathankewe9415
    @jonathankewe9415 Год назад

    Thank you Vishakha! Love the strucuture of your website!

    • @fewv.
      @fewv.  Год назад +1

      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 :)

  • @landrhykopp9836
    @landrhykopp9836 11 месяцев назад +1

    Thank you for this video. hmm that voice😘 !

  • @gauravchakrawarti6175
    @gauravchakrawarti6175 Год назад +1

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

  • @mdshafqatullah4996
    @mdshafqatullah4996 Год назад

    Very nice 👍 your voice literally define all ui😊

  • @mdhridoybd6503
    @mdhridoybd6503 10 месяцев назад

    Amazing explain good work ❤

    • @fewv.
      @fewv.  10 месяцев назад

      Thank you!❤

  • @extramail1775
    @extramail1775 11 месяцев назад +1

    Cool it works thank you very much❤❤

    • @fewv.
      @fewv.  11 месяцев назад +1

      Thank you.☺❤

  • @arpidubey4735
    @arpidubey4735 Год назад

    Amazing explanation Thankyou✨👍

    • @fewv.
      @fewv.  Год назад

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

  • @chandrachoodR
    @chandrachoodR 11 месяцев назад

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

    • @fewv.
      @fewv.  10 месяцев назад +1

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

  • @Ashik_al_gorba
    @Ashik_al_gorba Год назад

    nice information thank you

  • @user-li9it6cf6o
    @user-li9it6cf6o 10 месяцев назад

    The best tuto, thank you so much

    • @fewv.
      @fewv.  10 месяцев назад

      Thanks to you!☺️

  • @haiffy
    @haiffy 11 месяцев назад +1

    This is much better than writing from scratch, thank you

    • @fewv.
      @fewv.  11 месяцев назад

      Glad you found it useful. Thank you.☺️

  • @P1pavankumar
    @P1pavankumar 2 месяца назад

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

  • @TsTheSeason
    @TsTheSeason 9 месяцев назад

    You are the best, Thank you!

    • @fewv.
      @fewv.  9 месяцев назад

      Thank you.☺️

  • @robinbreed2439
    @robinbreed2439 Год назад +1

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

    • @fewv.
      @fewv.  Год назад

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

  • @LorenzoJimenez
    @LorenzoJimenez 8 месяцев назад

    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.

  • @studioak90
    @studioak90 11 месяцев назад

    i like to watch this tutorial series

  • @adeema664
    @adeema664 10 месяцев назад

    Awesome Mam I love it 💖

    • @fewv.
      @fewv.  10 месяцев назад +1

      Thank you!☺️

  • @muhammadaneeq1121
    @muhammadaneeq1121 Год назад +2

    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.  Год назад +2

      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. ☺

  • @mateusfabricio9137
    @mateusfabricio9137 Год назад

    Fantastic. Congratulations.

    • @fewv.
      @fewv.  Год назад

      Thank you! ☺

  • @javialexarias
    @javialexarias 3 месяца назад

    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.  2 месяца назад

      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 2 месяца назад

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

    • @fewv.
      @fewv.  2 месяца назад

      You're Welcome! 😊

  • @lastspoil5547
    @lastspoil5547 8 месяцев назад +1

    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.  7 месяцев назад

      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!!☺️

  • @hansolo-7625
    @hansolo-7625 4 месяца назад

    You're awesome!!

  • @mrinmoyhalder7293
    @mrinmoyhalder7293 Год назад +3

    npm is not recognized in Visual Studio

    • @fewv.
      @fewv.  Год назад +4

      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. :)

  • @Yuryi_Abrokov
    @Yuryi_Abrokov Год назад

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

    • @fewv.
      @fewv.  10 месяцев назад

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

  • @ZeshanMukhtar1
    @ZeshanMukhtar1 Год назад

    Thanks

  • @avinashpatil4839
    @avinashpatil4839 3 месяца назад +1

    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.  3 месяца назад

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

  • @arnaudakotonou6254
    @arnaudakotonou6254 Год назад

    Amazing

    • @fewv.
      @fewv.  Год назад

      Glad you liked it.☺️

  • @ganeshchavan5299
    @ganeshchavan5299 7 месяцев назад

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

  • @kee04O
    @kee04O 5 месяцев назад

    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.  5 месяцев назад +1

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

  • @minhnguyenhainhat234
    @minhnguyenhainhat234 10 месяцев назад

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

    • @fewv.
      @fewv.  10 месяцев назад

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

  • @user-qu4he7bo6p
    @user-qu4he7bo6p 11 месяцев назад

    what about responsiveness? implement that as well i wanna learn

    • @fewv.
      @fewv.  11 месяцев назад

      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. ☺

  • @navaneetha.a258
    @navaneetha.a258 4 месяца назад

    There is no option plugin in my figma website

    • @fewv.
      @fewv.  4 месяца назад

      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.

  • @geeks3097
    @geeks3097 Год назад

    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.  Год назад +1

      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. :)

  • @pandian2001
    @pandian2001 11 месяцев назад

    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.  11 месяцев назад

      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 11 месяцев назад

      tq@@fewv.

  • @Glitchnavigator
    @Glitchnavigator 10 месяцев назад

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

  • @kee04O
    @kee04O 5 месяцев назад

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

    • @fewv.
      @fewv.  5 месяцев назад

      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 5 месяцев назад

      @@fewv. hahaha good idea ths for your reply

  • @wwe2kgamer
    @wwe2kgamer 11 месяцев назад

    Mam can you upload in Hindi

    • @fewv.
      @fewv.  11 месяцев назад

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

  • @ExploreSciFi
    @ExploreSciFi 4 месяца назад

    Are you on paid Plan of Locofy?

    • @fewv.
      @fewv.  4 месяца назад

      No. It's a free one.

  • @Samir51245
    @Samir51245 10 месяцев назад

    What about backend😂

    • @fewv.
      @fewv.  10 месяцев назад

      we have to work hard for its implementation.😂

  • @lifewithG-bengs
    @lifewithG-bengs 9 месяцев назад

    Is it free?

  • @Sky-yy
    @Sky-yy 6 месяцев назад

    The reason why frontend development is gonna be dead .

    • @TryerDev-yi1lu
      @TryerDev-yi1lu 2 месяца назад

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

  • @abhisarsingh1376
    @abhisarsingh1376 Год назад

    Hello Ms. Vishakha, I've been thoroughly enjoying your RUclips 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.  Год назад +1

      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. ☺

  • @vadlasaikrishna4307
    @vadlasaikrishna4307 Год назад

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

    • @fewv.
      @fewv.  Год назад +1

      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.