컴포넌트르 어떻게 사용하는가
재사용을 위해 사용. 요소추가나 , 메인컴포넌트로 ㅏ거나, 인연끊기
내보낼때 어떻게 해야하는가?
material icon 가져오기
사이트가서 가져와도 됨
인스턴스쓰듯 드래그해서 사용가능
svg->벡터
png , jpg ->비트맵
여기서 결정해야 할 것
svg는 벡터니 사이즈 늘렷다줄여도 안깨짐
머테리얼에서 손을안대면 기본이 무조건 24*24임
svg면 피그마서 늘려도 안깨짐
png, jpg면 비트맵이라 늘리면 깨짐.
피그마로 가져와서 그래픽작업할거면 svg로 가져오고
피그마서 웹으로 내보낼땐 1배수,2배수로 , png나 jpg로 내보내도 상관없음.
svg가져오기
두개를 컴포넌트로 각각 만들기 .셋말고 멀티플컴포넌트
레이어패널에 2개 따로 만들어짐
에셋패널에서도 확인가능
관리는 프레임툴로 프레임안에넣기
리스트랑 쇼서브폴더 체크되게 클릭하여 폴더구성나오게 하기
컴포넌트 두개 프레임밖으로 빼기
넣기
폴더분류하여 저장되게 하기
컴포넌트 두개 드래그하고 crtl+r
컴포넌트이름 두개뜸
폴더는 아이콘이고, 현재이름을 그대로 가지고갈거다 .
리네임하면
export
폴더만들어져서 저장됨
아이콘안에 , icon/navi/이런식으로 폴더 더분류가능
다른프레임에 들어가야한다면, 레이어에서 옮겨도 됨.
그룹짓고 복사
뭉쳐다니는애들은 그룹지어야 안흩어짐. 필요에따라 깨서사용하거나 하기
더블클릭시 원만선택됨
힘들면
레이어패널에서 컨트롤하고 원만클릭
동료에게 이 이미지를주면 도형으로그린건지, 안에 이미지를넣을건지 알수없음
액션버튼
컨텐츠 릴
우리목적은 전화번호부
사진넣을거임
레이어에서 이름부분텍스트만 선택하고 콘텍츠 릴에서 텍스트선택해서 이름도 랜덤으로 지정가능
처음에 레이아웃잡을땐 몇개들어가는게 크기적당한지 보고 , 레이아웃 결정하면
나머지는삭제하고 하나만 컴포넌트로 등록하고 걔를 인스턴스화해서 쓰면 됨
홈에서 임포트해서 피그마 파일열기
안내선 사용
- 자를 꺼내서 가이드선 상하좌우 꺼내잡기
- 그리드 사용 (눈금선으로 표시)
- 도형 사용 (내가 3센치 띄울거면 도형사이즈 지정할줄아니까 좌우에 3센치 도형두어보기)
2.프레임 클릭하고 레이아웃그리드 클릭 > 컬럼선택
3.
하나컬럼을줄건데 크기는 16픽셀사이즈로, 왼쪽으로 줄거다 . gutter는 볼링 0점나오는도랑. 지금은 1개라 20이든 상관 x 
상하좌우로 만들건데 일일이 하기 귀찮
레이아웃 가이드에서 방금 만든 컬럼선택
복제 ctrl+d
Constraints
반응형웹페이지 만드는데 씀
반드시 프레임이 있어야 자동으로 레이어간격조절함
텍스트길이나 버튼에 사용
오브젝트 선택 시프트+엔터 바깥 프레임잡힘(상위영역선택) 같이 드래그되어 커짐
상위 시프트 엔터
하위 엔터
레프트+라이트
화면크기에 맞춰 레이어 크기 조절가능
동그라미는
정원은 늘어져서 타원이되면 안되니 주의
오토레이아웃
컨텐츠릴의 텍스트가서 더미텍스트 사용 / 드래그해서 필요한부분만 사용가능
시프트 에이해도 되고 저거 클릭해도 되고
이상태서 ctrl+d하면 아래에 복사됨
갭값으로 행간조절 가능 /플로우 : 정렬이 아래로 되게 설정되어있음
영문 소문자만 선택 후 셋팅 누르면 전체대문자로할건지 케이스 선택가능
자간붙이려면 마이너스 써야함
작성만 세개 선택하여 오토레이아웃클릭하고 프레임이름바꾸기
컨테이너프레임 선택
허그 컨텐츠 = 글자사이즈 맞게 줄여라
오토레이아웃해서 합치기
패딩주기
카드 코너 레디우스 , 컨테이너 레디우스 주고 오토레이아웃으로 합치기
얘를 컴포넌트로 만들면 이미지 바꾸면서 다른카드로 바꿀수 있는거!
편한 기능
홈으로가기
이 컴포넌트가 어딨는지 모르겠다 . -> 앞에 아이콘 더블클릭
확대됨
웹페이지만들기
레이아웃 그리드
여백이 있어야 눈이 보기편함. 책처럼.
좌우 다~ 차있으면 눈을 어디둬야될지 모름
가터는 컬럼 사이의 여백임. 타입은 칼럼을 어디기준으로둘지. 카운트는 칼럼몇개할지
알트 시프트키 같이 누르면 같이 복사됨
정렬
인스턴스 크기 줄이면 사이즈가 같이 연동이 안됨
필 컨테이너
-컨테이너 밖으로 안빠져나가게 함
컨스트레인트는 프레임이 있어야 나옴
폰트어썸
이미지가 아니라 서체속성으로 가져갈거임 . 그림처럼 생긴 글자로 가져간다.
복붙하고 폰트서체 변경
오브젝트 선택후 키보드 방향키 = 1픽셀씩
시프트 누르면서 이동 = 10픽셀씩
서체는 중심이 글자길이마다 달라짐
인스턴스는 위치이동이 안되니 겉의 동그라미랑 계속 중심이 어긋날수있음
그래서 그냥 따로따로 만들거임.
피그마 파일 내보내기
