[피그마(figma) 사용법] 툴 사용법 기초 정리

피그마의 툴, 즉 도구의 사용법을 정리해보고자 한다.

도구는 위에 왼쪽 상단에 위치해있고 오른쪽 패널에는 속성을 제어할 수 있는데

이들의 기능과 사용법을 정리하며 익혀보겠다.

 

먼저 왼쪽 상단이다.

 

여기서는 디자인 요소들을 만들고 제어할 수 있는

근본적인 도구들이 있는 곳이라고 생각하면 된다.

먼저 파란색으로 되어있는 화살표는 Move로 요소들을 움직이거나 선택하는 도구이다.

그옆에 #모양은 프레임을 만들어주며

사각형모양으로 되어있는 도구는 보여지는 이미지에 해당하는 도형을 만들어주는 곳이다.

클릭하면 선부터 원 삼각형 별모양 삽입이미지 등등 다양한 옵션을 선택할 수 있다.

그다음 펜모양은 선을 그릴 수 있고

텍스트로 글도 쓸 수 있으며

손바닥으로 캔버스를 이동할 수 있고

맨마지막에 말풍선 도구로 코멘트도 남겨 달아둘 수 있다.

 

 

 

이제 오른쪽 패널이다. 

 

 

디자인 패널에 있는 툴을 주로 사용하게되는데

첫줄은 요소들을 간편하게 정렬해준다.

그아래로 프레임에 쓰여있는 수치들은 요소의 모양을 나타내는데

피그마는 백터를 기반으로 하기때문에 X,Y축이 있음도 확인할 수 있다.

가로 세로길이와 회전율 모서리값을 나타내주고

마지막 파란박스는 프레임 밖으로 나간 요소들을 보여줄지말지 설정해주는 도구이다.

 

 

오토레이아웃은 자동정렬을 도와주는 기능이고

그아래 네모박스는 프레임이 변형될 때 내부 요소들의 위치를 설정해주는 것이다.

맨 마지막에는 레이어의 블렌드와 투명도를 설정해줄 수 있다.

 

 

Fill로는 요소의 색을 지정할 수 있고Stroke로 외곽선의 위치, 굵기를 설정할 수 있다.Effects는 그림자효과를 넣어 입체적으로 보일 수 있게해주고Export는 요소들을 원하는 확장자로 내보내준다.

 

: https://mcode.co.kr/

메타코드M