[피그마 공부] 메타코드 강의별 스터디 후기 (면과 선의 속성 이해하기)

 

면과 선의 속성을 이해하기 전에

피그마는 벡터 기반의 프로그램이라는 것을 알아둬야한다고 한다.

위 그림을 보면 벡터는 매끄럽고 비트맵은 거친 느낌인것을 확인할 수 있다.

벡터는 사이즈의 변화에 매끄러운 반면 비트맵은 손실되는 것이다.

 

 

면을 하나의 도형 개체로 인식하는 주체는 코드다.

따라서 면으로 만들어놓으면 피그마의 CSS가 코드로 전환하기 수월하다는 의미같다.

또한 면으로 해놓으면 자동 비율이 적용되기 때문에

선으로 그려놓은 것도 면화 해놓으면 디자인하기에 더 수월하다.

다만 면을 선으로 다시 돌리는 것은 불가능하니 신중해야 할 것 같다.

 

 

피그마에서는 하나의 도형개체로 인식되는 면과달리

선은 스타일 속성으로 우선 인식 된다. 하나의 코드로 전환되지 못한다는 것.

자동비율이 적용되지 않으니 크기조절시 길이는 달라져도 두께는 유지된다.

혹은 면화 시켜서 면의 속성을 가지게 할 수도 있다.

 

 

비슷해보이는 두 모양은 사실 완전 다르다.

왼쪽은 면으로서 가로 세로가 있는 직사각형이고

오른쪽은 선으로서 세로가 없고 굵기로

왼쪽 직사각형 면과 같은 모양만 띠고있는 것이다.

좌측 패널에서도 Line과 Recrangle로 엄연하게 구분하고 있다.

 

 

위 피그마 화면은 데브모드로 바꿔서

코드를 확인해보는 것이다.

좌측 직사각형을 클릭했을 때 보여지는 것으로

높이 넓이가 다 채워져있으며 코드로 잘 구현되어 있는 것을 확인할 수 있다.

 

 

반면  우측 선을 클릭했을 때의 데브모드에서는

높이값이 따로 표시되지 않는 것을 볼 수 있다.

아래 Layout에서는 코드값이 나오지만 (선은 코드값으로 구현이 되지 않기에)데브모드를 풀면 선에서는 높이가 제대로 표시되지 않음을 확인할 수 있다.

 

 

피그마가 벡터기반의 프로그램인 덕분에 

다양한 변형을 깨짐없이 이용할 수 있다는 것을 알았다.

일일이 계산하지 않아도 알아서 계산해서 깨끗한 디자인을 보여주다니

참으로 열일하는 프로그램이지않은가,,,

 

: https://mcode.co.kr/

메타코드M

본 내용은 메타코드 Figma 서포터즈 강의 후원을 받아 작성되었습니다.