[Do it! 프로덕트 디자인 입문 with 피그마]4-1 & 4-2 & 4-3장

프레임의 위치와 크기 패널 조절하기

As Is를 클릭하고 To Be의 X, Y, W, H 값을 입력하면 To Be에 두 레이어가 겹쳐진다.

 

켜고 끌 수 있는 베리언트 만들기

As Is의 오브젝트를 아래에 복제하고 색생을 회색으로 바꾼 후 varient의 이름을 각각 grey와 red로 바꾼다.

 

두 오브젝트를 선택한 상태에서 Create component set를 선택해 2개의 컴포넌트를 베리언트로 묶는다.

원래 컴포넌트의 이름이 베리언트의 옵션명으로 들어간다

프로머티명과 옵션명을 다음과 같이 바꾼

클릭 한번으로 red프로퍼티를 켜고 끌 수 있다.

 

인스턴스 교체하기

 

Constraints 조절하기

Constraints의 left를 left and right로 바꾸면 이렇게 설정한 사각형은 상위 프레임의 좌우 폭에 맞게 크기가 바뀌게 된다.

 

그리드 만들기

그리드 완성