[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "8. 프레임과 그룹의 차이점_1"

반응형

https://mcode.co.kr 

메타코드M

 

안녕하세요~ 하양입니다. 🤗

 

지난 시간에는 페이지 및 레이어에 대해서 알아보고 실습을 진행해봤다면 이제 기본 기능에 대해 좀 더 자세히 알아보기 시작할 것 같습니다.

 

 

1.  섹션, 프레임, 그룹의 구조

 

섹션은 프레임 안으로 들어갈 수 없는 구조입니다. 프레임보다 상위개념이기 때문입니다. 또한 그룹은 종속된 레이어의 영향을 받지만, 프레임은 하위 레이어의 영향을 받지 않습니다. 

 

 

 

따라서 아래 그림과 같이 그룹 내의 레이어의 크기를 조절하게 되면 그룹 내 레이어가 다 같이 조절이 되지만, 프레임 내의 레이어를 아무리 변형해도 프레임 내의 다른 레이어에는 영향을 끼치지 못하게 되는 것입니다. 

가운데 하얀 프레임 내부에 있는 회색 레이어를 조절해도, 프레임의 크기는 변하지 않는 모습이고..

우측의 회색 동그라미 2개의 경우는 그룹으로 묶여있어서 동시에 서로 영향을 받는 모습을.. 캡쳐해보았습니다.

 

 

2. 컴포넌트와 인스턴스

 

계속해서 사용해야하는, 혹은 반복적으로 관리해야하는 요소가 있다면 컴포넌트로 만들어서 관리하는 방법이 편리합니다.

 

'컴포넌트'가 된 요소는 우측 아이콘처럼 보라색 마름모 모양으로 표시가 되게 됩니다. 해당 요소를 복사하게 되면 '인스턴스'가 됩니다. 아래 그림처럼 속이 텅 빈 마름모가 됩니다.

 

 

즉 컴포넌트와 인스턴스의 차이점은 다음과 같습니다.

컴포넌트의 경우 Assets/Resources 메뉴에서 확인이 가능한데, 이 컴포넌트를 기준으로 인스턴스가 다양하게 생성될 수 있게 됩니다. 그리고 다양한 속성값을 보유한 인스턴스는 '베리언트'로 속성값을 세분화해 저장할 수 있습니다.

컴포넌트가 없다면 당연히 인스턴스가 생성될 수 없겠죠?

 

컴포넌트를 기준으로 인스턴스에게 속성값을 나누어줄 수 있기 때문에 이 과정을 '베리언트'로 속성값 세분화하기라 부릅니다. 같은 아이콘이지만 크기만 다른 인스턴스들을 반복적으로 사용해야한다면 하나의 컴포넌트를 반복사용하되, 베리언트로 속성값만 다르게 부여하면서 사용할 수 있는 것이죠.

 

 

 

 

컴포넌트, 베리언트, 인스턴스는 다음과 같이 구별할 수 있게 됩니다.

 

 

 

피그마 입문 강의 :

 

https://mcode.co.kr/video/list2?viewMode=view&idx=78 

메타코드M

 

#피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠 #메타코드