[강의학습일지] Figma 활용법(1) 2, 3주차 강의

프레임과 그룹

 

• 그룹: 코드 블록 X, 개체를 묶을 때 사용(디자인 복잡한 그래픽). 그룹 내 개체가 따로 지정 X (같이 움직임)
• 프레임: 코드 블록 O, 각각 블록 따로 지정 O (모든 것이 별개인 상태)

	프레임	그룹
용도	피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체 다른 개체나 프레임을 넣을 수 있어서 컨테이너(Container)라고도 부른다.	디자인을 정리하는 편의성을 위해 사용 디자인이 복잡하거나 그래픽이 필요할 때 사용 여러 요소를 한번에 컨트롤할때 사용
코드인식	코드 블록으로 인식 가능	코드블록으로 인식하지 않음
묶기	묶을 프레임 선택 후 Frame selection (Ctrl+Alt+G)	묶을 개체 선택 후 Group Selection (Ctrl+G)
개체변경 (스타일/ 크기)	스타일 적용 시에 프레임 내에 개체는 영향을 받지 않음 일반적으로 크기가 고정되어 있기 때문에, 둘러싸고 있는 프레임의 사이즈를 변경하더라도 안에 있는 프레임은 영향을 받지 않는다	그룹 안의 모든 개체가 동시에 영향을 받음

레이어(Layer)

오토레이아웃과 일반 레이어 순서의 차이

 

• 레이어를 화면에 배치하는 규칙=정렬
• 레이어를 쌓은 구조가 곧 코드구조
• 디자인한 게 코드구조와 비슷해야 함> 레이어정렬, 배치
• 피그마 개체는 위에서 아래로 생김
• 제일 위에 떠있는 개체가 제일 마지막에 만든 것
• 실무에서도 가로, 세로, 높이라고 부른다. (Width, Height, Z-index라고도 부른다)
• 레이어패널에서 더 앞에 있는 것:나에게 더 가까이 있다

오토레이아웃 (Auto Layout)

• 개체를 패딩으로 감싸 컨테이너를 만들 때 사용함 (UI크기는 개체의 크기+패딩)
• 레이어를 쌓고, 프레임을 배치하고 정렬
• 컨테이너(개체와 내부여백(패딩))를 간격에 맞게 규칙적으로 정렬해 주는 기능
• 앱/웹 만들 때 화면의 크기가 달라져서 디자인이 유연하게 대응할 수 있게 만들어야 함
• 부모를 움직여도 자식간의 간격이 일정하다=오토레이아웃
• 부모는 자식의 크기를 감싸는 형태. 감싸는 건 오토레이아웃에서만 가능

코드블록의 구조: 피그마에선 프레임/컨테이너

• 패딩(Padding): 코드 블록 안에 있는 개체와 함께 실제 블록의 사이즈가 되는 내부 여백
• 보더(Border): 코드 블록 내부 공간 바로 바깥의 가장자리. 실제 코드 블록의 테두리
• 마진(Margin) : 코드 블록 바깥의 여백이자 다른 코드 블록과의 간격

 

• 텍스트에 오토레이아웃 바로 적용=기본패딩값을 가진 오토레이아웃 생성
• 텍스트에 프레임적용 후 오토레이아웃 = 프레임자체가 오토레이아웃으로 변경됨
• 감싸기: 일정기준이 넘어가면 밑으로 내려감

 

• 내부프레임에서는 레이어패널에서 위에 있으면 원래는 앞에 있는 것
• 오토레이아웃에서는 밑에 있을수록 앞에 있음

컨스트레인트 (Constraint, = Anchor)

 

• 자식 컨테이너가 부모에 고정되어 움직이는 일종의 ‘핀’
• 위치 자식 컨테이너는 부모 컨테이너의 사이즈가 변할 때 왼쪽과 위쪽 방향으로 고정돼요.
• 핀의 위치에만 영향을 받는다. 반응형 만들 때 사용. 

 

• Left and Right 왼쪽, 오른쪽 모두 고정
• Scale 부모가 커지는 크기에 따라 비율에 맞게 같이 커짐

값	유형	설명
Fixed	고정값	공통
Hug	자식 컨테이너의 크기에 맞춰 조정	부모만 쓸 수 있음
Fill	부모 컨테이너의 크기에 맞춰 조정	자식만 쓸 수 있음

 

해상도

 

• 아이폰 375*812
• 안드로이드 360 * 800
• 분기점(Breakpoint)
  • • 가로가 1024px 이상이라면 데스크탑 화면
    • 가로가 768px 이상, 1024px 미만이라면 태블릿 화면
    • 가로가 768px 미만이라면 모바일 화면

8포인트 그리드

 

• UI 디자인, 배치하는 규칙
• 간격이나 크기를 8의 배수(8, 16, 24, 32 ...) 로 맞춤

 

칼럼

 

• 960 12 Column Grid: 유닛너비 60 거터너비 20
• 1200 12 Column Grid: 유닛너비 76 거터너비 24
• 1440 12 Column Grid: 유닛너비 96 거터너비 24
• 태블릿은 양옆으로 확장이 안되기 때문에 옆에 마진을 넣어줌 Stretch
• 데스크탑은 너무 가장자리에 붙지 않게 쫙 펼쳐져있게 양쪽 공간 확보 Center
• Responsive: 반응형 디자인에 맞게 레이아웃 변화를 보여주는 플러그인

 

피그마로 디자인 시스템 세팅하기: ③반응형 레이아웃 만들기 | 요즘IT

파운데이션

 

• 색상(Color)
• 서체(Font, Typography)
• 아이콘(Icon)
• 레이아웃(Layout)
  • 간격, 여백(Spacing, Gap)
  • 곡률(Radius)
  • 그리드(Grid)
  • 고도(Elevation)

디자인 시스템 1. 색상

 

• 10가지 밝기 단계 만들기 50(가장 밝은), 100, ... ~900 (가장 어두운)
• HSL에서 명도(세 번째 칸)를 기준으로 n(가장 밝은), 1n, 2n... 9n (가장 어두운)
• 0으로 떨어지는 숫자X (약간 건드려서 0이 아닌 다른 숫자로)
• Coolors: 어울리는 컬러 랜덤 선택 플러그인
• Styler: 스타일 추가해 주는 플러그인

디자인 시스템 2. 폰트

 

• 주요 폰트: 프리텐다드, 노토산스, 애플산돌고딕
• Auto Documentation : 스타일 문서로 남기는 플러그인
• https://m3.material.io/styles/typography

Typography – Material Design 3