본문 바로가기

디자인/Figma8

config 2023 피그마 변수를 활용하여 라이트/다크 모드 설정하기 이번 포스팅에서는 피그마 변수를 활용하여 라이트/다크 모드 색상을 적용하는 방법에 대해서 소개하려고 한다. 임의로 라이트/다크 모드의 색상 팔레트를 준비해보았다. 피그마 변수가 무엇인지 알고 싶은 분들은 아래 링크 클릭 ▼▼▼ 2023.06.22 - [디자인/Figma] - config 2023 variables 디자인 변수 종류, 생성, 관리하기(number/color) config 2023 variables 디자인 변수 종류, 생성, 관리하기(number/color) 피그마의 디자인 변수는 모든 종류의 디자인 속성(채우기 색상, 패딩 등)과 프로토타이핑 작업에 적용할 수 있는 재사용 값을 저장한다. 변수는 스타일 및 구성 요소와 마찬가지로 팀 라이브러 heinafantasy.com 라이트/다크 모드 .. 2023. 6. 22.
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.
피그마로 글래스모피즘 스타일의 오브젝트 만들기 지난 포스팅에서 클레이모피즘 스타일의 버튼을 만드는 방법에 대해서 알아보았다. (궁금하면 아래 링크 클릭!) 2023.01.17 - [디자인/Figma] - 피그마로 클레이모피즘 스타일의 버튼 만들기 피그마로 클레이모피즘 스타일의 버튼 만들기 대상을 원래 모습 그대로 사실적으로 표현하는 디지털 기법인 스큐어모피즘이 있다. 스큐어모피즘은 느린 작업속도와 섬세한 디자인에서 나오는 사용자 집중력 저하의 단점을 가지고 있었는데 heinafantasy.com 이번 포스팅에서는 피그마로 글래스모피즘 스타일의 오브젝트를 만드는 방법에 대해서 설명하려고 한다. 글래스모피즘이란? 글래스모피즘(glassmorphism)이란, 반투명 재질을 사용하여 오브젝트 간의 시각적 계층을 표현한 그래픽 스타일이다. 반투명한 유리를 댄.. 2023. 1. 17.
피그마로 클레이모피즘 스타일의 버튼 만들기 대상을 원래 모습 그대로 사실적으로 표현하는 디지털 기법인 스큐어모피즘이 있다. 스큐어모피즘은 느린 작업속도와 섬세한 디자인에서 나오는 사용자 집중력 저하의 단점을 가지고 있었는데, 이것을 보완한 것이 뉴모피즘이다. 뉴모피즘은 미니멀리즘을 계승한 디자인으로 심플한 그래픽에 그림자를 두어 입체적으로 표현한 것이 특징이다. 그리고 뉴모피즘에 이어 클레이모피즘이 2023 UX/UI 디자인 트렌드로 선정되었다. 클레이모피즘(Claymorphism)은 내외부 그림자의 조합으로 부드럽고 푹신한 느낌을 주는 그래픽 스타일이다. 흡사 점토로 만든 3D 모형 같아 보이기도 한다. 글래스모피즘과의 궁합도 나쁘지 않아 함께 사용하면 새롭고 신선한 결과물을 얻을 수 있다. 나도 3D 프로그램을 사용해서 클레이모피즘을 만들어보.. 2023. 1. 17.
키보드 레이아웃 선택 - 한글 키보드 단축키 매핑(피그마 업데이트) 피그마가 업데이트 되며 키보드 레이아웃을 선택할 수 있게 되었는데, 그 중에 한글 키보드 단축키 매핑이 가능해졌다고 해서 시도해보았다. 키보드 레이아웃 선택 기존 피그마(figma)의 기본 단축키는 US QWERTY 키보드의 레이아웃을 기반으로 하고 있다. 그런데 이러한 단축키의 일부 키는 다른 언어나 레이아웃에서는 사용할 수 없다. 때문에 기본 설정에서 키보드 레이아웃을 업데이트한 후에 해당 레이아웃에 매핑된 단축키에 엑세스할 수 있게 하였다. 키보드 레이아웃 선택은 한국어 외에도 중국어(병음), 덴마크어, 핀란드어, 프랑스어, 독일어, 이탈리아어, 일본어, 노르웨이어, 스페인어, 스웨덴어 등을 지원한다. 한국어 키보드 레이아웃 선택 방법 한국어 키보드 레이아웃을 선택하는 방법은 아래와 같다. 피그마 .. 2022. 11. 16.
피그마(figma) 다각형 그리기 피그마(figma)에서 다각형을 그리는 방법에 대해서 포스팅하려고 한다. 먼저 피그마의 디자인 파일을 열고 도형 > Polygon을 선택한다. 크기는 나중에 조정해주면 되니까 적당히 위치를 잡아서 마우스로 드래그 한다. 삼각형이 그려진 것을 확인할 수 있다. 이 때 쉬프트(shift) 키를 누른 채로 드래그하면 정삼각형을 그릴 수 있다. 만약 그리고 싶은 것이 정다각형이라면 처음부터 정삼각형을 그리는 것이 유리할 것이다. 해당 도형을 선택하고 우측의 Design 패널을 확인하면 X, Y, W, H의 수치가 표시되어 있는 부분 아래에 '3' 이라는 숫자가 보일 것이다. 3이라는 숫자는 이 도형의 변의 갯수를 의미한다. 삼각형 변의 갯수는 3개이니까 3이라고 표시되어 있는 것이다. 이 부분의 숫자를 그리고 .. 2022. 6. 16.
피그마(Figma) 소개 & 다운로드 설치 방법 나는 요즘 피그마(Figma) 프로그램을 사용하여 디자인 업무를 하고 있다. 2년 전쯤 지인의 소개로 알게 되었는데 처음 사용해 보자마자 이 녀석의 매력이 흠뻑 빠져서 이제는 거의 베프와도 같은 없어서는 안되는 존재가 되었다. (완전 소중) 피그마는 UI 디자인 프로토타입 도구로 스케치(Sketch)나 어도비XD와 비슷한 툴이라고 생각하면 된다. 당연히 이 프로그램들을 이미 사용해 본 경험이 있는 디자이너들이라면 어려움 없이 빠르게 적응이 가능하며, 포토샵만 할 줄 알더라도 단축키 등 비슷한 부분이 많기 때문에 하루만 마음잡고 집중하면 어느정도 기본적은 스킬들은 모두 익힐 수 있을 것이라 생각된다. 장점이 많은 피그마(figma)를 여러 사람들과 공유하고 싶어서 오래 전부터 계획하고 있었지만, 이런저런 .. 2021. 7. 28.

티스토리툴바