# figma

tngus4334

피그마 프로토타입 1. 피그마 프로토타이핑 기능 피그마의 프로토타입 기능의 주목적은 우리가 만든 디자인 화면들에 흐름(연결)을 만들어서 실제 사용자의 전체적인 사용 경험을 미리 볼 수 있도록 하는 것이다. 2. 피그마 프로토타이핑 기능으로 애니메이션 만들기 피그마에는

tngus4334

컴포넌트란?피그마에서 앱 설계 및 디자인 전반에서 버튼, 카드, 아이콘 등의 모든 디자인 요소를 일관되고 효과적으로 관리하는 기능✅ 컴포넌트 만드는 방법1) 컴포넌트를 만들고 싶은 요소 선택2) 상단의 컴포넌트 만들기 버튼 클릭3) 오리지널 컴포넌트를 복사+붙여넣기✅

tngus4334

피그마로 배달의 민족 메인화면 만들기 1. 배달의 민족 메인화면 구조 살펴보기 스마트폰이 나오기 시작했을 때부터 엄지존(Thumb Zone) 이라는 UX 이론이 있었다. 엄지가 터치하기 쉬운 영역에 가장 중요한 버튼을 위치한다는 의미다. 옛날에는 스마트폰 화면도 매

tngus4334

피그마로 Splash화면 만들기 Splash 화면이란? 앱이 시작되면 처음으로 나오는 화면 >✅ 다른 사람이 공유한 프로젝트 내 것으로 만들기 1) 링크에 접속하면 아래와 같이 View only 화면이 뜹니다. View only 파일은 오직 프로젝트 소유자만 edit

jakesjkk

test1

tngus4334

피그마 시작하기 피그마 편집 기능 살펴보기 ✅ Add a comment 코멘트를 남기는 기능 ✅ Hand Tool 화면을 드래그해서 이동할 수 있다. 다른 Tool이 사용 중인 경우 Space 키를 누르고 있으면 Hand tool이 유지된다. ✅ Text 텍스트를

rayong

컬러 시스템을 만들어주는 플러그인. 이런 게 있을 법한테 지금까지 몰랐다. 다른 사이트에서 컬러 베리에이션을 하고 가져와서 하나씩 입력을 했다. Tailwind Color Generator 는 선택한 색상을 500으로 두고 100 ~ 900 까지 색상을 베리에이션해서

tngus4334

프로토타이핑 시작하기 1. 프로토타이핑이란? > 프로토타이핑 : 동사형으로 제품의 초기 모형을 만든다라는 뜻 프로토타입 : 테스트를 목적으로 제작하는 모형 제품 ➡ 프로토타입이라는 것을 통해서 우리의 새로운 서비스를 검증해볼 수 있다 ! 2. 프로토타이핑이 필요한 이

tngus4334

와이어프레임 작성하기

tngus4334

UI/UX의 의미 UI(User Interface) : 사용자 인터페이스 UX(User Experience) : 사용자 경험 UI 디자이너의 업무 버튼, 폰트, 색, 아이콘, 레이아웃같은 시각적 요소 제작 및 배치 (프로토타이핑) 제품의 기능을 효과적, 직관적으로

tnstjd120

이전의 포스팅에서는 MySQL 적용하고 Workbench에 연동하는 것 까지 구현을 진행 했었다.그 이후 CardLog 기획대로 디자인 작업을 시작했다.아무것도 없이 기획만 가지고 디자인을 해보려니 생각보다 아이디어가 안 떠올랐다...그래서 일단 다른 사람들의 디자인이

recorror

Figma auto layout 기능에 대한 예찬론개체를 선택한 후 shift+A를 입력하는 것으로 사용할 수 있다.우측 클릭 후 Add auto layout 버튼을 누르는 것으로도 사용할 수 있다. 사용하게 되면 그룹이나 프레임으로 감싸진 것처럼 auto layout

yoonmallang

🎨 CSS 변수, 함수 -- 전역 CSS 변수를 선언할 수 있다(:root 선택자 사용) 하이픈 2개 -- 다음 속성 이름을 적어주고 콜론 : 뒤에 속성값을 적는다 var() CSS 변수값으로 지정할 수 있다 함수에 전달하는 첫번째 인자는 가져올 사용자 지정 속성

hamcoding9

오늘은 파이썬 스크립트를 사용해 figma에서 안드로이드 해상도별 이미지 추출을 반자동화해보겠습니다.

sssseo_yun

Frame 단위로 쪼개면 수정하기 불편하다

cu1210

Constraint object에 제약을 줘서 여러 상황에 맞게 유연하게 object가 대응될 수 있도록 하는 기능 다양한 해상도의 디바이스에 요소들이 대응되게 할 수 있다. 그림과 같이 축이 표시된다. (파란색 점선) 프레임의 사이즈를 조정할 때 축에 따라서 오브

h_hee

_'인프런'으로부터 강의를 제공받아 작성한 후기입니다._ <br> 기업형 연합 IT 동아리 YAPP 21기에서 운영진으로서 활동을 진행하며 피그마 스터디에도 참여하게 되었다. 지난 20기 활동에서도 강의를 지원받아서 책을 완독하는 스터디에 참여했는데, 이번 기수에서는

rayong

오토레이아웃이 다른 요소를 추가하고 싶다면, 해당 요소를 클릭 드래그 해서 넣을 수 있다. 다만 오토레이아웃의 중첩이 많을 때는 불편할 때가 있다.이렇게 아이콘 우측에 빨간 점을 넣고 싶을 때, 화면을 확대해서 넣으면 괜찮지만, 그냥 넣으려고 하면 해당 영역이 잘 잡히

cu1210

1\. 정돈된 디자인2\. 반응형 디자인 : 하나의 디자인을 여러 디바이스에 적용 가능3\. 개발자와의 원활한 커뮤니케이션Max Width : 보여지는 디바이스 화면의 가로 전체 길이Container : 화면 상에 컨텐츠가 담기는 영역의 가로 길이Gutter : Col

cu1210

1\. 명확한 의미 전달일단 제작 후 사용자 테스트업계에서 활용되는 디자인 참고하기 ex) Material Design, IOS Guideline2\. 일관된 스타일아이콘의 두께, 채우기, 사이즈에 대해 일관성이 있어야 한다.1\. Shape2\. Boolean3\.