피그마에는 하위 요소를 묶어주는 요소가 대표적으로 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개의 구성을 제일 많이 쓴다. 한글 가변 폰트의 경우는 몇 가지 없지만, 영어 알파벳의 경우에는 영문 폰트로 다수 제공되므로 살펴볼 필요..
오늘의 포스팅은 나름대로 아래 포스팅의 내용을 번역해본 것입니다. 오타, 의역, 번역 지적 환영하고 틀린 부분이 있다면 댓글로 남겨주세요, 반영하겠습니다. https://help.figma.com/hc/en-us/articles/5579474826519 Create and use component properties Before you Start Who can use this feature Users on any plan Anyone with edit access to the Figma file can create, manage, and use component props in Figma design files Component propert... help.figma.com 1. 컴포넌트 프로퍼티(Com..
그 동안 불편했던 오토레이아웃이 다시 디자인되었음. 꽤 많은 변화가 있으므로 차근차근 살펴보자. 1. 리사이징 옵션 업데이트 Update to resizing options 리사이징 옵션이 기존 따로 있던 설정(좌)에서 사이즈 옵션 내에 있는 요소(우))로 변경됨. 옵션은 기존과 같다. {고정 너비/높이 Fixed Width/height} | {컨텐츠 감싸기 Hug contents} | {컨테이너 채우기 fill container} 2. 캔버스 컨트롤 Canvas Controls 화면 요소에서 여백 등 관리를 직접 할 수 있다. 요소 중앙 쪽에 있는 핑크색 작은 바를 드래그하면 조절이 가능하다. 단축키 shift + alt(opt)와 함께 드래그 앤 드롭 하면 전체 여백을 한번에 줄 수 있다. 3. 절대..
