what designers should know about coding

Figma’s Dev Mode is no longer free — but I still think it’s worth it.

Here’s some good resources for the five bits mentioned:

What is the CSS Box Model https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#what_is_the_css_box_model
Breakpoints in responsive design https://www.nngroup.com/articles/breakpoints-in-responsive-design/
Git fundamentals (just read the beginning) https://www.freecodecamp.org/news/learn-the-basics-of-git-in-under-10-minutes-da548267cc91/
Inspect element https://zdwghyzzy.medium.com/title-leverage-the-power-of-chromes-inspect-tool-a-guide-for-ui-ux-designers-c22748cdc192
---

▶️ Watch next
Creating stateful prototypes
https://www.youtube.com/watch?v=i8HHJHCFBME
Making a Netflix clone in Framer https://youtu.be/K9KqTnm6BF4
I spoke to the UK’s top freelance designer https://youtu.be/Rc5MzJx_Xxw

---

🌐 Get in touch at https://paavandesign.com/
💡 Got an idea for a video? Tell me here → https://forms.gle/Cf1W7Rwk7qDRkrVN6
🔔 Make sure you're subscribed so you don't miss any videos → https://www.youtube.com/channel/UClVa0IVnBSlMU9u8Rr2d5yw

---

This video was edited with Descript, which makes it easy to edit a video using the power of AI transcription. Try it here (affiliate) https://get.descript.com/j7stm9bed0d7
Screen Studio makes it easy to create beautiful screen recordings in minutes. Try it here (affiliate): https://screenstudio.lemonsqueezy.com/?aff=Aynye/
All my recommended tools → https://paavandesign.com/links

---

00:00 Intro
00:30 Making bread
00:59 The challenge of taking design into code
01:37 Dev handover
03:14 Should designers code?
03:33 Five things to know about code
03:38 Box model
04:00 Inspect element
04:45 Code base structure
05:18 Git outta here
05:37 Media queries
06:12 In conclusion

Видео what designers should know about coding канала Design with Paavan