diff --git a/rules/use-figma-dev-mode/figma-dev-mode.png b/rules/use-figma-dev-mode/figma-dev-mode.png index 10cb316103..039e9b9f60 100644 Binary files a/rules/use-figma-dev-mode/figma-dev-mode.png and b/rules/use-figma-dev-mode/figma-dev-mode.png differ diff --git a/rules/use-figma-dev-mode/rule.md b/rules/use-figma-dev-mode/rule.md index 58e4561dc5..46521a70b8 100644 --- a/rules/use-figma-dev-mode/rule.md +++ b/rules/use-figma-dev-mode/rule.md @@ -16,6 +16,9 @@ One of the biggest pain points during design-to-development handover is the loss [Figma Dev Mode](https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode) solves this issue by offering developers all the necessary design details in a developer-friendly format. With access to measurements, code snippets, and assets, developers can easily translate designs into code without needing constant input from designers. +`youtube: https://www.youtube.com/watch?v=__ABPkb0aF8` +**Video: Intro to Dev Mode (4 min 25 sec)** + ## Benefits of Using Figma Dev Mode * **Reduced Friction:** All design assets are presented in a format developers can immediately use, reducing misunderstandings. @@ -31,8 +34,6 @@ One of the biggest pain points during design-to-development handover is the loss 3. **Organize Components:** Properly named layers and components help developers quickly find relevant assets. 4. **Test Asset Downloads:** Ensure assets are correctly prepared and named for development to prevent rework. -### Good Practices for Dev Mode Handovers - ::: bad ![Figure: Bad Example - A basic mockup or prototype with no technical details, forcing developers to guess measurements and styles.](figma-preview.png) ::: @@ -40,6 +41,3 @@ One of the biggest pain points during design-to-development handover is the loss ::: good ![Figure: Good Example - The design includes useful developer details such as color codes, font styles, measurements, and spacing.](figma-dev-mode.png) ::: - -`youtube: https://www.youtube.com/watch?v=__ABPkb0aF8` -**Video: Intro to Dev Mode (4 min 25 sec)**