🔖 2021년 6월 1주 TOP3

🔖 2021년 6월 1주 TOP3

1. 피그마의 A to Z : 팁과 요령!

2. 버튼에 대한 완벽한 R값 선택

3. UI 그리드 모범 사례

피그마의 A to Z : 팁과 요령!

이 튜토리얼에서는 Figma를 사용하는 방법에 대한 몇 가지 빠른 팁과 트릭들을 소개합니다! A부터 Z까지 26가지의 피그마 특징과 팁, 트릭들을 살펴보도록 할게요. Figma를 다운로드하고 본론으로 들어갈게요.

학습 내용들은 다음과 같습니다.

•  Figma에서 프로토 타이핑하는 방법
•  Figma에서 애니메이션을 만드는 방법
•  Figma에서 컴포넌트로 작업하는 방법
•  Figma에서 그리드를 사용하는 방법
•  Figma 단축키로 작업하는 방법

 'A'는 오토 레이아웃입니다.
Figma의 오토 레이아웃 기능을 사용하면 콘텐츠에 맞게 동적인 프레임을 적용할 수 있습니다. 이 놀라운 기능을 사용하여 텍스트에 따라 크기가 조정되는 버튼을 만들거나, 쉽게 재정렬할 수 있는 요소 목록 또는 열을 만들거나, 다른 오토 레이아웃 프레임 안에 오토 레이아웃 프레임을 중첩시킬 수도 있습니다.

Figma 오토 레이아웃에 대해 자세히 알아보고 무언가를 디자인하고 싶으신가요? 이 'Figma 오토 레이아웃으로 쇼핑 카트 디자인 만들기' 튜토리얼(*원문 링크 참고)을 보면서 오토 레이아웃 작업을 연습하여 전자 상거래 카트 디자인을 만들어보세요.

'B'는 블러입니다.
블러(Blur)는 Figma에서 개체에 적용할 수 있는 효과입니다. 오른쪽 사이드 바에서 적용할 수 있는 두 가지 유형의 블러 효과로는 레이어 블러(Layer Blur)와 백그라운드 블러(Background Blur)가 있습니다.

레이어 블러는 전형적인 블러 유형이며, 백그라운드 블러는 디자인의 특정 부분을 흐리게 하는 데 사용할 수 있습니다.

'C'는 컴포넌트입니다.
컴포넌트(Components = *구성 요소)는 Figma 디자인에서 쉽게 재사용 가능한 디자인 요소입니다. Figma 아이콘 및 다른 유형의 계층 또는 개체를 컴포넌트로 저장할 수 있습니다.

일단 저장이 되면, 해당 디자인은 주 컴포넌트가 됩니다. 이 기본 컴포넌트의 복사본을 '인스턴스'라고 합니다. 즉, 주 컴포넌트를 편집하면 나머지 인스턴스들도 동시에 수정이 됩니다.

컴포넌트는 Figma 디자인 시스템의 필수 영역입니다. 사진의 iPad 게임 UI(*원문 이미지 참고)를 만들 때, 강력한 Figma 컴포넌트에 대해 자세히 알아보려면 이 튜토리얼(*원문 링크 참고)을 참고하세요.

'D'는 디자인 탭입니다.
오른쪽 사이드바의 디자인 탭을 통해 선택한 객체의 설정을 디자인 화면에서 보거나 편집 또는 제거할 수 있습니다.

아무것도 선택하지 않으면 배경 설정을 조정하거나, 열려 있는 문서에 대해 저장된 스타일들을 살펴볼 수 있습니다.

'E'는 에디트 모드입니다.
편집 모드를 사용하면 벡터 모양에서 개별 점과 선의 속성을 추가하거나, 선택 또는 조정할 수 있습니다.

편집할 모양을 선택하고 도구 모음에서 개체 편집 버튼을 클릭하거나 Enter 키를 눌러 편집 모드로 전환하세요. 도구 모음의 도구를 사용하여 경로를 조정하고 완료되면 도구 모음에서 Enter 또는 완료 버튼을 누릅니다.

.
. 
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

버튼에 대한 완벽한 R값 선택

전반적인 인터페이스 느낌에 큰 영향을 미칩니다.

디자이너들은 항상 프로젝트를 위해 최고의 디자인을 결정하려고 노력하고 있습니다. 아무리 사소한 결정이라도 모든 결정은 전체 디자인에 영향을 미치게 되죠. 버튼은 모든 프로젝트의 핵심 부분입니다. 이들은 영업 활용을 의미하며, 페이지에서 수행되는 모든 작업에 대한 책임이 있습니다. 그러므로, 버튼을 잘 생각하는 것이 중요합니다.

UI에 대한 이해가 발전함에 따라 우리는 날카로운 모서리의 버튼에서 둥근 모서리 형태로 꾸준히 변화해 오고 있습니다.

둥근 모서리의 버튼은 현재의 감성에 더욱 미적으로 매력적입니다. 이 버튼들은 현대적으로 보이며 낙관주의를 의미합니다.

0px Radius :이 옵션은 고전적이며 주로 진지하고 전문적인 인터페이스 느낌을 표현합니다. 이 라운딩과 일치한다는 것은 깨끗한 구성 요소, 날카로운 기하학적 정렬 및 모든 구성 요소의 균형을 의미합니다.

장점 :
•  전문적인 느낌
•  깨끗하게 보임
•  조직화 및 구조화

단점 :
•  전통적인 느낌
•  기업 느낌
•  내성적인 느낌

 3 ~ 4px Radius : 이 방법은 최선의 방법으로써 아마도 가장 안전한 선택일 것입니다. 3-4px는 여러 분야에 걸쳐 표준의 모든 지점에 있으며, 0px보다 조금 더 친숙하고 수용력이 있습니다.

라운드 버튼은 또한 중첩 옵션을 표시하는 데 좋은 옵션은 아닙니다. 이는 클릭 영역을 제한하고 클릭을 어렵게 만들기 때문입니다. 따라서 중첩 옵션을 표시할 때는 세미-라운드 버튼을 사용하는 것이 가장 좋습니다.

장점 :
•  친근한 느낌
•  전문적인 느낌 
•  더 나은 모습

단점:
•  보수적인 느낌
•  혁신적이지 않음

.  
.
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

UI 그리드 모범 사례

레이아웃 그리드 팁과 요령으로 더 나은 디자인을 만드세요.

도입부
여백(공간)과 그리드 모든 디자인의 기초가 됩니다. 올바르게 마스터하고 사용하면 그리드를 통해 디자인에 대한 견고하고 시각적으로 매력적인 솔루션을 만들 수 있습니다.
 따라서 저는 UI 디자인에서 그리드를 마스터하기 위한 팁을 공유하고자 합니다.  이 에피소드에서는 레이아웃 그리드에 대해 설명합니다. 시작하겠습니다. ✌️

그리드란 무엇입니까?
그리드는 모든 인터페이스의 기초를 확립하는 데 도움이 됩니다. 레이아웃에 대한 프레임워크라고 생각할 수 있습니다. UI 요소를 구성하고, 독자를 안내하며, 디자인의 개별 부분을 식별하는 데 도움이 되는 프레임 워크입니다.

Terminology (전문 용어)
 그리드는 그리드 단위로 구성됩니다. 레이아웃은 그리드에 배치되고 특정 양의 열이 있습니다. 열에는 왼쪽과 오른쪽에 여백이 있으며 각 열 사이에 패딩이 있습니다.

 팁 1 — 현명한 숫자 선택
 12열 부트 스트랩 유사 그리드가 가장 널리 사용되는 선택이지만 필수 사항은 아닙니다. 그리드를 선택할 때 디자인에 진정으로 필요한 여러 열이 있는 그리드를 선택하세요.

 팁 2-제약 사항 파악
 항상 디자인중인 화면을 고려하세요. 다른 사람이 어떻게 처리하고 운영하는지 알고 있어야합니다. 이러한 제한 사항을 유리하게 활용하고 이를 활용하여 디자인하는 방법을 배우세요.

가장 일반적인 화면 해상도 (px)
• 데스크톱 : 1440x1024
• 태블릿 : 768x1024
• 모바일 : 320x640

항상 디자인하는 화면을 고려하십시오. 다른 사람이 어떻게 처리하고 운영하는지 파악합니다. 이러한 제한 사항을 유리하게 활용하고 이 제한 사항을 사용하여 설계하는 방법을 배우십시오.
자신의 제약 사항을 파악합니다.

가장 일반적인 화면 해상도(px)
• 데스크톱: 1440x1024
• 태블릿: 768x1024
• 모바일: 320x640

 팁 3 — 수평과 수직 간격
 레이아웃을 더욱 매력적이고 일관되게 만들려면 수직 및과 수평 간격을 모두 고려하세요.

 팁 4 — 수직 리듬 형성
 기준선 그리드를 사용하여 콘텐츠를 정렬하고 텍스트와 레이아웃 요소에 시각적 일관성을 가져옵니다.

 보너스 팁 — 기본 그리드와 일치하도록 글꼴 선 높이를 조정합니다.
 예) 기준선 / 그리드 단위로 4px를 선택한 경우 텍스트를 정렬하려면 글꼴의 줄 높이를 단위의 배수로 설정해야 합니다. 즉, 선 높이는 4, 12, 32,  64 여야 합니다.
.
. 
👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (2,070명)

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램