03.레이어, 그래픽 툴 핵심 요소

기초 중의 기초, 레이어입니다. 그래픽 디자인 툴에서 가장 중요한 기능입니다. 폭넓게 쓰이고 있는 어도비 프로그램과 스케치에서 사용하는 것과 피그마에서 사용하는 것이 크게 다르지 않지만 조금씩 다른 지점이 있습니다.

레이어 넣기

상단 툴바에서 도형 모양을 클릭하고 원하는 도형을 선택하고 캔버스 위에서 클릭-드래그하면 도형이 추가됩니다. 동일한 방식으로 아트보드, 도형, 벡터, 텍스트 등을 캔버스에 추가할 수 있습니다.

레이어 선택하기

캔버스에 있는 레이어를 클릭해서 직접 선택하거나 왼쪽의 레이어 리스트에서 선택할 수 있습니다. 레이어를 선택한 상태에서 Shift나 Command 누르고 다른 레이어를 클릭하면 여러 레이어 선택할 수 있습니다.

레이어 옮기기

레이어를 움직이면 자동으로 픽셀이나 주변 레이어에 정렬합니다. Option(Alt)을 누르면서 드래그하면 레이어가 복사되며, 이전에 한 복사를 반복하려면 Commnad(Ctrl)+D 를 누르면 됩니다.

레이어 크기 바꾸기

클릭 후 단축키를 조합해서 드래그해 크기를 조절하거나, 인스펙터를 이용해서 정교하게 크기를 조절할 수 있습니다. 전체 비율을 유지하면서 크기를 조절할 때는 스케일링 기능을 이용해서 크기를 조절합니다.

레이어 정렬하기

inspector에서 여러 요소들를 정렬할 수 있습니다. 위, 중간, 아래를 정렬하거나, 수평 수직으로 정렬할 수 있습니다.

레이어에 대한 자세한 정보 – Inspector

인스펙터는 캔버스나 레이어 리스트에서 선택한 요소의 속성을 제어하기 위한 영역입니다. 해당 시각 요소의 위치, 크기, 색, 선, 그림자 등을 제어할 수 있습니다. 선택하는 요소의 성격에 따라 표시되는 내용이 달라지고 한개를 선택했을 때, 여러개를 선택했을 때, 그룹을 선택했을 때 등 상태가 다를 때도 표시되는 내용이 달라집니다.

크기 변경해도 위치, 크기 고정 시키기 – Resizing

피그마에서도 화면을 조절할 때 레이어가 어떻게 동작하는지 지정할 수 있습니다. Frame의 크기를 조절할 때 내부 레이어가 움직이는 방식을 지정할 수 있습니다.(그룹 레이어로 묶인 경우에는 적용 할 수 없습니다.) 이 때 inspector의 constraint 탭을 이용해 어느 모서리에 고정되게할지 지정할 수 있습니다.

How to figma Basic