# Figma Make Template Documentation

Complete guide for creating and publishing a Figma Make template for the Discourser Design System.

## 📚 Documentation Structure

This documentation is organized as a step-by-step learning path. Read the documents in order:

### Getting Started
1. **[Understanding Templates](./01-understanding-templates.md)**
   - What is a Figma Make template?
   - How templates relate to npm packages
   - The relationship between components, guidelines, and templates

2. **[Prerequisites](./02-prerequisites.md)**
   - Required Figma account type
   - Tools and access needed
   - What should be prepared beforehand

### Creating the Template
3. **[Creating Your Template File](./03-creating-template.md)**
   - Step-by-step template creation process
   - Setting up the Figma Make file
   - Installing the design system package

4. **[Adding Guidelines](./04-adding-guidelines.md)**
   - How to add guidelines to the guidelines/ folder
   - File-by-file copying instructions
   - Verifying guidelines are accessible

5. **[Example Starter Code](./05-example-starter-code.md)**
   - Example components to include
   - Best practices for starter code
   - How to showcase the design system

### Publishing and Maintenance
6. **[Publishing Your Template](./06-publishing-template.md)**
   - How to publish to team/organization
   - Template configuration options
   - Making the template discoverable

7. **[Maintaining Templates](./07-maintenance.md)**
   - Updating published templates
   - Version management
   - Handling breaking changes

### Reference
8. **[FAQ](./08-faq.md)**
   - Common questions and answers
   - Troubleshooting
   - Best practices

## 🎯 Quick Links

- **New to Figma Make Templates?** → Start with [Understanding Templates](./01-understanding-templates.md)
- **Ready to create?** → Jump to [Creating Your Template File](./03-creating-template.md)
- **Need help?** → Check the [FAQ](./08-faq.md)

## 📦 What You'll Create

By following this guide, you'll create a Figma Make template that includes:

- ✅ Pre-installed `@discourser/design-system` package
- ✅ Complete design system guidelines (colors, typography, spacing, components)
- ✅ Example starter components showing best practices
- ✅ Ready-to-use configuration (Vite, TypeScript)
- ✅ Published template accessible to your team/organization

## 🔗 External Resources

- [Figma Make Help Center](https://help.figma.com/hc/en-us/articles/34716344138519-Create-and-update-a-template-in-Figma-Make)
- [Write Design System Guidelines](https://developers.figma.com/docs/code/write-design-system-guidelines/)
- [Use Your Design System in Figma Make](https://help.figma.com/hc/en-us/articles/35946832653975-Use-your-design-system-package-in-Figma-Make)

## 💡 Key Concepts

**Template** = A pre-configured Figma Make file that others can use as a starting point

**Guidelines** = Markdown documentation that teaches Figma Make's AI how to use your design system

**Package** = The npm package (`@discourser/design-system`) containing your components

**Starter Code** = Example application code demonstrating proper usage

## ⏱️ Estimated Time

- **Reading documentation:** 20-30 minutes
- **Creating template:** 1-2 hours (first time)
- **Testing and publishing:** 30 minutes

Total: ~2-3 hours for first-time creation

## 🚀 Let's Get Started!

Begin with [Understanding Templates](./01-understanding-templates.md) →