[ figma ] 03. 피그마 페이지, 프레임 ,도형, 편집

프레임, 페이지, 정렬, 편집

 

 

 

 

 

메뉴구조

 

 

 

# 프레임

figma frame

1. 프레임 프리셋 : 아이폰, 안드로이드, 데스크톱 사이즈 등을 지정합니다. 프레임을 제어하는 기능 외에는 레이어와 동일하게 사용 가능합니다. , Frame , Group , Seciton 가능
2. 위치와 사이즈 : 모든 프레임과 레이어에는 위치값(x , y)과 사이즈 (width, height)가 있습니다.  
3. Rotation : 로테이션 각도를 지정합니다. (  360도를 기준으로 , + 양수, 음수 - )가 존재합니다. 360도를 기준으로 입력하면 음수각도와 양수각도를 자동으로 설정해 줍니다.
4. Coner radius: 코너 라운딩 수치를 입력합니다. 
5. Clip content : 옵션 체크하면 레이어가 프레임에 걸쳐있을 때 해당 프레임에 잘려서 보입니다 ( css : overflow:hidden ) 
6. Constraint proporitions : 사이즈 비율을 고정합니다. 
7. Independent corners : 코너 라운딩 수치를 개별적으로 바꿀 수 있습니다. 
8. 뷰 변경 : 가로 또는 세로모드로 변경할 수 있습니다. 
9. Resite to fit : 프레임 안에 오브젝트 사이즈에 맞게 프레임 사이즈가 조절됩니다. 

 

1. 크기(Size): 프레임은 가로나비와 세로 높이를 가지며, 이를 통해 프레임의 크기를 조절할 수 있습니다. 프레임의 크기는 그 안에 포함된 요소의 크기와 배치를 결정합니다.
2. 배치(Layout): 프레임 내부의 요소들은 프레임의 크기와 배치에 따라 자동으로 정렬됩니다. 사용자는 요소들을 수동으로 배치하거나 자동 정렬을 설정할 수 있습니다.
3. 스타일(Style): 프레임은 배경색, 테두리 스타일, 테두리 두께 등의 스타일 속성을 가질 수 있습니다. 이를 통해 프레임의 외관을 사용자의 선호에 맞게 수정할 수 있습니다.
4. 상태(State): 프레임은 다양한 상태를 가질 수 있습니다. 예를 들어, 일반 상태, 호버 상태, 클릭 상태 등으로 프레임을 구성하여 상호작용 요소를 디자인할 수 있습니다.
5. 이름(Name): 사용자는 프레임에 이름을 지정하여 구분할 수 있습니다. 이를 통해 프로젝트를 조직하고 관리하는 데 도움이 됩니다.
6. 자동 레이아웃(Auto Layout): 프레임은 자동 레이아웃 속성을 가질 수 있습니다. 이를 통해 프레임 내부의 요소들을 자동으로 정렬하고 크기를 조절할 수 있습니다.

 

프레임 기준  오브젝트 정렬 

프레임안에 오브젝트 정렬

 

 

 

프레임

 

 

 

 

# 도형

 

 

figma 도형

 

도형도 프레임의 기본옵션이 동일합니다.

위치, 너비, 각도, 라운딩 등 

 

figma layer

 

 

프레임과 도형은 패널에 layer가 존재 

- 레이어옵션 : Multiply 등 이미지 합성을 변경할 수 있고 투명도를 설정할 수 있습니다. 

 

 

# 도형의 종류

1. 사각형(Rectangle):
   • 가장 기본적인 도형 중 하나로, 직사각형 형태를 가지고 있습니다.
   • 콘텐츠를 담거나 배경으로 사용하기에 적합합니다.
   • 색상, 테두리 스타일, 그림자 등의 스타일을 적용할 수 있습니다.
2. 원(Circle):
   • 정확한 원 형태를 가지고 있는 도형입니다.
   • 로고, 아이콘 등에 주로 사용됩니다.
   • 배경 색상, 테두리 스타일 등을 적용할 수 있습니다.
3. 다각형(Polygon):
   • 여러 개의 변을 가진 도형으로, 다각형의 변의 수는 사용자가 조절할 수 있습니다.
   • 별모양, 다이아몬드 등 다양한 모양을 만들 수 있습니다.
   • 다양한 스타일을 적용하여 다양한 디자인을 구현할 수 있습니다.
4. 선(Line):
   • 직선 또는 곡선 형태를 가진 선을 만들 수 있습니다.
   • 경계를 나타내거나 분할선으로 사용됩니다.
   • 굵기, 색상 등을 조절하여 세부적인 스타일링이 가능합니다.
5. 화살표(Arrow):
   • 선에 화살표 모양을 추가한 도형으로, 방향을 나타내거나 강조하는 데 사용됩니다.
   • 화살표의 모양, 크기, 스타일 등을 조절할 수 있습니다.
   • 주로 흐름도, 프로세스 흐름 등을 표현할 때 사용됩니다.
6. 텍스트 상자(Text Box):
   • 텍스트를 입력할 수 있는 상자로, 사용자가 직접 텍스트를 입력하거나 텍스트 요소를 삽입할 수 있습니다.
   • 제목, 본문 텍스트 등을 표시할 때 사용됩니다.
   • 텍스트의 글꼴, 크기, 스타일 등을 조절할 수 있습니다.
7. 기타 도형들:
   • 피그마에는 이외에도 다양한 도형이 제공됩니다. 예를 들어, 별, 삼각형, 오각형 등의 다양한 모양이 있습니다.

 

 

도형 단축키

 

1. R: 사각형 그리기
   • R 키를 누르면 사각형을 그릴 수 있는 도구가 활성화됩니다. 이후 캔버스 상에서 드래그하여 원하는 크기의 사각형을 그릴 수 있습니다.
2. O: 원 그리기
   • O 키를 누르면 원을 그릴 수 있는 도구가 활성화됩니다. 마우스로 드래그하여 원하는 크기의 원을 그릴 수 있습니다.
3. P: 다각형 그리기
   • P 키를 누르면 다각형을 그릴 수 있는 도구가 활성화됩니다. 다각형을 그리기 위해 클릭하여 원하는 점을 찍고 마지막 점에서 더블 클릭하여 도형을 완성합니다.
4. L: 선 그리기
   • L 키를 누르면 선을 그릴 수 있는 도구가 활성화됩니다. 마우스로 드래그하여 원하는 길이와 방향의 선을 그릴 수 있습니다.
5. T: 텍스트 상자 추가
   • T 키를 누르면 텍스트 상자를 추가할 수 있는 도구가 활성화됩니다. 클릭하여 텍스트 상자를 생성하고 원하는 텍스트를 입력할 수 있습니다.

 

# 도형 그리기

- 상단 메뉴에 도형아이콘 화살표 클릭 합니다.

- 사각, 원, 선, 화살표, 삼각형, 별, 이미지로 구성되어 있습니다.

- 도형선택 후 드래그로 임의적인 크기로 제작이 가능합니다. 

- 도형선택 후 클릭하면 기본적은 크기가 [ w ] 100 / [ h ] 100으로 설정됩니다. 

- 도형을 그리고 모서리 끝 바운딩 박스 클릭 후 드래그해서 크기를 조절합니다.

- 도형을 그리고 패널에서 너비와 크기를 조절합니다. 

- 도형을 선택 후 [ Shift ] + 드래그 비율이 동일하게 조절됩니다. 

- 도형을 선택 후 [ Alt ] + 드래그 가운데 중심으로 그려집니다. 

- 도형을 선택 후 [ Alt ] + [ Shift ] + 드래그하면 가운데 비율이 동일하게 조절됩니다. 

 

# 사각형 그리기 [ R ]

 

도구를 선택하거나 R을 누릅니다.  
클릭 후  드래그합니다. 

[ Shift ] 키 및 [ Alt ] 키.

 

figma 도형

모서드 처리 

figma 모서리

 

 

# 도형그리기 예)

 

 

# 도형그리기

 

 

# 도형 편집

 

1. 도형 선택:
   • 편집하려는 도형을 마우스로 클릭하여 선택합니다. 선택된 도형은 주변에 선택 핸들이 나타납니다.
2. 크기 조절:
   • 선택된 도형의 크기를 조절하려면 선택 핸들을 사용합니다. 선택 핸들을 드래그하여 도형의 크기를 변경할 수 있습니다.
   • [ Shift ] 키를 누른 상태에서 크기를 조절하면 원래의 가로 세로 비율을 유지하면서 크기를 조절할 수 있습니다.
3. 회전:
   • 선택된 도형을 회전하려면 도형의 회전 핸들을 클릭하고 드래그합니다. 이를 통해 도형을 원하는 각도로 회전시킬 수 있습니다.
4. 위치 이동:
   • 선택된 도형을 이동하려면 도형을 마우스로 클릭하고 드래그하여 원하는 위치로 이동시킵니다.
5. 모양 변경:
   • 도형의 모양을 변경하려면 도형의 경계를 클릭하고 드래그하여 모양을 조절할 수 있습니다. 이를 통해 도형의 모양을 원하는 대로 커스터마이징 할 수 있습니다.
6. 색상, 테두리, 그림자 등의 스타일 변경:
   • 선택된 도형의 스타일을 변경하려면 오른쪽 사이드바에서 스타일 옵션을 조절합니다. 색상, 테두리 스타일, 그림자 등을 조절할 수 있습니다.
7. 기타 편집 옵션:
   • 피그마는 도형을 편집하는 데 도움이 되는 다양한 기능을 제공합니다. 예를 들어, 도형의 경로를 직접 편집할 수 있는 벡터 그래픽 편집 기능도 있습니다.

 

# 도형 모양 편집

 

1. 도형 그리기 ( 사각, 원형, 삼각, 별 등 )

2. 도형 더블클릭 또는 도형을 선택 후 엔터

3. 수정은 펜 그리기 유형과 동일하면 수정완료 후 [ Done ] 또는 [ ESC ] 누르면 기본화면으로 돌아옴 

 

도형 편집

 

 

# 선

 

 

 

 

# 웹 페이지 작업시 도형은 inside로 설명  -> css 에서 box-sizing:border-box

 

 

# 색 

Figma는 PNG , JPEG , HEIC , GIF , WEBP 이미지 및 mp4 비디오 형식을 지원합니다. 
mp4 채우기 추가 (무료버전 지원 X)는 Education, Professional, Organization 및 Enterprise 팀 
파일에 대해 지원됩니다.

 

도형 선택 후  우측 디자인 패널에서 fill 선택

단색, 그라디언트, 이미지, 영상 아이콘으로 활성화

컬러 모드 변경 가능 ( cmyk 모드 지원 X)
투명도, 색조, 컬러피커, 블랜드 모드 가능

 

# stroke를 Fill로 변경

 

Stroke > Fill   /  Fill > Stroke 

[ Shift ] + [ X ]

 

 

# 선을 면으로 변경

 

Outline stroke
Ctrl+shift+O / Command+shift+O

 

선으로 화살표 작업 

왼쪽은 선, 오른쪽은 Outline stroke  면 처리 - 테두리 

왼쪽은 선 , 오른쪽은 면

 

 

 

 

#  도형 색 변경 

 

 

# 색상 및  Gradients 

 

 

 

1. 색상, 그라디언트, 이미지 : 일반 색상 ( Solid ), 이미지(image)로 영역을 채울 수 있습니다.

2.  그라디언트( Linear, Radial, Angular, Diamond) 제공됩니다.

3. 레이어 합성 스타일 : 포토샵에서 레이어 합성할때 사용하는  Mulitply 같은 옵션을 피그마에서도 사용할 수 있습니다. 

4. 컬러값 변경 : 6자리로 표현하며 웹에서 일반적으로 사용하는 Hex 뿐만 아니라 RGB나 채도와 명도값 조절이 편일한 HSL, HSB 색상 옵션을 제공합니다. 

5. 색상 구분 : Document colors에는 현재 문서에서 있는 모든 색상이 표시됩니다. 

 

 

1. 색상 팔레트(Color Palette):
   • 피그마에서는 사용자가 사용할 수 있는 다양한 색상 팔레트를 제공합니다. 이 팔레트에는 일반적으로 사용되는 색조(색상), 채도(명도), 명도(밝기) 등의 색 정보가 포함됩니다.
   • 사용자는 이러한 팔레트에서 원하는 색을 선택하여 디자인 요소에 적용할 수 있습니다.
2. HEX 코드:
   • HEX 코드는 색상을 표현하는 데 사용되는 16진수 코드입니다. 예를 들어, #FF0000은 빨간색을 나타냅니다.
   • 피그마에서는 HEX 코드를 사용하여 원하는 색상을 직접 지정할 수 있습니다.
3. RGBA 값:
   • RGBA는 색상을 표현하는 데 사용되는 또 다른 형식으로, 빨강, 녹색, 파랑, 투명도(알파) 값을 각각 나타냅니다.
   • 각 색상 채널은 0에서 255 사이의 정수로 표현됩니다. 예를 들어, (255, 0, 0, 1)은 빨간색을 나타내며, 완전히 불투명한 색입니다.
4. 그라데이션(Gradients):
   • 그라데이션은 한 색에서 다른 색으로 부드럽게 변하는 효과를 나타냅니다. 피그마에서는 그라데이션을 사용하여 객체에 부드러운 색상 전환 효과를 적용할 수 있습니다.
   • 선형 그라데이션과 원형 그라데이션 등 다양한 종류의 그라데이션을 만들 수 있습니다.

 

 

 

 

색변경

 

 

 

1. 선형 그라디언트 (Linear Gradient): 두 점을 연결하는 선 상에서 색상이 서서히 변경되는 그라디언트입니다. 선형 그라디언트는 각도, 시작과 끝점을 조절하여 원하는 방향과 위치에 그라디언트를 적용할 수 있습니다.
2. 원형 그라디언트 (Radial Gradient): 중심을 기준으로 원 모양으로 색상이 서서히 변경되는 그라디언트입니다. 원형 그라디언트는 중심점과 반경을 조절하여 크기와 위치를 조절할 수 있습니다.
3. 각형 그라디언트 (Angular Gradient): 원형 그라디언트와 비슷하지만, 색상이 중심에서부터 일정한 각도로 변하는 그라디언트입니다. 특정 각도와 중심을 설정하여 사용할 수 있습니다.
4. 다이아몬드 그라디언트 ( Diamond Gradient): 두 다이아몬드 형태의 그라디언트는 중앙에서부터 외부로 색상이 변화하며, 다이아몬드의 꼭짓점을 중심으로 색상이 고른 패턴을 가지고 있습니다.

 

 

 

 

# 복사 

 

 

• 개별 요소 복사:
  • 복사하려는 개별 요소(텍스트, 이미지, 프레임 등)를 선택합니다.
  • Ctrl + C (Windows) 또는 Cmd + C (Mac)를 누릅니다.
  • 원하는 위치에 Ctrl + V (Windows) 또는 Cmd + V (Mac)를 눌러 붙여넣습니다.
• 여러 요소 복사:
  • 마우스로 복사하려는 여러 요소를 드래그하여 선택하거나, 각 요소를 클릭하면서 Shift 키를 누르고 있습니다.
  • 선택된 상태에서 Ctrl + C (Windows) 또는 Cmd + C (Mac)를 누릅니다.
  • 원하는 위치에 Ctrl + V (Windows) 또는 Cmd + V (Mac)를 눌러 붙여넣습니다.
• 프레임 복사:
  • 페이지 또는 프레임을 클릭하여 선택한 후, 동일하게 Ctrl + C (Windows) 또는 Cmd + C (Mac)를 사용해 복사하고, 붙여넣을 위치에서 Ctrl + V 또는 Cmd + V를 누릅니다.
  • Ctrl + D
• 복제 기능 사용:
  • 요소를 선택한 후 Alt 키를 누른 상태에서 요소를 드래그하면 해당 요소가 복제됩니다.

 

속성복사 

 

 

 

# 레어어 

 

레이어는 일종의 층이며, 그 안에는 텍스트, 이미지, 도형 등의 다양한 디자인 요소들이 들어갈 수 있습니다. 레이어를 사용하여 디자인을 조직화하고 관리할 수 있으며, 특정 요소를 선택하거나 조작하는 등의 작업을 수행할 때 유용하게 활용됩니다.

 

 

레이어

 

 

 

 

 

# 정렬

 

수평적 또는 수직적으로 정렬하거나, 요소들 간의 간격을 일정하게 유지하도록 할 수 있습니다. 이를 통해 디자인 요소들을 균형 있게 배치하고 일관된 레이아웃을 유지할 수 있습니다. 일반적으로 사용되는 정렬 옵션으로는 좌우 정렬, 상하 정렬, 가운데 정렬, 요소들 간의 간격 맞추기 등이 있습니다.

 

 

정렬

 

 

 

 

# Arrange

 

순서 변경: 레이어나 객체의 순서를 변경할 수 있습니다. 예를 들어, 앞에 있는 요소를 뒤로 보내거나 뒤에 있는 요소를 앞으로 가져올 수 있습니다.

 

 

 

 

 

 

#  코멘트 

 

 

1. 이탤릭  : Ctrl + i 

2. 진하게  : Ctrl + B

3. 하이퍼링크 : Ctrl + K 

 

 

 

# import 

 

 

첫화면 drafts 에서  폴더에 파일을 드래그