05.스타일, 레이어를 꾸며보자

색, 두께, 이미지, 그라데이션 등 다양한 시각 기법을 이용해 다양한 레이어를 어떻게 변형할 수 있는지 알아보겠습니다.

색 채우기

모양 레이어에 색을 넣을 수 있습니다. 우측 인스펙터에서 눈 모양 아이콘과 – 아이콘으로 색을 보여줄지 말지 설정할 수 있습니다. 보편적으로 많이 쓰이는 HEX 코드를 이용해서 지정이 가능하며 투명도와 블렌딩 모드를 설정할 수 있습니다.

이미지 채우기

이미지를 채울 수도 있습니다. 로컬 컴퓨터에 저장되어 있는 이미지를 모양 안에 넣을 수 있습니다. 이미지를 넣을 때 채우기, 맞춤, 늘리기 또는 바둑판 등으로 모양 안에 이미지가 어떻게 표시 되는지 지정할 수도 있습니다. 또한 피그마는 자체적으로 간단한 이미지 보정이 가능합니다.

그라데이션 채우기

다양한 그라데이션을 채울 수도 있습니다. 일반적인 그라데이션 입력 방식이 동일하며 선형 Linear, 방사형 Radial, 모서리 Angular, 다이아몬트 Diamond 형태로 그라데이션을 채울 수 있습니다.

선

텍스트 레이어를 제외한 모든 레이어는 원하는 만큼 테두리를 설정할 수 있습니다. 다양한 두께, 색상 및 블렌드 모드를 설정할 수 있습니다. 선이 모양의 중앙 center, 안쪽 inside, 바깥outside쪽에 위치하게 설정 할 수 있으며, 주로 픽셀 퍼펙션을 위해 안쪽 inside로 설정하는 편입니다.

끝과 결합

End에서 선이나 패스의 끝 부분을 설정할 수 있습니다.

• Butt cap : 기본 옵션으로 끝 부분을 따로 표시하지 않습니다.
• Round cap : 둥근 끝을 표시합니다.
• Projecting cap : 각진 끝을 표시합니다.

Join에서 선의 꺽이는 부분의 표시되는 방식을 설정할 수 있습니다.

• Miter join : 기본 옵션으로 각진 형태로 표시합니다.
• Round join: 테두리에 둥근 모서리가 표시됩니다. (반지름은 테두리 두께)
• Bevel join : 테두리 모서리에 사선으로 깎인 모서리가 표시됩니다.

그림자

그림자는 내부와 외부 모두 표시할 수 있습니다. 그림자의 X,Y 위치를 설정할 수 있고 흐림 효과의 반경과 흩어지는 범위를 지정할 수 있습니다. 여러개의 그림자를 중첩시키고 블렌드 모드를 설정할 수도 있습니다.

블러

2가지 방식으로 흐림을 표현 할 수 있습니다.

• Layer Blur : 레이어 자체의 끝 부분을 흐리게 표시합니다.
• Background Blur : 레이어 뒤에 나타나는 모든 컨텐츠를 흐리게 표시합니다. (배경 블러 효과를 보려면 Fill의 불투명도를 조정해야합니다.)

How to figma Basic