grid-layout

2 개의 포스트

figma

스마트 셀렉션 2D (새 탭에서 열림)

Figma의 **Smart Selection 2D**는 여러 요소를 일일이 재배치하는 번거로움을 줄이고, 목록과 격자 형태의 레이아웃을 빠르게 정돈하는 기능이다. 기존 Smart Selection이 가로 또는 세로 목록 정리에 유용했다면, 2D 버전은 가로·세로 방향을 모두 지원해 사진 갤러리, 프레젠테이션 슬라이드, 카드 그리드 등을 효율적으로 배열할 수 있다. 이를 통해 디자이너는 레이아웃 조정보다 콘텐츠 작업에 더 집중할 수 있다. ### Smart Selection의 목적 - 여러 디자인 요소의 위치와 간격을 수작업으로 맞추는 반복 작업을 자동화한다. - 요소들을 선택한 뒤 **Tidy Up**을 실행하면 일정한 간격과 정렬을 기준으로 자동 배치한다. - 기존 기능은 특히 가로 또는 세로로 나열된 목록을 정리하는 데 효과적이었다. - Figma는 이 기능이 디자이너의 작업 시간을 크게 줄여 주었다는 사용자 반응을 바탕으로 기능을 확장했다. ### 가로·세로 목록을 함께 정리하는 Smart Selection 2D - Smart Selection 2D는 요소를 수평 방향뿐 아니라 수직 방향으로도 정리한다. - 행과 열이 있는 2차원 격자 구조를 지원한다. - 여러 요소를 선택한 후 정돈하면 각 요소의 위치와 간격을 일관되게 맞출 수 있다. - 목록뿐 아니라 이미지나 카드처럼 반복되는 콘텐츠를 그리드 형태로 배치할 때도 활용할 수 있다. ### 간격 조정과 레이아웃 관리 - Smart Selection 2D에서는 목록과 그리드의 간격을 조정할 수 있다. - 요소를 직접 하나씩 이동하지 않고도 전체 레이아웃의 간격을 균일하게 유지할 수 있다. - 요소를 추가하거나 순서를 바꾼 뒤에도 전체 배열을 다시 정돈하기 쉽다. - 레이아웃 구성에 소요되는 시간을 줄여 콘텐츠 제작과 디자인 의사결정에 집중하도록 돕는다. ### 대표적인 활용 사례 - **사진 갤러리** - 여러 이미지를 행과 열로 빠르게 재배열할 수 있다. - 이미지 순서를 바꾸거나 갤러리의 간격을 조정할 때 유용하다. - **프레젠테이션 슬라이드** - 슬라이드 썸네일을 일렬 또는 격자 형태로 정리할 수 있다. - 슬라이드 순서를 쉽게 바꾸면서도 일정한 배치를 유지할 수 있다. - **반복적인 카드·콘텐츠 목록** - 카드, 아이콘, 상품 이미지 등 반복 요소를 규칙적인 그리드로 배치할 수 있다. - 여러 요소를 동시에 조정해야 하는 화면 설계에 적합하다. ### 기능 확장의 의미 - Smart Selection 2D는 단순한 정렬 도구를 넘어 반복적인 레이아웃 편집을 자동화한다. - Figma는 사진 갤러리와 슬라이드 배열 같은 구체적인 예시를 통해 기능의 활용 가능성을 소개했다. - 핵심은 디자인 요소를 정돈하는 시간을 줄이고, 디자이너가 실제 콘텐츠와 구성에 더 많은 시간을 쓰게 하는 것이다. 반복 요소가 있는 화면을 작업한다면 요소를 개별적으로 이동하기보다 Smart Selection 2D로 전체를 선택한 뒤 **Tidy Up**과 간격 조정을 활용하는 것이 효율적이다. 특히 사진 갤러리, 카드 그리드, 슬라이드 목록처럼 행과 열 구조가 분명한 레이아웃에서 효과가 크다.

figma

#FigmaTip 라운 (새 탭에서 열림)

이 글은 Figma 디자인 커뮤니티에서 공유된 유용한 단축 동작과 작업 팁을 모은 #FigmaTip Roundup이다. 별도 기능을 의식하지 않아도 자연스럽게 사용할 수 있는 직관적인 상호작용부터, 이미지 가져오기·중첩 레이어 탐색·균등 간격 배치처럼 반복 작업을 줄여 주는 기능까지 소개한다. 핵심은 Figma의 숨은 조작법을 익히면 디자인 작업을 더 빠르고 정밀하게 할 수 있다는 점이다. ## 폴더를 드래그해 이미지 일괄 가져오기 - 데스크톱의 폴더를 Figma 작업 화면으로 직접 드래그하면 폴더 안의 이미지 세트를 한 번에 가져올 수 있다. - 이미지를 하나씩 업로드하는 대신 여러 이미지나 에셋을 빠르게 배치할 때 유용하다. - 이미지가 많은 시안, 갤러리, 카드 목록 등을 구성할 때 작업 시간을 줄일 수 있다. ## Ctrl + 우클릭으로 중첩 레이어 탐색 - 오브젝트 위에서 **Ctrl 키를 누른 채 우클릭**하면 해당 위치에 포함된 중첩 레이어 목록을 확인할 수 있다. - 팝업에 표시된 레이어를 선택해 부모 오브젝트 안쪽의 특정 요소로 바로 이동할 수 있다. - 복잡한 컴포넌트나 여러 프레임이 겹쳐 있는 화면에서 원하는 레이어를 반복 클릭하지 않고 정확하게 선택할 수 있다. ## 빨간 가이드라인으로 동일한 간격 맞추기 - 오브젝트를 이동할 때 나타나는 빨간색 가이드라인을 이용하면 주변 요소와의 간격을 빠르게 동일하게 맞출 수 있다. - 먼저 가이드라인에 맞춰 요소를 배치한 뒤, 여러 요소를 선택해 **Distribute** 기능을 사용하면 일정한 간격의 열(column) 그리드를 만들 수 있다. - 수작업으로 좌표와 간격을 계산하지 않아도 정렬과 반복 레이아웃을 정밀하게 구성할 수 있다. ## 실용적인 활용 - 이미지가 많은 화면은 폴더 단위로 가져온 뒤, 가이드라인과 Distribute 기능으로 정렬한다. - 레이어 구조가 복잡할수록 Ctrl + 우클릭 탐색을 활용하면 선택 오류를 줄일 수 있다. - Figma의 단축키와 자동 가이드를 적극적으로 사용하면 반복적인 배치·선택 작업을 크게 단순화할 수 있다.