피그마의 핵심 기능, 프레임(Frame)에 대해서 준비했습니다. 저는 사실 피그마에서 그룹 사용은 조심해야 한다고 생각하는 주의이기 때문에.. 이번 편에서 그룹은 그렇게 중요하게 다루지 않고 있습니다. 다만 둘의 차이가 무엇인지 알고 구분해서 쓸 수 있도록 작성했습니다. 1. 프레임 도구 사용하기 프레임 레이어는 피그마에서 표현하고 싶은 디자인을 작성하는 가장 기본이 되는 요소이다. 포토샵, 일러스트레이터에서는 아트보드 또는 대지, 캔버스 기능으로 표현되어 왔으며, 피그마에서 가장 기본이 되는 요소이므로 기초 파트에서 반드시 꼭 숙지하고 넘어가야 한다. 보기에는 단축키 F로 나와있는데 단축키 A로도 사용이 가능하다. 도구를 선택하고 오른쪽 디자인 패널에서 원하는 디바이스 프리셋을 선택하면 그 크기에 맞는..
오늘은 피그마에서 효과 사용에 대해서 정리해봤습니다. 기초편 언능 끝내고 핵심이 되는 부분만 다루고 싶네요.. 효과편 시작하겠습니다. 1. 레이어 효과 : 그림자(Shadow)와 흐림(Blur) 효과 패널(Effect Panel)에서 적용할 수 있는 효과는 그림자(Shadow)와 흐림(Blur)이 있다. 일단 종류는 4가지이다 + 버튼으로 색상처럼 중첩이 가능하다. 안쪽 그림자 (Inner Shadow) : 레이어의 안쪽에 그림자를 드리움. 그림자 드리우기(Drop Shadow) : 레이어의 바깥에 그림자를 드리움. (기본 설정) 레이어 흐림 (Layer blur) : 레이어에 흐림 효과를 부여하여 외부 이미지와 맞닿는 경계선을 흐리게 만듦 배경 흐림 (Background Blur) : 레이어에 흐림 효..
이번에는 피그마에서 컬러를 쓰는 방법에 대해서 다루어 보겠습니다. 1. 채우기(Fill) & 선(Stroke) 패널의 사용 Fill Stroke 피그마에서 색상을 설정하는 영역은 크게 채우기(Fill) 와 선(Stroke)로 나뉜다. 아무 레이어 개체나 선택한 후, +버튼을 눌러서 색상을 추가할 수 있다. 컬러는 중첩이 가능하다. 여기에서 색상을 클릭하면 색상 패널을 확인할 수 있다. 2. 색상 패널 사용하기 색상 패널에서는 페인트 타입, 컬러 피커 도구, 컬러 맵, 슬라이더, 지역 색상 및 문서 색상 확인이 가능하다. 페인트 타입 (Paint type) : 그래픽을 표현하는 방법을 설정한다. 크게 보면 단색, 그라디언트(4종), 이미지로 설정 가능 컬러 피커 (Color Picker) : 단축키 i 로..
오늘은 figma에서 텍스트를 사용하는 방법에 대해서 정리해봤습니다. 1. 텍스트 영역의 이해 먼저 피그마의 텍스트 레이어는 기본적으로 '폭과 높이' 값을 가진다. 그 안에 작성된 텍스트 내용이 영역보다 넘칠 수도 있고, 모자랄수도 있고, 딱 맞게 생성될 수도 있다. 이 특성 때문에 텍스트 범위에 따라 추후 나올 리사이징 규칙이나, 레이아웃 변경 시에 영향을 끼치게 되고, 그에 따라 재수정을 해야 할 수 있기 때문에 주의가 필요하다. 2. 리사이징 규칙 콘텐츠를 기준으로 어떻게 영역을 계산할지에 대해 설정하는 기능이다. 인터페이스 우측 디자인 패널에서 찾을 수 있다. 자동 폭 맞춤 Auto Width : 텍스트에 맞춰서 폭(width)을 자동으로 설정함. 강제 줄 바꿈(alt + enter)이 되어 있을..
기본 형태 도구(Basic Shape Tool)의 사용법에 대해서 정리했습니다. 0. 도형 툴의 종류와 사용 기본 형태 도구(Basic Shape Tool)는 상단 툴바에서 찾을 수 있다. 종류는 7가지이다. 목록은 다음과 같다. 사각형(Rectangle), 선(Line), 화살표(arrow), 타원(Ellipse), 다각형(Polygon), 별(star), 이미지 배치(Place image) 이 툴들을 사용해서 만들 때 shfit 키를 누르면 가로 세로가 동일(정비례로)하게 만들 수 있고, opt/alt 키를 누르면 마우스 포인터를 중심으로 요소를 만들 수 있다. 이 둘을 결합하려면 동시에 누른 채로 만들면 된다. 1. 기본 형태 도구(Basic Shape Tool) : 원(Ellipse) 원을 그릴 ..
figma로 할 수 있는 일 첫 번째, 그리기 기능에 대해서 알아봅시다. 포토샵에서는 그래픽의 기본 요소가 '픽셀(점)'로 시작하지만, 일러스트, 피그마와 같은 프로그램에서는 그래픽 기본 요소를 '패스(선)'로 시작하게 된다. 이를 가리켜 '벡터 기반의 그래픽 프로그램이다.' 라고 한다. 그래서 반드시 figma는 펜 툴의 사용법을 알아둬야 수월하게 프로그램을 사용할 수 있다. 펜툴 사용법에 대해서 알아보자. 1. 펜 툴 사용법 : 클릭 펜툴을 사용해 보도록 하자. 단축키는 P이다. 펜툴의 가장 기본적인 사용법은 클릭해서 점을 찍고, 다음 점을 찍으면 자동으로 그 사이를 선이 채우게 된다. 일반적으로 이 점을 가리켜 '고정점(anchor point)'라고 한다. ( 이 고정점은 선택 후 del키를 눌러서..
