for those who made a copy of the draft and could not find the export panel like in the video. -simply select the image you want to export -click on the Design link on the top right of the screen then scroll to the bottom there you will find the Export panel after that just follow the steps like shown in the video
Thanks bro been trying to figure out how to export for the last 15 mins. youre a life saver man. I now Knight you STACKOVERFLOW GOD. you may use this in your resume for years to come lol but thanks man
You need to hold down the Alt key while hovering over elements to show the distances. They show automatically if you're on the Inspect tab on the right panel.
this is just amazing stuff, I want to take this moment and make a note so that anyone who ping on this comment ,I get the notification in future and remember how the react started and what does it make change in my life as a developer. I will keep on updating my journey (24-04-2022)
Exactly the video I needed. I just got a Frontend role and a figma file of the new UI was given to me had no idea what to do with it but this video just tells me everything I need to know. Thank You.
Man just getting myself to start learning this after bootcamp was sooooooooooooooo hard, Litterally took me 2 days to finally sit through 30 minutes, but as soon as 30 minutes passed by im hooked, i cant stop, i wont stop. Thanks for this opportunity, seriously
@@jay_wright_thats_right you know what's crazy , it's been 11 months, through pain and struggle I can finally say with utmost confidence, that I can finally center a div now
@@ActuallyAudacity hey it's been a year , I got employed, all jokes aside , it's worth it, even if it doesn't lead you to the exact path you were striving for .
@@wowzande I'm glad you're doing well man. Also yeah 100% I actually did compsci at uni and graduating in a month and already have a job lined up as well. I'm just doing the JS, React, HTML and CSS courses since I'm trying to get better at web dev. My modules at uni didn't cover web dev so just brushing up on old learning and getting good at React at the moment.
@@ActuallyAudacity I don't know you but I'm proud of you. There are so many people in this world that are losing hope in themselves to keep pushing, and I was one of them. I just think persistence is key, and it's so hard to convince people that they have to keep moving , to stop settling for less, that they are worth so much more than that. I wish you the best man , good luck on your future endeavors.
Thanks for summarizing. Scrimba brought me here after the HTML and CSS course, and I was confused whether or not I had to use it to complete the projects. I haven't used it yet, but I gather Figma is a visual tool to help developers map out layouts and create a visual aid that includes automatic styling properties for when it's time to actually code the page. Am I right?
Cannot reach the link to the figma files. The link from the Scrimba course only leads to this video. Writting the URL from the video gives me a "File not found" on the figma page
wow only 500 views, either the 150k people who watched the course didn't make it yet, lost interest, or already know figma. Anyhow its still surprising how less than 1% of course viewers didn't reach here yet.
@@andrijavranic5058 from another comment: for those who made a copy of the draft and could not find the export panel like in the video. -simply select the image you want to export -click on the Design link on the top right of the screen then scroll to the bottom there you will find the Export panel after that just follow the steps like shown in the video
Start by saying what Figma is. Also at 0.35 nowone can tell what you clicked on...watched it 5 times, cant undrestand / see wheres the link you talking about/ clicking
yeah this didn't help me much. how on earth do i move it into my working space so i can actually change the varaibles on the page? if i save it as a png then thats all it is.
I thought the same thing, that Figma must have updated their site, but you can view the CSS code by clicking the toggle button in the upper right hand side that looks like Or as a shortcut, press Shift-D
i mean an could we just copy the CSS code from the Figma site and put it in our own CSS file without having to export it. I mean i can do that way as well but seem its more steps to get to the same place.
You wouldn't get to the same place by copying the CSS without exporting the image. CSS will style your project, but the image has to be hosted somewhere and the HTML has to pull it from somewhere, and that somewhere is the server where you host your project.
Just a note to myself for the future. So I will remember how it all started (here and now) and where I am (the future me) today. You can comment below as a reminder for your future self :) 26.01.2022
do u think that this is helpfull ??? ur just chosen random website and discover it 5:30 without telling us the steps in figma am just freezed at the home page of frigma not helpfull dislike
@@maurov6861 Figma design files contain required data (css , image files etc) for your web design. That is, a frontend developer can take css and assets (img files etc) info from figma file to prepare html and css files. But as a front end developer I am not sure if we need it any more after tailwind.
for those who made a copy of the draft and could not find the export panel like in the video.
-simply select the image you want to export
-click on the Design link on the top right of the screen then scroll to the bottom there you will find the Export panel after that just follow the steps like shown in the video
Thanks mate
Thanks bro been trying to figure out how to export for the last 15 mins. youre a life saver man. I now Knight you STACKOVERFLOW GOD. you may use this in your resume for years to come lol but thanks man
@@samsunggalaxys7806 is your username after a phone
thanks sir. you saved the video haha.
MVP. Thanks boss.
You need to hold down the Alt key while hovering over elements to show the distances. They show automatically if you're on the Inspect tab on the right panel.
omg thank you!
Life saver. Literally nothing in the tutorial was working til I made that switch.
Thanks, that's why I was about to complain)
this is just amazing stuff, I want to take this moment and make a note so that anyone who ping on this comment ,I get the notification in future and remember how the react started and what does it make change in my life as a developer. I will keep on updating my journey (24-04-2022)
started learninig react too. we could work together to build portfolio
how its going
I seriously can't imagine how else I would've been learning to program if there was no Scrimba
Exactly the video I needed. I just got a Frontend role and a figma file of the new UI was given to me had no idea what to do with it but this video just tells me everything I need to know. Thank You.
I love Scrimba so so so much. What a product it is!!!!
Man just getting myself to start learning this after bootcamp was sooooooooooooooo hard, Litterally took me 2 days to finally sit through 30 minutes, but as soon as 30 minutes passed by im hooked, i cant stop, i wont stop. Thanks for this opportunity, seriously
@@jay_wright_thats_right you know what's crazy , it's been 11 months, through pain and struggle I can finally say with utmost confidence, that I can finally center a div now
@@wowzande You must have missed the HTML videos then lmaoo
@@ActuallyAudacity hey it's been a year , I got employed, all jokes aside , it's worth it, even if it doesn't lead you to the exact path you were striving for .
@@wowzande I'm glad you're doing well man. Also yeah 100%
I actually did compsci at uni and graduating in a month and already have a job lined up as well. I'm just doing the JS, React, HTML and CSS courses since I'm trying to get better at web dev. My modules at uni didn't cover web dev so just brushing up on old learning and getting good at React at the moment.
@@ActuallyAudacity I don't know you but I'm proud of you. There are so many people in this world that are losing hope in themselves to keep pushing, and I was one of them. I just think persistence is key, and it's so hard to convince people that they have to keep moving , to stop settling for less, that they are worth so much more than that. I wish you the best man , good luck on your future endeavors.
This is not up to date. Inspect feature is not available unless you sign up for a plan that includes the Dev Mode.
Short and concise. Exactly what I needed. Thank you!
thats what she said..
I cannot find the fima file in the course. the only link in the scrimba learn react course goes to this video
same probleme here
that's the problem with a lot of tutorials, one small detail and you are derailed.
Bob is the best explainer ever.
Thanks for summarizing. Scrimba brought me here after the HTML and CSS course, and I was confused whether or not I had to use it to complete the projects. I haven't used it yet, but I gather Figma is a visual tool to help developers map out layouts and create a visual aid that includes automatic styling properties for when it's time to actually code the page. Am I right?
this should be added to every scrimba video when they show the figma design fila hahaha
Wow this is a great website! Thank you for introducing this!
its amazing ...you and your community!
I have a question. As the css code are in pixel values, as a developer should I stick to px, or convert them into relative values like rem,em etc?
thank you very much
I always enjoy your tutorials sir.
They are comprehensive ànd complete sir. I like you
i was at the 8 minutes mark then i got engrossed in the potential masterpiece i could make and started dancing and bobbinb my head
click on the magnet, and from there you can adjust how the tracks snap onto the grid. if you want it to be each 1/4 of a bar, click "line"
how do you get to the inspect tab , i only have design and prototype on mine
nice tutorial
enjoyed it
how do i even get the link? this is not well tied together at all. so frustrating
Go to lesson "Quick Figma Walkthrough". At the end of the video you can find the link to the Figma Board.
@@Paxles what is at the end of the video is a link to youtube and not the figma file.
The way how this 10 minute video saved my life! 😂👌
Cannot reach the link to the figma files. The link from the Scrimba course only leads to this video. Writting the URL from the video gives me a "File not found" on the figma page
Try this maybe? www.figma.com/file/2QuGfAOcHaZJ6aHXfuamnK/Hometown-Homepage?node-id=0%3A1
wow only 500 views, either the 150k people who watched the course didn't make it yet, lost interest, or already know figma. Anyhow its still surprising how less than 1% of course viewers didn't reach here yet.
I just watched it - unfortunately my figma interface doesn't have "export" in the same place as Bob's...
@@andrijavranic5058 from another comment: for those who made a copy of the draft and could not find the export panel like in the video.
-simply select the image you want to export
-click on the Design link on the top right of the screen then scroll to the bottom there you will find the Export panel after that just follow the steps like shown in the video
Thanks . I am a java dev
Cannot find the figma file in the course. Where to find the link of the figma file?
Start by saying what Figma is. Also at 0.35 nowone can tell what you clicked on...watched it 5 times, cant undrestand / see wheres the link you talking about/ clicking
Bob is the best
yeah this didn't help me much. how on earth do i move it into my working space so i can actually change the varaibles on the page? if i save it as a png then thats all it is.
the layout has changed and i am confused following your react tutorials
Great video! Thanks! unfortunately, CSS code feature seems to be over!
I thought the same thing, that Figma must have updated their site, but you can view the CSS code by clicking the toggle button in the upper right hand side that looks like
Or as a shortcut, press Shift-D
@@cannabisanomaly thanks a lot, after a short research, I figured out the same thing. Thanks again for your reply 🌷
This is outdated version figma has introduced dev mode now. There is no inspect option after figma introduced dev mode
Hi, Sir Bob how can we use png file which Is save in our local drive in our scrimba file?
I hope to see this on the Front-end Path next month
Thanks, Bob.
exactly what I needed to know! thank you!
DevMode requires a paid subscription now... :(
The video was so helpful!Thanks a lot!
hey guys can you help me regarding how to add a png file from figma to your scrims i tries many times please guys anyone guide me 😞😞
i mean an could we just copy the CSS code from the Figma site and put it in our own CSS file without having to export it. I mean i can do that way as well but seem its more steps to get to the same place.
You wouldn't get to the same place by copying the CSS without exporting the image. CSS will style your project, but the image has to be hosted somewhere and the HTML has to pull it from somewhere, and that somewhere is the server where you host your project.
Regardless of how important the information is
Where is the link on Figma?
Bob where is the files on scrimba?
Look up how to make templates, once you have a template customized for you, you can get to making soft quickly
I just accidentally clicked Ask to edit how can i undo that.
i cant find this page, can someone help
easy easy
Thank you 😊
thank you!
Just a note to myself for the future. So I will remember how it all started (here and now) and where I am (the future me) today. You can comment below as a reminder for your future self :)
26.01.2022
just do it
We got this :)
Alright my nigga, i feel you!
i am here with you
how's it going now?
i dont understand where do I type the code ?
same lol
great vid. thanks
starts at 3:10
There will be a product update for this developer mode, soon
Thank you
Great and useful!
Thanks :)
WHERE FILE THO
It is a great tutorial
nice
selam gardaşlarım
aleyküm selam gadaşım
Cheers man, you crashed it!
Relatively sane values 💀
do u think that this is helpfull ??? ur just chosen random website and discover it 5:30 without telling us the steps in figma am just freezed at the home page of frigma not helpfull dislike
in fact I don't understand what figma centers on
@@maurov6861 Figma design files contain required data (css , image files etc) for your web design. That is, a frontend developer can take css and assets (img files etc) info from figma file to prepare html and css files. But as a front end developer I am not sure if we need it any more after tailwind.
thank you!