figma

이번 포스팅에서는 피그마에서 이미지를 불러와 크롭하는 방법에 대해 다뤄보고자 한다.쉽지만 까먹으면 자주 검색하는 기능 중 하나인 '이미지 마스크' 기능 이번 포스팅을 통해 완벽히 숙지하자. 0. 사전준비원하는 크기의 도형을 미리 그려놓는다. (원, 사각형, 둥근 사각형, 오각형, 별 등) (※ 이미지의 원본 크기보다 도형의 크기를 크게 그려놓는다면, 이미지가 깨져보일 수 있다.)  1. 피그마에서 이미지 열기 피그마에서 이미지를 열기 위한 방법은 3가지가 있다. 툴에서 가져오기 : 리본메뉴 중 도형 드롭다운 메뉴에서 'Place image/video' 항목을 선택한다.단축키로 가져오기 : Ctrl + Shift + K파일 탐색기에서 드롭다운하기 : 원하는 이미지를 선택하여 드롭다운 한다.   가장 편한 ..

블러(Blur) 처리란? 블러(Blur) : 이미지를 흐리게 하는 것 피그마에서 블러처리 언제 사용할까? 포토샵 파일에서 이미지 블러처리를 완료하고 피그마에 불러오는 경우가 많은데, 피그마에서도 간편하게 블러저리를 할 수 있다. 포트폴리오 작성 할 때, 중요한 정보들을 가려야 할 경우 사용한다. 블로그 포스팅에서 설계서를 내에 포함된 정보들을 가려야 할 경우 사용한다. 피그마에서 이미지 블러처리 어떻게 해? (1) 이미지 파일의 블러처리할 도형을 선택하여 그린다. 필자는 허스키 블러처리를 위해 원형을 이용해서 그렸다. (2) 이미지 파일 위에 도형을 위치시키고, 디자인 패널의 Effects를 선택한다. 허스키 이미지 파일 위에 도형을 위치시키고, 디자인 패널 Effects 효과를 선택한다. (3) Fil..

첫 번째 포스팅은 컴포넌트, 두 번째 포스팅 스왑인스턴스에 이어 이번 포스팅은 피그마 프로퍼티에 대해 알아보겠다. 프로퍼티(figma property)란? 프로퍼티는 "속성, 성격"이라는 의미를 가진다. 이미 완성된 컴포넌트에 속성을 더해주는 기능이다. 컴포넌트에 옵션을 주고 컴포넌트의 경우의 수를 줄여줄 수 있다. 컴포넌트 프로퍼티의 4가지 종류와 사용방법 컴포넌트 프로퍼티별로 각각 다른 특성을 가지고 있으며, 각각의 사용법도 다르다. 1. '텍스트, 불리언, 인스턴스 스왑' 프로퍼티는 옵션처럼 추가해서 적용하는 방법이며 2. '베리언트' 프로퍼티는 커스텀해서 사용하는 방법이다. 아래에서 자세하게 확인할 수 있다. - Text properties(텍스트) ✔ 텍스트 프로퍼티 컴포넌트텍스트 레이어에 속성..

이전 편에서는 피그마 컴포넌트 기초와 사용방법에 대해 알아보았다. 이번 포스팅에서는 피그마 인스턴스 스왑에 대해 알아보고, 사용하는 방법까지 익혀볼 수 있도록 하자. 스왑 인스턴스(swap instance)란? Swap(바꾸다) +Instance(복사본) 인스턴스(복사본)를 다른 인스턴스로 바꿔주는 기능이다. 왜 사용해야 할까? 인스턴스는 마스터 컴포넌트에 없는 요소를 추가할 수 없기 때문에 이 방법을 활용해서 아이콘, 이미지 등을 바꾸어 줄 수 있다. (단, 바꾸어줄 아이콘 이미지 등 모두 컴포넌트로 만들어 놓아야 한다.) 어디에 적용될 수 있는데? Web/Mobile을 디자인 혹은 기획 시 공통부분을 제작할 때 유용하게 사용된다. 예로 들면 header, List에서 아이콘을 변경하려 할 때 스왑 인..

1. 컴포넌트(figma component) Component는 가장 작은 단위, 부품, 요소로써 화면에서 반복적으로 사용되는 가장 작은 단위이다. 화면을 구성하거나 디자인 할 때, 요소를 합쳐 모듈 > 템플릿 > 페이지로 구성한다. Component 언제든 재사용이 가능한 요소로써 원본으로 복사본까지 한번에 수정할 수 있다. 🏷 아이콘 : 더이상 쪼갤 수 없는 가장 작은 단위 🏷 모듈 : 아이콘 + Text 등 최소 단위의 조합 🏷 템플릿 : 모듈 + 모듈 + 모듈 등 여러 모듈로 조합한 요소 🏷 페이지 : 템플릿 + 템플릿= 화면으로, 모듈 조합으로 구성된 아웃풋 컴포넌트 생성시, 객체와 레이어가 보라색으로 변경된다. 2. 마스터 컴포넌트와 인스턴스 만들기 📌 마스터 컴포넌트(Master Compon..

Variable이란? Variable은 스타일과 같이 색상, 숫자 및 문자열과 같은 다양한 설계 속성에 할당할 수 있는 재사용 가능한 변하는 값이다. 개발을 공부해 본 사람이라면 이미 익숙한 개념일 텐데, 임의의 데이터 값에 '속성이름'을 달아 저장하는 개념이다. 기획단계, 디자인 단계에서 버튼A를 반복적으로 사용하고 Text 값만 변하게 된다고 가정했을 때 매번 새롭게 제작한다면 버튼의 크기, 색상 등이 달라질 가능성이 크고 설계 시에 일관적인 화면을 제공할 수 없다. 그렇기에 변수(Variable)를 설정해서 반복적으로 재사용하는 것이 시스템의 일관성 측면에서 좋다. 피그마에서 저장할 수 있는 변수와 패널 ' 숫자, 문자열, 논리형, 색상'으로 총 4가지 데이터 형식을 변수로 저장할 수 있다. 변수 ..

해당 포스팅은 피그마 기본 화면구조와 기능에 대해 정리한 글입니다. 기본 화면구조와 화면구조에 해당하는 Move, Scale, Local variable, Local style, Export 컴포넌트들이 어떤 기능을 하는지에 대해 정리해 놓았습니다. 기본기와 기본 기능만 잘 활용해도 금방 익숙한 툴이 될 거라고 생각이 듭니다. 1. Move, Scale 1) Arrow 컴포넌트 1-1. Move 피그마에서 컴포넌트를 이동할 때 사용하는 도구이다. 단축키 : V 1-1. Scale 피그마에서 개체의 선, 폰트크기, 둥글기 등 개체의 현재 보여지는 속성 그대로 사이즈를 조절하기 위해 사용하는 기능으로 개체의 선, 폰트 크기가 비율에 맞춰 리사이징이 가능하다. 단축키 : K 2) Project Name 해당 ..