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

 

프레임을 24dp로 만든 후 2픽셀을 남기고 직사각형을 그려준 모습이다.

최소 2픽셀은 남기도록 도형을 채워넣어야

개발할 때에 에러가 생기지 않기 때문에

값을 잘 보면서 아이콘을 만들어주어야 한다.

 

아웃라인 스트로크로 뒤에 직사각형을 면처리 해준 모습이다.

텍스트를 개별편집하려면 (즉 4와 K를 따로)

아웃라인 스트로크를 눌러 면으로 묶어준 뒤 그룹을 해제한 후

개별로 더블클릭해서 편집해주면 된다.

 

 

개채들을 다중선택해서 Alt탭 혹은 옵션키를 눌러주면

위 그림과같이 여백에 있는 숫자를 확인할 수 있다.

피그마에서는 저렇게 중앙값이 아니면 디자인적으로도 완벽하지 않고

개발때 에러가 나기 때문에 수정을 해주어야 한다.

 

 

왼쪽 상단 피그마 아이콘에서

Quick actions를 통해 소수점 단위로 수정할 수 있다.

쉽게 중앙값을 찾고 단위를 조절할 수 있는 기능이

메뉴에 있어서 편리한 것 같다.

 

pix를 검색해주면 두개의 박스가 체크되어있는 채로

하단에 뜨는데 그중 맨 위에있는 Snap to pixel grid의 체크를

해제해주면 된다.

그리고 난 후 글자를 좌우로 살짝씩 드래그해주면

자동으로 중앙값으로 맞춰지는 것을 확인할 수 있다.

 

 

위의 그림은 좀더 복잡하게 배웠던 것을 응용해서 아이콘을 만든 것인데

불리언 빼기를 응용해서 원하는 모양을 만들어내고

유니온으로 작업해서 플랫튼으로 변환시켰다.

피그마에서 다양한 방식으로 원하는 모양을 만들어낼 수 있으려면

연습이 많이 필요할 것 같다.

 

 

이제까지 피그마 강의에서배웠던 것들을 응용하여 실습해보니

개발을 위해 고려해야할 것들도 있고

원하는 모양을 만들기 위해 창의적으로 도형도 배치해야하기에

처음부터 복잡한 아이콘을 만들기는 쉽지 않을 것 같다고 느꼈다.

쉬운 모양부터 차근차근 연습해가야할 것 같다.

 

: https://mcode.co.kr/

메타코드M

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