✏️ 2024. 11월 20일 / 피그마 기초 3
🌍 미리보기
☑️ 피그마, 도형 툴에 대해 알아봅시다
✖️
피그마에서 사용하는 도형툴은 일러스트에서 사용했던 도형툴과 굉장히 흡사합니다.
ㅁ 모양으로 생긴 이것이 바로 도형툴입니다.
도형툴을 선택하고 그냥 클릭 해보면,
100X100 사이즈의 도형이 만들어집니다.
이번에는 클릭 후 드래그를 하여 늘려보겠습니다.
원하는 구역까지 드래그를 통하여 자유로운 사이즈의 도형을 그릴 수 있습니다.
또한 도형을 만든 후 오른쪽 패널을 통해 원하는 크기로 사이즈를 설정할 수 있습니다.
여기서 ⭐Position은 현재 이 도형이 있는 위치를 말하며
⭐Layout이 사이즈를 결정하는 곳 입니다.
⭐Alignment는 프레임을 기준으로 하여 정렬을 하는 곳이며,
⭐Opacity를 통해 투명도를 설정하거나, ⭐Coner radius를 통해 모서리의 둥글기를 조절 할 수 있습니다.
⭐Fill은 색상을 정하는 곳이며, ⭐Stroke는 테두리를 설정하고 색상을 정하는 곳입니다.
+ Stroke은 상세하게 선끝을 둥글게 마감할 것인지 등을 설정할 수 있어요.
추가로 ⭐Position은 패쓰가 있는 방향을 결정하고, ⭐Weight은 선의 굵기를 결정합니다.
도형은 앵커와 패쓰로 이루어져 있는데요.
피그마에서의 이 도형은 아이콘이라던지, 어떠한 요소를 꾸밀 때 디자인적 요소로 사용합니다.
🟢 각각의 다른 도형들도 알아봅시다
✖️
도형툴은 꾹 눌러보거나, 아래 화살표를 누를 경우 다른 모양의 도형들도 보여주는데요.
피그마에서는 굉장히 직관적이고 쉬운 기능들이 많아 도형을 변형하기에 굉장히 편리합니다.
저는 우선 원을 하나 그려줄거에요.
마우스를 도형위에 올려보면 작은 원이 하나 보일텐데요.
도형안에 있는 이 작은 원은 도형을 변형시킬 수 있는 조절 점입니다.
이렇게 직접 눈으로 보며 조절할 수 있지만 정확하게 70% 이런식으로 조절을 하고 싶다면
오른쪽 패널에 있는 Arc를 이용하여 조절하실 수 있습니다.
자, 이번엔 삼각형을 하나 그려보겠습니다.
삼각형을 다각형으로 변경하는 방법은 아주 간편합니다.
표시해둔 작은 원을 선택하여 쭉 밀어보면,
이렇게 원하는 형태의 도형을 만들 수 있습니다.
🟢 아주 간편하게 정렬해보자!
✖️
여기 정렬되지 않은 아주 불편한 형태의 사각형들이 있습니다.
피그마에서는 아주 간단하게 해당 도형들을 한번에 정렬할 수 있는 기능이 있답니다.
우선 도형들을 전체적으로 잡아보겠습니다.
그 후 마우스를 올려보면 작은 아이콘이 있는데요, 이게 바로 Tidy up 이라는 기능입니다.
해당 기능은 패널에서도 적용할 수 있는 부분이랍니다.
굉장히 쉽고 간편하게 정렬할 수 있어요.
또 하나 아주 좋은 기능은,
이렇게 정렬된 상태에서 정렬 상태를 유지한 채 다양한 위치로 도형 조절을 해볼 수 있다는 건데요.
보여드린 사진 속 표시된 부분을 잡고 끌어보시면, 정렬이 흐트러지지 않고 조정되는 것을 볼 수 있어요.
🔍 피그마를 사용하여 아이콘을 만들어보자
✖️
아이콘의 크기는 24px~52px까지 적용하는데요.
휴대폰에서 보는 아이콘의 크기는 48px이 적당합니다.
우선 프레임을 24x24로 설정해준 뒤, 가이드가 될 부분을 설정해줄거에요.
이렇게 두 개의 가이드를 만들어주면,
이런 모양이 나오는데요.
이제 이 가이드 선의 안쪽으로 아이콘을 만들어주면 됩니다.
이렇게 다양한 형태의 아이콘을 만들어줄 수 있어요.
+ 추가로 프레임이 늘어날 수록 함께 늘어나는 아이콘으로 설정을 하고 싶다면
오브젝트를 선택해주고 이렇게 배치해주시면 됩니다.
📫 오늘 알아가는 단축키와 설명들
✖️
🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)
