[피그마] 피그마 입문 A to Z 부트캠프 메타코드_ "아이콘에 변수값을 설정하고 등록하기"

 

같은아이콘이라도 크기와 목적 상태가

다 똑같이 적용되지 않기 떄문에

변수값을 설정해서 다양하게 활용할 수 있어야한다.

초기에 설정만 해놓으면 그다음부턴 간단하니까 힘내자!

 

 

 

 

 

라이브러리화, 즉 시스템화가 되기 위해서는

반드시 컴포넌트화를 해주어야한다.

거기에서 베리언트를 사용하여(Add variant) 변수값들 통제하여

다양한 상태를 설정해놓을 수 있다.

 

 

위 그림은 선으로 만든 화살표 모양을

아웃라인 스트로크 설정을 통해 선들을 면처리하여

아이콘을 만들어가는 과정이다.

따로따로 놀지않게 선을 크게한번 묶어주고

 

 

불리언 그룹에서 이 면들을 모두 유니언으로 합쳐준다.

그리고 합친 3개의 면을 플래튼 시켜서

단 하나의 객체로만 이루어진 아이콘을 만들어준다.

아웃스트로크>유니온>플래튼 순이다.

 

 

만든 아이콘을 각각 컴포넌트로 만들어주고

이름을 슬래쉬로 구분해서

icon/arrow라고 써준 후(슬래쉬로 구분해주면 개발자가 파일로 구분이 잘된다고 한다)

왼쪽과 오른쪽이라는 변수를 만들어주었다.

그리고 오른쪽 디자인패널에 Combine as variants로 묶어준다.

 

 

그러면 아이콘이라는 틀 안에서

화살표라는 컴포넌트의

방향에 대한 두가지 변수값이

만들어지는 것을 확인할 수 있다.

 

변수는 오른쪽 디자인 패널에서

종류를 나누어서 추가가능하다.

타입을 왼쪽오른쪽 설정하고 사이즈를 큰것작은것으로 설정하는 등 말이다.

디스크립션도 있어서 설명도 덧붙일 수 있다.

 

 

아이콘의 변수값에대한 부분을 설정하는것은

좀 까다로웠다. 과정이 복잡하게 느껴졌기 때문이다.

하지만 변수가 생길 때마다 아이콘을 새로 그려넣는걸 생각하면

초반에 설정하는게 좀 어려워도 결국은 쉽게 가는 길이라는 것을

다시한번 납득할 수 밖에 없었다.

 

 

 

: https://mcode.co.kr/

메타코드M

 

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