kyeongmin
51548fdc41
figma_to_html_agent/: - Figma MCP 기반 블록 추출 에이전트 (CLAUDE.md, PLAN.md, PROCESS.md 등) - block-tests/: Figma→HTML 변환 결과물 (bim-3roles-cards 등) - templates_staging/: Jinja2 템플릿 + meta.yaml + example.yaml - figma-analysis/, figma-assets/: Figma 분석 데이터 + 에셋 - scripts/: gradient_math.py 등 유틸리티 설정: - .mcp.json: Figma MCP 서버 연결 설정 - .claude/settings.json: Claude Code 프로젝트 설정 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
98 lines
3.0 KiB
Markdown
98 lines
3.0 KiB
Markdown
# Figma 도형 + 그라데이션 처리
|
||
|
||
## 핵심 원리
|
||
|
||
Figma에서 도형 작업 방식:
|
||
1. 박스(프레임/컨테이너) 안에 도형을 만든다 (border-radius + gradient)
|
||
2. **박스를 회전**시킨다 (도형 자체가 아니라)
|
||
3. 박스가 돌면 그 안의 도형도 같이 돌아간다 → border-radius와 gradient가 함께 회전
|
||
|
||
## CSS 구현 구조
|
||
|
||
**도형 자체에 transform 적용 금지. 반드시 래퍼(wrapper) 컨테이너에 적용한다.**
|
||
|
||
```html
|
||
<div class="wrapper"> <!-- 이게 회전한다 -->
|
||
<div class="shape"></div> <!-- 이건 건드리지 않는다 -->
|
||
</div>
|
||
```
|
||
|
||
```css
|
||
.wrapper {
|
||
position: absolute;
|
||
/* pre-rotation position/size */
|
||
transform: rotate(X deg); /* Figma gradient 각도의 부호 반대 */
|
||
}
|
||
.shape {
|
||
width: 100%; height: 100%;
|
||
border-radius: <Figma 값 그대로>;
|
||
background: linear-gradient(90deg, <Figma 색상 그대로>);
|
||
/* CSS 90deg = Figma 0deg = 왼→오, 이것이 "기본 상태" */
|
||
}
|
||
```
|
||
|
||
## 프로세스
|
||
|
||
```
|
||
1. Figma gradient 각도 확인 (예: 90°)
|
||
2. 기본 상태(Figma 0°) 정의
|
||
- shape: border-radius = Figma 값, gradient = CSS 90deg (left→right) + Figma 색상
|
||
3. 래퍼의 pre-rotation 위치/크기 계산
|
||
- 90° 회전이면 width/height 교환
|
||
- 래퍼 중심 = 최종 중심 (Figma position + size/2)
|
||
4. 래퍼에 transform: rotate() 적용
|
||
- Figma +90° → CSS rotate(-90deg) (부호 반대, CSS는 CW 기준)
|
||
```
|
||
|
||
## 예시: 42335
|
||
|
||
Figma 데이터:
|
||
- 위치: (574, 45), 크기: 205×424 (tall, 최종 상태)
|
||
- border-radius: 102 0 0 102 (왼쪽 둥근, 기본 상태 기준)
|
||
- gradient: 90deg (시계 반대 방향 90도 회전됨)
|
||
|
||
Pre-rotation 계산:
|
||
- 최종 중심: (676.5, 257)
|
||
- Pre-rotation 크기: 424×205 (swap)
|
||
- Pre-rotation top-left: (464.5, 154.5)
|
||
|
||
CSS:
|
||
```html
|
||
<div class="wrapper-42335">
|
||
<div class="shape-42335"></div>
|
||
</div>
|
||
```
|
||
```css
|
||
.wrapper-42335 {
|
||
position: absolute;
|
||
left: 464.5px; top: 154.5px;
|
||
width: 424px; height: 205px;
|
||
transform: rotate(-90deg);
|
||
}
|
||
.shape-42335 {
|
||
width: 100%; height: 100%;
|
||
border-radius: 102px 0 0 102px;
|
||
background: linear-gradient(90deg, rgba(217,162,104,1) 37%, rgba(220,103,14,0) 89%);
|
||
}
|
||
```
|
||
|
||
## Figma gradient 각도 → CSS transform 변환
|
||
|
||
Figma는 시계방향이 양수, CSS transform은 시계방향이 양수이지만:
|
||
- Figma gradient 각도는 **도형 내부 방향** 기준
|
||
- 박스를 회전시키는 관점에서는 부호가 반대
|
||
|
||
```
|
||
Figma gradient 0° → CSS transform: rotate(0deg) (회전 없음)
|
||
Figma gradient +90° → CSS transform: rotate(-90deg) (반시계)
|
||
Figma gradient -90° → CSS transform: rotate(+90deg) (시계)
|
||
Figma gradient ±180° → CSS transform: rotate(180deg)
|
||
```
|
||
|
||
## 주의사항
|
||
|
||
- Figma 데이터가 유일한 소스. PNG는 픽셀 분석으로만 교차 검증.
|
||
- 이미지를 눈으로 보고 방향 판단 금지 (멀티모달 해석 불안정).
|
||
- border-radius와 gradient를 각각 수동 계산하지 않는다. **래퍼를 회전**시킨다.
|
||
- 작동하는 값은 건드리지 않는다. 사용자가 지적한 것만 수정한다.
|