기획/피그마 스터디

# [피그마] 피그마 기본 연습 #02

ForrestPark 2024. 12. 16. 18:29

📌 본 포스팅은 온라인 피그마 기본 실습에 대한 내용을 다룹니다.
📌 [참고도서] 실전 피그마

1. UI 디자인 기본요소 프레임.

  • frame( 아트보드) , 오토 레이아웃, 컴포넌트 는 프레임 기반으로 동작함.
  • 프레임 중첩 (프레임안에 프레임)가능
  • 클립 콘텐츠(가시적 영역 조절가능) 내부 컨텐츠 숨김처리 가능.
  • 제약조건(Constraints)
    • 프레임 내부 요소에 제약 설정시 프레임 크기 변경시 내부 요소 크기도 함께 조절 가능.
  • 프로토타입의 가장 기본 단위는 프레임.
  • 기초 모바일 레이아웃 구성
  • design file 클릭, 프레임 생성 -> 클릭, 오른쪽 사이드바 디자인 에서 iphon 14
  • cmd+ R 누르면 프레임 이름 변경이 바로됨.
  • frame 안에 frame 들을 집어 넣고 constraint 를 조작 해준뒤 바깥 프레임 크기를 움직이면 내부 프레임까지 같이
    크기가 변경됨을 알 수있다.

2. 기본 도형 만들기

  1. 도형 만들기
    • 'R' : 직사각형
      • shift + 드래그 : 1:1 비율 유지하며 생성.
      • alt + 드래그 : 가우데를 중심으로 변경
      • 드래그중 space bar : 도형을 그리며 이동 .
      • cmd 방향키 : 크기 조절
      • transform 패널 width, height 로 크기 변경
      • shift 길게 누르면 15도 단위 회전
    • 'L' : 라인
      • shift L : 화살표
    • 'o' : 원
      • arc, ratio 설정.
    • polygon, star => radius 조정 하여 새로운 도형 많이 만들수 있음.
  2. 오브젝트 정렬
    • opt (a,h, d, w, v, s): 좌,가운데, 우, 위,수직 가운데, 아래 정렬 => v,h 자주 사용 .
    • 프레임안에서는 단일 오브젝트도 정렬이 먹는다.
    • 여러물체 선택하면 오른쪽 밑에 분배 아이콘 생김.
  3. 원형 그래프 만들기
    • 오브젝트 선택후 opt 누르면 오브젝트 사이 간격 확인 가능
    • 'o' -> opt h(간격맞춤) -> shift x(면,선 전환) -> stroke 패널에서 선 설정 center -> 선두께 12
    • layout pass through -> 20% 설정. 그냥 오브젝트 선택후 0 누르면 100%, 00 0%, 25 숫자누르면 설정됨.
  4. 색상
    • 2775EA
    • 4737FF
  5. 피그마로 만든 결과 물