Let Figma Design

피그마에서 반응형 카드 만들기- 오토레이아웃 min, max 오늘은 피그마에서 오토레이아웃 wrap과 min width, max width를 활용한 반응형 카드를 만들어볼게요~ 피그마의 오토레이아웃을 이용하면 디바이스 크기에 대응하는 Responsive web을 비교적 쉽게 만들 수 있어요. ​ 카드 왼쪽에 들어갈 이미지는 우선 FiIl x Fixed를 줍니다. 그리고 Min width와 Max width도 값을 설정해 줍니다. Min, max를 설정해 주니 빨간색 가이드라인이 나타납니다. 이미지는 빨간색 가이드 라인 안에서만 움직이게 될 거예요~ 카드 왼쪽에 들어갈 텍스트는 모두 Fill로 늘어나거나 줄어들어도 영역 내에 가득 차게 해 줍니다. 텍스트 중간의 "chips"들은 오토레이아웃 Wrap, F..

UXUI 디자이너의 Figma 2023. 7. 10. 12:43

오늘은 새롭게 업데이트된 피그마의 오토레이아웃 Wrap과 min/max width를 이용하여 반응형 디자인을 해볼게요~ 이번 업데이트로 반응형 디자인도 피그마에서 쉽게 작업할 수 있습니다. 또한 Variable을 이용하면 여러 벌의 디자인을 만들지 않아도 퍼블리싱의 break point 표현도 가능하게 되었습니다. ​ Break Point란? 브레이크 포인트란 반응형 웹에서 사이즈가 변하는 지점을 말합니다. 예를 들어 앱 가로 사이즈는 375인데, 태블릿 744 사이즈로 앱을 본다고 한다면 보이는 형태가 달라질 것입니다. 노트북이나 데스크톱에서는 말할 것도 없고요. 그래서 디바이스에 맞게 디자인도 최적의 형태로 변하게 되는데요. 퍼블리싱의 변하는 지점을 Break Point라고 합니다. 대부분 앱사이즈,..

UXUI 디자이너의 Figma 2023. 7. 10. 12:34