brunch

직관적인 디자인 환경 제공 피그마 UI3

Figma UI3의 속성 패널 알아보기

by 임표정

Figma는 UI3은 속성 레이블 활성화 기능을 통해 속성이 각각 무엇을 의미하는지 더 쉽게 파악할 수 있게 되었습니다.


1. 속성 레이블 활성화

속성 레이블을 보려면, 속성 패널 상단의 확대/축소 비율 옆 드롭다운 메뉴를 클릭해 ‘속성 레이블’을 선택하면 각 속성이 무엇을 조작하는지 텍스트 레이블이 나타납니다.


2. 선택 작업 기능

업데이트된 속성 패널의 상단에는 선택한 개체에 따라 실행 가능한 작업 버튼들이 표시됩니다.

마스크 적용

구성 요소 만들기

불리언 연산 수행

또한 ‘더 보기’ 메뉴를 통해 다양한 추가 작업도 확인할 수 있습니다.


3. 레이아웃 영역 개선

‘레이아웃’ 섹션에서는 너비, 높이 등 크기 및 정렬과 관련된 모든 속성을 확인할 수 있으며, 프레임에 오토 레이아웃을 적용하면 해당 섹션이 자동으로 ‘오토 레이아웃’으로 전환됩니다. 패딩, 방향, 간격 등 오토 레이아웃 옵션들이 표시됩니다.


4. 위치 제약 조건

‘위치’ 탭에서는 개체의 제약 조건(Constraints) 설정이 포함되어 있어, 다양한 화면 크기에 맞는 반응형 디자인 구성이 가능합니다.

작가의 이전글[공지] 영상 업로드 예정 안내드립니다.