Figma ddocdoc Design System

ddocdoc-app React Native 프로젝트의 디자인 시스템 레퍼런스. 2개 규칙 파일로 구성. 피그마 컴포넌트 변환 시 반드시 이 가이드를 따른다.

When to Apply

Reference these guidelines when:

• 피그마 디자인을 React Native 코드로 구현할 때
• NativeWind 컬러 클래스 매핑이 필요할 때
• 피그마 컴포넌트명에 해당하는 코드 컴포넌트를 찾을 때
• 버튼, 팝업, 입력, 바텀시트, 헤더, 선택 컨트롤 컴포넌트를 구현할 때

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Color & Styling	CRITICAL	code-
2	Component Mapping	HIGH	component-

Quick Reference

1. Color & Styling (CRITICAL)

• code - 컬러 토큰(Yellow/CoolGray/NeutralGray 등), NativeWind className 패턴, lineHeight 오버라이드, inline style 예외

2. Component Mapping (HIGH)

• component - SolidButton, FilterButton, SimplePopup, BaseSnackbar, BaseTextInput, SSNBackNumberPadBottomSheet, BaseBottomSheet, NavButtonTitleHeader, Checkbox 전체 매핑

How to Use

Read individual rule files for detailed Figma mapping and code examples:

rules/code.md
rules/component.md

Each rule file contains:

• YAML frontmatter with title, impact, and tags
• Figma component name → code component mapping
• Props reference
• Usage code examples

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md