2024.08.07 - Figma(특강)

Figma 학생모드 적용 방법 - https://www.youtube.com/watch?v=kWLfWPhxYIQ&t=45s

위 상태로 보여지면 학생용으로 유료버전을 무료료 사용 할 수있다

.

UI3버전 패치 - https://chromewebstore.google.com/detail/enable-ui3-beta-for-figma/gdjldebhilhckhblmhklofdebemiahhihttps://chromewebstore.google.com/detail/enable-ui3-beta-for-figma/gdjldebhilhckhblmhklofdebemiahhi

 

 

 

---

이 도구를사용하여 엘리먼트를 만들줄알아야한다.

디자인과 아트는 다른 의미

 

vscode 처럼 단축키를 숙달하자 ex) .content -> <div class="content"> , ul>li*3 처럼

 

■ 단축키

* 화면넓게보기

  1.컨트롤+쉬프트+\  

  2. 컨트롤+\

* 스포이드 = I

아웃라인 뷰 = 컨트롤+쉬프트+o

 

 

 

 

 

 

도형 생성하면 네모로 핸들표시 

FILL 상태이기에 show outlines하면 아웃라인 볼수있다. 

(단축키 - 컨트롤+쉬프트+o)

 

왼쪽 패널과 오른쪽 패널의 구조 레이아웃 트리구조 즉 부모 자녀가 존재

 

직관적인 이름을 잘 지어야한다. (레이블)

상위개념 - page 하위개념 - 레이아웃

 

 

◆ 로고 아이콘 만들기

 

widh height 속성은너비와 개념이 다르다 글을 읽는 흐름처럼 나라문화마다 다르다.

https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size

 

디자인에서 width의 소수점은  웹에서 보는것이기에

각기 다른 웹 프로그램에서(크롬,폭스등등) 브라우저마다 미세한 차이가있다. 

대부분 짝수로 끝나는 수로 적용한다.

 

레이아웃 크기 조정할때 계산함수를 사용 할 수있다.

 

원하는 형태의 도형을 만들 수있다.

도형 디자인을 여러 방법으로 구성해보자

 

 

데브모드를 사용하면 코드를 볼수있다.

하지만 유료

 

 

단축키 쉬프트+R로 룰러를 만들어 도형을 만들때 조절 가능하다.

원형의 Arc와 Ratio를 사용하여 가운데 구멍을 뚫을 수 있다.

 

 

stock설정과 acr 설정 차이점 두께도 차이가 있다.

 

 

도형 그룹화

또는 유니온 설정

 

 

 

 

■ 이미지

이미지는 드로그앤 드롭 및 툴바에서 선택해서 불러올수있다.

 

이미지를 크게 작게 조절해보면css처럼 background:cover 가 적용되어있다.

 

FILL 옵션 - 주로 밝기나 어두움 표시등 조절한다

 

Crop 옵션 - 이미지를 크게 줄이게 해도 이미지가 유지가 된다. (cover와 정반대)

 

Tile은 reapet 반복

이미지의 그라데이션

 

이미지 테두리 설정

 

펜을 사용하여 특정한 곳 fill 주어서 꾸미기

 

 

 

 

■ 텍스트

텍스트 생성 및 폰트 설정

 

텍스트와 이미지 마스킹 설정

 

 

텍스트의 간격 권장

 

텍스트의 effects - 그림자 설정

 

사진 스와핑(교체)

 

박스 하나 생성하여 백스라운드 블러 설정 및 fill 조절 하여 텍스트 꾸밈

 

 

■플러그인

 

■ pick color

스포이드를 사용하여 이미지의 색 구성

 

 

 

■ 정렬

art + w -> shift + a

 

 

■ 레이아웃 프레임

 

각 버튼의 어떤 구성을 가지고있는지를 그룹화한 상태로 프레임을 만든다. 

각 전자기기 환경에따라 프레임을 만들 수 있다.

 

이 상태로 레이아웃등 완성하면 디자이너가 개발완료로 적용한다. 개발자는 그걸보고 완성본이라 판단 후 작업한다

 

그룹은 묶어주기만하는데 프레임은 오토 레이아웃을 사용 할 수 있다.

 

 

 

레이아웃의 포지션에서 constrains를 중앙으로 적용하면 박스를 늘려도 텍스트와 같이 따라온다. 박스 수정할때 용이함

 

 

오토 레이아웃 hug로 적용하면 컨텐츠가 늘어나도 박스와 함께 유지되면서 늘어난다.

 

clip content 사용하면 레이아웃의 튀어나온 요소들을 가려줄수있다.

 

 

■ 제약조건

모바일 화면 상단바와 하단바 쉬프트+a 눌러서 프레임 지정하고 포지션에 상단하고 좌우, 하단하고 좌우 하면 반응형처럼 잘 늘어남

 

 

■ 레이아웃 그리드

 

https://brunch.co.kr/@artneighbor/75

 

단축기 쉬프트+G

 

 

■ 오토 레이아웃

fill 사용하여 복붙 왔다갔다 하는게 귀찮기도하고 순서 바꾸라할떄 문제생긴다. 그럴떄 오토 레이아웃 사용

 

4개 선택하고 쉬프트+ A

 

오토 레이아웃으로 전체적으로 손쉽게 바꿀수있다

 

 

 

■ 컴포넌트

컴포넌트 지정은 아웃라임뷰로볼떄 보라색이 컴포넌트 이며

레이어잡고 컴포넌트 클릭한다.

---

 

 

중요도: 프레임>>>섹션>>>>>>>>>>>>>그룹

피그마와 리엑트는 연관성이 깊다.