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>
3.0 KiB
3.0 KiB
Figma 도형 + 그라데이션 처리
핵심 원리
Figma에서 도형 작업 방식:
- 박스(프레임/컨테이너) 안에 도형을 만든다 (border-radius + gradient)
- 박스를 회전시킨다 (도형 자체가 아니라)
- 박스가 돌면 그 안의 도형도 같이 돌아간다 → border-radius와 gradient가 함께 회전
CSS 구현 구조
도형 자체에 transform 적용 금지. 반드시 래퍼(wrapper) 컨테이너에 적용한다.
<div class="wrapper"> <!-- 이게 회전한다 -->
<div class="shape"></div> <!-- 이건 건드리지 않는다 -->
</div>
.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:
<div class="wrapper-42335">
<div class="shape-42335"></div>
</div>
.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를 각각 수동 계산하지 않는다. 래퍼를 회전시킨다.
- 작동하는 값은 건드리지 않는다. 사용자가 지적한 것만 수정한다.