**모든 내용은 피그마튜터 강의를 듣고 혼자서 복습 한 것입니다 ! 유튜브에 '피튜브' 추천해요.

이번부터는 업데이트된 UI를 사용하겠습니다!

베리언트 (Variants)

흔히 '변수'라고 부른다.

스타일이나 속성이 서로 다른 컴포넌트들을 말한다.

컴포넌트를 해야만 사용할 수 있다.

완성된 베리언트를 먼저 보고 시작하는게 좋을 것 같다.

위 캡쳐는 바탕색이 서로 다른 (색깔이라는 속성이 다름) 컴포넌트들이 한되 묶여있는 것을 볼 수 있다.

인스턴스로 간편하게 white, grey, black 색상을 변경할 수 있는 것이다.

Variants를 만드는 방법

두가지로 나뉘는데, 일반 객체일 때와 마스터 컴포넌트 일 때로 나뉜다.

1. 일반 객체일 때

2개이상의 객체를 선택하고 Command+Option+k 를 누른다.

혹은 Create component set 클릭해도 된다.

그러면 이렇게 2개의 Variants 가 생긴다.

2. 마스터 컴포넌트일 때

1) 마스터 컴포넌트가 1개일 때

Add variants(=핑크색 사각형)을 누른다.

2) 마스터 컴포넌트가 여러개일 때

컴포넌트 4개를 드래그하고 Combine as variants 를 누른다.

이렇게 하면 간단하게 Variants 를 만들 수 있다.

베리언트는 다양한 프로퍼티와 밸류값으로 여러개의 조건을 만들 수 있다.

프로퍼티(=속성)를 추가해서 각각 배경색상과 피튜종류로 카테고리명을 정해주었다.

그리고 배경색상 프로퍼티에는 off,on 으로 각각의 밸류값에 고유이름을 지정해주었고,

마찬가지로 피튜종류 프로퍼티에도 어머나, 똘똘, 안경 으로 각각의 밸류값에 고유이름을 정해주었다.

총 2개의 프로퍼티가 생긴 셈이다.

필요한 인스턴스를 꺼내어 오른쪽 패널에서 배경색상을 on, off 할 수 있고, 원하는 아이콘도 선택할 수 있다 ! 

**모든 내용은 피그마튜터 강의를 듣고 혼자서 복습 한 것입니다 ! 유튜브에 '피튜브' 추천해요.

스왑 인스턴스 (Swap instance)

인스턴스를 다른 인스턴스로 바꿔주는 기능

이미지나 아이콘만 변경하고 싶을 때 쓰면 된다.

예를 들어, 나머진 그대로인데 아이콘만 변경하고 싶을 경우에 사용할 수 있다.

단, 모든 아이콘과 바꾸고 싶은 모듈(아이콘+텍스트 조합 최소단위)을 컴포넌트화 해야한다.

그리고 활용할 때는 당연히 인스턴스에다 해야한다!! (마스터 컴포넌트 원본은 별도로 관리한다.)

프로퍼티 (Property)

프로퍼티의 뜻은 '속성'이다. '속성'은 사물이 가진 특징이나 성질을 일컫는다.

그래서 피그마에서 사용하는 프로퍼티는 이미 완성된 컴포넌트에 어떠한 필요한 속성을 더해주는 기능이라고 보면 쉽다.

컴포넌트에 플러스 알파로 옵션기능을 넣어주는 것이다!

1. 텍스트 프로퍼티 (Text properties)

텍스트 레이어에 프로퍼티 옵션을 주어서 여러개의 인스턴스에 적힌 텍스트를 한번에 바꾸어 주는 기능이다.

버튼 텍스트, 인풋텍스트의 Place holder, 헬프 텍스트 등 텍스트 레이어가 반복되는 곳에 적용한다.

피그마가 새롭게 업데이트 되어서 인터페이스가 조금 달랐다. 그래서 연습용 버튼을 만들어보았다.

연보라색 연습용 버튼을 컴포넌트로 만든 후 프로퍼티를 줄 텍스트 부분만 클릭하고, 오른쪽 텍스트 패널에서 Create text property (=핑크색 동그라미)를 누르면 Create component property 모달창이 뜬다.

Name값에는 Button을, Value값에는 연습용이라고 입력해보았다.

인스턴스 두개를 꺼냈다. 핑크색 사각형 부분에는 수정할 텍스트를 입력할 수 있다. 

메롱 이라고 입력하니까 두개 텍스트가 후루룩 바뀌었따.

만약 인스턴스가 너무 많거나 여러 프레임에 걸쳐 중구난방으로 위치해있을 때는 인스턴스 하나를 클릭하고 command + / 를 눌려서 select all with same instance를 입력하면 전부 다 찾아준다!

2. 불리언 프로퍼티 (Boolean property)

불리언(Boolean)이란 오직 참(True)과 거짓(False)만을 구분하는 논리값을 뜻한다.

프로퍼티 특정요소를 참과 거짓 값으로 on/off 토글을 만들 수 있다.

주로 버튼이나 모듈의 아이콘 또는 이미지에 적용을 한다. 옵션을 적용해서 끄고 켤 수 있다. 

ex) 토글버튼 on/off, 모듈 내 아이콘 숨김/노출 처리 등

그럼 적용해보자!

옵션을 주고자하는 모듈전체를 컴포넌트로 만들고 불리언 프로퍼티를 적용시킬 이미지만 클릭하여서 오른쪽 Layer 패널에 Create boolean property(=핑크색 사각형)을 누른다.

그리고 모달창이 뜨면 네임값을 이미지라고 써두고 프로퍼티를 만든다.

인스턴스 꺼내오면 이미지 부분에 토글버튼이 생긴것을 확인 할 수 있다. 토글버튼을 끄면 숨김처리가 된다.

3. 인스턴스 스왑 (Instance swap)

스왑 인스턴스 기능을 좀 더 편리하게 사용할 수 있는 기능.

하다보니 전부 비스무리하다는 느낌이 있넹..

모듈과 아이콘들 모두 컴포넌트로 만든 후, 모듈에서 바꿔 줄 부분을 선택한다.

그리고 create instance swap property(=핑크색 사각형)을 클릭한 후,

preferred values 에서 플러스 버튼을 눌러주고 바꾸고싶은 아이콘들에 체크해준다 (=빨간색 사각형)

Nested instances에 뜨는 아이콘들은 컴포넌트로 이미 만들어져있는 것들이다. 바꾸고싶은 아이콘들을 모두 체크하면 여러가지 모듈을 만들 수 있다.

이렇게 말이다 !! 캬캬 끝

너무 길어져서 variant 부분은 다음 글에 작성할게요 !

**모든 내용은 피그마튜터 강의를 듣고 혼자서 복습 한 것입니다 ! 유튜브에 '피튜브' 추천해요.

Component란?

컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다.

피그마에서 마스터 컴포넌트를 만들어두면 그에 상응하는 인스턴스들로 디자인을 할 수 있는데, 만약 작업을 하던 중 디자인이 변경이 됐다..

그러면 컴포넌트만 수정해주면 나머지 인스턴스들도 수정사항이 즉각적으로 업데이트 된다 !

이런 기능이 없으면 똑같이 생긴 요소들을 일일이 변경해야 ... 

여기서 마스터 컴포넌트랑 인스턴스는 무엇일까?

1. 마스터 컴포넌트와 인스턴스 만들기

(맥 기준) command+option+K를 누르거나 우클릭하여 Create component 를 누르면 마스터 컴포넌트가 만들어지고,

만들어진 마스터컴포넌트를 복사하여 새로 생성하면 인스턴스가 생성되는 것이다.

만약, 여러개를 한번에 마스터컴포넌트화 하고 싶다면 Create multiple component 를 누른다.

2. 마스터 컴포넌트와 인스턴스 해제하기 (= Detach component, instance)

마스터 컴포넌트 해제는 피그마 자체기능에 없어서 플러그인에서 detach component 를 실행시켜야함.

인스턴스 해제는 마우스 우클릭해서 detach instance 누르거나 command+option+B 를 누르면 된다.

3. 컴포넌트 수정하기

마스터 컴포넌트는 모든 요소를 추가, 삭제, 수정이 가능하지만 인스턴스는 그렇지 않다.

단, 인스턴스도 디자인 패널의 속성부분은 수정이 가능한데 새롭게 수정된 것이 우선시 되어서 이후 마스터 컴포넌트를 아무리 들쑤셔도 한번 수정한 인스턴스는 업데이트가 안된다. (당연함)

**모든 내용은 피그마튜터 강의를 듣고 혼자서 복습 한 것입니다 !유튜브에 '피튜브' 추천해요. 피알못에게 최고 ㅠㅠ

오토 레이아웃이란?

프레임에 자동으로 간격을 걸어주는 기능으로 프레임을 동적으로 (반응형) 만들어준다.

초급

1. 오토 레이아웃 걸기 : 프레임을 선택해 Shift + A 클릭, 우클릭 해도 됨.

2. 오토 레이아웃 해제 : 프레임을 선택해 커맨드 + 백스페이스 하거나 Control+Shift+G를 클릭

3. 오토 레이아웃 조정하는 방법

아 귀찮은데, 프레임 여러개 한번에 걸면 안되나요???

안된다! 작은 블록단위부터 걸어주어야 한다.

중급

Advanced Layouts (=오토 레이아웃 더보기 기능)

1. spacing mode

현재는 spacing mode 가 없다. 이 모드가 없어도 space between 부분에 auto인지 숫자를 입력해 간격을 딱 고정할 것인지 정할 수 있어서 없어진 것 같다.

첫 줄은 간격을 auto로 설정해서 마우스로 프레임을 늘리면 간격이 자동으로 조정이 된다. 

두번째 줄은 간격을 -17로 설정해둔 것인데 프레임을 늘려도 간격이 고정되어있는 것을 볼 수 있다. 

2. Strokes

Strokes 에는 Excluded, Included가 있는데 프레임 사이즈안에 선 굵기를 포함하냐 포함하지 않느냐로 크기가 달라진다.

먼저 Stroke excluded in Layout -> 스트로크는 레이아웃에 제외시킨다.

빗금쳐진 부분은 패딩이다. 스트로크를 레이아웃에서 제외시켰다함은 스트로크의 자리를 따로 인정해주지 않는 거니까 스트로크가 패딩에 겹쳐져 버린다. 그래서 사이즈가 작다.

두번째, Stroke included in Layout ->  스트로크는 레이아웃에 포함된다.

반대로 스트로크의 자리를 인정해주어 (포함해주어) 사이즈가 더 커지는 것이다.

헷갈리시면 진짜 골똘하게 잘 생각해보세요 (?) 그럼 이해 됨 !

3. Canvas stacking

겹쳤을 때 쌓이는 순서로 First on top, Last on top 두 종류가 있다.

4. Align text baseline

명칭이 약간 바뀌었다.

Absolute position (앱솔루트 포지션)

오토 레이아웃을 프레임 안에서 원하는 요소들을 절대적인 자리에 위치를 지정해 줄 수 있다.

고급

Auto layout resizing (오토 레이아웃 리사이징)

고오급 기능 나온다. 이것도 헷갈리는데 잘 알아 두어야 한다. 나는 할쑤 이따!!!!!

먼저 콘텐츠와 컨테이너를 알아보자.

오토레이아웃 리사이징은 컨텐츠 혹은 컨테이너의 가변적인 속성에 대해서 알 수 있다. 

이 개념이 너무 헷갈려서 나름 쉽게 이해하는 방법을 생각해보려 애썼다..

1. Fill container

아오 뭐가 뭔지 헷갈린다면 앞에 주어를 붙여보자.

Contents fill container.

-> 컨텐츠는 컨테이너를 채운다.

주어가 행동하는거니까 주어인 컨텐츠에 fill container 해준다.

그러면 컨텐츠는 컨테이너가 어떠한 길이를 가졌든지 간에 가득 채운다. 그래서 컨테이너의 크기를 옆으로 늘려보면 컨텐츠도 같이 늘어날 것이다. 

2. Hug contents

Containers hug contents.

-> 컨테이너는 컨텐츠를 감싸안는다.

주어인 컨테이너에 hug contents를 해준다.

그러면 컨테이너는 컨텐츠가 어떠한 길이를 가졌든지 간에 품어주는 것이다!

컨텐츠를 옆으로 늘려보면 컨테이너도 같이 쫙쫙 늘어난다.

3. Fixed size

이건 모.. 말 그대로 컨텐츠나 컨테이너의 사이즈를 고정시켜주는 것이다.

여기서 제일 중요한 점들이 있는데,,

fixed size는 상대적인 개념이 아니라서 모든 경우에 다 뜬다.

하지만 리사이징을 fill container으로 하면 컨테이너가 꼭 필요하기 때문에 상대적으로 제일 바깥에 있는 컨테이너의 경우에는 fill container가 없고 리사이징을 hug contents로 하면 컨텐츠가 꼬옥 필요하기 때문에 상대적으로 제일 안에 있는 컨텐츠의 경우에는 더 이상 컨텐츠가 없으니 hug contents 를 쓸 수 없다. (암,, 당연한 소리,, 근데 글로 적으니 나만 이해 할 것 같아서 사진첨부)

그리고 알면 좋은 거 하나 더 !