오늘은 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. 절대..
업데이트 사항 : 테마 변경 기능. 이제 메인 메뉴 또는 빠른 동작 메뉴에서 테마를 변경 가능. 라이트(light), 다크(dark), 시스템 테마(System Theme)으로 변경할 수 있다. (하지만 시스템 테마는 현재 바꿔도 딱히 동작하지 않습니다.... 다른 결과가 나타나시거나 정보가 있으시면 댓글로 남겨주시면 감사드립니다. ) 테마를 바꿔도 다른 사람의 피그마 외형에는 영향을 주지 않음. 테마 설정은 장비마다 다르게 설정됨. 한 계정으로 여러 장비를 쓰고 있으면, 다른 장비로 설정이 옮겨지지 않음. 만약 새 파일(New design file)을 만들면, 현재 테마에 맞춰서배경색이 light나 black으로 바뀜. 화이트 모드에서는 밝은 회색 컬러(#f5f5f5)로 바뀌고 블랙 모드에서는 오프 블..
맥에서 사용할 수 있는 입력장치, 트랙패드, 마우스에 대해 알아봅시다! 1. 스크롤 설정 맥에서 마우스 설정에서 눈여겨 봐야 할 건, 스크롤 설정이다. 맥에서는 마우스 스크롤 방향이 트랙패드와 반대이기 때문에 마우스에서 아래로 스크롤을 내리면 스크롤이 올라가고, 스크롤을 내리면 반대로 올라간다. 터치패드에서 스크롤을 내리면 화면이 올라가고, 스크롤을 올리면 화면이 내려간다. 하지만 '마우스 스크롤 방향: 자연스럽게'를 해제해야 마우스 스크롤 회전 방향 = 스크롤 방향이 일치하는 쪽이 된다. 다만 해제하게 되면 마우스 설정 뿐 아니라 트랙패드 설정도 공유되기 때문에, 트랙패드 스크롤을 내리는 방식이 불편해지는 단점이 있다. 이 외에도 이동 속도, 더블클릭 속도, 스크롤 소도 등을 조절 가능하고, 왼손잡이,..
오늘은 텍스트 입력과 키보드에 대해서 작성해 보았습니다~ 1. 이모티콘/특수문자 입력하기 특정 문자 길게 누르기 - a àáâäæãåā - c çćč - e èéêëēėę - i îïíīįì - l ł - n ñń - o ôöòóœøōõ - s ßśš - y ÿ - z žźź 단, 키 반복이 끔 상태로 되어 있으면, 이 기능은 동작하지 않는다. 2. ⌥opt + 키보드 문자 누르기 ⌥ + ` ` ⌥ + q œ ⌥ + 1 ¡ ⌥ + w ∑ ⌥ + a å ⌥ + z Ω ⌥ + 2 ™ ⌥ + e ´ ⌥ + s ß ⌥ + x ≈ ⌥ + 3 £ ⌥ + r ® ⌥ + d ∂ ⌥ + c ç ⌥ + 4 ¢ ⌥ + t † ⌥ + f ƒ ⌥ + v √ ⌥ + 5 ∞ ⌥ + y ¥ ⌥ + g © ⌥ + b ∫ ⌥ + 6 §..
지난 시간에는 Finder의 검색기능인 스마트 폴더에 대해서 알아봤습니다! 오늘은 그에 이어서 Finder 창과 탭을 활용하고, 손쉽게 이동하는 법을 말씀 드리겠습니다~ 😄😄😄 1. 창과 탭 사용하기 - 새로운 Finder 윈도우 단축키 [ ⌘cmd + n ] - 새 탭 사용하기 [ ⌘cmd + t ] - 데스크탑에서 항목 보기: 데스크탑에 띄우는 디스크 이미지 정보를 고를 수 있다. 사용하는 디스크가 있다면 선택해서 활용하자. 보통 하드 디스크는 숨겨져 있다. - 새로운 Finder 윈도우에서 보기 : 새로 윈도우를 만들 때, 최초로 띄워지는 폴더 경로와, 새로운 윈도우 경로를 고를 수 있다. - 새 창에서 또는 새 탭에서 열기 : [ ⌘cmd + 더블클릭 ]을 누르면 새 탭 또는 새 창에서 열리는데,..
