[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ " 11. 레이어 기능 활용하여 실습하기"

 

https://mcode.co.kr  

메타코드M

 

 

 

안녕하세요~ 하양입니다. 🤗

 

지난 시간에는 레이어 속성을 이용한 Flatten, 마스크에 대해 배우는 시간이었다면, 이번엔 이를 활용해 실습해보는 시간이 될 것 같습니다.

 

 

1.  심볼 아이콘 만들어보기

 

아이콘을 만드는 것은 자유이지만, 어플에 적용하기 위해 개발단계를 고려한다면 여러가지 규칙을 따라서 제작하는 것이 좋습니다. 구글의 아이콘 디자인 가이드를 확인하여서 아이콘을 제작하는 것을 추천합니다. 라운드값이나 여러 수치들은 되도록 소수점보단 정수단위로 만드는 것을 추천합니다. 

 

 

우측 패널에서 Clip content가 체크되어있으면 저렇게 크기가 초기값으로 지정되어 도형이 잘릴 수 있습니다.

 

아이콘을 만들 때 선 타입으로 남겨두면 안되기 때문에 면으로 바꿔주기 위해 꼭 Outline stroke를 해줘야 한다고 합니다.

 

양쪽 여백이 2픽셀정도는 남아있는게 중요하다고 합니다.

외곽의 여백도 확인하면서 크기, 두께, 모서리의 radius값 등을 조절하는 과정을 캡쳐해보았습니다!

여러 도형을 합쳐서 만든 아이콘에서 계속 수정이 필요할 거 같은 부분들은 Union그룹으로 합쳐서 진행하면 될 것 같습니다. 

 

2.  심볼 + 텍스트 조합 아이콘 만들어보기

이렇게 일단 사각형 안에 텍스트로 입력해서 넣어줍니다. 이후에 outline stroke를 진행시켜주면 4와 K가 각각 서로 다른 Vector 형태로 분리되는 것을 확인할 수 있습니다.

 

 

4k를 가운데 정렬하고 싶은데 애매하게 정렬이 안 된다면?

-> 소수점 단위로 픽셀을 수정하고 싶다면 상단의 Quick actions 에서 

 

 

'Snap to pixel grid'의 체크를 해제한 뒤에 다시 정렬을 하면 됩니다. 

 

슬슬 복잡한 모양이 나오기 시작합니다. 가게 모양을 만들어보았는데, 슥슥 도형을 조합해서 뚝딱 완성해내는 강사님을 보니 너무 신기했습니다. 완성이 되기 전까진 flatten시키지 않고 아래와 같이 최종 완성 후에 flatten을 하셨습니다.

 

 

피그마 입문 강의 :

 

https://mcode.co.kr/video/list2?viewMode=view&idx=78 

메타코드M

 

 

#피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠 #메타코드