[ figma ] 04. 그룹 프레임 섹션, 펜툴, Boolean operations ( 패스파인더 ), 텍스트

그룹 프레임 섹션, 펜툴, Boolean operations ( 패스파인더 ), 텍스트

 

 

#  그룹(Group) ,  프레임(Frame) , 섹션(Section)

 

 

1. 프레임(Frame)

• 설명: 프레임은 피그마에서 가장 기본적인 레이아웃 컨테이너로, 디자인의 개별 요소들을 감싸고 배치할 수 있는 영역을 의미합니다. 프레임은 보통 아트보드(artboard)로 사용되며, 디바이스의 화면 크기나 디자인 시스템의 구성 요소를 정의할 때 사용됩니다.
• 특징:
  • 프레임은 디자인 요소(텍스트, 이미지, 기타 오브젝트)를 포함할 수 있으며, 개별 요소들의 위치와 크기를 관리합니다.
  • 프레임 내부에 다른 프레임을 중첩시킬 수 있습니다.
  • 프레임 자체에 배경색, 그림자, 모서리 곡률 등을 설정할 수 있습니다.
  • 자동 레이아웃(Auto Layout) 기능을 통해 반응형 레이아웃을 구현할 수 있습니다.

2. 그룹(Group)

• 설명: 그룹은 여러 개의 개별 요소를 하나의 단위로 묶어 관리할 수 있도록 하는 기능입니다. 그룹을 사용하면 여러 오브젝트를 함께 이동하거나 조정할 수 있어 편리합니다.
• 특징:
  • 그룹은 단순히 요소들을 묶는 용도로 사용되며, 요소들 간의 위치 관계는 그대로 유지됩니다.
  • 그룹 내의 개별 요소는 직접 수정이 가능하지만, 그룹 전체를 선택하면 전체를 한 번에 이동하거나 크기를 조정할 수 있습니다.
  • 그룹은 자동 레이아웃 기능이 없습니다.
  • 주로 복잡한 디자인의 특정 부분을 관리하기 쉽게 하거나, 특정 작업을 위해 임시로 여러 오브젝트를 묶을 때 사용됩니다.

3. 섹션(Section)

• 설명: 섹션은 피그마에서 프레임이나 그룹과는 다르게, 여러 프레임 또는 개별 오브젝트를 시각적으로 그룹화하기 위해 사용되는 요소입니다. 주로 디자인 작업을 조직적으로 분류하고, 프로토타이핑이나 문서화 단계에서 유용합니다.
• 특징:
  • 섹션은 프레임이나 그룹처럼 레이아웃이나 스타일을 설정할 수는 없지만, 여러 오브젝트를 시각적으로 구분할 수 있는 배경 영역을 제공합니다.
  • 섹션은 주로 여러 프레임을 하나의 논리적 그룹으로 묶어 이해하기 쉽게 만들거나, 특정 프로젝트의 섹션을 명확히 하기 위해 사용됩니다.
  • 섹션 내의 오브젝트는 독립적으로 존재하지만, 섹션 경계 내에 위치하면 섹션의 일부로 간주됩니다.
  • 섹션을 접거나 펼쳐서 디자인 작업 공간을 보다 깔끔하게 관리할 수 있습니다.

 

특징

• 프레임: 레이아웃을 구성하고 반응형 디자인을 지원하는 기본 컨테이너.
• 그룹: 여러 요소를 단순히 묶어 이동이나 크기 조정을 쉽게 하는 용도.
• 섹션: 주로 시각적 구분과 디자인의 논리적 분류를 위해 사용되는 영역.

 

 

 

그룹은 여러 객체를 하나로 묶어서 관리하는 데 사용되는 기능이고, 프레임은 전체 디자인 콘텐츠를 담는 컨테이너로, 디자인 작업의 기본 구조를 형성하고 관리하는 데 사용됩니다.

 

 

그룹  

• Cmd/Ctrl + G: 선택한 객체를 그룹화합니다.
• Cmd/Ctrl + Shift + G: 선택한 객체를 그룹에서 해제합니다.

 

프레임 

1. 프레임 생성:
   • F: 새로운 프레임을 생성합니다.
2. 프레임 크기 조절:
   • Shift + Drag: 프레임의 크기를 유지하며 조절합니다.
   • Alt + Drag: 프레임을 중심을 기준으로 크기를 조절합니다

 

 

프레임안에 오브젝트 선택

ctrl + 선택

ctrl + shift + 선택

 

섹션(Section), 프레임(Frame), 그리고 그룹(Group)은 디자인 작업을 조직화하고 구성하는 데 중요한 개념입니다. 각 개념은 사용 목적에 따라 다르게 활용됩니다.

 

# 프레임 

• 코너 반경(Corner Radius) : 프레임의 모서리를 둥글게 만들어 더 부드러운 가장자리를 만듭니다.
• 클립 콘텐츠 : 프레임 경계를 넘어 확장되는 프레임 내의 개체를 숨깁니다.
• 레이아웃 그리드 : 디자인의 시각적 구조에 도움이 되는 지침을 만듭니다.
• 자동 레이아웃:  내용에 반응하는 동적 프레임 생성
• 채우기 : 단색 채우기, 그라데이션, 이미지 (PNG, JPEG, GIF, TIFF 및 WEBP)를 프레임에 적용합니다.  
• 선 : 프레임에 획을 추가하여 테두리나 윤곽선을 만듭니다.
• 효과 : 프레임에 그림자나 흐림 효과를 추가합니다.

 

• 최상위 프레임: 캔버스에 직접 있는 모든 프레임입니다. 프레임이 최상위 프레임이 되려면 다른 프레임, 그룹 또는 개체 내에 중첩할 수 없습니다.
• 중첩된 프레임 : 다른 프레임 내에 배치된 프레임입니다. 최상위 프레임이나 다른 중첩 프레임 내에 프레임을 배치할 수 있습니다. 중첩된 프레임은 부모이자 자식입니다.
• 하위: 프레임 내에 있는 모든 개체입니다. 
•  

frame

 

 

크기 계산 

frame

 

frame

 

 

크기에 맞게 조정

 

 

frame

 

프레임의 크기를 조정하여 자식 개체에 맞게 축소하거나 늘릴 수 있습니다. 그러면 프레임 안에 있는 객체의 가장 바깥쪽 경계 주위에 프레임이 다시 그려집니다

 

 

 

섹션 , 프레임

 

섹션  :  카테고리 분류할때 많이 사용 

프레임  : 콘텐츠 구성의 기본단위

그룹 : 요소를 묶는 단위

 

 

 

# 펜툴

 

 

1) 펜툴 연습 사이트 

https://bezier.method.ac/

The Bézier Game

 

1. 상단 메뉴 확인 

2. 방향선 Alt 누르고 변경, 취소 ctrl + z 

 

 

피그마 펜툴

 

 

펜

 

오브젝트 선택 벡터편집 Enter
밴드툴 Ctrl / Command
직선 곡선 전환 및 베지어 곡선 편집 :    Ctrl+alt / Command+Option
점 추가 가능   점 삭제 Shift+Delete , Shift+Backspace
면추가 B

 

 

1. 직선 그리기와 수정

피그마 펜툴

 

- 펜( p ) 선택 

- 수정 : 엔터 또는 더블클릭 수정 후 ESC키 또는 Done 선택

 

2. 곡선그리기

 

3.

피그마 펜툴

 

 

 

 

 

# Boolean operations ( 패스파인더 )

UI2 화면 

 

 

 

- Union Selection : 도형들을 하나로 합치기
- Subtract Selection : 맨 아래 있는 도형만 남기고 위에 있는 도형을 빼기
- Intersect Selection : 도형 교집합
- Exclude Selection : 홀수로 겹친 부분은 남기고 짝수로 겹친 부분은 빼기
- Flatten Selection : 하나의 레이어로 변경 ( 벡터로 변경 )

 

 

UI3 변경 

패스파인더

 

• Union : Union은 선택한 모양을 부울 그룹으로 결합합니다. 개체가 겹치는 경우 새 모양의 외부 경로는 하위 레이어 경로에서 겹치는 세그먼트를 뺀 합성으로 구성됩니다. 그런 다음 서로 겹치는 경로 세그먼트를 무시하고 해당 외부 경로에 스트로크가 적용됩니다.
• Subtract : 빼기는 합집합의 반대입니다. 빼기는 기본 모양에서 모양 또는 모양 집합의 영역을 제거합니다. 아래쪽 모양 레이어만 단색이고 나머지는 제외됩니다.
• Intersect : Intersect는 모양이 하위 레이어의 겹치는 부분으로만 구성된 부울 그룹을 만듭니다.
• Exclude   : 제외는 교차의 반대입니다. 제외는 겹치지 않는 하위 레이어 영역만 표시합니다.

 

 

 

 

 

 

패스파인더

 

 

패스 파인더

 

 

 

# 텍스트 

 

text

 

UI3

 

 

 

1. style : 텍스트 스타일
2. font family : 서체
3. font weight or style : 글자두께  / 스타일 (이탤릭 )
4. font-size : 글자크기
5. line height : 행간
6. letter spacing : 자간
7. paragraph spacing : 문단간격 
8. text overflows or wraps with resizing : 텍스트영역크기
9. horizontal alignment : 텍스트가로 정렬
10. vertical alignment : 텍스트 가로 정렬
11. 세부 속성 

 

UI3 Typography

 

텍스트

 

 

 

1. 텍스트 속성 미리 보기 보기  
2. 기본 탭
3. 텍스트의 가로 크기 조정 방식을 선택
4. 텍스트의 가로 정렬 조정  
5. 취소선 및 밑줄과 같은 텍스트에 장식 적용  
6. 대소문자를 조정. 대문자, 소문자, 대문자 및 작은 대문자 중에서 선택
7. 텍스트 단락 사이의 간격 변경  
8. 번호 매기기 또는 글머리기호 목록 만들기 
9.  오버플로 콘텐츠를 숨기려면 텍스트를 자르기
10. 텍스트 잘림이 발생하는 시기를 결정하도록 최대 줄 설정
11. 세로 자르기 전환
12. 세부 정보 탭
13. 들여 쓰기 설정을 조정. 단락
14. 대소문자를 조정
15. 스타일, 위치(위 첨자 및 아래 첨자) , 분수 등과 같은 숫자 설정 
16. 문자 형식, 문체 집합, 문자 변형, 가로 간격 등과 같은 모든 OpenType 기능에 액세스  딸깍 하는 소리 유형 설정 
17. 가변 탭 ( 가변 글꼴 에만 사용 가능 ). 글꼴의 변수 축 설정

 

 

UI3 : 변경

 

UI3 text

 

 

 

 

 

 

 

 

텍스트 크기 조정 

 

text

 

•  자동 너비 : 텍스트 레이어의 너비가 내용에 맞게 늘어납니다. 새 줄을 만들려면 Enter/를 눌러야 합니다. ReturnReturn
•  자동 높이 : 텍스트 레이어의 높이가 내용에 맞게 커집니다. Figma는 텍스트 레이어의 원래 너비를 넘어 확장되는 모든 줄을 새 줄로 바꿉니다.
•  고정 크기 : 레이어 내용에 관계없이 너비 너비와 높이가모두 동일하게 유지됩니다. Figma는 레이어의 수평 경계를 넘어 확장되더라도 추가 텍스트를 래핑 합니다. 이로 인해 이를 다른 레이어와 정렬하기가 어려워질 수 있습니다.

 

 

# 말 줄임 

피그마 말줄임

 

텍스트 고정크기 설정후 

 

베리어블 기능

일부 영문 폰트에서만 지원 되는 기능 

 

 

 

 

 

# 링크 

 

피그마 텍스트 링크

 

UI3

 

 

 

# 폰트 

 

프리텐타드   

 

https://cactus.tistory.com/306

Pretendard

 

 

https://fonts.google.com/

Browse Fonts - Google Fonts

 

 

UI3에서는 로컬에 폰트 설치가 되어 있으면 안해도 됨 

 

 

 

 

# 웹에서 로컬 폰트 사용하기

 

https://www.figma.com/ko-kr/downloads/

Figma 다운로드 | 데스크톱 및 모바일용 웹 디자인 앱