피그마

페이지 정보

profile_image
작성자큐센 조회 16회 작성일 2021-08-06 22:34:55 댓글 0

본문

피그마 기초 3 - 컴포넌트 & Variants 기능 #버튼컴포넌트 #디자인시스템

피그마 기초 - 컴포넌트의 개념 - https://designer-story.tistory.com/m/18
00:00 intro

*컴포넌트 기능
00:58 버튼 컴포넌트 생성하기
01:36 메인 컴포넌트와 인스턴스 구분하는 방법
02:25 인스턴스의 옵션 살펴보기
04:34 인스턴스의 Text Override 기능
06:10 Detach Instance(인스턴스를 메인 컴포넌트와의 연결을 해제하는 방법)
10:54 Create multiple components(여러개의 UI Asset을 한꺼번에 컴포넌트로 변환하는 방법)

*컴포넌트 Swap 기능
02:35 아이콘 인스턴스를 Design 패널에 있는 다른 아이콘으로 변경 하는 방법
03:41 아이콘 인스턴스를 Assets 패널에 있는 다른 아이콘으로 변경 하는 방법

* Variants 기능이란? 베리에이션 된 컴포넌트들을 하나의 컴포넌트로 합치는 방법
09:12 Variants 기능
11:09 컴포넌트 합치기(Combine as Variants)
12:04 신규 속성 추가(Add new property)
12:51 버튼에 아이콘이 있을 경우 Variant 값 정의 1(yes, on, true)
13:11 버튼에 아이콘이 없을 경우Variant 값 정의 2(no, off, false)
13:58 버튼의 상태 속성(pressed) 추가하기
16:00 Secondary 버튼 Type 추가하기
17:09 Design 패널에서 버튼 컴포넌트 최종 결과물 확인하기
17:34 Inspect 패널에서 버튼 컴포넌트 최종 결과물 확인하기
17:52 다음편 예고

피그마 기초 2 - 오토 레이아웃 기능 #버튼컴포넌트 #반응형UI

Figma로 반응형 버튼 컴포넌트 제작 Part 2
00:00 Intro
00:48 피그마에서 Page 단위로 에셋 관리하는 사례
01:44 피그마 파일에 Page 추가하고 순서 변경하기
02:39 Auto Layout 단축키: Shift + A
02:50 단축키 option 키를 활용하여 객체간의 여백 사이즈 확인하기
03:03 Auto Layout기능 버튼 여백 조정하는 방법
04:10 Layer 패널 Layer의 이름 변경하는 단축키 : command + R
04:19 Auto Layout기능 텍스트를 오른쪽 방향으로 복제하는 방법
05:04 Auto Layout 기능 정렬을 수평 방향에서 수직으로 변경하는 방법
05:33 Auto Layout 기능 frame 안쪽의 객체들의 간격을 조정하는 방법
05:54 버튼의 양끝 모서리 값 Corner Radius 값을 50%로 조정하는 방법
06:26 Auto Layout 기능 Alignment and Padding 기능으로 여백 및 정렬 수정하는 방법
06:56 Auto Layout 기능 Alignment and Padding 기능 Space Between
07:38 Mac에서 사용 가능한 이모티콘 폰트 추가 단축키 : control + Command + Space Bar
09:19 figma의 Selection Colors 기능 : 선택한 객체에 사용된 색상들을 일괄 수정하는 방법
10:00 Auto Layout 기능 frame 안쪽의 객체들의 순서를 조정하는 방법
10:44 Auto Layout 기능이 적용이 되지 않는 경우 해결 방법
11:52 객체 높이에 영향을 덜 받는 짝수 높이 Button 만들기

출처: https://designer-story.tistory.com/45 연정's figma

피그마 기초 1 - Create Style 기능 #버튼컴포넌트 #Local스타일

Figma로 버튼 컴포넌트 제작 Part 1
* 두 번 이상 사용되는 텍스트 및 컬러 스타일에 대해 Local Style로 변환하여 재사용합니다.
* Rename 기능과 Plugin Styler를 활용하여 Local Style로 빠르게 반영할 수 있습니다.

2021년 피그마 기초 - Part1 영상
00:00 인트로
02:19 Button 텍스트 Local Style 생성하기
04:20 figma Plugin을 활용하여 Local Style 생성하기 - Styler
04:38 Rename 기능으로 Layer의 이름을 빠르게 수정하기

... 

#피그마

댓글목록

등록된 댓글이 없습니다.

전체 3,511건 1 페이지
게시물 검색
Copyright © www.sevencolor.kr. All rights reserved.  Contact : help@oxmail.xyz