funfunweb

1. 단축키 R 박스 크기 280*390 radius 20px 사각형 그리기2. 전체 박스 선택 후 auto layout (shift + a)3. 전체 박스 선택 된 상태에서 plug in - unsplash 검색 후 이미지 넣기4. 전체 선택된 상태에서 ctrl + c, ctrl + v5. 복사된 요소들 모두 선택 후 ctrl + alt + G6. 프레임 크기 1440px , Clip content 체크해보기7. Frame2 복사 후 8. Frame3 의 Frame1 선택 후 같은 이미지가 보일 수 있도록 정렬(clip content 체크 해제후 하면 다 보여요)(복제된 요소의 첫번째 카드를 시작지점으로 이동하여 첫번째 원래 카드와 동일한 위치에 있도록 배치) 9. 두개의 Frame (Frame2, ..

🧩 컴포넌트(Component)란?정의: 반복적으로 사용할 수 있는 기본 설계 원본입니다.예시: 버튼, 아이콘, 카드, 헤더 등특징:수정하면 연결된 모든 인스턴스에 자동 반영됨디자인 시스템의 재사용성과 일관성 유지에 핵심 역할💡 예: "Primary Button" 컴포넌트를 만들고, 여러 곳에 복제해서 사용하면 스타일이 한 번에 바뀜🧱 인스턴스(Instance)란?정의: 컴포넌트를 복제한 개별 객체특징:기본 속성은 컴포넌트를 따름일부 속성은 오버라이드(Override) 가능 (예: 텍스트 변경, 색상 변경 등)원본 컴포넌트가 수정되면, 인스턴스도 자동 업데이트됨💡 예: 버튼의 텍스트만 다르게 바꾸고 싶을 때, 인스턴스에서 텍스트만 변경하면 됨🔄 컴포넌트 ↔ 인스턴스 관계항목컴포넌트 (Compon..

베리어블 등록같은 유형의 베리어블은 복사하여 사용한다 shift + ctrl + enter전체 선택후 ctrl + alt + kt 선택후 placeholder 입력하기auto layout ( shift + a) 플러그인 화살표 검색 v 가져오고글자 선택후 fill container.화살표 회전시키기position absolute 클릭방향키로 이동하여 왼쪽 맞추고프레임선택해서 아래로 드래그해서 내용 모두 보이게   테스트f 누르고 iphone 13 mini 선택  메뉴 연결1. 글자 선택 2. interactions 선택3. + 선택 하여 set variable 4. 해당 메뉴 선택리스트를 누르면 접힌 형태로 바껴야 하므로인터렉션 복사선택 후 ctrl + v반복해당 메뉴로 바꾸기

f(프레임 만들기) - dasktop - 1440*1024 그리드 설정하기count 설정 - 화살표 클릭margin 설정gutter도 같은 방식으로 설정layout 에 width 설정연결 끝

width 가로크기height 세로크기gap 섹션사이 간격padding 안쪽 여백corder radius 모서리 둥글게sections -사각 형태 equal row widths -섹션마다 가로 폭 동일하게expand center section create bento 누르면 아래 화면 나온다. 크기를 다르게 7개를 설정함. 최상위 프레임 선택하고 화면 줄여보면 3개의 auto layout 선택후 h - hug contents 로 바꾸기가로는 고정하고 세로는 화면 사이즈가 줄어들경우 높이가 변경되게 하면 작업하기 편하다.

https://www.figma.com/education/

grid 클릭하여 columns 선택 양쪽 여백없어서 답답 가로줄 높이에 따라서 다르므로 count 에 auto type -위에서부터 top height 에는 27 또는 1 gutter 27 그리드에 맞춰서 자동으로 사이즈 조절되게 만들기 row grid layout grid + click 그리드에 맞춰서 사각형을 그리고 alt + drag 복사 이전 작업 반복 ctrl + d frame 사이즈 위아래 늘리거나, 줄여보기 그리드 위에 그리드 넣기

1. 글자 입력 2. AUTO LAYOUT (SHIFT + A) 3. PADDING 조절 4. 배경색 넣기 모서리 둥글게(선택) 5. 컴포넌트 등록 (CTRL + ALT + K) 6. ASSET 에서 드래그 더블 클릭후 내용 수정해보기

사각형 그리기 모서리 둥글게 원을 클릭해서 드래그 또는 오른쪽에서 가능 둥글기 정도 (수치)를 각각 다르게 넣고싶다면? alt 누르고 드래그 또는 오른쪽에 independent corners 클릭 corner radius 에서 각각 입력 오각형 변신 사각형 더블클릭 펜툴로 원하는 부분 클릭 드래그 추가한 앵커 둥글게 원 그리기 변형 원 더블 클릭 펜 선택 원하는 부분 클릭, 펜이 자꾸 따라다니면 ctrl + 아무것도 없는 부분 클릭 화살표로 드래그 한쪽만 움직이고 싶다면 alt + drag 끝나면 done 클릭 도형 합치기 작은 원 그리기 원 복사 작은원 선택 alt + shift (같은 라인으로)+ drag 원 모두 합치기 원을 모두 선택 (전체 드래그) 위에 사각형 두개 있는거 클릭 union sel..

frame 두개 만들기 오른쪽 햄버거 메뉴 클릭시 왼쪽 menu 화면 slide 되는 화면 구현 예정 프로토타입 https://www.figma.com/file/JaCqhSD9CVRrvuJ6Yc0XB6/Untitled?type=design&node-id=4%3A105&mode=dev&t=jKg2WyDpLOgpLAWW-1