리사이징을 위해서 더 배울 것이 남아서 간단하게 넘어가는 내용입니다. 바로 그리드 그리기인데요. 그리드는 디자인에서 상당히 중요한 역할을 하는 기능으로 해당 레이아웃의 배치 등을 어긋나지 않고 균일하게 맞춰주는 역할을 합니다. 이번 시간에는 그리드를 만들어 보는 시간을 가져 보겠습니다. 1. 그리드 사용하기 그리드는 프레임에서만 사용할 수 있다. 프레임 선택 후 우측에 Layout Grid 기능을 킨다. + 버튼을 누르면 원하는 만큼 추가할 수 있다. 2. 그리드의 종류 레이아웃 배치의 기본이 되는 그리드 형식을 만들 때 쓴다. 그리드는 원하는대로 추가할 수 있다. 기본적으로 픽셀, 행, 열 3가지 종류가 있다. 각각 색상도 자유롭게 설정 가능하다. 1) 픽셀 그리드 가장 기본적인 픽셀 그리드. 보통 8..
※ 본 문서의 주의사항 영어 단어 Constraint의 뜻은 구속, 제약, 제한조건이란 뜻으로 주로 쓰이는데, 이렇게 이해하면 너무 어렵기 때문에 본 문서에서는 이를 '고정점'으로 번역하였습니다. 아래 설명에도 나타나듯, X,Y 좌표의 기준 값을 '고정'시켜 사용하는 기능이기 때문입니다. 이 부분에 대한 지적도 환영하며, 의견 주실 분들께서는 많은 피드백 부탁 드립니다. 1. 프레임과 X,Y위치 좌표 : 고정점(Constraints)는 프레임 하위 요소에만 쓸 수 있다. 그룹은 독자적인 X,Y 좌표 값을 가지지 않는데 반해 프레임 내에 배치된 모든 하위 요소는 프레임을 기준으로 X,Y 좌표값을 가진다. 즉, 정리하면 '프레임은 하위 요소들의 독자적인 위치 값을 지정한다.'고 볼 수 있을 것이다. 그리고 ..
피그마에는 하위 요소를 묶어주는 요소가 대표적으로 5가지 있습니다. 1. 프레임(Frame) 2. 그룹(Group) 3. 벡터 네트워크(vector network) 4. 불리언 그룹(Boolean Groups) 5. 마스크(Mask) * 어디까지나 공식적인 분류는 아니고, 개인적인 분류인 점 양해 부탁 드립니다. 이 들은 각각마다 채우기(fill), 획(stroke), 효과(effect)의 결과가 서로 다릅니다. 그래서 초반에 정리하지 않으면 헷갈리기 쉽기 때문에 챕터 2의 첫 장에서 먼저 다루어 보도록 하겠습니다. 그럼 시작하겠습니다. 1. 프레임(Frame) 단축키 : Ctrl + Alt + G 로 디자인을 담는 컨테이너 역할을 하는 레이어이다. 프레임은 통속적인 아트보드와 같은 역할을 하지만, 하위..
피그마의 핵심 기능, 프레임(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키를 눌러서..
Figma를 쓰기 전에, 먼저 디자인 작업 방식에 대해서 알아둘 필요가 있다고 생각합니다. 어느 정도 개인적인 의견으로 작성된 문서로, 다른 의견이 있다면 아래 댓글을 통해서 남겨주시면 감사드립니다. 1. Top-Down과 컨셉 디자인 나는 '디자인'이 생겨난 이유가 제품 생산 과정에서의 통일된 기준을 맞추기 위해서라고 생각한다. 제품 제작에 참여한 이해관계자들이 각자 다른 생각을 하지 않도록 디자인 과정을 만든 것이다. 이를 달리 말하면 본래 디자인은 Top - Down 방식을 채택하여 통일된 기준을 제시하고자 했고, 자연스럽게 디자이너의 역량도 '컨셉 시안'을 얼마나 빨리 다양하게 제시하고, 시장에서의 우위를 얼마나 점할 수 있는가? 얼마나 차별화를 잘 시킬 수 있는가? 이 답을 잘 내리는 것으로 발..
피그마 주요 기능은 아니지만, 사용해 볼 법 한 기능들을 모았습니다. 개인적으로 고급 기능으로 차근차근 배워보면 좋을 것들도 많아서 추후 따로 깊게 파 볼 수도 있을 것 같습니다. 1. 스포트라이트 (Spotlight) 프레젠테이션 기능 강화로 스포트라이트 기능 추가. 주요 사용자가 방송하듯 쓸 수 있음. 발표자 전환, 발표자 쫓아가기, 쫓아가기 중지 등의 기능이 있음. 자세한 설명은 아래에서 참조 https://help.figma.com/hc/en-us/articles/5025214483351 2. 피그잼 위젯 추가 (New jira, asana, github widget for figjam) 피그잼에 Jira, Asana, Github 위젯을 추가할 수 있다. 이를 통해 프로젝트를 계속 관리하도록 할..
1. 가변 폰트 (Variable fonts) 지원 가변 폰트를 지원함 가변 폰트란? 가변 폰트는 타입페이스의 여러 바리에이션을 한 개의 파일에 포함하는 오픈타입 폰트 포맷을 말함. 기존 폰트는 각각의 스타일 치환자를 위한 분리된 폰트 파일로, 개별로 하나하나 접근했어야 했음. 지금은 그렇지 않아도 폰트의 특징을 살려 원하는 느낌으로 지정할 수 있음. 축(Axis)의 개념 기본적으로 축(Axis)을 기준으로 폰트의 형태가 변경된다. 굵기(weight), 너비(width), 등급(grade), 기울기(slant), 옵티컬 사이즈(optical size)까지. 보편적으로 5개의 구성을 제일 많이 쓴다. 한글 가변 폰트의 경우는 몇 가지 없지만, 영어 알파벳의 경우에는 영문 폰트로 다수 제공되므로 살펴볼 필요..
