피그마 컴포넌트 완전 정복(파일 다운로드_downloadable PDF file_피그마 고급 응용 기술 배워보기)

해외 사이트에서나 국내 정부사이트에서 한 번쯤은 보고서를 다운로드를 해본 경험이 있을 것이다. 웹/모바일 상에서 어떤 정책 문서가 작성된 파일을 다운로드해 본 경험이 있을 것이다. 웹/모바일 상에서 pdf 파일을 자유롭게 다운로드해 보는 컴포넌트 셋을 만들어보자. 

 

▼완성본 동영상으로 확인▼

파일_다운로드_컴포넌트_만들어보기

pdf 파일 다운로드 컴포넌트 순서대로 만드는 방법 

기초 강의를 뛰어넘어 핵심적으로 주요 내용만 적어보겠습니다. 혹시나 내용이 어렵거나 궁금하신 사항이 있으시면 아래 글을 읽어주시거나 댓글을 남겨 놓으시면 답변을 드리도록 하겠습니다.

 

<피그마 체 그 박스 만드는 방법>

피그마 체크박스(checkbox) 컴포넌트 쉽게 만드는 방법(feat.PPT와 무엇이 다를까?) 현직 기획자가 만

 

<ppt와 다른 피그마의 기능은 무엇이 있을까?>

[피그마 기초 2강, 도형부문]피그마와 PPT 기능 비교, 피그마의 파워풀한 우측 패널 기능 익히기

 

 

1. 텍스트 및 아이콘 컴포넌트 만들기
제가 요즘 기후변화에 관심이 많아서 기후변화 관련 보고서를 많이 읽다 보니 다운로드 파일이름을 기후변화 파일이라고 임의로 정했어요!
(맨 마지막에 영상을 첨부해 봅니다.)

• 내용 텍스트 만들기 : 2023년 기후변화 정책보고. pdf [단축기(T)] → 글씨 굵기 : bold
• 제목 텍스트 만들기 : 기후변화 포럼 → 글씨 크기 16 → 글씨 굵기 : semi bold
• 아이콘 만들기(주의★) : 프레임(F) 클릭 → 높이 x너비 : 30x30 → 컴포넌트 변환 → option + 메인 컴포넌트 클릭 후 드레그(그림 2번)
• Auto Layout 설정 : 내용 텍스트+제목 텍스트 클릭 shift+a → Enter → fill container(엔터를 쳐야 fill container 나옴)

 

2. 다운로드 영역 오토레이아웃 기능으로 묶기

• Auto Layout 설정 : 지금까지 만든 3개의 내용과 파일 제목을 모두 오토레이아웃 설정 → 왼쪽 layers 내용 클릭 → fill container
• radius/Horizontal/vartical padding : 16/20/16 설정
• 그림 배경 색 채움 : fffff

 

3. 버튼 컨테이너 만들기

• 버튼 컨테이너 : 프레임(F) → 높이 83/너비 34 → 자르기 [alrt(command)+x] → 내용 및 아이콘 레이아웃 클릭 붙여 넣기 → absolute position → 오로레이아웃 안에 넣고 중앙 정렬 → 우측 정렬(그림 1)
• 부제 입력 : 기후변화 포럼 option으로 복사 → 텍스트 변경(다운로드) → letter spacing : 6%
• 다운로드 오토레이아웃 설정 : 배경색(검은색) → radius(50) → 글자색(흰색)
• 다운로드 아이콘 만들기 : 단축기 p를 통한 그림 그리기... 예쁘게 그리시면 됩니다.(색상은 흰색)
• 다운로드 안에 붙여 넣기 : 만든 아이콘을 컨트롤+c → 컨트롤+v(그림 8)
• 컴포넌트 변환하기 

 

4. 다운로드 컴포넌트 만들기

• 다운로드 컴포넌트 : option키를 통해 인스터트 컴포넌트 만들기
• 인스턴트 컴포넌트 붙여 넣기 : 버튼 인스턴트 컴포넌트 클릭 → 컨트롤 c, v 붙여 넣기
• 회색 배경 : 흰색으로 변경(투명도 80% 유지되게 변경) → 배경 gradient → Linear(그림 2번까지)
• Linear 사용 수평 맞추기 → 그림 4번 → 엔터(*주의 : 감도 확인 필요)

 

5. pdf 파일 만들기(고급 응용_어려움 주의)

• pdf 파일 모형 만들기 : 파일 다운로드 메인 컴포넌트 → *네모(17x24) → 배경색 제거 → stroke (검은색, 두께 2)
• (주의)*위 네모를 더블 클릭하면 선이 나타나고 중간 선을 앞에서부터 6칸 뒤에 위치시켜 놓고 아래도 마찬가지 → 백스페이로 지우고 command + J 키를 통해 두 점을 이어 줍니다. (ppt에서 점 편집이라고 생각하시면 됩니다.)
• 왼쪽 그림처럼 만들었다면 펜툴을 사용하여 그림 2번처럼 새로운 선을 그리고 너비는 8x8로 바꿉니다. 
• 그러면 2px정도  옆으로/아래로 더 내려서 크기를 맞춰줍니다.
• radius(3)을 주어서  pdf 파일처럼 보이게 변환합니다.(*점 클릭 시 해당 radius 생성)
• 나머지 사각형 radius(2)를 통해 전체적으로 둥글게 만듭니다.(그림 4)
• pdf 텍스트 : 파일 다운로드 클릭 후 텍스트 만들기(T: pdf 글씨 적고 오토레이아웃 설정) → Horizontal/vartical padding(3/6) → 글씨 크기(6) → 색배경 빨강(자유) → 글씨색(흰색 : fffff) → 오토레이아웃 radius(3) 설정 → pdf 이미지 그룹설정 → 컴포넌트 배경 빼고 중앙정렬

 

 

 

6.  컴포넌트 변환

• 컴포넌트 변환 : 내용 및 아이콘 컴포넌트 변환 → variant 추가
• 메인 컴포넌트 property 이름 변경(다운로드 파일) → default 이름 변경(state) _ 그림 1번까지
• 그림 2번 : 다운로드 컴포넌트 클릭 우측 패널 Layer pass through 100%에서 0%로 변경
• variant2 이름 변경 → hovering
• 두 개 컴포넌트 드래그 배경 색 흰색(fffff)으로 변경
• 버튼 컴포넌트 : 색상 변경(2 E2 CB1)
• variant 2개 생성 → 버튼 자산 클릭 후 properties 이름 변경(state)
• property 상태값 변경 : 첫 번째 variant(default), 두 번째 variant(hovering) → 세 번째 variant(selected) : 3가지 자산의 배경 색은 전부 다르게 설정 아래 프로토타입 예시 참조

 

7. 프로토타입 연결하기

• 첫 번째 다운로드 컴포넌트 → 두 번째 다운로드 컴포넌트 : while hovering
• 두 번째 다운로드 컴포넌트 → 세 번째 다운로드 컴포넌트 : on click
• 세 번째 다운로드 컴포넌트 → 첫 번째 다운로드 컴포넌트 : on click
• 첫 번째 내용 및 아이콘 컴포넌트 → 두 번째 내용 및 아이콘 컴포넌트 : while hovering

 

8. 완성본 확인하기

완성본

자세한 내용은 동영상을 확인해 주시면 감사하겠습니다.

 

추가적으로 궁금한 사항은 댓글에 남겨주시고 더 많은 정보는 제 블로그를 확인해 주세요~!

 

▼토글 버튼 만드는 방법▼

피그마 토글 버튼/스위치 만드는 방법(토글 스위치/토글 옵션/toggle button

▼북마크 컴포넌트 만드는 방법▼

피그마 즐겨찾기(북마크) 컴포넌트 만드는 방법(UI/UX 컴포넌트 쉽게 만들기)