Figma에 적용 할 기본 내용
- 폰트 크기 정하기(기본 16px? 14px? 12px?)
- 색상 규칙 만들기(컬러 팔레트 설정, 정해진 컬러를 사용하기)
- 레이아웃 설정(group, auto layout으로 css flex 구성 만들기)
- 컴포넌트화(React처럼 하나의 컴포넌트를 만들고, 컴포넌트의 원형 수정시 모든 복사된 내용에 반영되도록 합니다. 일일히 수정할 필요가 없기 때문에 매우 편합니다.)
디자인에 감각이 없는 나! Figma로 어떤 걸 해볼 수 있을까?
일관된 디자인을 구성하기 위한 최소한의 숙지 사항
디자인에 감각이 없는 나! Figma로 어떤 걸 해볼 수 있을까?
디자인을 담당 해주실 분이 없다면 '누군가'가 와이어프레임을 설계해야 할 때가 있습니다.
바로바로 지금!
"디자인에 소질이 없습니다"
"디자인은 하고싶지 않아요"
"제겐 너무 어려워요"
자신이 없고, 예쁘지 않을 것이라는 생각에 주저하게 되는 경우가 있는데
다들 어려워하셔서 담당할 사람이 없다면, 시도해보시는 것도 좋은 경험이 될거에요.
웹페이지를 정돈하면, 일관된 느낌을 전달할 수 있어요!
가장 단순한 예를 들어보면,
팀원들이 각자 담당한 페이지가 있다면 제목 및 본문 폰트 크기, 아이콘 색상, 패딩 또는 마진 값 등을 각각 다르게 설정하는 경우가 있습니다. 그런 부분들만 정돈해주더라도 페이지간의 어색함을 크게 줄일 수 있을거에요.
일관된 디자인을 구성하기 위한 최소한의 숙지 사항
1. 폰트 크기 정하기
2. 색상 규칙 만들기
3. 레이아웃 설정
- group (ctrl + G)
- auto layout (shift + A)
4. 컴포넌트화
폰트 크기 정하기
저는 16px을 기준으로 합니다.
제목 같은 경우 heading 요소를 사용해야 한다면 다른 사이트들을 참고하면서 사이즈를 비교해보시면 도움이 되실 거에요.
색상 규칙 만들기
컬러 팔레트를 만들어서, 명도를 조절하면 어떤 경우에 어떤 컬러값을 사용해야 할지 규칙을 정하기 쉬워요.
예를 들어, 아래 컬러를 보시면
■ ■ ■
좌측은 가장 진하고 우측으로 갈수록 밝아집니다.
그런 경우, 좌측의 색은 글자, 가운데 색은 아이콘, 우측 색은 보더색 등으로 기준을 맞추면 통일된 느낌을 줄 수 있을거에요
레이아웃 설정
장점: css의 Flex를 Figma에서 쓸 수 있다!
뭔가 복잡해보이지만, 각각의 의미를 파악하는데 크게 어렵진 않아요. css를 다뤄보셨다면 금방 적응하실 수 있습니다.
html 구조를 잡아서 css를 적용하는 것과 같다고 생각하시면 됩니다.
그룹으로 묶어서 관리하는 요소가 있고,
auto layout으로 만들어서 flex처럼 표현하실 수 있어요.
각 아이콘의 의미를 설명드릴게요.
↓ : flex direction : column
→ : flex direction : row
 |
 |
 |
 |
 |
| gap | 좌우 패딩 | 상하 패딩 | 상,하,좌,우 각 패딩값 설정 | 정렬 |
 |
 |
 |
| 요소 배경 색 | 요소 테두리 | 요소에 그림자 효과(box shadow) |
 |
Fixed: 고정된 width 길이. (예) 100px 등으로 지정합니다. Hug: width를 컨텐츠가 차지하는 너비만큼 자동으로 지정합니다. Fill: 요소를부모 요소의 너비에 꽉 차도록 자동으로 지정합니다. |
꿀팁!
 위의 상단 헤더에서, T 아이콘  |
T 아이콘을 통해 만든 요소라면, 요소의 테두리를 더블클릭 하면서 컨텐츠의 너비에 딱 맞도록 자동으로 width를 설정해줄 수 있습니다. |
| 요소 안에 요소 안에 요소 안에 요소를 클릭할 때 | ctrl + 좌클릭 한번에 해당요소를 클릭할 수 있어요 안쪽 요소를 활성화하기 위해 여러번 클릭해야 하는 수고를 덜어줍니다. |
| 요소의 한단계 바깥 요소를 활성화할 때 | shift + 엔터 |
| 요소 안에 넣고싶은데 넣어지지 않을 때 (예) 박스 안에 텍스트를 넣고 싶을 때 |
좌측 사이드바에서, 넣을 요소(텍스트)를 클릭 후 드래그해서 넣을 요소(박스)에 드롭해주세요 |
컴포넌트화
장점: 수정을 한번에!
보통 하나의 요소를 만들어 복사-붙여넣기를 하지만, 만약 디자인에 수정이 필요해서 모든 요소를 수정해야 한다면?
으아아아~
특히 그리드 또는 리스트로 동일한 요소를 여러개 사용하는 경우 또는 헤더의 네비게이션처럼 모든 페이지에서 갖고있는 경우
모든 경우를 수정하기 어렵거나 시간이 많이 소요되는 경우가 있어요.
이럴 때 리액트의 컴포넌트처럼, 하나의 원본 요소만 수정해도 모든 복제된 요소들도 동일하게 변경될 수 있도록 하는게 컴포넌트입니다.
컴포넌트화 하고싶은 요소를 우클릭하면 아래와 같은 컨텍스트 메뉴가 보이실 거에요.
여기서 Create component를 클릭하시면 해당 요소를 컴포넌트화 할 수 있습니다.
그리고 자유롭게 원본 컴포넌트를 복제해서 사용하시면 돼요
추가로 prototype을 만들어서 애니메이션 효과를 줄수도 있습니다.
기본적으로 이런 내용들이 있다는 것을 알아두시면 좋을 부분을 정리해보았습니다.
이처럼 디자이너가 아니더라도 충분히 정리할 수 있는 부분이 있어요.
프론트엔드에서 css를 다뤄본 분 이시라면 금방 익숙함을 느끼실 거에요!