[2강] 01.프레임과 그룹

디자인이 코드로 바뀌는 과정

 

1. 디자인을 코드로 변환.
2. 코드는 디자인을 레고처럼 쌓음. 이때, 기본적으로 네모난 박스 영역을 만드는데, 이를 보고 박스 모델이라고 한다.
3. 웹과 앱은 코드를 읽고, 디자인으로 다시 바꿔서 화면에 보여준다. 그렇기에 UI 설계시 코드로 변환할 수 있는 구조로 만들어야 하며, 이를 위한 기능이 프레임이다.

프레임과 그룹

• 프레임이란
  피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체. 코드 블록으로된 박스 모델의 박스 하나 하나가 피그마에서 프레임이란 기능으로 구현되는 셈으로, 프레임에 다른 개체나 프렘이에 넣을 수 있기 떼문에 컨테이너라고도 불린다.
  
  
• 그룹이란
  여러 개체를 하나로 묶어주는 기능. 여러 개체를 조정하거나, 디자인을 정리하는 등 편의를 위해 여러 개체를 하나로 담는 기능으로, 코드 블록으로는 인식되지 않는다.
  여러 요소를 한 번에 담아서 움직일 때 주로 사용하거나 복잡한 디자인들을 정리할 필요가 있을 때 정리하는 용도로도 사용한다.
  
  
• 비교

프레임	그룹
코드 블록을 만들어서 실제 코드로 바꿀 수 있는 개체	편집, 조정, 또는 기타 편의를 위해 여러 개체를 하나로 담는 기능
개발에 필요한 속성을 적용 가능	속성 적용 불가

 

프레임과 그룹 만들기

원하는 객체를 선택한 다음, 우클릭을 통해서 Group selection이나 단축키 ctrl+g를 누르면 그룹화, 우클릭을 통해서 Frame selection이나 단축 키 ctrl+alt+g를 누르면 프레임화.

 

프레임은 추가로 아래의 툴을 이용해서도 생성이 가능하다.

 

 

프레임은 색상과 외곽선 같은 설정을 각 프레임 별로 따로 지정 가능하지만, 그룹은 동일하게 변동이 된다.