1. 피그마 요소의 하이어라키

걍 이런게 있구나 하고 보셈

좀 봐야하는 특징은, 캔버스임

• 실제로 작업하는 요소들의 하이어라키
• 캔버스 안에서 프레임 디자인 가능
  

이게 프레임임

안에 뭐 넣으면 자동으로 자식 레이어가 생김ㅇㅇ

프레임안에 여러가지 요소가 들어 갈 수 있는데,얘네를

엘리먼트

라고부름

이렇게 같은 성격의 프레임끼리 묶을 수 있는데, 이거를

섹션

이라고 부름
섹션끼리 묶을수도있음

결론은 이거임

피그마 요소의 하이어라키 :

파일 > 페이지 > 캔버스 > 섹션 > 프레임 > 엘리먼트

2. 툴바

피그마는 스케치북에 스케치하고 색깔 입히듯이

가장먼저 툴바에서

도구를 선택하여(툴바) 그리고(캔버스),

속성을 정해야한다.(디자인패널)

• Move : 엘리먼트 움직이기
• Hand tool : 화면 이동
• Scale : 크기설정 (같이 있는 텍스트는안됌)

• Frame : 엘리먼츠 묶는거 ( 앱 배경등등..)
• Section : Frame을 묶어줌
• Slice : 자른부분만 이미지로 배포하겠다
  

이런식으로

이거는 걍 생략함

• Pen
  이거는 좀 중요한데

figma 기초(1) 펜 툴 사용하기

이거보면 이해될거임

• Pencil
  

• Text
  텍스트 생성해서 붙여넣거나 색깔등을 디자인 패널에서 설정할 수 있음
  특정 폰트를 원한다면 TTF나 OTF파일을 다운받아서 적용시켜야함

그외 참고

figma 기초(3) Text 사용하기

• Comment : 말풍선으로 댓글달듯이 시비털수 있음

• Annotation :
  Figma의 Annotations 기능은 Java의 Annotation, Nest.js의 Decorator와 유사합니다.

  출처 : Figma Dev Mode

• Measurement : 개체 간 거리 측정 줄자역할임
  

저렇게 선택된 상태에서 원하는 부분잡고 드래그하면 거리나옴

레이어 간 거리 측정

• Resource Model
  유용한 플러그인이나, 위젯을 사용 할 수 있게하거나 디자인에서 반복적으로 사용하는 요소들 컴포넌트화 하여 끌어다쓰는거

자세한 사용법은 모르겟음

개발자 모드임 지금 당장 볼건아닌듯

2.2 추가

UI3로 넘어오면서 툴바 상단 가운데에있던 Contextual Tool Bar 위치가 좀 바뀜

원래 이런게 있었음

쨋든 얘네는 상황에 따라 바뀌는데,

어떤 요소를 선택했을때 여러가지 추가작업을 어케할건지를 고르는거임

일단 이렇게 이미지 엘리먼트를 고르면

디자인 패널에서 이것저것 볼 수 있는데 고른 엘리먼트에 따라 다름

오브젝트 엘립스를 선택했을때,

조금씩 달라는걸 볼 수있음

컴포넌트를 골랐을 때,

다 다름

기능각각 다루기는 다른글이 더 잘나옴

FIGMA 인터페이스

[UI UX figma] 인터페이스 (2) - 추가적인 툴바

대충 보면 반복되는거는

이정도됨 각각 기능을 알아서 찾아보셈

중요한것은

선택한 엘리먼트에 따라 바꿀 수 있는게 다르다

를 기억하는게 중요할듯

레이어 패널

엘리먼트와 프레임, 섹션관리하는곳이라 생각

레이어패널의 이름을 더블클릭하면 저렇게 이름 수정가능하고

오른족에 저거 누르면 여러가지가 있는데

Show Version history

를 누르게되면

오른쪽 디자인패널에서 과거 했던짓거리를 볼 수 있음.

시간대에 했던걸 누르면 그 시간대로 롤백하게됨.

마우스 우클릭하면 저렇게 이름을 바꾸거나 되돌리기도 이런방식으로 가능

Duplicate

버튼을 누르면 그시점에서 햇던 짓거리 따로 뺄 수 있음

그럼이렇게 파일 자체가 복사된걸 확인가능함

Publish library

를 누르면 파일을 라이브러리로 쓰겠다는거ㅇㅇ

디자인 패널

주로 엘리먼트를 어떻게 디자인 할까 ?

에 초점이 되어있음

여기서 나말고 누가 더 작업하고있나 볼수 있고

Spotlight me

는 내 마우스 따라오셈 을 요청하는거

오른쪽에 헤드셋은 피그마안에서 음성으로 대화할수있는건데 돈내야함

이거는 사람초대하는거

뷰 세팅에 대한 버튼임

피그마는 Vector 기반이기때문에 Vector로 모든게 구성되어있음

그래서 Cmd(ctrl) + 마우스 휠 로 확대 축소해서 그리드를 볼 수있음

Pixel Preview : 픽셀로 봤을때, 어떻게보이는가

• Disabled : 설정해제

• 1x

• 2x

Pixel grid

를 체크해제하면 그리드가 안보임

Snap to Pixel grid

피그마에서 Snap to Pixel Grid 기능은 디자인 요소를 정확한 픽셀 단위로 정렬해 배포 시 소수점 문제를 방지

그냥 끼고 쓰셈

Ruller

Outline

뼈대 보여주는 기능
저거엔 없어서 안보임

어디까지가 마진이고 간격인지 볼때 씀