☁️ [UXUI] 1118 FIGMA - 피그마 기초 2

✏️ 2024. 11월 18일 / 피그마 기초 2

🌍 Figma, Clip Content에 대하여
✖️
시작 전, 간단한 용어정리 하나만 해보겠습니다.
📁 컴포넌트 : 재사용이 가능한 디자인 단위 EX) 버튼, 검색창 등등
📁 프레임 : 디자인을 만드는 단위
이번에는 피그마 프레임 패널에 있는 Clip Content에 대해 설명하려 합니다.
Clip Content는 쉽게 설명해서 포토샵에 있는 클리핑 마스크와 비슷한 개념입니다.

우선 프레임 하나를 정해줍니다.

그 위로 프레임 속에 이미지라는 텍스트를 작성한 프레임을 쭉 나열해보았는데요.

보이시는 것처럼 현재 프레임은 적용되어 있지만, 마치 클리핑 마스크가 씌워진 것처럼
액자 안으로 쏙 들어가 있는 이러한 기능을 Clip Conten라고 부릅니다.
해당 기능을 잘 활용하면 슬라이드 효과 같은 느낌을 내기 좋답니다.
정확한 비교를 해보기 위해 Clip Content 체크 박스를 풀어보겠습니다.

이때 주의할 것은 프레임을 품고 있는 맨 처음에 있는 프레임을 부모, 그 안에 있는 프레임을 자식이라고 부르는데요.
옵션을 적용하거나 푸는 것은 이 액자틀을 이루고 있는 부모프레임에게 진행하여야 합니다.
📌-단축키 : Ctrl을 누른채로 바탕 프레임 선택

보이는 것처럼 옵션 적용을 해제 하는 순간 안으로 쏙 들어가 있던 프레임이 빠져나오는 것을 볼 수 있답니다.

🖋️ 모서리가 둥근 모양의 프레임?

해당 이미지와 같이 모서리를 둥글게 처리해주는 기능은
프레임을 선택한 후 오른쪽 패널에서 적용할 수 있는데요.

바로 이 기능이며, 모서리를 둥글게 적용시키고 싶을 경우, 세로보다 큰 숫자를 입력해주면 됩니다.
EX) 세로 100 / corner radius 100~이상

🎞️ Constraints에 대하여
✖️
Constraints란 내가 지정한 이곳을 중심으로 움직이겠다-라는 의미를 담고 있는 기능입니다.

프레임 하나를 지정해준 뒤 해당 아이콘을 눌러 원하는 방향으로 설정을 해줄건데요.

저는 이 프레임이 배경이 되는 부모 프레임이 늘어나더라도, 윗부분에 고정된 설정을 해보려 합니다.

우선 양측을 고정하고,

윗 부분을 고정한다, 라는 옵션값을 설정해준 뒤 부모프레임을 늘리고 줄여보겠습니다.


이렇게 줄이고 늘려도 프레임이 윗부분에 고정되어있으며, 양옆측으로만 고정된 자리에서 늘어나는 것을 볼 수 있어요.
해당 기능을 유용하게 사용하는 것이 굉장히 중요하답니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)