4. 도형 및 우측 패널 기능

도형 생성

피그마 상단 네비게이션에서 드롭다운 버튼을 누르면 도형을 만들 수 있습니다.

 

도형 크기 조정

도형을 만들고 나면 우측 패널의 Design 탭에서 도형의 위치와 크기를 조정할 수 있습니다.

X, Y 값으로 프레임 내에서 도형의 위치를 정할 수 있고(0,0으로 하면 도형이 끝이 경계선에 맞도록 이동되는 환상적인 기능이지만 매번 위치를 계산하기 어렵기 때문에 실제로는 상단의 정렬 기능이 더 많이 사용되는 것으로 보입니다.)

 

또한 W, H 값으로 도형의 크기를 정할 수 있습니다. 기본적으로 비율이 고정되지 않아 원하는 대로 너비와 높이를 조정할 수 있습니다. H 오른쪽의 Constrain Proportions 버튼을 눌러 비율을 고정하면 한 쪽을 바꿀 때 다른쪽도 비율에 맞춰 변하게 됩니다.

 

헷갈리기 쉬운 점은 Constrain Proportions를 해도 마우스로 크기를 키울 때는 적용되지 않는다는 것입니다. 오직 오른쪽 패널에서 직접 W나 H를 입력할 때만 나머지 부분이 자동으로 변화합니다. 마우스일 때 같은 기능을 적용하려면 Shift를 누른 상태로 끌면 됩니다.

 

모서리 둥글게 만들기(corner radius 넣기)

도형을 선택한 상태에서 마우스를 안쪽으로 갖다놓으면(어느 정도 확대된 상태여야 합니다.) 각 모서리 안쪽에 원이 나타납니다. 그 원을 잡아서 조정하면 모서리의 곡률을 바꿀 수 있습니다.

 

 

우측 패널에서 corner radius를 부여해도 같은 일을 할 수 있습니다. 입력 창 오른편의 버튼을 눌러 각 모서리마다 다른 곡률을 지정하는 것도 가능합니다.

 

레이어가 겹칠 때의 표시 방법 선택(Layer)

크기를 지정하는 부분 아래의 Layer 패널은 도형이 다른 레이어와 겹칠 때 어떻 게 보일 지를 결정합니다. 옵션이 꽤 많아 직접 사용해보면서 기능을 익혀야 합니다. 현직자도 많이는 사용하지 않는 기능인 것 같습니다.

 

옵션마다 겹칠 때의 색 변화나 표시 반경 등이 달라집니다.

그리고 Layer에서 오른쪽의 눈 모양 버튼을 누르면 해당 오브젝트를 숨길 수 있습니다.

 

도형 색 바꾸기(Fill)

Layer 아래쪽 Fill에서는 도형의 색깔을 바꾸고 투명도를 설정할 수 있습니다.

'+'버튼은 여러가지 색을 시도해보기 위한 도구로 여러 가지 색을 넣을 경우 레이어와 같이 최상단의 색이 표시되고 오른쪽의 눈모양 버튼을 눌러서 보이지 않게 해 서로 바꿔가며 비교해볼 수 있습니다.

 

그리고 만약 투명도를 넣을 경우 여 색이 혼합되어 보이는 효과를 줄 수 있습니다.

 

+의 왼쪽에 있는 점 네개 모양의 Style은 자주 사용하는 색상 등을 저장하는 용도인데 나중에 더 자세히 다루겠습니다.

 

테두리 넣기(Stroke)

Stroke를 추가하면 도형 외곽에 검정색 테두리가 생기고 색깔, 투명도, 위치(안쪽, 가운데, 바깥쪽), 두께(방향마다 설정 가능) 등을 설정할 수 있습니다. 아이콘 제작 등에도 유용하게 사용됩니다.

 

Effects는 그림자 효과 등을 주는 탭으로 중요하기 때문에 나중에 자세히 다룹니다.

 

Export는 도형을 png나 svg등으로 산출하는 기능인데 역시 나중에 다룹니다.