From 15fb757674b46b685e67d301aa186af53a5e6b7f Mon Sep 17 00:00:00 2001 From: "Betty Bondoc [SSW]" <33026270+bettybondoc@users.noreply.github.com> Date: Wed, 30 Oct 2024 14:44:57 +1100 Subject: [PATCH] =?UTF-8?q?XS=E2=9C=94=20=E2=97=BE=20Update=20rule.md=20(#?= =?UTF-8?q?9503)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update rule.md * Auto-fix Markdown files * Delete unnecessary heading * Update rules-to-better-figma.md --------- Co-authored-by: github-actions[bot] --- categories/design/rules-to-better-figma.md | 3 ++- rules/use-figma-dev-mode/rule.md | 22 ++++++++++------------ 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/categories/design/rules-to-better-figma.md b/categories/design/rules-to-better-figma.md index f56e646b100..776e4927b77 100644 --- a/categories/design/rules-to-better-figma.md +++ b/categories/design/rules-to-better-figma.md @@ -7,7 +7,8 @@ index: - software-for-ux-design - figma-prototypes - figma-uses - +- figma-dev-mode + --- Enhance your design process with these essential rules for using Figma, covering crucial software choices for UX design, effective prototyping techniques, and diverse applications of Figma in your workflow. diff --git a/rules/use-figma-dev-mode/rule.md b/rules/use-figma-dev-mode/rule.md index caa320094b5..58e4561dc59 100644 --- a/rules/use-figma-dev-mode/rule.md +++ b/rules/use-figma-dev-mode/rule.md @@ -1,9 +1,8 @@ --- type: rule title: Do you use Figma Dev Mode to improve developer handovers? -seoDescription: "Learn how Figma Dev Mode streamlines developer handovers by - providing a seamless bridge between design and development. type: rule" -uri: use-figma-dev-mode +seoDescription: Learn how Figma Dev Mode streamlines developer handovers by providing a seamless bridge between design and development +uri: figma-dev-mode authors: - title: Betty Bondoc url: https://www.ssw.com.au/people/betty-bondoc/ @@ -15,15 +14,15 @@ One of the biggest pain points during design-to-development handover is the loss -Figma 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. +[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. ## Benefits of Using Figma Dev Mode -- **Reduced Friction:** All design assets are presented in a format developers can immediately use, reducing misunderstandings. -- **Code Snippets Ready to Use:** Extract CSS, Swift, or Android code directly from the design elements. -- **Access to Design Properties:** Measurements, spacing, and font details are available in one place, eliminating the need to switch between tools. -- **Downloadable Assets:** Developers can directly download production-ready images and icons from Figma without requesting files from designers. -- **Version Control Visibility:** See updates and changes in real-time, ensuring everyone is aligned with the latest design iteration. +* **Reduced Friction:** All design assets are presented in a format developers can immediately use, reducing misunderstandings. +* **Code Snippets Ready to Use:** Extract CSS, Swift, or Android code directly from the design elements. +* **Access to Design Properties:** Measurements, spacing, and font details are available in one place, eliminating the need to switch between tools. +* **Downloadable Assets:** Developers can directly download production-ready images and icons from Figma without requesting files from designers. +* **Version Control Visibility:** See updates and changes in real-time, ensuring everyone is aligned with the latest design iteration. ## How to Use Dev Mode Effectively @@ -42,6 +41,5 @@ Figma Dev Mode solves this issue by offering developers all the necessary design ![Figure: Good Example - The design includes useful developer details such as color codes, font styles, measurements, and spacing.](figma-dev-mode.png) ::: -### Watch this video on Figma Dev Mode - - +`youtube: https://www.youtube.com/watch?v=__ABPkb0aF8` +**Video: Intro to Dev Mode (4 min 25 sec)**