[데이터드리븐 서비스기획 6일차] Figma

 

 

1️⃣ 피그마 인터페이스 이해

---

• 왼쪽 바, 오른쪽 바 : 패널
  ex) Layer 패널, Assets 패널, Design 패널, ...
  
  
• Fixel preview : 실제 사용자가 체험하는 화면 확인할 때
• Move > Section : 강의안 슬라이드 -> 강의안 하나 = Section 1
  

1. Layer 패널 속성 명칭

• 구역 설정
  Section 
  
  
• 컨테이너 요소 : 묶어주는 용도
  • Auto Layout
  • Frame
  • Group
• 재사용 가능 요소 : 일관성 유지, 나중에 효율적인 작업에 도움
  
  • Component
  • Instance 
• 콘텐츠 요소
  
  • Text, Shape, Image, Video

 

2. Assets 패널

component 만들어서 Assets 패널에서 언제든 꺼내 쓸 수 있다.

 

3. Design 패널

내가 선택한 개체의 디자인을 바꿀 수 있음. 가장 많이 사용할 패널

아무것도 클릭하지 않으면 스타일 관련해서 일관성 유지

 

4. Prototype 패널

(2일차)

 

5. Dev mod (shift+D)

Ready for dev : 협업자에게 확인하려는 슬라이드 지정, 상단 가장 오른쪽 아이콘 클릭

 

 

2️⃣ 피그마 기본 기능의 이해

---

1. 프레임의 정의

아이폰, 갤럭시 안드로이드 폰과 같은 기기, 혹은 웹사이트 디자인시 화면의 크기를 지정할 경우, 프레임을 사용하여 그 안에 디자인을 진행함. 

 

2. 프레임 중첩 사용의 이해

프레임 내 프레임 삽입(중첩)

- 프레임에 다양한 기능을 적용함으로서 ~

 

3. 프레임 생성 방법

단축키 F

 

반응형 디자인

소비자가 가로로 화면을 회전했을 때 어떻게 사용하면 좋을까

 

Frame 클릭 후 Desingn 패널 -> clip content: 실제 프로토타입에서 볼 수 있는 화면 

Constrain Proportion : 비율 고정

 

지금은 약간 둥글기를 주는 유행

 

별 각도 : 안쪽 뾰족 각도 <

 

4. 컬러와 텍스트

1) 색상 모델 종류

HEX, HSB, HSL, CSS, RGB (CMIK 없음) 5가지 색상 모델 제공

색상 모델 간 전환은 Figma가 색상을 설명하는 용도이지, 랜더링 x

 

Cntrl + D : 복사 양식 저장되어있음.

 

Text : Design  미트볼 버튼 -> 말줄임표 이용하는게 제일 베스트! 👍

 

한글, 영어 몇글자까지 보일지도 다 기획함.

 

3️⃣ 피그마 협업 & 문서화

---

- 피그마는 협업 툴 많이

- 표지, 목차, 간지, 내지

 

1. 코멘트

 상단 말풍선 아이콘, 

메일 - 10분내 

 

실제 기업에서는 커뮤니케이션 툴 피그마에 임포트해서 사용함

 

2. 문서화

1. 표지

2. 목차

3. 간지

    내지 중간중간 끼어있는 표지?느낌

4. 내지

    1) 개요⭐

       두괄적 제시

 

예시)

https://www.figma.com/community/file/832911648132248625

Spotify Ways of Working | Figma Community

 

1) 버전 관리

- 관리 방법: (추천👍)

파일 단위, 페이지 단위

 

- 관리 안하는거: 

버전 히스토리 관리

파일 클릭 -> Version History > + > Add history 

 

2) 썸네일 

- 썸네일 지정

썸네일 할 템플릿 > 우측 버튼 클릭 > Set as thumnail

 

n버튼 : 다음 프레임?

shift + n 버튼 : 이전 프레임?

 

기준 방향 : 가장 왼쪽 시작점 & 위->아래

간지 기준으로 줄 바꿈.

 

 

💻 실습

---

오늘 만든 화면 설계

 

스크롤은 아직 구현 못했다... 🤔

 

IOS > App Store > 게임 화면

 

 

오른쪽이 실제 캡쳐화면, 왼쪽이 내가 구현한 화면이다

 

구현한 화면