Main Figma Rules

🎨 Main Figma Rules

To ensure clarity, consistency, and collaboration in all design files, ADR Studio Management follows strict Figma file organization guidelines.

---

1. 🧱 Structure & Grouping

✅ Group elements logically – avoid excessive grouping, but ensure components that belong together are grouped (e.g., buttons within a card). ✅ Use self-readable labels – avoid names like Group287387292. Use clear names like Button/Primary, Card/ProductInfo, Nav/Header. ✅ Frame everything properly – avoid unframed elements floating around the canvas.

---

2. 🏷 Naming Conventions

✅ Follow a structured naming system for layers and components:

• Component Type / Variant — e.g., Button / Primary, InputField / Active

• Page Section / Element — e.g., Homepage / Hero, Dashboard / Sidebar

✅ Use PascalCase or camelCase for consistency:

• Good: MainButton, mainButton

• Avoid: main button, MAIN BUTTON

---

3. 📄 Page Order & Organization

✅ Order pages in a clear, top-down hierarchy:

1. 💡 Guidelines & Components

2. 📌 Design System

3. 🏠 Homepage

4. 📊 Dashboard

5. 📱 Mobile Screens

6. 🔧 Prototypes & Flows

✅ Use separators between sections:

• Prefix with emojis (📂) or --- for clarity

---

4. 🧾 Macro Labels & Readability

✅ Use macro labels to visually separate file sections:

• Add a “Annotations” frame with explanation of file structure

• Use big, clear text for headers (e.g., SECTION HEADER above groups)

---

5. 🧩 Components & Variants

✅ Use Figma components and variants instead of duplicating ✅ Always apply Auto Layout for responsive and scalable designs

---

6. 💬 Comments & Documentation

✅ Add Figma comments to explain:

• Interactions

• Logic

• Navigation expectations

✅ Create a page titled Design Guidelines for deeper documentation

---

7. 🧹 Version Control & Cleanup

✅ Regularly clean up:

• Unused layers

• Old pages

• Redundant components

✅ Use version naming convention:

• e.g., 📄 Dashboard (v1.2)

• Archive older versions in a dedicated folder

---

📌 Key Takeaways from the Structure

🔝 Top Sections:

• 💡 Guidelines & Components → General rules, typography, UI basics

• 📌 Design System → Reusable buttons, inputs, modals

🧱 Core Design Pages:

• 🏠 Homepage → Landing pages

• 📊 Dashboard → Key content/data

• 📱 Mobile Screens → Mobile/responsive

• 🔧 Prototypes & Flows → Clickable flows, UX paths

📦 Extra Sections for Structure:

• — Separator — → Use to visually split old/new

• 📄 Additional Pages (v1.2) → Updated versions

• 📂 Archive (Old Versions) → Organized legacy content