[Framer] Study day_01
화면 소개/ 기본 화면 파악하기
오늘 부분은 화면에 대해 알아보았다! 원래 툴에 대해 기능만 파악해도 반은 한거니까!!
1. 디자인, 코드 전환 탭 : 디자인을 한 뒤 코드 탭으로 전환하여 효과를 입히는 느낌!
2. 툴 탭 : 포토샵의 툴바같이 생각하면 좋을 듯 하다.
3. 레이어 탭 : 선택된 아트보드에 대한 레이어 들이 보여짐. 포토샵과 동일한 구조. 아래 레이어가 가장 상위로 보여짐.
4. Canvas : 실 디자인 화면. 스케치와 동일하게 생각하면 된다.
5. Properties: 스케치에서와 동일하게 객체에 대한 디테일한 묘사하기
1. 오토코드 : 코드 라이브러리로, 자주 사용되는 기능 모음
1-1. Animate : Layer(레이어 위에 애니메이션 입히기), State 선택 가능
1-2. State : 상태 별로 저장했다가 필요할 때 씀
1-3. Event : Click, Tap, Drag 등 행동에 따른 실행
1-4. Snippet : 기타 기능과 내가 만든 코드 기능
2. Import, Docs, Inspect
- Import : 포토샵, 스케치, 피그마 파일 불러오기
- Docs : 코드 모음
- Inspect :코드가 맞게 쓰였는지 검사
3. 레이어 창 : 레이어 확인 가능
4. 코드 입력 창 : 코드 입력창
5. 프리뷰 창 : 코드의 결과물 확인 창
6. 업로드 버튼
- 이것저것 만져보면서 이미지는 어떻게 넣는가 했는데... 살짝 다른 점이라면 이미지는 드래그앤 드롭으로 파일을 직접 끌어 와야한다는 점!!
- 스케치 파일이나 포토샵 파일을 연동하려면 우선 연동하려는 스케치 파일 또는 포토샵 파일을 열고 [File- Import] 선택 후 원하는 툴을 선택하면 현재 열려있는 파일이 프레이머에 나타납니다.
- 하지만 연동하여 사용할 경우 디자인 모드에서 수정이 안되고 설정을 다시 해야하는 듯 싶습니다.
파일이 제대로 불러오지 못하고 한페이지만 노출이 된다능... 스케치 연동 하는 부분을 다시 파야겠군용..ㅜ
스케치 파일을 프레이머에서 사용하는 방법에 대해서 잘 정리해 두셔서 첨부해 봅니다!
https://www.vobour.com/book/view/BseLTi4rHJiSH5Fhg
아직까지는 스케치와 연동해서 사용하는데 있어 불편한점이 보여요! 앞으로 개선될 것이라 예상해 봅니다.
- 파일을 불러오는 과정을 살펴보니.... 레이어 정리는 필수로 잘 해둬야 할꺼 같습니다.(숫자로 시작하는 레이어X : 함수로 인식될 가능성 있음)
