매번 같은 색상을 일일히 지정하고 수정하는게 상당히 번거로운 작업이 될 수 있는데요. 특히 주요 컬러를 변경하는 경우에는 일일히 수정하는게 힘든 작업이 될 것입니다. 그래서 지난 시간에 진행했던 컬러, 서체와 엘리베이션 규칙, 그리드 스타일을 스타일에 등록하고 수정하고 보완하는 방법에 대해서 다루어보겠습니다. 1. 스타일 지정 먼저 스타일 지정에 대해서 알아보겠습니다. 피그마에서는 4가지의 스타일을 등록할 수 있습니다. 1. 컬러 → 컬러 팔레트 2. 텍스트 → 하이어라키 3. 이펙트 → 엘리베이션 및 인터렉션 규칙 4. 레이아웃 그리드 → 반응형 디자인 이 4가지는 각각 컬러 팔레트, 하이어라키(계층 구조), 엘리베이션 규칙, 반응형 디자인에서 활용됩니다. 그리고 이 스타일들은 전부 그룹을 지정할 수 ..
디자인을 하기 전에, 컬러를 어떻게 고르고 사용할지에 대해서 고민하시는 분들을 위해서 준비해봤습니다. 컬러.. 어렵습니다. 접근 방식도 이해하는 것도 쉽지 않은데요. 제 나름대로 컬러를 접근할 때 사용하는 방법론을 몇 가지 들고와 보았습니다. 도움이 되셨으면 좋겠습니다. 0. 🎨컬러의 이해 : 색상의 기준 3가지 색상(Hue) , 채도(Saturation), 명도(Brightness) 컬러는 기본적으로 색상, 명도, 채도로 분류됩니다. 색상은 말 그대로 "색의 종류"를 나타내고, 명도는 "색상의 밝기" 채도는 "색상의 순도"를 나타냅니다. 이 세 가지 요소를 조절해서 색을 만들 수 있는데요. 이렇게 조절해서 만든 색상을 "톤(Tone)"이라고 합니다. 톤의 분류 톤은 일반적으로 12개의 톤으로 구성됩니다..
지난 시간에 배웠던 오토레이아웃 써 보니 어떠셨나요? 분명히 쓰기 힘들고, 불편한 지점이 많다고 생각하시는 분들도 많을 겁니다. 특히 자동 배치 규칙을 적용하지 말아야 할 순간도 있죠. 그래서 오늘은 오토 레이아웃을 벗어난 요소를 지정하는 독립 포지셔닝 기능에 대해서 알아보겠습니다. 1. 독립 포지셔닝(Absolute Positioning) 원래 오토레이아웃을 상위 프레임 요소에 사용하게 되면, 하위 요소들의 위치는 무조건 규칙에 따라 배열됩니다. 예전에는 이 부분을 새 프레임을 적용해서 씌운 채로 만드는 경우가 많아 레이어 수 때문에 과한 디자인 형식이 될 때가 많았습니다. 수정하기도 어려웠구요. 그러나 독립 포지셔닝 기능을 사용하면 오토 레이아웃에 적용되지 않는 요소를 만들 수 있기 때문에, 원하는 ..
오늘은 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를 쓰기 전에, 먼저 디자인 작업 방식에 대해서 알아둘 필요가 있다고 생각합니다. 어느 정도 개인적인 의견으로 작성된 문서로, 다른 의견이 있다면 아래 댓글을 통해서 남겨주시면 감사드립니다. 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개의 구성을 제일 많이 쓴다. 한글 가변 폰트의 경우는 몇 가지 없지만, 영어 알파벳의 경우에는 영문 폰트로 다수 제공되므로 살펴볼 필요..
그 동안 불편했던 오토레이아웃이 다시 디자인되었음. 꽤 많은 변화가 있으므로 차근차근 살펴보자. 1. 리사이징 옵션 업데이트 Update to resizing options 리사이징 옵션이 기존 따로 있던 설정(좌)에서 사이즈 옵션 내에 있는 요소(우))로 변경됨. 옵션은 기존과 같다. {고정 너비/높이 Fixed Width/height} | {컨텐츠 감싸기 Hug contents} | {컨테이너 채우기 fill container} 2. 캔버스 컨트롤 Canvas Controls 화면 요소에서 여백 등 관리를 직접 할 수 있다. 요소 중앙 쪽에 있는 핑크색 작은 바를 드래그하면 조절이 가능하다. 단축키 shift + alt(opt)와 함께 드래그 앤 드롭 하면 전체 여백을 한번에 줄 수 있다. 3. 절대..
업데이트 사항 : 테마 변경 기능. 이제 메인 메뉴 또는 빠른 동작 메뉴에서 테마를 변경 가능. 라이트(light), 다크(dark), 시스템 테마(System Theme)으로 변경할 수 있다. (하지만 시스템 테마는 현재 바꿔도 딱히 동작하지 않습니다.... 다른 결과가 나타나시거나 정보가 있으시면 댓글로 남겨주시면 감사드립니다. ) 테마를 바꿔도 다른 사람의 피그마 외형에는 영향을 주지 않음. 테마 설정은 장비마다 다르게 설정됨. 한 계정으로 여러 장비를 쓰고 있으면, 다른 장비로 설정이 옮겨지지 않음. 만약 새 파일(New design file)을 만들면, 현재 테마에 맞춰서배경색이 light나 black으로 바뀜. 화이트 모드에서는 밝은 회색 컬러(#f5f5f5)로 바뀌고 블랙 모드에서는 오프 블..
