Figma 자동 레이아웃과 CSS Flexbox 및 그리드: 디자인과 코드 간 격차 해소
Figma 자동 레이아웃이 CSS 플렉스박스 및 그리드(방향, 간격, 패딩, 허그, 채우기, 래핑)에 매핑되는 방식과 서로 다른 위치를 통해 디자인이 핸드오프 후에도 유지됩니다.
핵심 포인트
Figma의 자동 레이아웃은 CSS 플렉스박스와 매우 유사하게 동작합니다. 방향은 플렉스 방향으로 매핑되고, 갭은 갭으로, 패딩은 패딩으로, "컨텐츠 포옹"은 콘텐츠별 크기 조정, "컨테이너 채우기"는 플렉스 성장 또는 전체 너비로, 래핑은 플렉스 랩으로 매핑됩니다. 자동 레이아웃의 그리드 흐름은 CSS 그리드에 해당합니다. 최소 및 최대 크기, 텍스트 줄 바꿈, 기준선 정렬 및 반응형 중단점에 차이가 있으므로 핸드오프 시 이를 명시적으로 확인하세요.
매핑
Figma의 가이드에서는 수평, 수직 및 그리드 흐름과 선택적 랩을 사용하여 방향, 간격, 패딩 및 정렬별로 하위 항목을 정렬하는 자동 레이아웃 프레임에 대해 설명합니다. 각각은 유사한 CSS와 동등한 기능을 가지고 있습니다.
포옹하고, 채우고, 고쳐주세요
Figma에서 콘텐츠를 포함하도록 설정된 프레임은 자식을 기준으로 크기가 조정되고, 컨테이너를 채우도록 설정된 자식은 사용 가능한 공간을 채우기 위해 늘어납니다. Figma는 아이가 채우기로 설정된 경우 부모는 더 이상 그 방향으로 포옹할 수 없다는 점에 주목합니다. CSS에서는 콘텐츠 기반 크기 조정(auto 또는 fit-content) 및 flex: 1 또는 width: 100%에 해당합니다. MDN의 flexbox 가이드에서는 flex-grow, flex-shrink 및 flex-basis가 공간을 분배하는 방법을 설명합니다. 이는 동일한 아이디어의 CSS 측면입니다.
공백이 나타나는 곳
대부분의 핸드오프 버그는 다음과 같은 몇 가지 영역에서 발생합니다.
- 최소 및 최대 크기: 두 위치 모두에 설정하십시오. 그렇지 않으면 텍스트와 컨테이너가 극단적으로 다르게 동작합니다.
- 텍스트: 줄 높이, 줄 바꿈 및 잘림은 Figma 텍스트 렌더링과 브라우저 간에 다릅니다.
- 기준선 정렬: CSS는 텍스트 기준선에 따라 정렬할 수 있습니다. 이것이 어떻게 의도되었는지 확인하십시오.
- 절대 자식: Figma의 "자동 레이아웃 무시"(이전의 절대 위치)는 위치가 지정된 부모의 position:absolute에 매핑됩니다.
- 응답성: 자동 레이아웃 프레임에는 중단점이 없습니다. 각 너비에서 레이아웃이 어떻게 변경되는지 정의합니다.
그리드
진정한 2차원 레이아웃을 위해 자동 레이아웃의 그리드 흐름을 사용하고 이를 CSS 그리드에 매핑합니다. MDN는 이를 행과 열의 콘텐츠 레이아웃 시스템으로 설명합니다. 래핑된 플렉스 행은 그리드와 동일하지 않습니다. 래핑된 행의 항목은 열에 정렬되지 않습니다.
움직임이 더 큰 격차입니다
레이아웃은 Figma에서 CSS까지 합리적으로 잘 매핑됩니다. 모션은 그렇지 않습니다. 프로토타입 전환은 코드에서 다시 작성해야 하며 상태는 종종 손실됩니다. 이는 ExodeUI(우리가 만듭니다) 및 Rive와 같은 런타임과의 격차 도구로 대화형 구성 요소를 해결합니다.
기억할 핵심 원칙
- 자동 레이아웃 방향, 간격, 패딩 및 래핑이 Flexbox에 매핑됩니다.
- 포옹 ≒ 콘텐츠 크기 조정; 채우기 ≒ 플렉스: 1 또는 100% 너비
- 그리드 흐름은 CSS 그리드에 매핑됩니다.
- 핸드오프 시 최소/최대 크기, 텍스트, 기준선 및 중단점 확인
- 모션과 상태는 디자인과 코드 간 격차가 더 큽니다.
자주 묻는 질문
출처
- Guide to auto layout — Figma 도움말 센터
- Basic concepts of flexbox — MDN 웹 문서
- Basic concepts of grid layout — MDN 웹 문서