figma
기초 기능
1. frame 기능
- 하나의 페이지를 만드는 단위,,, 이름도 지어 줄 수 있다.
- 해상도에 경우 기본 세팅 값이 주어지기 때문에 크게 고민할 필요가 없다.
2. 도형 기능
- 도형 크기를 조절할 때 shift를 누른 상태로 조절을 하면 비율이 유지가 된다.
- matching layer : 동일한 component 한번에 변경
- mask : 도형을 이용하여 마스킹 기능(덮어 씌우기) → 덮어 씌울 때 우선순위는 더 위에 올라와있는 도형이 우선 순위가 높다.
- 그림을 추가할 때 : 원하는 크기의 도형을 잡고 fill안에서 image를 import한다.
3. constraints
- 특정 부분을 고정시키는 방법. 반응형으로 만들 수 있다.
4. grid
- grid column count : 12 국룰
5. stroke
- inside, outside, center값 조절하면서 사용,,, but inside를 가장 많이 사용한다.
6. 주요 단축키
- z + option + 클릭(드래그) : 축소
- shift + option + 드래그 : 복사본 생성
- command + shift + | : ui왼쪽 창(페이지 보여주는 창)만 닫기
- command + 클릭 : frame 선택해서 frame크기 조절 가능
- option + 드래그 : 영역 좌우 동일하게 커진다.
7. 기타 유용한 정보
- layer(pass through) : 이미지 필터 조절
- style : fill, text쪽에 점4개 클릭해서 스타일을 미리 세팅해줄 수 있다.(Brand/Primary)이런식으로 작성하면 Brand토글 버튼 안에 Primary스타일이 들어가게 된다.
- component : 비슷한 버튼 같은 부분을 component끼리 묶어서 쉽게 변경할 수 있다. 묶고 싶은 component들을 드래깅해서 화면 상단에 Create component set을 클릭하고 각각 속성을 지정해 주어서 변경에 용이하게 한다.
심화기능
1. Auto Layer
2. Fix, Fill, Hug
3. Plugin
4. Prototype
5. Component asset
6. Publish
틀린 부분이 있거나 질문이 있으시면 아래 댓글로 남겨주세요 👍
