좌표 개념이 강하게 자리 잡은 올드 디자이너에게 상대적인 위치를 정의하는 display: flex는 쉽게 이해되는 개넘이 아닙니다. 그리고 이런 개념이 익숙하지 않은 상태에서 처음 접했던 figma와 워드프레스 페이지빌더는 당시에 모두 자유롭지 않고 불편하게만 느껴졌습니다.
뒤늦게 figma와 워드프레스 페이지 빌더를 사용하면서 깨달은 2가지는 화면을 바라보는 관점의 대전환이 필요하다는 점과, CSS 기본 개념을 알고 있는 디자인이너가 여전히 인정받을 수 있을 것이라는 점입니다. 특히 AI 도움 없이도 뭔가를 만들어 낼 아이디어가 있다면 말이죠.
아래 테이블은 CSS의 display:flex 관점에서 Figma의 Auto Layout을 바라본 것입니다. CSS 자체에 대해서 자세하게 알고 싶다면 아래 링크를 추천합니다.
https://studiomeal.com/archives/197
CSS Figma 선택 대상 오른쪽 패널 섹션 Figma 표시·호버 명칭(영문 UI) 대응 정도 display: flex부모 Frame 또는 여러 레이어 Auto layoutAdd auto layout직접 대응 flex-direction: rowAuto Layout 부모 Auto layoutHorizontal layout직접 대응 flex-direction: columnAuto Layout 부모 Auto layoutVertical layout직접 대응 flex-direction: row-reverseAuto Layout 부모 없음 해당 항목 없음 — Layers 패널에서 순서 변경 간접 대응 flex-direction: column-reverseAuto Layout 부모 없음 해당 항목 없음 — Layers 패널에서 순서 변경 간접 대응 Flex가 아닌 Grid 레이아웃 Auto Layout 부모 Auto layoutGrid layout비교 대상 아님
CSS Figma 선택 대상 오른쪽 패널 섹션 Figma 표시·호버 명칭(영문 UI) 대응 정도 flex-wrap: nowrapHorizontal Auto Layout 부모 Auto layoutWrap 비활성화직접 대응 flex-wrap: wrapHorizontal Auto Layout 부모 Auto layoutWrap 활성화직접 대응 flex-wrap: wrap-reverseHorizontal Auto Layout 부모 없음 해당 항목 없음 대응 없음 gap — Horizontal layoutAuto Layout 부모 Auto layoutHorizontal gap between items직접 대응 gap — Vertical layoutAuto Layout 부모 Auto layoutVertical gap between items직접 대응 column-gap — Wrap 사용Auto Layout 부모 Auto layoutHorizontal gap between items직접 대응 row-gap — Wrap 사용Auto Layout 부모 Auto layoutVertical gap between items직접 대응 justify-content: space-betweenAuto Layout 부모 Auto layoutGap between items → Auto직접 대응 justify-content: space-aroundAuto Layout 부모 없음 해당 항목 없음 대응 없음 justify-content: space-evenlyAuto Layout 부모 없음 해당 항목 없음 대응 없음
CSS Figma 선택 대상 오른쪽 패널 섹션 Figma 표시·호버 명칭(영문 UI) 대응 정도 padding-top + padding-bottomAuto Layout 부모 Auto layoutVertical padding직접 대응 padding-left + padding-rightAuto Layout 부모 Auto layoutHorizontal padding직접 대응 padding-topAuto Layout 부모 Auto layout → 개별 PaddingTop padding직접 대응 padding-rightAuto Layout 부모 Auto layout → 개별 PaddingRight padding직접 대응 padding-bottomAuto Layout 부모 Auto layout → 개별 PaddingBottom padding직접 대응 padding-leftAuto Layout 부모 Auto layout → 개별 PaddingLeft padding직접 대응 padding: 16pxAuto Layout 부모 Auto layoutHorizontal padding, Vertical padding 모두 16직접 대응 padding: 16px 24pxAuto Layout 부모 Auto layoutVertical padding: 16, Horizontal padding: 24직접 대응
CSS 조합 Figma 선택 대상 오른쪽 패널 섹션 Figma 표시·호버 명칭(영문 UI) 대응 정도 justify-content: flex-start; align-items: flex-startHorizontal Auto Layout 부모 Auto layout → Alignment boxAlign top left직접 대응 justify-content: center; align-items: flex-startHorizontal Auto Layout 부모 Auto layout → Alignment boxAlign top center직접 대응 justify-content: flex-end; align-items: flex-startHorizontal Auto Layout 부모 Auto layout → Alignment boxAlign top right직접 대응 justify-content: flex-start; align-items: centerHorizontal Auto Layout 부모 Auto layout → Alignment boxAlign left직접 대응 justify-content: center; align-items: centerHorizontal Auto Layout 부모 Auto layout → Alignment boxAlign center직접 대응 justify-content: flex-end; align-items: centerHorizontal Auto Layout 부모 Auto layout → Alignment boxAlign right직접 대응 justify-content: flex-start; align-items: flex-endHorizontal Auto Layout 부모 Auto layout → Alignment boxAlign bottom left직접 대응 justify-content: center; align-items: flex-endHorizontal Auto Layout 부모 Auto layout → Alignment boxAlign bottom center직접 대응 justify-content: flex-end; align-items: flex-endHorizontal Auto Layout 부모 Auto layout → Alignment boxAlign bottom right직접 대응 justify-content: space-betweenHorizontal Auto Layout 부모 Auto layoutHorizontal gap between items → Auto직접 대응 align-items: baselineHorizontal Auto Layout 부모 Auto layout → More optionsText baseline alignment직접 대응 align-items: stretch각 자식 레이어 Auto layout 크기 설정Height resizing → Fill container부분 대응
CSS 조합 Figma 선택 대상 오른쪽 패널 섹션 Figma 표시·호버 명칭(영문 UI) 대응 정도 justify-content: flex-start; align-items: flex-startVertical Auto Layout 부모 Auto layout → Alignment boxAlign top left직접 대응 justify-content: flex-start; align-items: centerVertical Auto Layout 부모 Auto layout → Alignment boxAlign top center직접 대응 justify-content: flex-start; align-items: flex-endVertical Auto Layout 부모 Auto layout → Alignment boxAlign top right직접 대응 justify-content: center; align-items: flex-startVertical Auto Layout 부모 Auto layout → Alignment boxAlign left직접 대응 justify-content: center; align-items: centerVertical Auto Layout 부모 Auto layout → Alignment boxAlign center직접 대응 justify-content: center; align-items: flex-endVertical Auto Layout 부모 Auto layout → Alignment boxAlign right직접 대응 justify-content: flex-end; align-items: flex-startVertical Auto Layout 부모 Auto layout → Alignment boxAlign bottom left직접 대응 justify-content: flex-end; align-items: centerVertical Auto Layout 부모 Auto layout → Alignment boxAlign bottom center직접 대응 justify-content: flex-end; align-items: flex-endVertical Auto Layout 부모 Auto layout → Alignment boxAlign bottom right직접 대응 justify-content: space-betweenVertical Auto Layout 부모 Auto layoutVertical gap between items → Auto직접 대응 align-items: stretch각 자식 레이어 Auto layout 크기 설정Width resizing → Fill container부분 대응
CSS Figma 선택 대상 오른쪽 패널 섹션 Figma 표시·드롭다운 명칭(영문 UI) 대응 정도 width: fit-contentAuto Layout 부모 Auto layoutWidth resizing → Hug contents부분 대응 height: fit-contentAuto Layout 부모 Auto layoutHeight resizing → Hug contents부분 대응 width: 320pxAuto Layout 부모 Auto layoutWidth resizing → Fixed width직접 대응 height: 240pxAuto Layout 부모 Auto layoutHeight resizing → Fixed height직접 대응 min-widthAuto Layout 부모 Auto layout → Width dropdownAdd min width → Min width직접 대응 max-widthAuto Layout 부모 Auto layout → Width dropdownAdd max width → Max width직접 대응 min-heightAuto Layout 부모 Auto layout → Height dropdownAdd min height → Min height직접 대응 max-heightAuto Layout 부모 Auto layout → Height dropdownAdd max height → Max height직접 대응
CSS Item 속성 Figma 선택 대상 오른쪽 패널 섹션 Figma 표시·드롭다운 명칭(영문 UI) 대응 정도 flex-grow: 1 — 가로축Horizontal Auto Layout의 자식 Auto layoutWidth resizing → Fill container부분 대응 flex-grow: 1 — 세로축Vertical Auto Layout의 자식 Auto layoutHeight resizing → Fill container부분 대응 flex-grow: 0Auto Layout의 자식 Auto layoutHug contents 또는 Fixed width·Fixed height간접 대응 flex-grow: 2Auto Layout의 자식 없음 비율값을 입력하는 직접 항목 없음 대응 없음 flex-shrink: 0Auto Layout의 자식 Auto layoutFixed width·Fixed height와 Min size 조합간접 대응 flex-shrink: 1Auto Layout의 자식 Auto layoutFill container, Hug contents, Min/Max 조합간접 대응 flex-basis: 320pxAuto Layout의 자식 Auto layoutWidth resizing → Fixed width: 320부분 대응 flex: 1 1 autoAuto Layout의 자식 Auto layoutFill container 중심의 크기 설정부분 대응 width: fit-contentAuto Layout Frame인 자식 Auto layoutWidth resizing → Hug contents부분 대응 height: fit-contentAuto Layout Frame인 자식 Auto layoutHeight resizing → Hug contents부분 대응 width: 100%Auto Layout의 자식 Auto layoutWidth resizing → Fill container부분 대응 height: 100%Auto Layout의 자식 Auto layoutHeight resizing → Fill container부분 대응 min-widthAuto Layout의 자식 Auto layout → Width dropdownAdd min width → Min width직접 대응 max-widthAuto Layout의 자식 Auto layout → Width dropdownAdd max width → Max width직접 대응 min-heightAuto Layout의 자식 Auto layout → Height dropdownAdd min height → Min height직접 대응 max-heightAuto Layout의 자식 Auto layout → Height dropdownAdd max height → Max height직접 대응
CSS Item 속성 Figma 선택 대상 오른쪽 패널 섹션 Figma 표시·호버 명칭(영문 UI) 대응 정도 align-selfHorizontal·Vertical Auto Layout의 자식 없음 개별 Align self 항목 없음 대응 없음 orderAuto Layout의 자식 없음 해당 항목 없음 — Layers 패널에서 순서 변경 간접 대응 margin-left: autoAuto Layout의 자식 없음 직접 대응 항목 없음 대응 없음 margin-right: autoAuto Layout의 자식 없음 직접 대응 항목 없음 대응 없음 position: absoluteAuto Layout의 자식 오른쪽 사이드바 Ignore auto layout직접 대응 일반 Flex 흐름 복귀 Ignore auto layout 상태의 자식오른쪽 사이드바 Ignore auto layout 비활성화직접 대응
CSS Figma 선택 대상 오른쪽 패널 섹션 Figma 표시·호버 명칭(영문 UI) 대응 정도 자식의 margin 자식 레이어 없음 직접 대응 항목 없음 대응 없음 형제 사이의 margin 부모 Auto Layout Auto layoutHorizontal gap between items 또는 Vertical gap between items대체 대응 부모 경계와 자식 사이의 margin 용도 부모 Auto Layout Auto layoutHorizontal padding, Vertical padding 또는 개별 Padding대체 대응 음수 margin으로 겹치기 부모 Auto Layout Auto layout음수 Gap between items 부분 대응
CSS Figma 선택 대상 오른쪽 패널 섹션 Figma 표시·호버 명칭(영문 UI) 대응 정도 align-content: flex-startWrap Auto Layout 부모 Auto layout → Alignment box별도의 Align content 항목 없음 부분 대응 align-content: centerWrap Auto Layout 부모 Auto layout → Alignment box별도의 Align content 항목 없음 부분 대응 align-content: flex-endWrap Auto Layout 부모 Auto layout → Alignment box별도의 Align content 항목 없음 부분 대응 align-content: space-betweenWrap Auto Layout 부모 없음 직접 대응 항목 없음 대응 없음 align-content: space-aroundWrap Auto Layout 부모 없음 직접 대응 항목 없음 대응 없음 align-content: stretchWrap Auto Layout 부모·자식 크기와 Alignment 조합 직접 대응 항목 없음 간접 대응
CSS 또는 브라우저 동작 Figma 선택 대상 오른쪽 패널 위치 Figma 표시·호버 명칭(영문 UI) 대응 정도 텍스트 baseline 정렬 Auto Layout 부모 Auto layout → More optionsText baseline alignment직접 대응 Border를 크기 계산에 포함 Auto Layout 부모 Auto layout → More optionsStrokes in layout → Included in layout직접 대응 Border를 크기 계산에서 제외 Auto Layout 부모 Auto layout → More optionsStrokes in layout → Excluded from layoutFigma 전용 겹친 첫 항목을 위에 표시 Auto Layout 부모 Auto layout → More optionsCanvas stacking → First on top부분 대응 겹친 마지막 항목을 위에 표시 Auto Layout 부모 Auto layout → More optionsCanvas stacking → Last on top부분 대응 position: absoluteAuto Layout 자식 오른쪽 사이드바 Ignore auto layout직접 대응
표시 기준 직접 대응 Figma UI 항목과 CSS 속성의 역할이 거의 동일함 부분 대응 결과는 유사하지만 크기 계산이나 동작 방식이 다름 간접 대응 하나의 항목이 아니라 여러 설정 또는 수동 작업으로 표현 대체 대응 같은 목적을 Figma 권장 방식인 Gap·Padding 등으로 처리 대응 없음 Figma Auto Layout에 동일한 기능이나 입력 항목이 없음 비교 대상 아님 Figma 기능은 존재하지만 CSS Flexbox 속성은 아님
확인 범위 공식 자료 Auto Layout, Flow, Wrap, Gap, Padding, Resizing, Ignore auto layout Figma — Guide to auto layout Alignment box, Gap Auto, Padding, Baseline, Strokes, Canvas stacking Figma — Horizontal and vertical flows Fill container, Hug contents, Fixed, Min/Max Figma — Auto Layout resizing Auto Layout 구조가 코드 생성에 미치는 영향 Figma Developer Docs — Structure your Figma file for better code
