[컴포넌트 복습] 피그마의 shift+A를 통해 오토레이아웃을 설정하여 버튼을 만들 수 있음
[프로토타입] *프로토타입의 원칙 : 골디락스 품질 딱 적절한 수준 가짜같지 않으면서도 너무 시간이 많이 들지 않게 만들어야 한다는 매우 중요한 원칙
피그마 인터랙션 기본기 3가지 scroll behavior smart animate interactive component
가장 먼저 볼 것은
[가로스크롤]
스크롤동작
스크롤을 켜 놓아야함!
스크롤은 프레임에서 넘치는 부분을 어떻게 좌우로 움직이는지 볼 수 있게 하는 오버플로우
먼저 프레임으로!
오토레이아웃 shift a로 묶기
화면 자체를 볼 때 사각형 여러개를 묶은 도형을 선택해서 보는게 아니라 frame을 선택해야 함
이 예시속에서는 frame7 선택해야
그리고 이제 움직이도록 하려면 실제 움직일 :사각형들 frame8을 눌러서
스크롤동작을 가로로 바꿔두기
경고를 없애기 위해 
허그를 끄고 오토레이아웃끄고
frame 8을 작게 만들어준다
*프레임이 작아야 함!
탑 바나 바텀 바 만들때는 꼭 위치:고정을 켜두어야 함!
양방향 켤 때도 오토레이아웃 끄고 진행하기
F 켜서 프레임 켜서 이미지 붙여넣기로 진행하면 이미지 움직이는 것 구현 가능(스크롤동작 : 오버플로:양방향)
주의해야 할 부분은
넘친 콘텐츠 숨기기를 켜 두어야 튀어나가지 않는다
바텀바 아래에 스크롤 만들기
프레임설정
크기를 조정하기 위해서는 크기를 맞추고자 하는 쪽에 가장자리에 맞춰서 끄트머리에 맞춰서
K를 눌러서 크기를 조정하면 됨
그리고 오버레이 설정할때
트리거가 어떤것을 눌렀을때 이동되도록 할 지를 설정해야 함.
!!!!협업할 때 -> "디자인 시스템 만들때 피그마 배리어블 정리해서 개발단에 넘겨주세요"라고만 얘기해도 협업이 원활하게 진행된다.
[스마트애니메이트]
이미지 자르기
(IMAGE 일때만 가능)
원 기울어지게 하려면 영역 밖으로 나가야 커서가 기울어짐
[인터랙티브 컴포넌트]
interactive_component
컴포넌트로 등록
연결시킬때, home, work, play, eat의 오토레이아웃을 끄고 글씨부터 화면으로 연결시킨다
그리고 해당 바를 일정한 위치에 위치시키고 싶을 때
i)크기가 같을 경우엔 복사붙여넣기를 해서 desktop-2(복붙하고자 하는 화면이름)를 선택하고 붙여넣으면 같은 위치로 옮겨지는데
ii)화면 크기가 다를때 같은 위치로 가고싶으면
shift+alt를 눌러서 옆으로 이동시킬 수 있음(가운데 위치로는 빨간선 가이드로 참고가능)
응용 : 백아이콘
모양을 만들고, 컴포넌트 설정을 해서
상호작용을 클릭 시 “뒤로”로 설정해보기
아이콘은 svg로 google fonts로 다운받기도 함 구글 메테리얼 아이콘: https://fonts.google.com/icons 페더 아이콘: https://feathericons.com/
이미지는 나노바나나로 작업(gemini는 로고가 나오기에) gpt로 이미지를 만들긴 함
화면 상
네비게이션, 탑바가 먼저 위에 있을듯
탑바를 만들때 효과를 줘서 약간의 그림자를 준다
Feather – Simply beautiful open source icons
toggle
정렬을 계속 왼쪽에 있도록 주소text를 해두면 글씨가 늘어나도 안 일그러짐
제일 위의 다리미 박스와 라인을 한 세트로 shift+a 시키고 두 개 묶어서 오토레이아웃 하나 만든 다음에는 (총 다리미 2개가 한 오토레이아웃인건데)
두번째 것부터 복사해서 붙여넣기로 아래로 만들면 됨
수정해야 할 수 있기에, 컴포넌트를 걸어서 복사해서 계속 컴포넌트로 만듦
아이콘은 https://feathericons.com/ 페더아이콘에서 주로 가져온다.
https://fonts.google.com/
[아이콘을 만들기 위해서는]
인스턴스교체를 진행하면 아이콘으로 만들어진다
인스턴트교체를 먼저 하나 만들어서
해당 속성에서 포함시키고자 하는 아이콘들을 다 선택하고
home 아이콘을 계속해서 복사 붙여넣기하면서
인스턴트를 교체시킨다.
의의 : 배리어블 등을 통해서 협업상에서 디자이너와 소통을 할 수 있음. 어떠한 모양으로 만들거라는 프로토타입을 구현해서 보여줄 수 있음.