39 기능심화

피그마 기능심화

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>

긴 문장 편집하기

긴 문장은 예제에 첨부된 텍스트 파일을 활용합니다.
먼저 텍스트 도구를 사용하여 영역을 드래그합니다.
파일을 열고 복사·붙여넣기 합니다.
레이어를 선택 후 속성을 설정합니다.

리사이징을 번호순으로 눌러봅니다.

요약

자동너비를 설정하면 텍스트 기준으로 폭이 변경되기 때문에 문단의 정렬을 고정하기 어렵습니다. 장문을 편집할 때는 공간맞춤이나 자동높이를 사용하는 것이 편리합니다.

</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>

1
시스템 24%
2
사진 18%
3
음악 22%
4
동영상 13%
5
연락처 8%
6
문서 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>