본문 바로가기

사전캠프(23.11.20~12.15)/UXUI 사전캠프 데일리 미션 - 4주차

4주차 숙제 : 피그마로 포트폴리오 템플릿 만드는 방법

주제 : 피그마로 포트폴리오 템플릿 만드는 방법


4-2 Plugin

포트폴리오를 만드는 이유는 시각 자료로 잘 정리해서 보여주는 목적이다.
피그마의 ppt - 커뮤니티 소스를 간단하게 수정하면 빠르게 자료를 만들 수 있다.
노가다 없이, 디자인 감각 없어도 예쁘고 빠르게 자료를 만들 수 있다. 무료이고, 아이콘, 인포그래픽 도형, 텍스트 스타일, 목업이미지 등을 만들 수 있다.

Tip! 피그마 커뮤니티에서 영어로 자료를 검색해 본다. ex) portfolio
+Mockup : 무료 이미지를 빠르게 가져와서 퀄리티를 높일 수 있다.
+Unsplash : 프로필 화면을 빠르게 수정할 수 있다.
+Wireframe Designer : 빠르게 와이어프레임을 가져와서 시각화 할 수 있다.


4-3 Icon 빠르게 교체하기

+Material symbols : Icon 빠르게 가져오기
+product planner : 포지셔닝 맵
+Charts : 차트를 빨리 
+Color palettes : 컬러 매치가 좋은 프러그인


4-4프레젠테이션 모드

프레젠테이션 모드 알아보기-플로우 설정, 옵션설정, 뒤로가는 방법
하는 목업이미지로 보여지게 하는법
프레젠테이션 모드는 재생버튼

Tip! Frame → PDF로 묶어서 내보내기 할때
File → export to frame 하면 하나로 묶인 PDF로 내보내기 가능, 피그마 원본 내보내기 하면 용 완전 큼, 이미지로 저장 후 → PDF로 묶는 것을 추천
(1) 출력 할 프레임을 복사 
(2) 새로운 페이지 생성 후 붙여넣기
(3) File - export to frame PDF


4-5 피그마로 협엽하는 방법


(1) 피그마 코멘트
상단에 멘트 아이콘 클릭, 또는 단축키 c (comment)/ @특정 사람을 태깅해서 코멘을 남길 수 있음/ 코멘이 완료되면 resolved를 누르고 \show resolved comments를 누르면 완료된 코멘도 볼 수있음
(2) share-링크공유(copy link) 에딧(can edit)권한 주기
- can view 읽기 전용
- can edit 수정권한도 포함
- Link to selection 선택한 프레임이 바로 보이도록 공유
(3) 작업링크&프로토타입 링크공유
프로토타입 모드에서 share prototype - copy link/ 이미지 다운 불가


4-6네이밍 정리 Tip!


(1) 피그마 자체 기능 - Rename(ctrl+r)눌러서 레이어 명칭 수정하기 기능 
$n-숫자 자리수
$nn-3자리 숫자가 증가(1→2→3)
$nnn-세 자리 숫자가 감소(3→2→1)
(2) 네이밍 정리 소소한 팁
컴포넌트를 잘 사용하는 레이어명 정리 방법: 레이어명에 ‘/’를 사용하면 폴더로 구분됨. ex)Icon/Favorite, Icon/Star
자주사용하는 요소들은 컴포넌트로 지정해두고 ‘/’로 구분하기
(3) 레이어 쉽게 열고 닫는 tip : 레이어창 선택, ctrl+세모버튼
(4) 그룹or프레임 안에 담겨있는 요소들 보고싶을때는: 레이어 클릭 후 엔터!
(5) 지저분한 레이어 한방에 정리하는 tip: 자체 기능 - Tidy up(피그마 자체 기능)
(6) 인터페이스가 죄다 사라졌어: show/ hide UI 기능 (ctrl+\)(ctrl+shft)


4-7단축키 모음

Tools Text Align Arrange
V 이동하기
C
코멘트 추가, 보기
Shift+P 펜 툴
R
연필 툴
O
원 그리기
L
선 그리기
F
프레임 생성
S
슬라이스 생성
I
스포이드 툴
T 오토레이아웃 만들기
Ctrl+Shift+V 스타일에 맞춰 붙여넣기
Ctrl+B 볼드
Ctrl+I 아탤릭
Ctrl+U 밑줄
Ctrl+Alt+L 왼쪽 정렬
Ctrl+Alt+R 오른쪽 정렬
Ctrl+Alt+T 중앙 정렬
Ctrl+Alt+J 양끝 맞추기
Shift+A 오토레이아웃 만들기
Alt+Shift+A 오토레이아웃 해제
Ctrl+] 앞으로 가져오기
Ctrl+[ 뒤로 보내기
Ctrl+Alt+] 맨 앞으로 가져오기
Ctrl+Alt+[ 맨 뒤로 보내기




 

Object Copy & Paste Essential
Ctrl+G 그룹
Ctrl+Shift+G 그룹 해제
Ctrl+Shift+H 숨기기/나타내기
Ctrl+Alt+Shift+L 전체 잠금 해제
Ctrl+Shift+L
잠금/잠금해제
Ctrl+E 병합
Ctrl+Shift+O 윤곽선으로 변경
Alt+Double click
이미지 자르기
Ctrl+C 복사
Ctrl+X 잘라내기
Ctrl+V 붙여넣기
Alt+Drag 선택 복사
Ctrl+Alt+C 속성 복사
Ctrl+Alt+V 속성 붙여넣기


Ctrl+K 링크 생성하기
Ctrl+Shift+X 선을 그어 지우기
Ctrl+ Shift+7,8 번호, 구분점 매기기