multiking

베리언트(Variant)?피그마의 베리언트(Variant)는 디자인 시스템 내에서 하나의 컴포넌트에 여러 상태, 크기, 스타일 등을 정의하여 효율적으로 관리할 수 있도록 돕는 기능이다. 이를 통해 유사한 속성을 가진 다양한 컴포넌트를 하나의 그룹으로 관리할 수 있으며, 작업 속도를 높이고 일관성을 유지할 수 있다.베리언트의 주요 특징속성(Property): 각 베리언트는 속성을 기반으로 정의된다. 예를 들어, 버튼의 "크기", "상태", "컬러" 등의 속성을 설정할 수 있다.다양성: 베리언트를 사용하면 단일 컴포넌트에서 다양한 변형을 쉽게 선택하고 적용할 수 있다.컴포넌트 관리 효율성: 디자인 시스템을 더 체계적으로 구성할 수 있다.버튼 베리언트 속성SizeStateColorSmallDefaultPrim..

학습목표- iOS 디자인 원칙 이해 - iOS UI 구성 요소 및 패턴 익히기 iOS Human Interface Guidelines의 원칙과 세부 사항을 완전히 이해하고, 이를 기반으로 사용자 친화적이며 Apple의 디자인 철학에 부합하는 앱을 설계할 수 있게 된다. https://developer.apple.com/design/human-interface-guidelines/ Human Interface Guidelines | Apple Developer DocumentationThe HIG contains guidance and best practices that can help you design a great experience for any Apple platform.developer.appl..

학습목표 : 모바일 앱 UI 구조의 이해모바일 앱의 주요 UI 구조(탭 내비게이션, 드로어 내비게이션, 스택 내비게이션 등)를 학습하여 각각의 특징과 사용 사례를 이해한다.1. 태스크 기반의 스택 내비게이션(Stack Navigation)태스크 기반 화면 설계는 특정 작업(Task)을 중심으로 화면을 구성하는 방식이다. 이 설계 방식은 사용자가 앱에서 수행해야 할 특정 작업을 중심으로 UI를 구성하기 때문에, 일반적으로 아래의 구조에 속하거나 이들과 결합하여 사용된다.첫화면을 사용자가 원하는 기능 중심으로 직관적으로 보여줌화면을 사용자가 직접 실행할 수 있는 화면으로 구성1. 스택 내비게이션(Stack Navigation)태스크 기반 설계에서 자주 사용된다. 사용자가 단계별로 작업을 수행해야 하는 경우,..

학습목표- component와 에셋의 개념을 이해하고 활용 할 수 있다. Ctrl + C  & V 만 계속 할 수 없쟎아Component디자인에서 자주 반복되는 UI 요소를 일관되게 재사용할 수 있도록 만든 디자인 모듈을 말한다. 피그마에서 컴포넌트를 사용하면 디자인의 일관성을 유지하면서도 효율적으로 작업을 관리할 수 있다.컴포넌트의 특징과 장점재사용 가능:컴포넌트는 한 번 만들어 두면 다양한 화면이나 페이지에서 반복적으로 사용할 수 있다.예를 들어, 버튼, 카드, 헤더, 아이콘 등이 컴포넌트로 만들어지면 여러 곳에서 같은 스타일로 재사용할 수 있다.일관성 유지:컴포넌트를 사용하면 디자인 전체에 걸쳐 일관된 스타일과 구조를 유지할 수 있다.예를 들어, 버튼 컴포넌트를 업데이트하면 이 컴포넌트를 사용한 모..

콘스트레인트(Constraint)•어떤 오브젝트의 위칫값을 상하좌우에 ‘강제＇로 고정하는 기능콘스트레인트(Constraint) 부모 프레임의 크기를 조정할 때 객체가 어떻게 반응하는지 정의할 수 있습니다. 즉, 객체의 상대적 위치와 크기를 모두 제어할 수 있습니다.1. 제약 조건 (Constraints)제약 조건을 사용하면 부모 프레임의 크기가 조정될 때 객체가 어떻게 반응하는지 설정할 수 있다.객체의 상대적 위치와 크기를 제어하여 다양한 화면 크기에 대응할 수 있는 유연한 레이아웃을 구현할 수 있다.예를 들어, 특정 객체에 Center Constraint를 적용하면 부모 프레임이 크기를 조정해도 객체가 항상 중앙에 위치하게 된다.2. 레이아웃 그리드 (Layout Grid)레이아웃 그리드는 프레임 내 ..

레이아웃 흐름 : Direction세로: y축을 따라 개체를 추가, 제거 및 재정렬합니다. 예를 들어 목록 내의 개체, 뉴스 피드 또는 타임라인 내의 게시물 등이 있습니다.수평: x축을 따라 개체를 추가, 제거 및 재정렬합니다. 예: 버튼 행 또는 모바일 탐색 메뉴의 아이콘입니다.줄 바꿈: 프레임의 여러 행과 열로 개체를 정렬합니다. 개체는 가로로 흐르고 다음 줄로 줄 바꿈됩니다. 예: 사진 갤러리 또는 태그 집합.Canvas stacking order자동 레이아웃 프레임을 선택한 상태에서 오른쪽 패널에서 클릭하여 자동 레이아웃 설정을 엽니다. canvas stacking 옆에서 다음을 선택합니다.첫 번째: 스택의 첫 번째 레이어가 맨 위에 있습니다.마지막이 맨 위: 스택의 마지막 레이어가 맨 위에 있습..

Chapter03_피그마의 정렬과 레이아웃학습목표- 스마트 셀렉션을 이용하여 두 개 이상의 오브젝트를 선택하면 정렬과 간격을 쉽게 조절할 수 있다.- 오토 레이아웃을 통해 개체를 프레임 내에서 여러 행과 열로 자동 정렬할 수 있다.- 레이아웃 그리드의 개념을 이해하고 구성 할 수 있다.- 콘스트레인트의 이해하고 반응형 레이아웃을 구성 해 본다. 1. 스마트 셀렉션두 개 이상의 오브젝트를 선택하면 정렬과 간격을 쉽게 조절할 수 있다.자주색 간격 조절선을 클릭 앤 드래그하여 간격을 조정할 수 있으며, 원형 핸들을 선택해 위치를 빠르게 변경할 수 있다.Alt + 클릭을 통해 간격을 확인할 수 있다.2. 오토 레이아웃 (Auto Layout)오토 레이아웃을 통해 개체를 프레임 내에서 여러 행과 열로 자동 정렬할..

주제 : 프레임, 레이아웃 그리드, 도형, 구성 요소이 프로젝트에서는 Figma Design에서 재사용 가능한 24 x 24 아이콘 그리드를 만들 것입니다. 아이콘 그리드는 아이콘 디자인에 대한 일관된 지침을 제공하는 준비된 프레임입니다.  아이콘은 일반적으로 집합에 존재하기 때문에 한 아이콘에서 다른 아이콘으로 시각적 일관성을 유지하는 것이 중요합니다. 아이콘 그리드 사용에 대한 자세한 내용은 Material Design의 시스템 아이콘을 확인하세요.아이콘 그리드를 구축하려면 다음을 수행합니다.프레임 만들기레이아웃 그리드를 사용하도록 설정합니다직교선을 그린다키 셰이프 추가아이콘 그리드를 구성 요소로 변환완료되면 최종 레이아웃 그리드에는 아이콘 디자인을 위한 20 x 20 픽셀의 안전 영역과 2픽셀 너비..

주제 : 기본도형툴, 펜, 텍스트 활용일러스트 만들기원 툴로 얼굴 그리기눈을 그리고 > 그룹화 > 레이어 이름 변경xpr모든 모양을 선택 > 그룹화 > 레이어 이름을 얼굴로 설정펜툴을 활용하여 단풍을 그려보자얼굴과 단풍의 위치를 정렬얼굴과 단풍을 선택 후 > 프레임 셀렉션 (Ctrl + alt + G) > 프레임명을 일러스트로 변경 텍스트 작성위와 같이 텍스트를 작성하자.subtitle 작성2 텍스트를 선택하고 프레임 셀렉션 > 프레임명 변경배너 프레임 만들기2개의 프레임 : 일러스트와 텍스트를 선택프레임 셀렉션으로 배너 프레임 생성auto layout 생성 : 사이드바 상단 메뉴 클릭 또는 shift + A전체크기 : 678 * 320Direction : 수평gap : autoalignment : ce..

학습목표- 피그마에서 색상, 텍스트, 효과 등의 스타일을 설정하는 방법을 이해한다.- 스타일 라이브러리 생성 및 관리하기디자인 시스템 구축을 위해 스타일 라이브러리를 생성하고 관리하는 방법을 학습한다.- 스타일 라이브러리를 통해 디자인 요소를 통합하고, 팀 내 공유 및 협업의 효율성을 높이는 방법을 이해한다.라이브러리피그마에서 라이브러리는 여러 파일과 프로젝트에서 재사용할 수 있는 디자인 자산을 모아놓은 것이다. 라이브러리는 구성요소, 스타일, 변수와 같은 디자인 요소들을 포함하며, 이를 통해 디자인의 일관성과 효율성을 유지할 수 있다. 주요 내용은 다음과 같다.1. 라이브러리 구성요소구성요소(Component): 버튼, 아이콘, UI의 일부 등으로, 라이브러리에서 정의된 구성요소는 여러 파일에서 일관되..