Figma UI3 완벽 해부: 새롭게 달라진 주요 기능과 인터페이스 변화

안녕하세요 찐 망고입니다.

 

최근 Config 2024에서 재설계된 Figma UI3을 소개받았는데요.

새로운 UI3은 디자인 경험을 단순화하려고 노력한 흔적이 보입니다.

그리고 생각보다 많이 바뀌었어요.

 

해당 링크를 참고 삼아 포스팅해보려고 합니다.

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

 

 

내비게이션 패널:

• UI 최소화: 클릭 아이콘으로 탐색패널과 속성패널을 축소할 수 있음
• 파일 이름 및 위치:  파일이름 옆 드롭다운 아이콘을 통해 파일이동, 라이브러리, 브랜치생성, 버전기록등을 손쉽게 수행할 수 있음.
• Assets탭: 구성요소를 검색, 탐색, 삽입하는 과정이 더 쉬어짐

피그마 네비게이션 패널

 

피그마 Hide/Show UI

 

   - 이전 피그마 page에도 이모지가 가능했었나??

   -  Free가 눈에 띈다 곧 유료 버전이 나올 것 같은 이 기분  

   - 단축키 ctrl + /

 

 

툴바:

• 위치 변경: 툴바가 편집기 하단으로 이동하여 더 많은 작업 공간을 제공
• AI기능 포함: 새로운 작업 메뉴를 통해 완전히 새로운 AI기능이 도입
• 개발 모드 추가: 툴바에 개발모드가 추가

피그마 툴바 UI

피그마 툴바

 - Action툴이 새로 생김

 - Figma의 모든 AI도구, 일반적인 생산성 작업, 플러그인 및 위젯, 구성요소등을 액세스

 - https://designcompass.org/2024/07/04/figma-ai-pause/

피그마 AI 서비스 중단: 애플 앱 모방 논란

 

 

속성 패널:

• Property laybels: 각 속성의 기능을 쉽게 확인
• Selection actions: 마스크적용, 컴포넌트생성등의 작업 가능
• Layout: 모든 자동레이아웃 속성 사용
• Position: 캔버스에서 개체의 위치와 관련된 모든 속성에 접근

 

피그마 속성 레이블

 

 

기능들의 위치 변화

1. Ask to edit  

피그마 Ask to edit

파일에 대한 접근 권한이 있고 이를 편집할 경우, 툴바에서 편집요청을 클릭 후 편집권한 요청

 

2. Absolute Position

피그마 Absolute Position

절대위치가 이제 자동레이아웃 무시로 설정됨,

자동 레이아웃 구조를 따르지 않고 자동 레이아웃 프레임 내부에 객체를 수동으로 배치할 수 있음 🤩

 

3.  오브젝트 정렬

피그마 정렬

정렬을 사용하면 개체를 부모레이어에 정렬하거나 여러 개체를 서로 정렬할 수 있음.

 

4. Auto Layout

피그마 - 자동 레이아웃

 

프레임에 자동 레이아웃을 사용하면 콘텐츠 변경과 다양한 화면 크기에 따라 동적으로 조정됨

 

5. Auto Layout 너비와 높이 값

피그마 자동 레이아웃 너비,높이 값

자동 레이아웃 프레임에서 너비와 높이 값은 크기조정 동작과 결합됨

 

6. 블렌드모드

피그마 블렌드모드

혼합모드는 두 개의 레이어를 어떻게 혼합할 것인지 정의하는데, 메뉴바에서 아이콘모양으로 변경됨

 

7. Clip Content

피그마 clip content

클립 콘텐츠를 사용하면 부모 프레임의 경계를 넘어서는 레이어의 부분을 숨길 수 있음.

 

 

8. 컴포넌트 속성

피그마 컴포넌트 속성

 

컴포넌트속성은 컴포넌트의 변경가능한 부분을 보여주는 곳인데

다른 사람이 변경할 수 있는지 정의하려면 특정 속성에 연결하면 가능.

 

9. Constraints

피그마 - Constraints

Constraints는 부모 프레임의 크기를 조정할 때 레이어가 어떻게 동작해야 하는지 Figma에 알려줌

 

10. Corner radius

피그마 - 모서리 반경

Corner radius는 객체의 모서리를 둥글게 만들 수 있는 속성

Appearance속성으로 변경됨

 

 

11. 마스크

피그마 - 마스크

마스크를 사용하면 객체의 특정 영역을 표시하고 나머지는 숨길 수 있음

 

 

12. 다중 편집

피그마 - 다중편집 기능

다중 편집 기능을 사용하면  프레임, 그룹, 섹션에서 여러 레이어를 선택하여 동일한 편집 내용을 한꺼번에 적용

 

 

13. 플러그인 및 위젯

피그마 - 플러그인 및 위젯

 

 

14. 텍스트

피그마 - 타이포그래피

텍스트는 이젠 타이포그래피라고 불린다.

문단 간격이 유형설정으로 이동됨

 

 

 

 

전체적으로 UI가 많이 바뀌었습니다

화면 넓게 쓰라고 아예 show/hide기능도 생기고

이전 피그마 버전에서 불편하다고 생각했던 부분들이 대거 수정되었는데요.

특히 Auto Layout에 고정폭 수정 부분이나 수동정렬이 가능한 부분,

컴포넌트 부분을 베리언트 할 때 편집할 수 있는 속성패널 부분이 

작업하기 쉽게 바뀐 것 같아요.