UI_UX Design/Figma

01.피그마 설치와 기본인터페이스(UI3) 둘러보기

jsBae 2024. 11. 2. 22:46
학습목표:
- figma UI3의 새로운 인터페이스를 학습 해 본다.

무엇이 바뀌었나요?

New Design:

  • 크기 조절이 가능하고 접을 수 있는 패널을 통해 인터페이스를 보다 효과적으로 제어할 수 있습니다.
  • 캔버스에서의 작업에 더 많은 강조점을 부여합니다.
  • 배치, 그룹화 및 다양한 상황에 적응하는 방식을 개선하여 기능을 보다 직관적으로 만듭니다.
  • Figma Design, FigJam, Dev Mode 및 Figma Slides 간 전환을 더 쉽게 만들어 다른 제품과의 일관성을 추가합니다.
  • 캔버스 왼쪽에 있는 탐색 패널을 재구성하여 파일에 대한 모든 정보를 보관하고 사용하기 쉽게 만들었습니다.

UI 최소화

캔버스에 조금 더 많은 공간이 필요한 경우 이제 탐색 패널에서 UI를 최소화할 수 있습니다. 클릭 UI를 최소화하여 탐색 패널과 속성 패널을 모두 축소합니다 .

파일 이름 및 위치

클릭하세요파일 이름 옆에 있는 드롭다운 아이콘을 클릭하면 파일 이동 , 라이브러리 게시 , 브랜치 생성 , 버전 기록 표시 등의 작업을 수행할 수 있습니다 .

자산 탭

자산 탭 에서 구성 요소를 검색, 탐색, 삽입하는 것이 더 쉬워졌습니다 .

툴바 :

  • 새로운 툴바는 디자인 도구를 편집기 하단으로 옮김.
  • 이를 통해 캔버스에서 더 많은 작업 공간이 확보되고 새로운 작업 메뉴를 통해 완전히 새로운 AI 기능이 도입

피그마 UI3

https://help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI

1. Figma의 기본 인터페이스 개요

  • 캔버스(Canvas): 디자인 작업이 이루어지는 메인 화면으로, 아트보드(프레임)나 개별 요소들을 배치할 수 있는 공간이다.
  • 레이어 패널(Layers Panel): 캔버스에 배치된 모든 요소와 레이어를 계층 구조로 표시하는 패널로, 각 요소의 순서와 위치를 쉽게 파악할 수 있다. 레이어 순서에 따라 요소가 겹치므로 순서가 중요하다.
  • 속성 패널(Properties Panel): 선택한 요소의 속성(크기, 위치, 색상, 테두리 등)을 설정할 수 있는 영역으로, 디자인의 세부적인 스타일과 효과를 지정할 수 있다.
  • 툴바(Toolbar): 다양한 도구(이동, 프레임, 텍스트, 펜 툴 등)를 제공하여 디자인 작업에 필요한 기본적인 조작을 지원한다.

2. 주요 도구와 활용 방법

  • 프레임(Frame) 도구:
    • 프레임은 아트보드와 비슷한 역할을 하며, 다양한 화면 크기와 레이아웃을 설정할 수 있다.
    • 예시: 모바일, 태블릿, 데스크탑 화면을 각각의 프레임으로 구분하여 디자인을 진행한다.
    • 단축키: F
  • 모양 도구(Shape Tool):
    • 사각형, 원, 선 등의 기본 도형을 추가하는 도구로, UI 요소의 배경이나 버튼 등을 구성할 수 있다.
    • 도형의 크기와 색상을 변경하여 다양한 스타일의 디자인을 만들 수 있다.
    • 단축키: R(사각형), O(원)
  • 텍스트 도구(Text Tool):
    • 텍스트를 추가하고 편집하는 도구로, 다양한 폰트 스타일과 크기를 설정하여 텍스트 디자인을 구성할 수 있다.
    • 단축키: T
    • 예시: 헤더 텍스트와 본문 텍스트를 추가하여 페이지 구조를 구분하거나 버튼의 라벨을 지정한다.

3. 레이어 관리 및 그룹화

 

컨테이너 작업

  • 레이어의 순서 조정:
    • 레이어 패널에서 요소의 순서를 위아래로 이동하여 다른 레이어 위로 올리거나 아래로 내릴 수 있다.
    • 순서를 조정하여 배경과 텍스트, 버튼 등의 시각적 구조를 만들 수 있다.
  • 그룹화(Grouping):
    • 여러 레이어를 그룹으로 묶어 관리할 수 있다. 예를 들어, 버튼 배경과 텍스트를 하나의 그룹으로 묶어 이동이나 복제 시 함께 처리할 수 있다.
    • 단축키: Ctrl+G 또는 Cmd+G
  • 컨테이너로서의 레이어:
    • 특정 레이어를 컨테이너로 사용하여 하위 레이어를 포함하는 방식으로 관리한다. 레이어 패널의 화살표를 클릭해 하위 요소를 확장하거나 축소할 수 있다.

 

4. 속성 패널을 통한 스타일 지정

  • 색상과 그라디언트:
    • 색상 팔레트를 사용해 요소에 배경색을 지정하거나, 그라디언트를 적용해 스타일을 추가할 수 있다.
  • 테두리(Border):
    • 테두리의 두께, 색상, 스타일을 지정할 수 있으며, 이를 통해 버튼이나 카드 디자인에 강조 효과를 줄 수 있다.
  • 그림자와 블러 효과:
    • 그림자 효과(Drop Shadow)와 블러 효과(Blur)를 적용하여 입체감이나 시각적 깊이를 더할 수 있다. 예를 들어, 버튼에 그림자를 추가하여 눌려 보이는 효과를 줄 수 있다.

5. 피그마의 협업 기능

  • 실시간 협업:
    • 여러 사용자가 동시에 같은 파일에서 작업할 수 있으며, 각 사용자가 어디를 작업하고 있는지 실시간으로 확인할 수 있다.
  • 코멘트 기능:
    • 특정 요소에 대해 코멘트를 남겨 팀원들 간의 피드백을 주고받을 수 있으며, 디자이너와 개발자가 서로 의견을 공유하기 좋다.

 

새로운 툴바는 디자인 도구를 편집기 하단으로 옮깁니다. 이를 통해 캔버스에서 더 많은 작업 공간이 확보되고 새로운 작업 메뉴를 통해 완전히 새로운 AI 기능이 도입됩니다.

728x90
반응형