🎨 Constraint
object에 제약을 줘서 여러 상황에 맞게, 유연하게 object가 대응될 수 있도록 하는 기능 -> 다양한 해상도의 디바이스에 요소들이 대응되게 할 수 있다!
- Constraint 를 Left, Top으로 줘 보았다
- 그림과 같이 축이 표시된다 (파란색 점선)
- 프레임의 사이즈를 조정할 때 축에 따라서 오브젝트가 고정이 된다
따라서 해상도가 변경되어도 버튼의 위치는 고정되어야할 때 사용한다 (하단 탭바 등등..)
Scale, Horizontal
- Scale : 여백과 object간 비율을 고정한다
- left & right, top & bottom : 좌우, 위아래 여백만 고정한다
➕ Fixed Position
화면상에서 고정으로 보여야 할 때 사용
🤔 constraint를 bottom으로 줘서 아래에 하단 탭바를 고정시키면 되는거 아닌가?
-> 화면상에서 아래가 안 보일 수도 있으므로 fixed position으로 고정해야 한다!
🎨 Auto Layout
간격(Padding)값을 자동으로 유지 시키는 기능
여러 object들을 한 번에 선택 후에 오른쪽 메뉴에서 적용시킨다.
- 사각형 안에 있는 text를 늘리면 바깥에 있는 사각형도 같이 비율에 맞춰 커진다.
- Horizontal Space between items : 여러 원소들을 묶었을 때 그 원소 사이의 간격을 유지시킨다.
- Horizontal / Vertical Padding : 패딩 값 직접 조정 가능 위 그림에서는 50 / 17
🎨 Style & Component
재사용성을 고려해서 부품들을 만들어놓자! (React 컴포넌트랑 비슷한 느낌)
🖌️ Figma의 Style 기능
1. Text
- 오른쪽 점 네개를 클릭 후 스타일 생성
- 나중에 다시 점네개를 클릭해서 스타일 적용가능, 당연히 편집도 가능하다
- 이렇게하면 오른쪽 메뉴 바의 Local Styles의 Text Styles에 저장됨
2. Color
Local Styles의 Color styles에 저장
3. Effect
Local Styles의 Effect styles에 저장
4. Grid
Local Styles의 Grid styles에 저장
-
스타일을 적용한 오브젝트를 하나만 수정해도 그 스타일이 적용된 전체 오브젝트가 수정된다.
-
스타일을 만들 때 사용했던 오브젝트를 지워도 스타일은 남아있는다!
🖌️ UI Component
반복적으로 사용되는 Typography + Color + 도형 으로 구성된 UI 요소
반복작업에 대한 효율성 극대화를 위해 사용한다!
- 대표적인 Component 사례를 공부하는 방법 : Google Material Design, Human Interface Guideline(Apple / IOS)
컴포넌트 예시
컴포넌트 등록 조건 : 해당 object가 하나의 레이어여야 한다. (하나의 레이어로서 그룹지정이 되어있어야 함)
컴포넌트 등록 : Object 선택 후 우클릭 -> Create Component -> 왼쪽 상단 Asset 탭에서 확인하거나 해당 아이콘이 아래와 같은 모양으로 변한걸 확인
- Asset에 있는 Component를 드래그해서 사용한다.
- 그러면 해당 object는 본체가 아닌 인스턴스(객체)가 된다!
- 인스턴스는 아이콘이 바뀌어 있는걸 확인할 수 있다!
본체와 객체의 차이 : 본체는 속성을 바꿀 때 모든 인스턴스에 동시다발적으로 바뀐 사항이 적용된다. 반면 객체는 개별적으로 사용가능
만약 인스턴스가 아닌 완전 개별적인 object로 사용하고 싶다면, 우클릭 -> Detach Instance (특별히 Customize를 시킬 상황이 있을 때 사용)
컴포넌트 정리(중요!) - 위에서는 Button Normal 이라고 저장했지만 종류가 많을 때에는
Button / Normal, Button / Hover, Button / Focus 등등 이렇게 지정
이렇게 하면 Asset 탭에서 폴더가 생성되고 그 안에 컴포넌트들이 분류되어 저장된다.
Swap Instance : 컴포넌트가 폴더별로 정리된 상태에서 해당 컴포넌트를 우클릭 -> Swap Instance를 누르면 해당 폴더에 있는 컴포넌트에 한해서 변경가능
ex) 위의 예시로는 버튼을 Normal -> Hover로 변경 가능하다
컴포넌트 삭제 : 객체를 하나 생성 후 원본 삭제, 그리고 객체에서 detach instancce
🎨 Figma Library
사용하는 이유 : 새로운 Figma 파일을 만들 때에 저장된 Style과 Component에 대한 저장 및 쉬운 재사용
Team Library : 팀원과 공유하고 있는 프로젝트 폴더에서 새로운 Figma파일을 만들 때에 Library를 등록된 팀원들이 접근 및 사용 가능하도록 함
(무료 버전에서 Style은 라이브러리 등록 가능, Component는 불가)
publish Library 로 라이브러리 생성, 그 후 다른 파일에서
여기서 생성된 라이브러리 적용 -> 해당 라이브러리에 들어가 있는 Style, Component 사용 가능!
