📌 피그마

피그마는 기본적으로 백터 기반의 ui 디자인 툴이라는 점에서 훨씬 더 생산성,효율적 이다.

• 벡터: 점과 점을 연결해서 수학적인 원리로 그림을 표현(svg)
  • 확대를 하거나 축소를 해도 깨지는 부분이 없다.
• 비트맵: 특정 색상값을 갖는 점(픽셀의 배열로 이미지를 표현) (png, jpg)
  • 확대나 축소시 테두리에 화질이 저하된다.

📌 피그마 툴 학습하기(기초)

📌1.인터페이스

• 스페이스바: 캔버스 영역 움직이기
• 버전히스토리 : 특정시점으로 가고 싶으면
• 사이드바
  • page: 각 페이지는 고유의 캠버스를 가지고 있다.(페이지를 클릭하면 캔버스 변경) 진행 상태에 따라서 진행중, 완성본 페이지를 나눌수 있다.
  • 레이어: 캔버스에 오브젝트를 추가할 경우 각 오브젝트를 분리된 하나의 레이어로 취급

📌피그마 단축기

• 피그마 내에서 단축기 확인하려면 control + shift + ?

📌 2.기본 기능

📌프레임(frame), 섹션(Section)

📌프레임

• 프레임은 디자인을 시장하기 전 바탕이 되는 도화지( 단축키 F)
• 우측바에 있는 설정된 프리셋을 불러올 수 있다.
• 프레임을 만들고 그 안에서 디자인을 한다.
• 프레임으로 레이어 그룹핑 하는법 (ctrl +alt+ g , option +command+ g)

📌섹션

• 그룹핑을 할 수 있는 방법중 하나, 프레임이나 그룹보다 좀더 상위 개념(shift + s)
• 워크스페이스를 정돈하는 역할로 쓴다.

📌기본 도형, 텍스트(Text)

📌기본도형

• 쉬프트를 클릭시 비율에 맞춰서 만들 수 있다.

📌텍스트(단축기 t)

• 클릭해서 생성
• 클릭하고 드래그해서 원하는 영역을 잡아서 생성 가능
• 더블클릭해서 수정 가능
• 선택한 상태에서 t를 누르면 바로 수정 화면 진입 가능

📌코멘트(comment), 좌측 사이드바

📌코멘트( 단축키 c)

• 원하는 부분 클릭
• 특정 영역 클릭하고 드래그해서 영역에 맞춰서 코멘트 남길 수 있다.
• 특정 사용자를 멘션할수도 있음
• 답변 가능 내용안에서 멘션가능
• 키보드 / 로 팝업코멘트를 남길 수 있다.

📌좌측 사이드바

• 레이어: 마우스 커서를 올리면 자물쇠 모양, 눈 모양 활성화
  • 자물쇠는 잠금, 눈모양은 숨김 기능
  • 잠금을 하면 캔버스 상에서 클릭이 되지 않는다.

📌정렬(Align), 프레임 사이즈와 오리엔테이션(frame & orientation)

📌정렬

• 우측 사이드바에 가장 상단에 위치
• 2가지 이상의 레이어를 선택한 경우부터 정렬기능 활성화
• 프레임 안에 있는 레이어를 선택하고 정렬기능을 사용할 경우 프레임을 부모로 보고 부모를 기준으로 정렬된다.

📌프레임

• 프레임을 선택한경우 프레임에 있는 화살표 버튼을 누르게 되면 프리셋들이 모여 있다. 프레임 사이즈 변경 가능
• 세로형, 가로형 으로 오리엔테이션이 돌아가는 모습 확인 가능
• 프레임을 클릭하고 resize to fit 누르면
  • 프레임 안에 레이어가 있다고 했을때 내부에 있는 레이어의 크기만큼 프레임이 자동으로 리사이즈 되는 기능

📌포지션(position), 디멘션(dimenstion)

📌포지션

• 일반적으로 레이어를 선택하면 우측사이드바 상단에 x 값과 y값을 통해서 확인
• 프레임 안에 존재하는 레이어의 경우 프레임을 기준으로 표시해준다.

📌디멘션

• 포지션의 밑에 가로값과 높이값을 디멘션이라 부른다.
• 오른쪽의 링크를 클릭 후 가로 높이 값을 조정하면 비율에 맞게 조정됨
• 꼭지점을 대고 shift 를 누르면 회전할 수 있다
• 프레임을 클릭한 경우 clip comtent 라고하는 체크박스 활성화
  • 콘텐츠를 자를 것 이나 말것이냐 선택

📌레이어(layer), 텍스트(text)

📌레이어

• 우측에도 레이어 패널이 존재한다.
  • 투명도 조절, 블랜드 모드 설정

📌텍스트

• 텍스트 레이어를 클릭하면 우측사이드바에 텍스트 프로퍼티가 추가된 모습을 확인 할 수 있다.
• 폰트 종류 선택 가능
• 폰트 weight, 사이즈 설정 가능
• 문장의 행간 조절 가능
• 데브모드를 통해서 line-height 의 비율과 값까지 확인 가능
• 글자와 글자 사이의 간격 조절 가능(letter spacing)
• 더보기란 으로 데코레이션 가능

📌채우기(fill), 선(Stroke)

📌채우기

• 기본적으로 색을 칠할 수 있는 면의 성격을 가진 레이어라면, 우측에 보면 fill 레이어, Fill 프로퍼티가 활성화 된다.
• 우측 상단에 + 버튼을 눌러서 사용 가능
• gradient 적용 가능
• 이미지나, 동영상을 불러 올 수 있다.

📌선

• 우측에 stroke 패널
• +버튼 클릭해서 추가 가능
• 여러개의 레이어를 중첩 가능
• 선의 포지션을 결정하는 부분: inside, center, outside
• 상단에만 적용하거나 하단에만 하거나 하는 설정 가능

📌선택된 컬러,(selection colors,), 이펙트(Effects), 내보내기

📌선택된 컬러

• 우측 사이드바 패널에 selection colors
• 복수의 레이어를 클릭하면 레이어들의 사용된 모든 컬러값을 보여준다.
• 해당 컬러가 사용된 레이어들을 한번에 수정 가능

📌이펙트

• 플러스 버튼을 사용해서 여러개의 효과 적용가능
• layer blur 흐림 효과
• backgounrd blur 하단에 위치한 레이어에 블러 효과 적용(fill layer 를 100 보다 낮게 설정 해야 적용 가능)

📌export

• 다운로드 받고 싶은 레이어를 클릭 후 우측 export 플러스 버튼 클릭
• 한번에 다운로드 가능