기능심화
카드UI, 텍스트 다루기, 도넛차트, 갤러리, 아이콘 만들기 등 피그마의 심화 기능을 예제를 통해 알아봅니다
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
피그마 기능심화
1. 카드UI 만들기
<li>
프레임을 두 개 그립니다. 하단 프레임은 Alt + 드래그 드랍으로 복제 후 크기를 줄입니다.
</li>
<li>
두 개의 프레임을 한번 더 프레임 그룹으로 묶습니다.
</li>
<li>
프레임의 이름을 그림처럼 변경합니다.
</li>
<li>
표시된 순서대로 체크하여 모서리를 둥글게 만듭니다.
</li>
1-1. 프레임 VS 그룹
같은 작업을 그룹으로 해봅니다. 사각형을 그려서 그룹을 만듭니다.
- 프레임(Frame): 개별적인 컨테이너로 사용되며, 단일 아이템 또는 여러 개의 아이템을 포함할 수 있습니다.
- 그룹(Group): 하나 이상의 객체를 묶어서 관리하며, 그룹을 구성하는 모든 객체는 그룹의 위치와 크기를 기반으로 이동 및 조작됩니다.
1-2. 이펙트 적용
<li>
카드 프레임을 선택합니다.
</li>
<li>
이펙트를 추가합니다.
</li>
<li>
Fill 속성을 변경합니다.
</li>
<li>
텍스트를 추가합니다.
</li>
<li>
여백 조정하기 - Alt 키를 누른 상태에서 호버하여 텍스트 상자의 좌우 여백을 확인합니다.
</li>
<li>
그 후 속성 패널을 이용하여 여백 균형을 맞춥니다.
</li>
<li>
카드를 세 개 정도 만듭니다.
</li>
1-3. 프레임 속성 다루기
<li>
휴대폰 크기의 프레임을 생성합니다.
</li>
<li>
만든 카드UI 중 두 개를 생성한 프레임에 추가합니다.
</li>
<li>
카드UI의 수평 간격은 표시된 세 가지 방법을 사용하여 조절할 수 있습니다.
</li>
<li>
Clip Content 옵션을 사용해봅시다.
</li>
<li>
우측 잘린 프레임의 불투명도를 낮춥니다.
</li>
텍스트와 프레임을 추가하여 예제와 같이 완성해보세요.
2. 텍스트 다루기
2-1. 탑메뉴 만들기
<li>
아이폰 8 사이즈 프레임을 생성합니다.
</li>
<li>
탑메뉴를 그려줍니다. 프레임을 그린 후 배경색을 넣습니다. 텍스트와 프레임 간의 수평·수직 중앙 정렬을 맞춥니다.
</li>
<li>
정사각형을 그린 후 45도 회전합니다. 면색은 없애고 선색만 넣습니다. 선택 도구로 더블클릭하여 도형에 빗금이 생길 때까지 선택합니다. 표시된 점을 클릭 후 Delete 키를 눌러 삭제합니다.
</li>
<li>
그 후 프레임 안에서 위치를 조정하여 아이콘을 완성합니다. 프레임의 배경색은 빼줍니다.
</li>
2-2. 이미지 박스 만들기
<li>
100% 프레임을 만든 후 속성에서 너비를 -32px 줍니다.
</li>
<li>
그 후 가운데 정렬합니다.
</li>
<li>
이미지를 삽입합니다. 듀오톤(Duotone)으로 넣어봅시다. 이미지를 선택 후 추가합니다.
</li>
<li>
Fill 속성을 추가하는데 그라디언트(Gradient)를 선택합니다. 그라디언트의 색상을 선택 후 블랜드 모드(Blend Mode)를 적절히 수정합니다.
</li>
2-3. 텍스트 박스 만들기
<li>
레이어 누적 순서와 이름을 정리합니다.
</li>
<li>
기존의 텍스트를 복사하여 붙여 넣으면 텍스트뿐 아니라 여백까지 붙여넣기 되는 것을 알 수 있습니다.
</li>
<li>
긴 문장 편집하기
- 긴 문장은 예제에 첨부된 텍스트 파일을 활용합니다.
- 먼저 텍스트 도구를 사용하여 영역을 드래그합니다.
- 파일을 열고 복사·붙여넣기 합니다.
- 레이어를 선택 후 속성을 설정합니다.
- 리사이징을 번호순으로 눌러봅니다.
Tip: 자동너비를 설정하면 텍스트 기준으로 폭이 변경되기 때문에 문단의 정렬을 고정하기 어렵습니다. 장문을 편집할 때는 공간맞춤이나 자동높이를 사용하는 것이 편리합니다.
</li>
<li>
다시 레이어를 삭제합니다. 텍스트 도구를 선택 후 영역을 드래그합니다. 텍스트를 복사하여 붙여넣은 후 폰트 속성을 수정합니다.
</li>
<li>
프레임의 높이를 늘이고 autoHeight를 사용해봅시다.
</li>
<li>
프레임의 높이를 줄이고 말줄임 표시를 해봅시다.
</li>
<li>
특정 텍스트에 링크를 만들어봅시다.
</li>
<li>
링크된 텍스트의 Fill 속성을 수정해봅시다.
</li>
<li>
링크된 텍스트의 밑줄 속성 없애기 및 문단의 정렬을 여러 가지로 수정해봅시다.
</li>
2-4. 스크롤 만들기
<li>
중첩 레이어는 Ctrl + 클릭을 하면 쉽게 선택할 수 있습니다. 장문의 텍스트 레이어를 선택 후 리사이징 옵션을 autoHeight 속성으로 변경합니다.
</li>
<li>
프레임의 길이를 조정합니다.
</li>
<li>
스크롤을 만듭니다.
</li>
<li>
상단 메뉴 고정하기 - 레이어 선택 후 그림과 같은 순서대로 선택합니다.
</li>
<li>
탑바 레이어를 수정합니다. 배경색을 넣고 회색으로 상태바를 만듭니다.
</li>
2-5. 슬라이드 만들기
<li>
카드UI 프레임으로 이동 후 Clip Content 체크를 해제합니다.
</li>
<li>
4개의 카드를 프레임으로 묶고 프레임 이름을 swiper로 변경합니다.
</li>
<li>
정렬 등을 맞추고 프로토타입 패널로 이동합니다.
</li>
<li>
swiper 패널을 선택 후 옵션을 설정합니다.
</li>
<li>
미리보기를 하면 원하는 인터렉션이 구현되지 않습니다. swiper 프레임은 카드UI 프레임의 하위 요소이기 때문에 더 큰 크기를 가질 수 없습니다.
</li>
<li>
swiper의 너비를 조정합니다.
</li>
<li>
이제 프레젠테이션을 해보면 잘 동작합니다.
</li>
2-6. 피그마 미러 사용해보기
프로토타입을 구현한 프레임을 선택 후 피그마 미러 페이지로 이동합니다. 구글에 로그인 되어있는 계정과 피그마 데스크톱 앱 계정이 동일하다면 해당 링크에서 선택 프레임의 시뮬레이션이 가능합니다.
3. 도넛 차트 만들기
<li>
프레임을 생성하고 원을 그립니다.
</li>
<li>
속성을 설정합니다. 0도는 3시 방향부터 시작하므로 -90도에서 시작합니다.
</li>
<li>
왼쪽 차트를 추가합니다. 반전 시에는 우클릭하여 반전 메뉴를 이용해봅시다.
</li>
<li>
크기를 조정합니다. Alt + Shift를 누르고 드래그하여 크게 한 후 ratio를 조정합니다.
</li>
<li>
각 차트별 각도는 눈대중으로 조절합니다. 글씨는 1개를 프레임 그룹으로 생성 후 Ctrl + D를 사용해서 6개 모두 만듭니다.
</li>
시스템 24%
사진 18%
음악 22%
동영상 13%
연락처 8%
문서 15%
4. 갤러리 만들기
4-1. Place Image 사용
<li>
프레임 선택 후 그림의 순서대로 클릭합니다.
</li>
<li>
이미지 선택 후 드래그하여 이미지를 적용합니다.
</li>
<li>
이미지를 복사하여 우측 프레임의 배경에도 붙여넣습니다. 이미지의 위치 정보까지 복사되어 그대로 붙여넣기 됩니다.
</li>
4-2. 글래스모피즘
<li>
사각형을 그리고 밝은 배경색을 넣습니다.
</li>
<li>
효과를 적용합니다.
</li>
<li>
완성
</li>
4-3. Fill로 채우기
<li>
순서대로 클릭합니다.
</li>
<li>
이미지를 선택합니다.
</li>
4-4. 툴 사용
<li>
메뉴에서 선택합니다.
</li>
<li>
사진 여러 개를 선택 후 열기를 클릭합니다.
</li>
<li>
적용할 레이어를 클릭합니다.
</li>
4-5. 플러그인 사용
<li>
Unsplash(언스플래시)를 검색합니다.
</li>
<li>
대상 프레임을 선택하고 적용할 이미지를 클릭합니다.
</li>
<li>
Lorem(로렘) 플러그인
</li>
<li>
더미 텍스트 적용할 레이어를 선택합니다.
</li>
<li>
플러그인을 선택합니다.
</li>
<li>
환경 설정
</li>
<li>
옵션: 문자, 단어, 문장, 문단의 개수를 설정합니다.
</li>
<li>
완성
</li>
5. 아이콘 만들기
5-1. Boolean Operation 활용
프레임 안의 도형을 선택하여 불리언(Boolean) 연산을 사용해봅시다.
5-2. 불리언 연산을 활용하여 런처 아이콘 만들기
5-2-1. 레이아웃 그리드
<li>
192x192 프레임을 생성하고 이름을 AppIcon으로 변경합니다.
</li>
<li>
우측 패널의 그리드를 설정합니다.
</li>
<li>
완성
</li>
5-2-2. 그리기
<li>
가로 104 / 2 = 52, 세로 156 / 3 = 52 사각형을 그립니다.
</li>
<li>
좌측 사각형을 이등분 후 복사합니다.
</li>
<li>
모서리를 둥글게 합니다.
</li>
<li>
두 개의 레이어를 병합합니다.
</li>
<li>
병합된 레이어를 선택 후 복사합니다.
</li>
<li>
복사한 레이어를 선택 후 좌우 반전합니다.
</li>
<li>
좌우 레이어를 아래로 복사 이동합니다. (Alt + Shift + 드래그)
</li>
<li>
우측을 편집합니다. 그룹 해제 → 좌측 레이어 삭제 → 우측 레이어 복사 후 좌우 반전 → Union
</li>
<li>
세 번째 레이어를 복사 이동합니다.
</li>
<li>
8단계를 반복합니다.
</li>
<li>
우측 반원의 모서리 둥글기를 조절합니다. 2시 방향의 조절점을 바깥쪽으로 드래그하거나 우측 패널의 속성을 사용합니다.
</li>
<li>
완성
</li>
5-2-3. 색상 넣기
<li>
레이아웃 그리드 표시를 해제합니다.
</li>
<li>
레이어 선택 후 우측 패널에서 접두사 logo의 스타일 컬러를 적용합니다.
</li>
5-2-4. 베리에이션 하기
글씨 추가하기
<li>
웹용 로고를 추가해봅시다. 우측에 타이틀을 작성합니다.
</li>
<li>
Figma
</li>
<li>
폰트는 시스템에 설치되어 있지 않을 경우 정상 출력되지 않으므로 도형으로 변형하는 것이 일반적입니다.
</li>
<li>
오른쪽 클릭하여 해당 메뉴를 실행합니다.
</li>
BI의 색상 반전하기
BI 속성을 스트로크(Stroke)만 남겨놓겠습니다.
<li>
</li>
<li>
</li>
<li>
선의 두께만큼 아이콘의 크기가 커집니다.
</li>
<li>
도형의 크기를 줄이면 선의 두께는 유지된 상태로 면적이 줄면서 선이 두꺼워 보입니다.
</li>
<li>
선을 면으로 변경합니다.
</li>
<li>
그 후 우측 속성 패널에서 아이콘의 크기를 입력합니다.
</li>