지금까지 디자이너의 툴은 어도비의 포토샵, 일러스트레이터가 대표적이었습니다. 하지만 오늘날 피그마가 웹 기반의 강력한 협업 능력과 바이브 코딩, 직관적인 UI로 필수적인 도구가 되었습니다. 해커톤과 프로젝트를 진행하며 기획자, 디자이너, 개발자 모두가 쉽게 소통하고 피그잼으로 스케치도 해보며 배워야 할 필요성을 느꼈습니다.지금 까지 파워포인트와 캔바를 이용해서 PPT와 카드뉴스, 포스터 등을 만들었지만, 피그마를 직접 사용해보며 카드뉴스 부터 웹사이트까지 기량을 발전시켜기 위해 정리해보았습니다.
해당 영상을 시청한 후 작성했습니다.
Madia Designer |🔥전 세계 기업들이 선택한 피그마 강좌 PS.이제는 마스터하셔야죠? (4K)
1. Select matching layers
피그마(Figma)의 Select matching layers 기능은 여러 프레임이나 그룹에 걸쳐 있는 동일한 이름의 레이어를 한 번에 선택해주는 기능입니다. 먼저, 특정 프레임 안에서 기준이 될 레이어 하나를 선택합니다. 이후 아이콘 혹은 Ctrl + Alt + A를 누르면 선택한 레이어와 이름이 일치하는 모든 오브젝트가 선택되어 색상 변경, 텍스트 내용 수정, 크기 조정 등의 작업을 편하게 할 수 있습니다.
2. Use as Mask
피그마에서 Use as Mask는 특정 도형이나 레이어를 활용해 그 위에 있는 다른 레이어의 가시 영역을 제한하는 기능입니다. 쉽게 말해, 마스크로 지정한 영역 안에만 이미지가 보이게 만드는 필터 같은 역할을 합니다. 이 때 오브젝트의 레이어 순서에 따라서 마스크와 이미지가 구분됩니다.
3. Boolean Operations
피그마에서 Boolean Operations 라고 불리는 이 네 가지 기능은 여러 벡터 도형을 조합하여 새로운 복합 도형(Compound Shape)을 만드는 도구입니다. 합친 후에도 나중에 개별 도형의 크기나 위치를 자유롭게 수정할 수 있다는 점이 큰 장점입니다.
- Union Selection : 도형들을 하나로 합치기
- Substract Selection : 맨 아리 있는 도형만 남기고 위에 있는 도형 빼기
- Intersection Selection : 도형 교집합
- Exclude Selection :홀수로 겹친 부분만 남기고 짝수로 겹친 부분은 빼기
- Flatten Selection : 하나의 레이어로 변경 (벡터로 변경)
4. Auto Layout
피그마의 오토 레이아웃(Auto Layout)은 디자인 요소들을 동적이고 유연하게 정렬해주는 가장 핵심적인 기능입니다. 요소의 내용(텍스트 등)이 길어지거나 개수가 늘어날 때, 그에 맞춰 프레임의 크기와 간격이 자동으로 조절됩니다. 이는 반응형 디자인의 핵심입니다. 모든 요소의 계층을 이해하고 세세하게 겹쳐서 Auto Layout을 적용해 주는 것이 중요합니다.
5. Hoizontal resizing
피그마의 Resizing(크기 조절) 설정 중 Horizontal resizing은 부모 프레임의 너비가 변할 때 내부 요소가 가로 방향으로 어떻게 반응할지를 결정하는 규칙입니다. 오토 레이아웃 프레임 안에서 텍스트, 요소의 마진 등에 핵심 요소입니다. 이를 가장 확인하기 쉬운 예시로는 채팅창이 있습니다.
- Fixed width (고정 너비)
부모 프레임의 크기나 내부 콘텐츠의 양에 상관없이 설정된 너비 값을 유지합니다. - Hug contents (콘텐츠에 맞춤)
프레임 내부 요소들의 크기와 패딩 값에 맞춰 프레임의 너비가 자동으로 조절됩니다. - Fill container (컨테이너 채우기)
부모 프레임이 허용하는 가로 영역을 끝까지 가득 채웁니다.
6. Layout grid
피그마의 레이아웃 그리드(Layout Grid)는 구성 요소들을 일관된 규칙에 따라 배치할 수 있도록 도와주는 시각적 가이드라인입니다. 디자인의 정렬, 간격, 비율을 수학적으로 관리할 수 있게 해주어 특히 반응형 웹이나 앱 디자인에서 필수적인 도구입니다.
- Grid (격자): 모눈종이 같은 격자를 만듭니다. 아이콘 디자인이나 세밀한 요소 배치를 할 때 유용합니다.
- Columns (열): 수직 가이드를 만듭니다. 주로 웹 사이트 레이아웃(예: 12 컬럼 그리드)을 잡을 때 사용합니다.
- Rows (행): 수평 가이드를 만듭니다. 타이포그래피의 베이스라인이나 수직 리듬을 맞출 때 사용합니다.
7. Style
피그마의 스타일(Style)은 색상, 텍스트, 효과 등의 속성을 미리 정의해두고 재사용하는 기능입니다. 디자인의 일관성을 유지하고, 한 곳에서 수정하면 적용된 모든 곳에 자동 반영되는 '디자인 시스템'의 핵심 도구입니다. 미리 프로젝트에서 사용될 색상과 이펙트, 텍스트 스타일을 세팅해 둔 뒤, 변경사항에 따라 선택만 하면 모든 요소들이 한번에 변경되는 편리함을 제공합니다.
8. Component
피그마의 컴포넌트(Component)는 디자인 시스템의 가장 중요한 단위로, 여러 번 반복해서 사용되는 디자인 요소(버튼, 아이콘, 내비게이션 바 등)를 하나의 원본으로 관리하는 기능입니다.
컴포넌트를 만들면 두 가지 관계로 나뉩니다.
- 메인 컴포넌트(Main Component): 원본입니다. 다이아몬드 4개가 합쳐진 아이콘($\diamondsuit$)으로 표시됩니다. 원본을 수정하면 모든 복제본에 변경 사항이 즉시 반영됩니다.
- 인스턴스(Instance): 원본의 복제본입니다. 속이 빈 다이아몬드 아이콘($\lozenge$)으로 표시됩니다. 인스턴스는 원본의 속성을 물려받지만, 필요에 따라 특정 속성만 따로 바꿀 수 있습니다.
아이콘, 버튼 등을 미리 지정해두면, GNB, 마우스 오버 등을 편하게 설명할 수 있도록 구성할 수 있으며 작업의 효율성이 올라갑니다.
'배움 일기 > Design' 카테고리의 다른 글
| Vibe Coding에 이은 Vibe Design으로의 확장 (0) | 2026.04.26 |
|---|---|
| AI 업계의 그라데이션 로고 디자인 유행 (0) | 2026.03.02 |
| 바우하우스 부터 디터 람스와 조너선 아이브까지 Less, but better (0) | 2026.03.01 |