디자이너의 프레이머 스터디 일지 02 *Framer Study
2024.03.03 - [오늘의 스터디] - 디자이너의 프레이머 스터디 일지 01 *Framer Study
디자이너의 프레이머 스터디 일지 01 *Framer Study
툴을 처음 배우려고 할때는 공식 커리큘럼만큼 훌륭한 것이 없다 ... 자, 우선 이것을 돌파해보기로 한다!!! https://www.youtube.com/playlist?list=PL9p5auxyrweOM5GPfmkmA5v5vq-Kpmapd Learn the Fundamentals of Framer — Fram
jelly99man.tistory.com
자, 기초는 잘 다져보았죠? 이제 조금 더 심화된 내용을 다뤄볼게요.
그리고 프레이머 공식 유튜브영상에서 다루지 않은 몇가지도 같이 이야기할게요.
(아마 빼먹은듯 ㅠㅜ)
텍스트를 길게 늘여볼게요.
어라... 분명히 세로 사이즈 Auto... Fit Content 으로 설정했는데 고양이가 잘렸어요. 왜이럴까요?
이것은... 처음에 프레이머에서 초기에 세팅해준 가장 상위레이어인 데스크탑의 설정이!!!
이렇게 되어있기 때문이에요 ㅠㅠ 가로값은 고정이어도 되지만
세로사이즈도 고정으로 되어있기 때문에 잘려버리는 거였어요!!!!
자...여러분 그럼 우리 뭘해야할까요?
자동으로 세로 사이즈가 늘어나도록 설정하려면...
네엥~! 세로 사이즈 입력칸에 Auto로 하면 자동으로 세로 사이즈가 늘어나게되어요!!
휴... 해결된 모습입니다.
자, 고양이 이미지 옆에 하나 더 넣어볼게요.
고양이가 아래로 내려갑니다.. 왤까요?
우리가 아까 프레임 설정을 이렇게 해뒀기 때문이에요!
세로로 계속 정렬되는 구조죠! (개체 사이간격Gap 120으로...)
이런 경우, 프레임 속에 프레임을 하나 더 만들면 해결할 수 있어요.
이미지를 위한 프레임을 만드는거죠.
또 대~충 이미지 위에 프레임을 그려줍니다.
레이어를 이렇게 정렬할게요, 이미지를 만든 프레임속에 쏘옥 넣어줍니다.
그래도 이미지는 변화가 없어요.
여기서 **중요!!
우측패널을 보면 레이아웃이 있습니다..
+를 눌러서 프레임에 레이아웃을 만들어줍니다!!!
ㅎㅎ 그러면 프레임이 스택 Stack 속성으로 변환되면서, 이미지가 들어올거에요.
프레이머에서 아주 중요하게 쓰이는 개념이죠! 스택스택스택~!
얘를 또 예쁘게 만들어볼게요. 가로세로 대충 그린거를... 어떻게 해야할까요?
이젠 알겠죠? Auto와 100%...
그리고 레이아웃도 가로로 바꿔줍니다.
자, 여기까지가 주요개념입니다.
그리고 프레이머 공식영상에서 놓친 마지막 라스트 Tip!
피그마에 익숙한 디자이너들은 Clip content 기능으로 익숙한,
프레임을 넘어가는 내용을 자르느냐 보여지느냐 하는건데요.
프레이머에서는 오버플로우 Overflow라는 기능으로 작용하고있습니다.
우측패널 Styles에 있어요. 작업하시다가 뭔가 이상하다 싶으면 여기를 둘러보시길 권합니다 -.-)vVv
후아~
이정도만 알고 강의영상을 시청해도 충분하실거에요!!!
나머지 또 드리고싶은 팁들은 다음에 작성할게요, 그럼 안녀어엉~~~