카테고리 없음

피그마로 상세페이지 만들 때 자주 쓰이는 기능

manddymore 2024. 6. 21. 13:51

 

 

🔖상세페이지 제작할 때

 

1. 우선 구역마다 각기 다른 프레임으로 만든 다음

2. 작업이 끝난 후 Frame selection 해서 이미지 다운로드 

 

 

 


 

 

 

✔ 프레임에 색을 입히는 것! (도형에 색 입혀서 추가가 아닌)

 

 

 


 

 

✔ 텍스트가 도형 뒤에 있을 땐 [ CTRL + ] ] 활용해서 앞으로 보내기

→ 자동 정렬로 깔끔하게 해주기

 

 


 

 

✔ 폰트는 최소 17 이상 (가독성+정보성)

✔ 행간 보통 150 이상부터 시작

 

 


 

 

 

✔ 각자 같은 간격 주고 싶을 때

 

 


 

 

 

✔  손글씨같은 별표

1. 펜툴 활용

2. 라운드 처리

 

 


 

 

 

✔   안에 있는 요소는 그대로 두고 프레임 크기만 변형 시키고 싶을 때

- CTRL 누르고 변형

 


 

 

✔ 디자인 팁

-> 아예 하얀색, 검은색 X

 

 


 

 

 

✔  도형 합쳐주고 싶으면 UNION SELECTEION

 

 

 


 

 

 

✔ 폰트박스 만들 때

  1. 한개 만들고 CTRL + A (오토레이아웃)
  2. ART 부르고 복붙해서
  3. 텍스트 입력하기
  • 프레임 밖에서 만들어준 후에 프레임 안으로 넣어주기

 

 

 


 

 

 

 

✔ 박스 1 대신에 체크박스를 넣고 싶으면?

  1. 체크박스 CTRL+C
  2. 박스1 클릭한 다음 PASTE TO REPLACE

 

 

 


 

 

 

✔ 이모지 팩

→ 저작권 조심해서 쓰기 (웬만하면 안쓰는게 좋다..?)

 

 

 


 

 

 

✔ 펜툴 활용

 

 

 


 

 

 

 

✔ 그래프 만드는 법

 

1. 사각형은 그냥 이어붙이기

 

2. 원 그래프

-> 원 만들어서 요소 쪼개주기

 

 

 


 

 

✔. 점선 만드는 법

1. 펜툴로 그어준 후

2. 대쉬 설