피그마로 기본 ui 만드는 법 (모달, 토글, 탭, 드롭다운, 자동완성)

처음으로 피그마를 다뤄보았다.
기획할때 피그마를 쓴다는 것은 알았지만 방법을 모를땐 어려워 보여서 시도를 못하고 있었는데..
코드스테이츠 수업시간에 피그마를 다뤄볼 수 있게 되었다
 
나중에 기획을 할 일도 생길 수 있으니
간단하게 피그마를 다뤄보는 것도 좋을 듯 하다.
나중에 봤을때 잊어버리지 않도록 단축키와 간단하게 ui 만드는 법을 정리해보겠다

 

☝🏻기본 단축키

복사하기 : Command + C
붙여넣기 : Command + V
여러 요소 동시에 선택하기 : Shift 누른 상태로 클릭
그룹으로 묶기 : Command + G
프레임으로 묶기 : Command + Option + G
간격 측정하기 : 요소를 선택한 상태에서 Option 누르고 다른 요소에 마우스 올려놓기

 

☝🏻컴포넌트

단일 컴포넌트 생성 : 컴포넌트로 만들 요소 선택 → Create component 버튼 클릭

컴포넌트 여러 개 생성 : 컴포넌트로 만들 요소 모두 선택 → Create component 버튼 옆 드롭다운 클릭 → Create multiple component 선택, 아님 각각
Create component 버튼을 눌러줘도 됨

상태를 가진 컴포넌트 생성 : 컴포넌트의 상태로 만들 요소 모두 선택 → Create component 버튼 옆 드롭다운 클릭 → Create component set 선택 컴포넌트에 상태 추가하기 : 상태를 추가할 컴포넌트 선택 → 화면 우측 Design 탭 Properties 에서 + 버튼 클릭 → Variant 선택 → 컴포넌트 하단에 생긴 보라색 + 버튼 눌러 상태 추가 컴포넌트의 인스턴스 생성
컴포넌트 복제하기 (Command + D 혹은 Option 누른 상태로 드래그)
화면 좌측 Assets 탭에서 인스턴스를 생성할 컴포넌트를 드래그하여 화면에 끌어다 놓기

되돌아가기
- cmd + z

Figma는 이 외에도 다양한 단축키를 제공한다.

Figma 화면에서 Control + Shift + ? 를 누르면 사용 가능한 모든 단축키를 확인할 수 있다

 

 

 

 

 

 피그마로 ui만드는 법 step

 

1. 배경이 되줄 frame 을 만든다

2. 상태가 변경됨에 따라 다르게 보일 컴포넌트의 초기상태를 만든다 => 컴포넌트화한다

3. 컴포넌트에서 + 버튼을 눌러 상태에 따라 다르게 보일 추가적인 컴포넌트를 만든다 

4. 자, 이제 화면에는 frame, componet 1, component state1, component state2, component state3 가 있을 것이다

오른쪽 위 design 탭에 가서 마음대로 꾸며준다

5. 오른쪽 위 prototype 탭에 가서 순차적인 논리에 따라 화살표를 연결해준다

참고로, navigate to 는 배경화면을 변경하는 것이고, change to 는 배경화면은 그대로 인데 그 컴포넌트만 변경하는 것이다

6. 이제, 컴포넌트를 생성하고 순차적으로 연결하는 것까지 다했다. 왼쪽 위 asset 탭에 가서 component를 끄집어 온다.

그리고 그 인스턴스를 frame 위에 붙인다.

완성이다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

+커서 완성

커서 컴포넌트를 만든 후 variant 하나 더 만들고, 두개 연결을 after delay 로 해준다

그리고 asset에서 프레임으로 끌어와쓰면 된다

작은 요소 하나하나를 각각 컴포넌트로 사용하는 것이 좋다!!!!

요런 느낌으로다가

 

 

 

 

 

이런 기본적인 step을 통해 다양한 ui를 만들었다.

아직 스크롤 기능이 미흡하긴 하지만, 아직 2일차이니 그럴만두,,,, 

나중에 보완하겠다

 

 

https://www.figma.com/file/PnSKbgjvt3hLg1HxeaY6VA/Untitled?node-id=13-170&t=RlouEeMD5jCarUY5-0

Figma

page 2