피그마

Figma로 만드는 디자인시스템/1) 오브젝트

figma 기초 (5) 그림자(Shadow), 흐림(Blur) 효과와 둥글리기(Radius)

오늘은 피그마에서 효과 사용에 대해서 정리해봤습니다. 기초편 언능 끝내고 핵심이 되는 부분만 다루고 싶네요.. 효과편 시작하겠습니다. 1. 레이어 효과 : 그림자(Shadow)와 흐림(Blur) 효과 패널(Effect Panel)에서 적용할 수 있는 효과는 그림자(Shadow)와 흐림(Blur)이 있다. 일단 종류는 4가지이다 + 버튼으로 색상처럼 중첩이 가능하다. 안쪽 그림자 (Inner Shadow) : 레이어의 안쪽에 그림자를 드리움. 그림자 드리우기(Drop Shadow) : 레이어의 바깥에 그림자를 드리움. (기본 설정) 레이어 흐림 (Layer blur) : 레이어에 흐림 효과를 부여하여 외부 이미지와 맞닿는 경계선을 흐리게 만듦 배경 흐림 (Background Blur) : 레이어에 흐림 효..

Figma로 만드는 디자인시스템/1) 오브젝트

figma 기초 (4) 컬러와 이미지, 그리고 레이어 패널

이번에는 피그마에서 컬러를 쓰는 방법에 대해서 다루어 보겠습니다. 1. 채우기(Fill) & 선(Stroke) 패널의 사용 Fill Stroke 피그마에서 색상을 설정하는 영역은 크게 채우기(Fill) 와 선(Stroke)로 나뉜다. 아무 레이어 개체나 선택한 후, +버튼을 눌러서 색상을 추가할 수 있다. 컬러는 중첩이 가능하다. 여기에서 색상을 클릭하면 색상 패널을 확인할 수 있다. 2. 색상 패널 사용하기 색상 패널에서는 페인트 타입, 컬러 피커 도구, 컬러 맵, 슬라이더, 지역 색상 및 문서 색상 확인이 가능하다. 페인트 타입 (Paint type) : 그래픽을 표현하는 방법을 설정한다. 크게 보면 단색, 그라디언트(4종), 이미지로 설정 가능 컬러 피커 (Color Picker) : 단축키 i 로..

Figma로 만드는 디자인시스템/1) 오브젝트

figma 기초 (2) 기본 형태 도구(Basic Shape Tool)의 사용

기본 형태 도구(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) 오브젝트

figma 기초 (1) 펜 툴 사용하기

figma로 할 수 있는 일 첫 번째, 그리기 기능에 대해서 알아봅시다. 포토샵에서는 그래픽의 기본 요소가 '픽셀(점)'로 시작하지만, 일러스트, 피그마와 같은 프로그램에서는 그래픽 기본 요소를 '패스(선)'로 시작하게 된다. 이를 가리켜 '벡터 기반의 그래픽 프로그램이다.' 라고 한다. 그래서 반드시 figma는 펜 툴의 사용법을 알아둬야 수월하게 프로그램을 사용할 수 있다. 펜툴 사용법에 대해서 알아보자. 1. 펜 툴 사용법 : 클릭 펜툴을 사용해 보도록 하자. 단축키는 P이다. 펜툴의 가장 기본적인 사용법은 클릭해서 점을 찍고, 다음 점을 찍으면 자동으로 그 사이를 선이 채우게 된다. 일반적으로 이 점을 가리켜 '고정점(anchor point)'라고 한다. ( 이 고정점은 선택 후 del키를 눌러서..

Figma로 만드는 디자인시스템

Figma #config2022 (5) 그 외 기능 모음

피그마 주요 기능은 아니지만, 사용해 볼 법 한 기능들을 모았습니다. 개인적으로 고급 기능으로 차근차근 배워보면 좋을 것들도 많아서 추후 따로 깊게 파 볼 수도 있을 것 같습니다. 1. 스포트라이트 (Spotlight) 프레젠테이션 기능 강화로 스포트라이트 기능 추가. 주요 사용자가 방송하듯 쓸 수 있음. 발표자 전환, 발표자 쫓아가기, 쫓아가기 중지 등의 기능이 있음. 자세한 설명은 아래에서 참조 https://help.figma.com/hc/en-us/articles/5025214483351 2. 피그잼 위젯 추가 (New jira, asana, github widget for figjam) 피그잼에 Jira, Asana, Github 위젯을 추가할 수 있다. 이를 통해 프로젝트를 계속 관리하도록 할..

Figma로 만드는 디자인시스템

Figma #config2022 (1) 다크 모드, 라이트 모드, 시스템 테마

업데이트 사항 : 테마 변경 기능. 이제 메인 메뉴 또는 빠른 동작 메뉴에서 테마를 변경 가능. 라이트(light), 다크(dark), 시스템 테마(System Theme)으로 변경할 수 있다. (하지만 시스템 테마는 현재 바꿔도 딱히 동작하지 않습니다.... 다른 결과가 나타나시거나 정보가 있으시면 댓글로 남겨주시면 감사드립니다. ) 테마를 바꿔도 다른 사람의 피그마 외형에는 영향을 주지 않음. 테마 설정은 장비마다 다르게 설정됨. 한 계정으로 여러 장비를 쓰고 있으면, 다른 장비로 설정이 옮겨지지 않음. 만약 새 파일(New design file)을 만들면, 현재 테마에 맞춰서배경색이 light나 black으로 바뀜. 화이트 모드에서는 밝은 회색 컬러(#f5f5f5)로 바뀌고 블랙 모드에서는 오프 블..

frogOlis
'피그마' 태그의 글 목록 (2 Page)