Figma Make Project Guidelines - 2025 Standards

Technology Stack Requirements

STRICTLY ALLOWED TECHNOLOGIES ONLY:

	Headless UI v2.x (React)
	Tailwind CSS v4.0
	Hono v4 (with Deno runtime)
	Supabase Edge Functions with Deno KV


PROHIBITED: Lucide UI, Lucide icons, Radix UI, shadcn/ui components, or any other UI libraries not explicitly listed above.
Project Structure (ES Standards Compliant)


project-root/
├── src/
│   ├── components/          # Headless UI-based components
│   │   ├── primitives/      # Base UI primitives
│   │   ├── composite/       # Composite components
│   │   └── index.ts         # Component exports
│   ├── hooks/               # Custom React hooks
│   │   └── index.ts
│   ├── services/            # Business logic & API calls
│   │   ├── api/            # External API integrations
│   │   ├── kv/             # Deno KV operations
│   │   └── index.ts
│   ├── models/              # TypeScript type definitions & interfaces
│   │   ├── domain/          # Domain models
│   │   ├── dto/            # Data transfer objects
│   │   └── index.ts
│   ├── lib/                 # Shared utilities & helpers
│   │   ├── constants.ts
│   │   └── utils.ts
│   ├── styles/              # Tailwind CSS configurations
│   │   └── app.css         # @import "tailwindcss"
│   └── app.tsx             # Application entry point
├── supabase/
│   └── functions/          # Edge functions (Hono-based)
│       └── api/
│           └── index.ts
├── tests/                  # Test files
├── deno.json              # Deno configuration
└── vite.config.ts         # Vite configuration


Core Design System Rules

1. Component Architecture

Base Components (Headless UI v2.x only):

	Use ONLY components from @headlessui/react v2.x
	Never create custom implementations of existing Headless UI components
	Leverage data-* attributes for state-based styling


Allowed Headless UI Components:

	Dialog, Disclosure, Listbox, Menu, Popover, Combobox
	Switch, RadioGroup, Checkbox, Transition
	Field, Fieldset, Input, Label, Description


2. Styling with Tailwind CSS v4.0

Configuration:

/* src/styles/app.css */
@import "tailwindcss";

/* Custom theme variables using CSS-first approach */
@layer theme {
  :root {
    --color-primary: oklch(59.3% 0.239 251.38);
    --color-secondary: oklch(74.8% 0.26 342.55);
  }
}


Utility Usage:

	Use Tailwind v4 native cascade layers
	Leverage color-mix() for color variations
	Implement container queries with @container
	Use logical properties (start/end instead of left/right)


3. Custom Icons

SVG Icon Implementation:

// src/components/primitives/Icon.tsx
export const IconDefinitions = {
  check: 'M20 6L9 17l-5-5',
  menu: 'M4 6h16M4 12h16M4 18h16',
  // Define all icons as path data
} as const;

export const Icon = ({ name, className }: IconProps) => (
  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <path d={IconDefinitions[name]} strokeWidth={2} />
  </svg>
);


Hono v4 Edge Function Structure


// supabase/functions/api/index.ts
import { Hono } from 'jsr:@hono/hono';
import { cors } from 'jsr:@hono/hono/cors';

const app = new Hono().basePath('/api');

// Middleware
app.use('*', cors());

// Routes
app.get('/health', (c) => c.json({ status: 'ok' }));
app.post('/data', async (c) => {
  const kv = await Deno.openKv();
  const data = await c.req.json();
  await kv.set(['data', crypto.randomUUID()], data);
  return c.json({ success: true });
});

Deno.serve(app.fetch);


Deno KV Integration


// src/services/kv/store.ts
export class KVStore {
  private kv: Deno.Kv;
  
  async initialize() {
    this.kv = await Deno.openKv();
  }
  
  async get<T>(key: Deno.KvKey): Promise<T | null> {
    const result = await this.kv.get<T>(key);
    return result.value;
  }
  
  async set<T>(key: Deno.KvKey, value: T): Promise<void> {
    await this.kv.set(key, value);
  }
  
  async atomic(operations: AtomicOperation[]): Promise<boolean> {
    const atomic = this.kv.atomic();
    // Apply operations
    const result = await atomic.commit();
    return result.ok;
  }
}


State Management Rules

Local State


	Use React hooks (useState, useReducer) for component state
	Never use external state management libraries
	Implement context API for cross-component state when necessary


Persistent State


	Use Deno KV for server-side persistence
	Implement optimistic UI updates with proper error handling
	Use atomic transactions for data consistency


Notification System

Toast Implementation (Headless UI-based):

// src/components/composite/Toast.tsx
import { Transition } from '@headlessui/react';

export const Toast = ({ show, message, type }: ToastProps) => (
  <Transition show={show}>
    <div className="fixed bottom-4 right-4 transition data-[closed]:translate-y-2 data-[closed]:opacity-0">
      <div className={`rounded-lg p-4 ${type === 'error' ? 'bg-red-500' : 'bg-green-500'}`}>
        {message}
      </div>
    </div>
  </Transition>
);


ALL user feedback MUST use toast notifications. Alert(), console.log(), or other feedback methods are PROHIBITED in production.
File Modification Protocol

When Modifying Components:


	Check /src/models/ for type definitions
	Verify /src/components/primitives/ for base components
	Update /src/services/ if business logic changes
	Test with Deno's built-in test runner


When Modifying Styles:


	Use only Tailwind v4 utilities
	Check theme variables in app.css
	Verify responsive breakpoints
	Test with native container queries


Strict Development Rules

ABSOLUTELY FORBIDDEN:


	No Temporary Code: No TODO, placeholder, dummy, or mock implementations
	No Console Logging: Use structured logging or toast notifications
	No Arbitrary Decisions: Every implementation must follow these guidelines exactly
	No External Dependencies: Only use the four approved technologies
	No Improvements Without Request: Do not add features not explicitly requested
	No Simplified Implementations: Full, production-ready code only
	No Debug Code: Remove all debugging artifacts before delivery


REQUIRED PRACTICES:


	Reusable Components: Every UI element must be a reusable component
	Type Safety: Full TypeScript typing for all code
	Error Boundaries: Implement proper error handling at all levels
	Atomic Operations: Use Deno KV atomic operations for data consistency
	Accessibility: All components must meet WCAG 2.1 AA standards
	Performance: Lazy load components and implement code splitting


Configuration Files

vite.config.ts


import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});


deno.json


{
  "imports": {
    "@hono/hono": "jsr:@hono/hono@^4.9.0",
    "@std/assert": "jsr:@std/assert@1",
    "@std/dotenv": "jsr:@std/dotenv@latest"
  },
  "tasks": {
    "dev": "deno run --allow-all --watch main.ts",
    "test": "deno test --allow-all"
  }
}


Testing Requirements


// tests/example.test.ts
import { assertEquals } from '@std/assert';

Deno.test('Component renders correctly', async () => {
  // Test implementation
  assertEquals(result, expected);
});


Deployment Checklist


	[ ] All components use Headless UI v2.x
	[ ] Styling uses only Tailwind CSS v4.0 utilities
	[ ] Edge functions use Hono v4 with Deno
	[ ] Data persistence uses Deno KV
	[ ] No external dependencies beyond approved stack
	[ ] All notifications use toast system
	[ ] No console.log statements
	[ ] Full TypeScript coverage
	[ ] Tests pass with deno test
	[ ] Production build successful


Version Compatibility Matrix


	
		
			Technology
			Version
			Documentation
		
	
	
		
			Headless UI
			v2.2.x
			headlessui.com
		
		
			Tailwind CSS
			v4.0.x
			tailwindcss.com/docs/v4
		
		
			Hono
			v4.9.x
			hono.dev
		
		
			Deno
			v2.1.x
			docs.deno.com
		
		
			Supabase Edge Functions
			Latest
			supabase.com/docs/guides/functions
		
	



CRITICAL REMINDER: This guideline is absolute. Any deviation requires explicit approval. Figma's tendency to make arbitrary decisions or add unrequested features must be strictly controlled by adhering to these guidelines without exception.