피그마3 config 2023 variables 디자인 변수 종류, 생성, 관리하기(number/color) 피그마의 디자인 변수는 모든 종류의 디자인 속성(채우기 색상, 패딩 등)과 프로토타이핑 작업에 적용할 수 있는 재사용 값을 저장한다. 변수는 스타일 및 구성 요소와 마찬가지로 팀 라이브러리에 게시할 수 있다. 피그마 변수의 종류 변수는 아래의 4가지 종류로 나눌 수 있다 변수 타입 유형 정의 적용 가능 범위 Color 단색 채우기 - 채우기 색상(fill colors) - 획 색상(stroke colors) Number 숫자 값 - 텍스트 레이어(text layers) - 모서리 반경(corner radius) - 최소 너비/높이(minimum width/height) - 최대 너비/높이(maximum width/height) - 패딩 및 간격(padding, gap getween) String 텍스트 .. 2023. 6. 22. 피그마 프로토타입 예제 - 슬라이드 배너 만들기(캐러셀 인터랙티브 컴포넌트) 드래그하면 옆으로 넘어가는 슬라이드 배너는 홈페이지의 메인에서 흔히 볼 수 있는 UI 이다. 이렇게 슬라이드 형태로 넘기는 UI를 캐러셀이라고 부른다. 이번 포스팅에서는 피그마로 캐러셀 배너 프로토타입 만드는 방법에 대해서 소개하려고 한다. 슬라이드 배너 프로토타입 만들기 먼저 피그마 파일을 하나 생성해서, 아래와 같은 구조의 디자인 시안을 만든다. 각 슬라이드가 보여지는 화면을 각각의 프레임으로 나누어 제작해야 한다. 디자인 요소들을 모두 만들었다면 첫번째 배너 이미지를 선택하고, 두번째 프레임으로 드래그한다. 인터렉션 디테일은 On drag, Smart animate, Ease in and out으로 지정한다. 애니메이션 속도는 300~500을 추천하는데, 본인 취향에 맞게 설정해 주면 된다. 나머지.. 2023. 3. 10. 피그마(Figma) 소개 & 다운로드 설치 방법 나는 요즘 피그마(Figma) 프로그램을 사용하여 디자인 업무를 하고 있다. 2년 전쯤 지인의 소개로 알게 되었는데 처음 사용해 보자마자 이 녀석의 매력이 흠뻑 빠져서 이제는 거의 베프와도 같은 없어서는 안되는 존재가 되었다. (완전 소중) 피그마는 UI 디자인 프로토타입 도구로 스케치(Sketch)나 어도비XD와 비슷한 툴이라고 생각하면 된다. 당연히 이 프로그램들을 이미 사용해 본 경험이 있는 디자이너들이라면 어려움 없이 빠르게 적응이 가능하며, 포토샵만 할 줄 알더라도 단축키 등 비슷한 부분이 많기 때문에 하루만 마음잡고 집중하면 어느정도 기본적은 스킬들은 모두 익힐 수 있을 것이라 생각된다. 장점이 많은 피그마(figma)를 여러 사람들과 공유하고 싶어서 오래 전부터 계획하고 있었지만, 이런저런 .. 2021. 7. 28. 이전 1 다음
