funfunweb

베리어블 등록같은 유형의 베리어블은 복사하여 사용한다 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

1. 2. 3. 사각형 툴로 1200*400 그리기 이전 작업 반복 (ctrl + d) 4.main 에 stroke 주기 5. main 사각형 ctrl + c, ctrl + v shift 키 누르고 사각형 줄이기 또는 287*123 간격 19 6. 이름 변경 7. 사진 넣기 이미지 위치 조절은 fill - image - crop 선택하고 이동 8. 양쪽 화살표 만들기 r 사각형 툴 선택 플러그인 iconfy 없으면. 있으면 9. 첫번째 작은 사진 과 큰사진 일치시키기 10. 전체 사진 선택 component (ctrl + alt + k) 11. 컴포넌트 이름 변경 12. 더블클릭하여 이미지 바꾼다. 13. 프로토타입 화살표 2번 instance 3instance 4 instance https://www...

1. 별 그리기 2. COMPONENT만들기 3. 색상 바꾸기 1. 더블 클릭 2. 색상 바꾸기 3. PROPERTIES 에서 이름 바꾸기 1 부분 선택 후 이름 바꾸기 (생략 가능) 이름 바꾸기(생략 가능) INSTANCE 가져오기 별 다섯개 선택후 SHIFT + A 간격 조정 컴포넌트 등록 ADD VARIANT 6개 만들기 TEST 우클릭 클릭해보세요 https://www.figma.com/file/NOAsBo3GwXX85jcgPdYUK1/Untitled?type=design&node-id=1%3A125&mode=dev&t=nJCOlreWC0WHRrOa-1