[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ "(실습)심볼아이콘 만들어보기"

심볼 아이콘을 만들기에 앞서 간단하게 아이콘을 잘 그리는 방법에 대해서 설명해주고있다. 

구글 머터리얼 가이드의 스타일에서 친절하게 예시를 들어주며

주의해야할 점을 알려주는 것을 확인할 수 있다.

아이콘은 범용적으로 쓰기 위해서 모양을 간단한 직선이나 라운드 위주로 쓰는 것이 좋다고 한다.

 

아이콘의 크기는 24DP 또는 짝수단위로 하는 것이 좋다.

이는 개발할 때 코드화를 하기에 유리하기 때문이라고 한다.

아이콘은 정사각형 프레임안에 위치하도록 하는게 좋고

그 중에서도 중앙에 위치하게 해야한다.

그래야 개발했을 때 에러가 나지 않고 원하는 디자인으로 나올 확률이 높기 때문이다.

 

개발되는 것을 고려하면서 디자인 해야한다는 것을 처음 알게되었다.

위 그림은 아이콘 그래픽이 소수점단위로 끝나지 않게 정수로 끝나야함을 보여주고있다.

세심한 디테일도 챙겨서 개발자를 배려해주면 그들의 입장에서는 정말 고마운 디자이너 일 것 같다. 

노력해야겠군.

 

위 그림은 24프레임 안에 원형을 그려넣은것인데

여기서 파란색 동그라미 쳐져있는 것은 클립컨텐츠로

프레임 밖으로 나오는 하위 레이어들을 잘라서 보여주는 기능이다.

마스크 기능과 유사한 면도 있는데 프레임에 국한되어있다는 점에서

다른 것 같다.

 

 

단축키 Shift+X로 면과 선의 색을 반전시켜주고

안에 직사각형을 그려서 Radius값으로 모서리를 굴려주고

...버튼을 눌러서 코너 스무스하게 해준다.IOS에서 부드럽게 보일 수 있는 정도는 60%라고 한다.

 

아이콘은 선으로 남겨두면 안되기때문에(따로놀음)

묶어주어야 한다.

마우스 오른쪽을 클릭하여 Outline stroke를 눌러주면 된다.그러면 선에서 면으로 처리가 되는 것을 볼 수 있다.이를 디자인 방향에 따라서 Union불리언으로 병합하거나 플랫튼으로 합쳐서 사용할 수 있다.

 

 

이렇게 실전으로 아이콘을 만들어보니배우기만 해서 따로놀았던 개념들이 합쳐지는 느낌이었다.디자인에만 집중하는 것이 아닌 개발에도 신경써야할 점이있다는게 흥미로웠고 머터리얼 가이드를 잘 숙지해서 개발자에게 도움을 줄 수 있는 디자인을 해야겠다는 결심을 했다.

 

: https://mcode.co.kr/

메타코드M

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