UXUI 부트캠프

피그마 기본 개념

eunhye316 2025. 8. 19. 23:45

 
드디어 피그마를 처음 실습해보는 날..! 이제야 제대로 시작하는 느낌이다. 처음엔 부트캠프 미션지에 나와있는 설명만으로는 따라하기 어렵다고 느껴졌다.. 막막그자체…
그래서 급 유튜브에 <피그마 기초 강의>를 찾아서 들었다. 강의를 따라하면서 미션지를 다시 보니 훨씬 이해가 잘 됐다..! (근데 앞으로 수업 방식이 이럴까봐 걱정되긴 했다.. 기초도 모르는데 자세한 설명 없이 이번 미션지처럼 과제가 주어지면 어쩌지ㅠㅠㅠ)오늘은 피그마 기본 개념임에도 불구하고 어려운 부분도 있었지만 그래도 다행인건 점점 피그마 매력에 빠져들고 있는 느낌이 들었다ㅎㅎ 아직 기초지만 뭔가 재밌었다ㅎㅎ(기초라 그런가?ㅋㅋ) 무튼 우당탕탕 나의 첫 피그마 기록 남기기😊
 


 

실습1.  피그마 계정 생성 및 새 프로젝트 시작

  • 피그마 홈페이지에 접속하여 회원 가입 및 로그인
  • "Create New File" 버튼을 클릭하여 새 디자인 파일 생성
  • 파일 이름을 "1단계_내 첫 피그마"로 변경

실습2.  인터페이스 탐색 및 기본 도구 연습

  • 좌측 레이어 패널: 페이지, 레이어, 파일명
  • 페이지: 하나의 페이지 안에 복수의 페이지가 존재
    레이어: 페이지와 프레임 위에 있는 텍스트, 도형, 사진 등의 요소

 
하단 인터페이스

  • move틀 : 오브젝트를 선택해서 이동 
  • 두번째 프레임: 여러 프레임을 만들 수 있음, Ctrl+C 또는 Ctrl+D 누르면 복제됨
  • 도형 기능: 화살표, 동그라미, 사각형, 별모양 등 다양한 모양을 만들 수 있음
  • 텍스트툴: 원하는 텍스트 입력

 


실습3.  기본 도형 제작 및 스타일 적용

  • 사각형 도구 생성 후 fill 색상을 E48080로 지정
  • stroke(테두리)효과
    → weight에 마우스를 갖다대면 테두리 두께를 마음대로 조정 가능
  • stroke 아래 네모를 눌러 테두리 색상을 변경
  • Effectds(그림자)
    → 가로값, 세로값을 마우스로 드래그 하여 조정 가능
  • Blur는 그림자 흐림정도 조정
  • Spread는 그림자의 퍼짐정도 조정
  • Color는 그림자의 색상 변경

  • 원 그리기 후 크기 및 위치 조정
    → W 가로길이, H 높이로 크기 변경 및 Move툴을 이용해 위치 조정

 
 

'UXUI 부트캠프' 카테고리의 다른 글

컴포넌트 & 오토레이아웃 실습  (3) 2025.08.27
프리코스-1  (1) 2025.08.22
디자인 기초 - 색상이론  (2) 2025.08.18
디자인 기초 - 디자인 원리  (1) 2025.08.13
캠프 시작 전 마음 준비물  (1) 2025.08.12