figma grid layout
Responsive layout grid - Material Design
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
m3.material.io
bootstrap
Grid system · Bootstrap (getbootstrap.com)
Grid system
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
getbootstrap.com
아이폰 14의 경우에는 390x844를 따른다.
아이폰 14의 경우,
column값이 4개, margin은 16
gutter도 16
figma를 통해 부모와 instance를 알게 되었다!!
피그마에서 컴포넌트를 해제하는 방법은 없습니다.
실무에서는 컴포넌트를 인스턴스로 분리한 뒤 지우는 방법을 사용합니다.
컴포넌트(마스터)
인스턴스
1. 컴포넌트를 복사하여 인스턴스를 생성하고 원래 컴포넌트는 삭제
2. 인스턴스를 해지(Detacth Instance)하여 일반프레임으로 만들기
일부 텍스트가 복사되지 않는 문제에 대하여..
첨부하신 이미지에 중복된 요소들이 하나의 컴포넌트로 묶여있는 것으로 보이네요.
이 상태에서 컴포넌트를 복사하면 요소가 겹칠 것 같아요
여기서 필요한 요소들만 선택한 뒤 복사하고, 다시 그룹핑을 해야 할 것 같습니다.
여기 말풍선에 공통으로 들어가는 요소만 선택하여 새로운 컴포넌트(마스터)를 만들어주세요.
그리고 두번째 말풍선부터는 복사하여 인스턴스를 생성하여 사용하세요.
컴포넌트에서 한 꺼번에 수정할 수 있어 편집이 쉬워집니다.
즉, 부모만 만들고 instance같은 경우는 부모 걍 복사해서 쓰면 됨
부모 (component)는 절대로 수정이 안 된다 이 말이야 instance들이 알아서 변경해서 써라~
부모는 안 변해 자식들만 변해라 ~
내 짱멋있는 피그마를 보고 싶다면?
'UIUX Full-Stack Developer' 카테고리의 다른 글
| [0712] 자바스크립트 DAY 04 (0) | 2023.07.12 |
|---|---|
| [0707] 정처기 (0) | 2023.07.07 |
| [0705] 스프링부트 part1. 1~4 (0) | 2023.07.05 |
| [0703] Call by value (0) | 2023.07.03 |
| [0702] overriding 개념 (0) | 2023.07.02 |