본문 바로가기
  • 교재 소개

  • 6장 디자인 파일 만들기 (Edit 모드)

  • 6.2 인터페이스 둘러보기

스터디 열기

인터페이스 둘러보기

Edit 모드의 인터페이스를 가볍게 살펴봅니다.

Edit 모드 인터페이스

1. 툴바

디자인 파일 중앙 하단에 위치하며, 디자인 작업에 필요한 다양한 도구들이 모여 있는 공간입니다.

  1. 선택도구

  2. Move : 개체를 선택, 이동할 수 있습니다.

  3. 손바닥 도구(Hand tool) : 캔버스 내 시야를 이동할 수 있는 도구입니다.

  4. Scale : 개체의 크기를 조절할 수 있습니다. (우측 프로퍼티 패널에 Scale 패널이 활성화됩니다.)

  5. 프레임 생성 도구

  6. Frame : 프레임을 생성할 수 있습니다.

  7. Section : 디자인을 그룹/라벨링 할 수 있는 Section을 생성할 수 있습니다.

  8. Slice : Export할 구역을 설정할 수 있는 도구입니다. (캡처 도구를 생각하시면 됩니다.)

  9. 도형 생성 도구

  10. Rectangle : 사각형을 생성할 수 있습니다.

  11. Line : 기본 직선 형태의 *패스를 생성할 수 있습니다.

  12. Arrow : 화살표 형태의 패스를 생성할 수 있습니다.

  13. Ellipse : 원형을 생성할 수 있습니다.

  14. Polygon : 다각형을 생성할 수 있습니다.

  15. Star : 별 모양을 생성할 수 있습니다.

  16. Place image/video… : 이미지 또는 영상을 불러올 수 있습니다.

  17. 패스 생성 도구

  18. Pen : 고정점을 찍고 핸들을 조절하여 원하는 형태의 패스를 그릴 수 있습니다.

  19. Pencil : 마우스를 드래그하여 원하는 형태의 패스를 자유롭게 그릴 수 있습니다.

  20. 텍스트 : 텍스트를 생성할 수 있습니다.

  21. 커멘트 작성(Add comment) : 파일 내에 커멘트를 남길 수 있습니다.

  22. 액션 메뉴 : 파일 내 컴포넌트, 플러그인, 위젯 등을 확인할 수 있는 메뉴입니다. Action 도구(figma AI) 사용하기

💡 패스(Path) : 좌표값, 곡률 값을 가진 각 고정점을 잇는 벡터 선입니다. 고정점(Anchor poin) : 좌표값을 가진 점입니다. *핸들(Handle) : 고정점과 고정점 사이의 곡률 값을 조절할 수 있는 점입니다.

※ 핸들을 조절하여 만드는 곡선을 ‘베지어 곡선(Bazier Curve)’라고 한다.

2. 레이어 패널

현재 디자인 파일 내에 있는 디자인 요소를 목록으로 확인할 수 있는 패널입니다.

(1) 폴더(파일 위치)/파일명

  • 디자인 파일이 위한 폴더를 확인할 수 있습니다.
  • 파일명을 수정할 수 있습니다.
  • 파일과 관련된 다양한 옵션을 제공합니다.

(2) Layers 탭

  • Pages list
    • 피그마에서는 한 디자인 파일 안에 여러 개의 화면을 구성하여 구분할 수 있도록 하는 ‘페이지’ 기능을 제공합니다.
    • 각각의 페이지는 별도의 URL을 가지고 있습니다. (페이지 링크 공유하기)
  • Layer list
    • 캔버스 내에 있는 디자인 요소를 레이어 목록으로 확인할 수 있습니다. 현재 작업 중인 파일의 모든 요소를 ‘계층 구조’로 보여줍니다.
    • 각 요소들은 개별로 선택하거나 그룹화, 순서 변경, 잠금, 숨김 기능을 통해 관리할 수 있습니다.

(3) Assets 탭

Assets 탭에서는 현재 디자인 파일 내에 있는 *컴포넌트 관리와 라이브러리 접근, 검색 및 필터링, 스타일 관리 등의 기능을 제공합니다.

📌 *컴포넌트(Component) : 디자인 요소를 반복적으로 사용할 수 있도록 만들어진 일종의 템플릿입니다. 컴포넌트에 대한 자세한 내용은 뒤에서 다루도록 하겠습니다.🙂

3. 캔버스

  • 인터페이스의 중앙에 위치한 넓은 작업 공간으로, 디자인 작업의 중심이 되는 곳입니다. 프레임 또는 도형을 그리거나 이미지를 삽입하여 실제 디자인을 제작합니다.
  • 확대 및 축소 기능을 통해 디테일한 작업이 가능하며, 무한 확장이 가능한 공간입니다.

    📌 캔버스를 정말로 무한 확장할 수 있나요? : 정확히는 25600%까지 확장할 수 있습니다 :)

4. 프로퍼티 패널

  • 선택된 요소의 속성을 수정할 수 있는 공간입니다.
  • 여기서는 디자인 요소의 위치, 크기, 색상, 불투명도, 그림자 등의 다양한 속성을 조정할 수 있고, 요소 간의 정렬 및 분배 기능도 제공합니다. 텍스트 요소의 경우 글꼴, 크기, 정렬 등을 변경할 수 있습니다.

(1) Design 탭

  1. Page: 캔버스의 바탕 색상을 설정할 수 있습니다.
  2. Local variables(로컬 변수): 디자인에서 재사용 가능한 값을 정의할 수 있습니다. 색상, 크기, 간격 등의 값을 변수로 설정하여 디자인 요소들에 적용할 수 있습니다. (예) 화이트-다크 모드 디자인
  3. Local styles: 텍스트, 색상, 효과 등의 스타일을 정의하여 프로젝트 내에서 일관되게 사용할 수 있도록 하는 기능입니다.
  4. (전체) Export: 디자인 파일 내 요소를 Export 할 수 있습니다. (단축키는 Ctrl + Shift +E입니다.)
  5. 속성: 선택한 요소의 속성을 확인할 수 있고 다양한 변형 기능을 사용할 수 있습니다.
  6. 포지션:
  • 정렬: 선택한 요소들을 캔버스 또는 부모 프레임, 그룹을 기준으로 정렬할 수 있습니다.
  • Constraints: 디자인 요소가 부모 프레임 내에서 어떻게 크기가 조절되고 배치되는지 설정할 수 있습니다. 이 섹션은 반응형 디자인을 만들 때 특히 유용하게 사용됩니다.
  1. 레이아웃: 요소의 사이즈를 편집할 수 있습니다.
  2. Appearance
  • 요소의 불투명도를 조절할 수 있습니다.
  • Corner radius: 도형의 모서리를 둥글게 만들 수 있습니다.
  • 블렌드 모드(요소의 색상이 다른 요소와 어떻게 섞이는지 설정)와 색상 불투명도 등을 설정할 수 있습니다.
  1. Fill: 요소의 색상 또는 이미지를 추가할 수 있습니다.
  2. Stroke: 요소에 아웃라인을 추가할 수 있습니다.
  3. Effects: 요소에 그림자, 블러 등 다양한 효과를 추가할 수 있습니다.
  4. (개별) Export: 선택한 요소를 Export할 수 있습니다.

(2) Prototype 탭

  1. Interaction: 디자인 요소와 사용자 간의 인터랙션을 정의할 수 있습니다.
  2. Scroll Overflow Behavior: 프레임 내부의 콘텐츠가 프레임 크기를 초과할 때 스트롤 가능 여부를 설정합니다.
  3. Show Prototype settings: 프로토타입의 전반적인 설정을 조정할 수 있는 옵션을 제공합니다.
  4. Divece: 프로토타입이 실행될 디바이스의 유형과 화면 크기를 설정할 수 있습니다.
  5. Background: 프로토타입의 배경 색상을 설정할 수 있습니다.

속성 섹션의 다양한 편집 옵션

디자인 편집 시에는 선택한 요소의 특성에 따라 다양한 편집 옵션을 제공하는 바로 바뀌게 됩니다.

🔍 주로 컴포넌트, 패스파인더, 섹션 생성 기능을 많이 사용합니다.

  1. 프레임을 선택한 경우

🔍 프레임의 사이즈가 19201080px인 경우 Copy to Figma Slides 버튼이 나타나게 됩니다. → Slides는 피그마에서 제공하는 프레젠테이션 제작 기능인데요. Slides의 슬라이드 기본 사이즈가 19201080px이기 때문에 이렇게 편리한 기능을 제공하고 있습니다.

  1. 개별 디자인 요소를 선택한 경우
  2. 여러 디자인 요소를 동시에 선택한 경우

마지막 수정

인터페이스 둘러보기 (6장 디자인 파일 만들기 (Edit 모드)) - 누구나 쉽게 시작할 수 있는 피그마 기초 활용법 | 위니버시티