# Figma Implementation Guide
## JR Solutions Property Valuation Portal
**Version:** 1.0
**Date:** December 2024
**For:** Designers & Design Teams
---
## Table of Contents
1. [Getting Started](#getting-started)
2. [Figma File Structure](#figma-file-structure)
3. [Design System Setup](#design-system-setup)
4. [Component Library](#component-library)
5. [Screen Implementation Workflow](#screen-implementation-workflow)
6. [Responsive Design Guidelines](#responsive-design-guidelines)
7. [Prototyping & Interactions](#prototyping--interactions)
8. [Developer Handoff](#developer-handoff)
9. [Quality Checklist](#quality-checklist)
---
## Getting Started
### Prerequisites
1. **Figma Account**: Professional or Organization plan recommended
2. **Plugins to Install**:
- Iconify (for icons)
- Unsplash (for placeholder images)
- Content Reel (for dummy data)
- Arc (for measurement annotations)
- Autoflow (for user flow diagrams)
- Stark (for accessibility checking)
3. **Fonts**:
- Inter (Primary font - available on Figma)
- System fonts as fallbacks
4. **Resources**:
- `WIREFRAME_SPECIFICATIONS.md` (this directory)
- `SCREEN_DESIGN_SPECIFICATION.md` (../docs/)
- `VISUAL_LAYOUT_GUIDE.md` (../docs/)
### Initial Setup Steps
1. Create new Figma file: "JR Solutions Valuation Portal"
2. Set up pages structure (see below)
3. Import design tokens (colors, typography)
4. Build component library
5. Create screen templates
6. Start with desktop designs, then mobile
---
## Figma File Structure
### Page Organization
```
📄 Cover Page
└── Project overview, team, version info
📄 Design System
├── 🎨 Colors & Styles
├── 🔤 Typography
├── 📏 Spacing & Grid
├── 🔲 Shadows & Effects
└── 📐 Breakpoints
📄 Components
├── 🔘 Buttons
├── 📝 Forms (Inputs, Dropdowns, Checkboxes, etc.)
├── 🃏 Cards
├── 🧭 Navigation (Top Nav, Bottom Nav, Breadcrumb)
├── 🗂️ Tables & Lists
├── 🪟 Modals & Overlays
├── 🏷️ Badges & Labels
├── 📊 Charts & Graphs
├── 🖼️ Media (Image Viewer, Photo Grid)
├── 💬 Comments & Chat
└── ⚙️ Miscellaneous
📄 Templates
├── Desktop (1440px)
├── Tablet (768px)
└── Mobile (375px)
📄 Screens - Dashboard
├── DASH-001 - Role Dashboard (Desktop)
├── DASH-001 - Role Dashboard (Mobile)
└── DASH-002 - Analytics Dashboard
📄 Screens - Valuations
├── VAL-001 - List View (Desktop)
├── VAL-001 - List View (Mobile)
├── VAL-002 - Create/Edit Form (Desktop)
├── VAL-002 - Create/Edit Form (Mobile)
├── VAL-003 - Detail View (Desktop)
└── VAL-003 - Detail View (Mobile)
📄 Screens - Documents
├── DOC-001 - Document Management (Desktop)
├── DOC-001 - Document Management (Mobile)
├── MAP-001 - Map View (Desktop)
└── MAP-001 - Map View (Mobile)
📄 Screens - Review & Approval
├── REV-001 - Review Workflow
└── REV-002 - Bulk Review Queue
📄 Screens - Reports
└── REP-001 - Reports Dashboard
📄 Screens - Admin
├── ADM-001 - User Management
└── (other admin screens)
📄 Screens - Profile
└── PRO-001 - User Profile
📄 Prototypes
├── Desktop Flow
└── Mobile Flow
📄 Developer Handoff
├── Annotations
├── Specs
└── Assets Export
```
---
## Design System Setup
### Step 1: Create Color Styles
**How to create color styles in Figma:**
1. Select any shape
2. Click on color picker
3. Click on "Style" icon (4 dots)
4. Click "+" to create new style
5. Name it according to convention below
**Color Naming Convention:**
```
Primary/Blue-600
Primary/Blue-500
Primary/Blue-700
Secondary/Green-500
Accent/Amber-500
Error/Red-500
Text/Primary
Text/Secondary
Background/Base
Background/Surface
Border/Default
```
**Complete Color Palette:**
```javascript
// Primary Colors
Blue-600: #2563EB
Blue-500: #3B82F6
Blue-700: #1D4ED8
Blue-50: #EFF6FF
// Secondary Colors
Green-500: #10B981
Green-50: #ECFDF5
// Accent
Amber-500: #F59E0B
Amber-50: #FFFBEB
// Error
Red-500: #EF4444
Red-50: #FEF2F2
// Warning
Yellow-500: #EAB308
Yellow-50: #FEFCE8
// Grays
Gray-900: #111827
Gray-800: #1F2937
Gray-700: #374151
Gray-600: #4B5563
Gray-500: #6B7280
Gray-400: #9CA3AF
Gray-300: #D1D5DB
Gray-200: #E5E7EB
Gray-100: #F3F4F6
Gray-50: #F9FAFB
// White & Black
White: #FFFFFF
Black: #000000
```
### Step 2: Create Text Styles
**Text Style Naming Convention:**
```
Heading/H1/Desktop
Heading/H1/Mobile
Heading/H2/Desktop
Heading/H2/Mobile
Body/Large
Body/Regular
Body/Small
Label/Medium
Caption/Regular
```
**Typography Scale:**
| Style | Desktop | Mobile | Weight | Line Height |
|-------|---------|--------|--------|-------------|
| H1 | 32px | 24px | Bold (700) | 125% |
| H2 | 24px | 20px | Bold (700) | 133% |
| H3 | 20px | 18px | Semibold (600) | 140% |
| H4 | 18px | 16px | Semibold (600) | 133% |
| Body Large | 16px | 16px | Regular (400) | 150% |
| Body | 14px | 14px | Regular (400) | 143% |
| Caption | 12px | 12px | Regular (400) | 133% |
| Label | 14px | 14px | Medium (500) | 143% |
**Font:** Inter (available on Figma)
### Step 3: Create Effect Styles
**Shadow Naming Convention:**
```
Shadow/SM
Shadow/MD
Shadow/LG
Shadow/XL
```
**Shadow Values:**
```
Shadow/SM: 0px 1px 2px rgba(0, 0, 0, 0.05)
Shadow/MD: 0px 4px 6px rgba(0, 0, 0, 0.07)
Shadow/LG: 0px 10px 15px rgba(0, 0, 0, 0.1)
Shadow/XL: 0px 20px 25px rgba(0, 0, 0, 0.15)
```
### Step 4: Grid & Layout System
**Desktop Grid (1440px frame):**
- Columns: 12
- Gutter: 24px
- Margin: 80px (left & right)
- Type: Stretch
**Tablet Grid (768px frame):**
- Columns: 8
- Gutter: 16px
- Margin: 32px
- Type: Stretch
**Mobile Grid (375px frame):**
- Columns: 4
- Gutter: 16px
- Margin: 16px
- Type: Stretch
**Baseline Grid (All):**
- 8px baseline grid for vertical rhythm
---
## Component Library
### 1. Button Component
**Variants Structure:**
```
Button
├── Type
│ ├── Primary
│ ├── Secondary
│ ├── Ghost
│ └── Icon
├── Size
│ ├── Large (48px)
│ ├── Medium (44px)
│ └── Small (36px)
└── State
├── Default
├── Hover
├── Active
├── Disabled
└── Loading
```
**Implementation:**
1. Create master component
2. Use component properties for variants
3. Enable Auto Layout
4. Set resizing to "Hug contents" horizontally
5. Add icon slot (optional, swappable instance)
6. Text should be center-aligned
**Props:**
- `type`: Primary | Secondary | Ghost | Icon
- `size`: Large | Medium | Small
- `state`: Default | Hover | Active | Disabled | Loading
- `icon-left`: boolean
- `icon-right`: boolean
**Spacing:**
- Padding: 12px (horizontal), 12px (vertical) for medium
- Gap between icon and text: 8px
### 2. Input Field Component
**Variants:**
```
Input
├── Type
│ ├── Text
│ ├── Number
│ ├── Email
│ └── Password
├── Size
│ ├── Large (48px)
│ └── Medium (44px)
└── State
├── Default
├── Focus
├── Error
├── Disabled
└── Success
```
**Implementation:**
1. Frame with Auto Layout (Vertical)
2. Label (optional, detached)
3. Input container
- Left icon slot (optional)
- Text input
- Right icon slot (optional)
4. Helper text / Error text (below)
**Props:**
- `type`: Text | Number | Email | Password
- `size`: Large | Medium
- `state`: Default | Focus | Error | Disabled | Success
- `has-label`: boolean
- `has-helper-text`: boolean
- `has-left-icon`: boolean
- `has-right-icon`: boolean
### 3. Dropdown Select Component
**Same as Input Field, but with:**
- Chevron down icon (right)
- Dropdown menu (separate component)
### 4. Card Component
**Variants:**
```
Card
├── Type
│ ├── Default
│ ├── Elevated
│ └── Outlined
├── Padding
│ ├── Small (16px)
│ ├── Medium (20px)
│ └── Large (24px)
└── State
├── Default
└── Hover
```
**Implementation:**
1. Frame with Auto Layout
2. Background: White
3. Border: 1px solid Gray-200 (Outlined type)
4. Shadow: Shadow/SM (Elevated type)
5. Border Radius: 8px
### 5. Status Badge Component
**Variants by Status:**
- Draft (Gray)
- Survey (Blue)
- Submitted (Indigo)
- Review (Yellow)
- Approval (Orange)
- Approved (Green)
- Rejected (Red)
**Implementation:**
1. Frame with Auto Layout
2. Padding: 4px 8px
3. Border Radius: 12px (pill shape)
4. Icon + Text
5. Font: 12px Bold
### 6. Data Table Component
**Structure:**
1. Table Container
- Table Header Row
- Header Cells (with sort icons)
- Table Body
- Table Rows (with hover state)
- Table Cells
- Pagination
**Implementation:**
- Use Auto Layout for rows and cells
- Create component variants for:
- Row: Default | Hover | Selected
- Cell: Default | Sortable | Action
- Use component properties for cell content
### 7. Navigation Components
#### Top Navigation Bar
**Fixed height: 64px (desktop), 56px (mobile)**
**Structure:**
1. Container (Full width)
2. Left section: Logo
3. Center section: Search (desktop only)
4. Right section: Notification + Profile
**Implementation:**
- Frame with Auto Layout (Horizontal)
- Space between: Auto
- Background: White
- Shadow: Shadow/SM
#### Bottom Navigation (Mobile Only)
**Fixed height: 56px**
**Structure:**
1. Container (Full width, 5 items max)
2. Nav Items (Icon + Label)
**States:**
- Active (Blue-600)
- Inactive (Gray-600)
### 8. Modal/Dialog Component
**Sizes:**
- Small: 400px
- Medium: 600px
- Large: 800px
- Full: 90vw
**Structure:**
1. Overlay (Black 50% opacity)
2. Modal Container
- Header (Title + Close button)
- Content (Scrollable)
- Footer (Action buttons)
**Implementation:**
- Modal container: White background, Shadow/XL
- Border Radius: 8px
- Center-aligned on desktop
- Full-width on mobile
---
## Screen Implementation Workflow
### Recommended Order
**Phase 1: Foundation (Week 1)**
1. Design System setup
2. Component library (all components)
3. Templates (Desktop, Tablet, Mobile)
**Phase 2: Core Screens (Week 2)**
1. DASH-001 - Dashboard (Desktop + Mobile)
2. VAL-001 - List View (Desktop + Mobile)
3. VAL-002 - Create Form (Desktop + Mobile)
**Phase 3: Supporting Screens (Week 3)**
1. VAL-003 - Detail View
2. DOC-001 - Documents
3. MAP-001 - Map View
**Phase 4: Workflow Screens (Week 4)**
1. REV-001 - Review
2. REV-002 - Bulk Review
3. REP-001 - Reports
**Phase 5: Admin & Profile (Week 5)**
1. ADM-001 - User Management
2. PRO-001 - Profile
3. Additional admin screens
**Phase 6: Polish & Prototype (Week 6)**
1. Add interactions
2. Create prototypes
3. Developer handoff
4. Final review
### Per-Screen Workflow
**For each screen:**
1. **Review Specifications**
- Read wireframe spec
- Understand layout
- Note special requirements
2. **Create Frame**
- Desktop: 1440px width, auto height
- Mobile: 375px width, auto height
- Name: `[SCREEN-ID] Screen Name [Device]`
3. **Apply Grid**
- Enable grid (desktop/mobile)
- Verify alignment
4. **Build Structure**
- Top Nav (instance)
- Content area
- Footer Nav (mobile only)
5. **Add Components**
- Use instances from library
- Avoid detaching unless necessary
- Override text/content as needed
6. **Content Population**
- Use realistic data
- Use placeholder images
- Ensure proper text hierarchy
7. **States & Variants**
- Create variants for different states
- Example: Empty state, Loading, Error
8. **Responsive Behavior**
- Apply Auto Layout
- Set proper constraints
- Test resizing
9. **Annotations**
- Add measurement annotations
- Add interaction notes
- Add conditional display notes
10. **Review & Iterate**
- Self-review against specs
- Team review
- Revisions
---
## Responsive Design Guidelines
### Breakpoint Strategy
**Desktop First:**
1. Design for 1440px first
2. Create tablet (768px) variant
3. Create mobile (375px) variant
**Key Breakpoints:**
- Desktop: ≥ 1024px (design at 1440px)
- Tablet: 768px - 1023px (design at 768px)
- Mobile: < 768px (design at 375px)
### Auto Layout Best Practices
**1. Container Direction**
- Horizontal for rows
- Vertical for stacks
- Wrap for responsive grids
**2. Resizing Rules**
- `Hug contents`: Buttons, badges, pills
- `Fill container`: Inputs, cards, sections
- `Fixed`: Icons, avatars, specific dimensions
**3. Spacing**
- Use consistent gaps (8, 12, 16, 24, 32)
- Use padding for internal spacing
- Use gap for space between children
**4. Alignment**
- Start: Left-aligned content
- Center: Centered content
- End: Right-aligned content
- Space between: Navigation bars
### Mobile Adaptations
**Layout Changes:**
- Multi-column → Single column
- Side-by-side → Stacked
- Horizontal → Vertical scroll (chips, tabs)
- Data table → Card list
**Component Changes:**
- Reduce padding (24px → 16px)
- Smaller font sizes (see typography scale)
- Bottom nav instead of top-only
- Full-width buttons
- Bottom sheets instead of dropdowns
**Touch Targets:**
- Minimum 44px × 44px
- Increase spacing between interactive elements
- Larger tap areas for icons
---
## Prototyping & Interactions
### Prototype Setup
**Create 2 Prototype Flows:**
1. Desktop Flow (starting frame: Dashboard Desktop)
2. Mobile Flow (starting frame: Dashboard Mobile)
**Device Settings:**
- Desktop: Custom (1440 × 900), Scale: 50%
- Mobile: iPhone 14 Pro (393 × 852), Scale: 100%
### Interaction Patterns
#### 1. Navigation
**Top Nav Logo → Dashboard**
- Click: Navigate to Dashboard
- Transition: Instant
**Breadcrumb Links**
- Click: Navigate to respective screen
- Transition: Dissolve (300ms)
**Bottom Nav (Mobile)**
- Click: Navigate to section
- Transition: Instant
- Show active state
#### 2. Lists & Cards
**List Item / Card Click**
- Click: Navigate to detail view
- Transition: Smart Animate (300ms)
**Hover States (Desktop)**
- Mouse enter: Show hover state
- After delay: None
- Transition: Dissolve (100ms)
#### 3. Buttons
**Primary Action Buttons**
- Click: Navigate or show modal
- Transition: Instant or Dissolve
**Secondary Buttons**
- Same as primary
#### 4. Modals
**Open Modal**
- Click trigger: Show modal overlay
- Transition: Dissolve (200ms)
- Overlay: Black 50% opacity
**Close Modal**
- Click close (X) or overlay: Close modal
- Transition: Dissolve (200ms)
#### 5. Forms
**Form Submit**
- Click submit button: Show success state or next step
- Transition: Smart Animate (400ms)
**Tabs**
- Click tab: Switch tab content
- Transition: Dissolve (200ms)
#### 6. Dropdowns
**Open Dropdown**
- Click select: Show dropdown menu
- Transition: Dissolve (150ms)
**Select Option**
- Click option: Update select, close dropdown
- Transition: Instant
#### 7. Status Changes
**Approve/Reject Actions**
- Click button: Show confirmation modal
- After confirm: Update status, show success toast
- Transition: Smart Animate (300ms)
### Advanced Interactions
**Smart Animate Usage:**
- Use for smooth transitions between similar screens
- Same layer names ensure morphing
- Good for: Form steps, status changes, expanding cards
**Overlay Positioning:**
- Manual: For modals (center)
- Top: For top notifications/toasts
- Bottom: For bottom sheets (mobile)
---
## Developer Handoff
### Preparation Checklist
**Before Handoff:**
- [ ] All screens designed (Desktop + Mobile)
- [ ] All components finalized
- [ ] All interactions added
- [ ] Annotations added
- [ ] Specs documented
- [ ] Assets exported
- [ ] Design tokens documented
### Developer Mode Setup
**Enable Dev Mode in Figma:**
1. Click "Dev Mode" toggle (top-right)
2. Review all screens
3. Add measurement annotations
4. Add implementation notes
### Annotations to Add
**Layout Annotations:**
- Spacing between elements (use Arc plugin)
- Padding values
- Width/height constraints
- Alignment rules
**Conditional Display:**
- "Show when status = 'approved'"
- "Hide on mobile"
- "Display if user role = 'admin'"
**Interactive Annotations:**
- "On click: Navigate to..."
- "On hover: Show tooltip"
- "On submit: Validate and..."
**Data Binding:**
- "Bind to: valuation.valuation_number"
- "Format: Currency (INR)"
- "Max length: 200 characters"
### Export Settings
**Icons:**
- Format: SVG
- Scale: 1x
- Naming: `icon-[name].svg`
**Images:**
- Format: PNG
- Scale: 1x, 2x, 3x
- Naming: `img-[name].png`
**Logo:**
- Format: SVG + PNG
- Scales: 1x, 2x, 3x
### Design Tokens Documentation
**Export from Figma:**
1. Use "Inspect" panel in Dev Mode
2. Copy CSS/JSON for colors, typography, shadows
3. Document in `design-tokens.json` file
**Example:**
```json
{
"colors": {
"primary": {
"blue-600": "#2563EB",
"blue-500": "#3B82F6"
}
},
"typography": {
"heading-1": {
"desktop": {
"fontSize": "32px",
"lineHeight": "40px",
"fontWeight": "700"
}
}
}
}
```
### Implementation Notes Document
**Create markdown file with:**
- Component usage guidelines
- State management notes
- API integration points
- Special considerations
- Accessibility requirements
---
## Quality Checklist
### Design Quality
**Visual Consistency:**
- [ ] All screens use design system colors
- [ ] All text uses text styles (no hardcoded values)
- [ ] All spacing follows 8px grid
- [ ] All shadows use effect styles
- [ ] All icons are same size/style
**Component Usage:**
- [ ] All components are instances (not detached)
- [ ] Component overrides used correctly
- [ ] No unnecessary frame nesting
- [ ] Auto Layout applied everywhere possible
- [ ] Naming convention followed
**Content:**
- [ ] Realistic data used (not "Lorem ipsum")
- [ ] All placeholder images appropriate
- [ ] Text hierarchy clear
- [ ] No typos or grammatical errors
- [ ] All labels/buttons have meaningful text
### Technical Quality
**Responsive Design:**
- [ ] All screens work at 1440px, 768px, 375px
- [ ] Auto Layout constraints correct
- [ ] Elements resize properly
- [ ] No content cutoff at different sizes
- [ ] Touch targets minimum 44px (mobile)
**Prototyping:**
- [ ] All key flows prototyped
- [ ] Interactions feel natural
- [ ] Transitions are smooth (not too fast/slow)
- [ ] Hover states work (desktop)
- [ ] Modal overlays work
- [ ] Forms have validation states
**Developer Handoff:**
- [ ] All screens annotated
- [ ] Measurements documented
- [ ] Conditional logic noted
- [ ] Assets exported correctly
- [ ] Dev Mode ready
- [ ] Implementation notes provided
### Accessibility
**Color Contrast:**
- [ ] Text on background: 4.5:1 minimum
- [ ] Large text (18px+): 3:1 minimum
- [ ] Interactive elements: 3:1 minimum
- [ ] Use Stark plugin to verify
**Touch Targets:**
- [ ] All buttons minimum 44px × 44px
- [ ] Adequate spacing between tap targets
- [ ] No overlapping interactive elements
**Content:**
- [ ] All images have alt text (in annotations)
- [ ] Form fields have labels
- [ ] Error messages are clear
- [ ] Focus order is logical
---
## Tips & Best Practices
### Performance
**Large Files:**
- Break into multiple pages
- Use shared library for components
- Delete unused components/styles
- Flatten heavy effects when possible
**Component Library:**
- Keep components simple
- Avoid deep nesting
- Use component properties wisely
- Test components before using widely
### Collaboration
**Version Control:**
- Use Figma's version history
- Create named versions for milestones
- Add descriptions to versions
**Comments:**
- Use comments for feedback
- Tag team members with @mentions
- Resolve comments when addressed
**File Organization:**
- Consistent naming convention
- Logical page structure
- Regular cleanup of unused assets
### Common Mistakes to Avoid
❌ **Don't:**
- Detach components unnecessarily
- Use hardcoded colors/text styles
- Create duplicate components
- Over-nest Auto Layout frames
- Forget to apply constraints
- Skip responsive testing
- Use raster images for icons
✅ **Do:**
- Use component instances
- Apply styles consistently
- Keep components in library
- Use Auto Layout properly
- Set correct constraints
- Test all breakpoints
- Use SVG for icons/logos
---
## Resources & References
### Figma Learning Resources
- [Figma Help Center](https://help.figma.com/)
- [Figma Best Practices](https://www.figma.com/best-practices/)
- [Auto Layout Guide](https://www.figma.com/best-practices/auto-layout/)
- [Component Properties](https://help.figma.com/hc/en-us/articles/5579474826519)
### Design References
- [Material Design](https://material.io/design)
- [Apple Human Interface Guidelines](https://developer.apple.com/design/)
- [Tailwind CSS](https://tailwindcss.com/)
### Tools & Plugins
- [Iconify](https://www.figma.com/community/plugin/735098390272716381/Iconify)
- [Unsplash](https://www.figma.com/community/plugin/738454987945972471/Unsplash)
- [Content Reel](https://www.figma.com/community/plugin/731627216655469013/Content-Reel)
- [Stark](https://www.figma.com/community/plugin/732603254453395948/Stark)
- [Arc](https://www.figma.com/community/plugin/762070688792833472/Arc)
---
## Appendix: Quick Reference
### Keyboard Shortcuts
| Action | Shortcut (Mac) | Shortcut (Win) |
|--------|----------------|----------------|
| Frame | `A` | `A` |
| Rectangle | `R` | `R` |
| Text | `T` | `T` |
| Component | `Cmd+Opt+K` | `Ctrl+Alt+K` |
| Instance | `Cmd+Opt+B` | `Ctrl+Alt+B` |
| Auto Layout | `Shift+A` | `Shift+A` |
| Group | `Cmd+G` | `Ctrl+G` |
| Ungroup | `Cmd+Shift+G` | `Ctrl+Shift+G` |
| Duplicate | `Cmd+D` | `Ctrl+D` |
| Zoom to fit | `Shift+1` | `Shift+1` |
| Zoom to 100% | `Shift+0` | `Shift+0` |
### Component Property Types
- **Boolean**: Show/hide elements
- **Instance Swap**: Swap icons, images
- **Text**: Override text content
- **Variant**: Switch between variants
---
**END OF FIGMA IMPLEMENTATION GUIDE**
**Next Steps:**
1. Set up Figma file with this structure
2. Begin with Design System and Component Library
3. Follow screen implementation workflow
4. Regular reviews with team
5. Prepare developer handoff materials
**Questions?** Refer to specifications documents or reach out to the team.
---
**Version:** 1.0
**Last Updated:** December 2024
**Status:** ✅ Ready for Implementation