기획자의 피그마·Figma 썸네일형 리스트형 [피그마 중급 7강] 툴팁(느낌표/물을표) 컴포넌트 UI/UX(ToolTIP) PPT와는 전혀 다른 툴팁(tooltip) 비교(프로토타입 구현) PPT에서 굉장히 쉽게 그렸던 툴팁이 피그마로 넘어가면서 조금 간단하지 않게 되었습니다. 그렇지만 유저가 무엇인지 궁금해할 때 꼭 필요한 기능인 툴팁 기능에 대해서 배워보겠습니다. 사실상 웹사이트에서 무언가 정보에 대해서 알고 싶을 때 이러한 기능을 많이 사용하는데요. 쉽고 빠르게 아래 글을 따라오시면 되겠습니다. 툴팁(TOOLTIP) 간단하니 따라와 주세요! 1. 텍스트 입력 + 텍스트 굵기 텍스트 입력 : Sample text field 글씨 굵기 : semi bold 2. 오토레이아웃 ▶ 수평 padding ▶수직 padding ▶도형 색상(감도 설정) ▶ 도형 테두리 설정 ▶ 텍스트 색상 설정 수평 padding : 20 수직 padding : 20 도형 색상 : 검은색(투명도 60%) 도형 테두.. 더보기 [피그마 중급 1강] 라디오 버튼(Radio Button) 만들기<피그마의 프로토타입 만들기, PPT와 다른 기능> UI/UX에서 Componet는 반복적으로 사용되는 typography(표현) + color + 도형으로 구성된 UI 요소를 말합니다. 이제 컴포넌트를 활용하여 라디오 버튼을 만들어보겠습니다. 라디오버튼(Radio Button) 만들기(초중급!) 넓이 16, 높이 16인 네모박스를 만들어 줍니다. 그리고 16X16 네모박스를 ALT를 눌러 새로운 네모를 하나 더 만들어 줍니다. 복사한 네모박스를 넓이와 높이를 8X8 크기의 네모박스로 변환한 후 레디우스(모서리)를 30을 입력합니다. 원의 색깔을 검은색으로 바꿉니다. 그리고 처음에 만들었던 네모를 테두리를 검은색으로 변환하고 모서리를 100으로 맞춥니다. 스트로코를 준 동그라미 원의 색깔을 흰색으로 바꿉니다. 그리고 두 개의 원을 겹칩니다. 겹치고 디자인.. 더보기 [피그마 기초 5강]오토레이아웃(Autolayout)기능 활용하는 방법 피그마의 파워풀한 기능은 오토레이아웃에 있습니다. 사실 오토레이아웃을 완벽하게 마스터하면 어느정도 모든 기능에 대해서 거의 다 활용할 수 있습니다. 드롭박스를 만든다던가, 라디오 버튼을 만든다던가 등 컴포넌트를 만들 때 활용되며 이 기능은 피그마의 핵심 기능이라 반드시 알고 마스터해야 합니다. Autolayout 완벽하게 한번에 정리하기! 이제 프레임을 생성하고 그 위에 버튼을 생성하는 것을 해보겠습니다. 이제 슬슬 기초 영역에서 조금 응용 단계로 넘어가 보겠습니다. 1. 오토레이아웃 기능을 활용하기 위해서 버튼을 만들어 보겠습니다. 텍스트를 클릭해서 버튼이라는 글씨를 프레임 위에 써줍니다. 2. 생성된 텍스트에 로 오토레이아웃으로 전환해줍니다. 구별하기 힘드니깐 윤곽선(stroke) 을 줍니다. 3. .. 더보기 [피그마 기초 4강] Constraint 기능 알아보기(PPT와 다른 피그마의 파워풀한 기능) Constraints는 제약이라는 단어로 피그마에서 알면 유용한 기능 중 하나라고 생각하시면 되겠습니다. constraint 기능은 프레임 위에서 에 대한 기능입니다. 여기 보면서 하는 게 더 쉽겠죠? 그림을 보면서 설명하겠습니다. Contsraints 기능 우측 패널 이용하기 오브젝트를 클릭하고 우측 패널을 확인하면 Constraints라고 있습니다. 그리고 초기 값이 설정되어 있죠. 이번엔 이 기능에 대해서 살펴보는 시간을 가져보겠습니다. 하나씩 사용하는 방법에 대해서 살펴 보겠습니다! 1. Left/right 우측 패널을 해당과 같이 고정하고 컨트롤을 클릭하고 해당 프레임을 누르고 프레임을 늘리게 되면 다음과 같이 왼쪽 상단과 위쪽에 오브젝트가 고정되고 프레임만 증가하는 것을 보실 수 있습니다. 이.. 더보기 [피그마 기초 3강] 그리드 이해하기 플랫폼을 보시면 깔끔하게 정돈된 텍스트, 오브제들을 확인하실 수 있습니다. 그리고 그렇게 깔끔한 플랫폼에서 매출과 직결되는 부분이 많을 수 있습니다. 그래서 피그마의 그리드라는 기능에 대해서 알아보겠습니다. 1. offset : 컨테이너 바깥 부분에 해당하는 영역 2. column : 열(칼럼 위에 오브젝트가 배치된다라고 이해하자) 3. Gutter : 칼럼과 칼럼사이의 길이 그리드 좋은 예/나쁜 예 1. 그리드를 사용하지 않고 오브제를 먼저 사이즈를 재고 배치를 했을 경우 아래와 같은 화면으로 배치할 수 있습니다. 이렇게 화면을 이렇게 배치하게 되면 예쁘게 잘 배치되었는데, 무엇이 문제일까? 잘 보면 오브제가 잘 정돈되어 보이지만, 이를 재사용할 수 없습니다. 그러나, 그리드를 사용하게 되면 디바이스 .. 더보기 [피그마 기초 2강, 도형부문]피그마와 PPT 기능 비교, 피그마의 파워풀한 우측 패널 기능 익히기 피그마의 우측 패널은 PPT의 기능과 거의 동일한 부분이 있는데, 보다 파워풀한 기능들이 몇개 있습니다. PPT와 피그마 어떤 차이점이 있나? 1. 정렬 기능 프레임 위에 레이어(사각형 도형, 원 등의 오브젝트를 프레임 안에서 위치를 바로 잡는 기능 PPT에서 맞춤 기능과 거의 비슷하게 생각하시면 쉬움 2. 도형 리사이징 기능 X, Y는 프레임의 좌표 값 W : 해당 도형의 넓이 H : 해당 도형의 높이 Rotation : 해당 도형의 각도 corner radius : 해당 도형의 모서리 둥굴기 각도 3, 4 도형 서식 해당 도형의 색상이며, %는 해당 도형의 투명도 Tidy up(정렬) 이렇게 보면 PPT와 전혀 다를게 없어 보입니다. 그러나 피그마만의 파워풀한 기능 중 하나 Tidy up이라는 정렬 .. 더보기 [피그마 기초 1강]피그마로 디자인을 할 때 알아야 할 기본 개념들 피그마는 기본적으로 온라인 환경에서 사용가능합니다. 피그마를 하기전 기초적인 기능에 대해서 알려드리겠습니다. 비트맵(Bitmap) 픽셀(점)이 모여 이루어진 그림 대표 포맷 : jpq, PNG 백터(Vector) 개념 : 선분과 면으로 이루어진, 수학적 연산에 의해 이루어진 그림. 확대해도 깨지지 않음 대표 포맷 : AI, SVG 대표 소프트웨어 : 피그마, 일러스트 레이어(Layer) 그림을 그릴 수 있는 투명 필름으로 이해 가능 1개의 레이어는 1장의 투명 필름 피그마 작업 환경 이해하기 피그마 단축기 확인하기 가장 많이 사용되는 툴이라고 생각하시면 되겠습니다. 1. 무브툴 : V 2. 프레임 툴 : F 3. 펜툴 : P 4. 텍스트 툴 : T 5. 도형 툴 : R 6. 원 툴 : O 7. 라인 툴 .. 더보기 이전 1 2 다음
