본문 바로가기
반응형

디자인 툴24

피그마 | 토글 버튼 만들기 안녕하세요, 오늘은 피그마에서 토글 버튼을 만드는 방법을 소개해드리려 합니다!1. 프레임으로 버튼을 만들어줍니다.  2. 인터렉션을 설정해줍니다. Button은 On click시 Button_toggle로, Button_toggle은 Button으로 바뀌도록 설정합니다.   완성된 모습입니다! 2024. 10. 28.
피그마 | 프레임으로 버튼 만들기 안녕하세요, 오늘은 피그마에서 프레임으로 간단한 버튼 만드는 방법을 정리해보려 합니다. 1. 다음과 같이 프레임으로 세 개의 버튼 모양을 만들어줍니다. 첫 번째는 기본값, 두 번째는 버튼 위에 마우스를 올려놓았을 때, 세 번째는 버튼을 클릭했을 때입니다. 2. 버튼 프레임에 인터렉션을 설정해줍니다. 먼저 기본값 프레임을 선택한 후, 우측의 메뉴에서 Prototype을 선택합니다.인터렉션을 다음과 같이 설정해주면 Button 프레임에 마우스를 올렸을 때 Button_hover 프레임으로 바뀌어 표시됩니다.다음은 Button_hover 프레임에 다음과 같이 인터렉션을 설정해줍니다. 버튼을 클릭하는 동안 Button_press 프레임으로 바뀌어 표시됩니다. 완성된 모습입니다! 2024. 10. 28.
미리캔버스 200% 활용하기 | 6편. 요소 추가/편집하기 목차1. 요소 추가1.1 요소 종류1.2 요소 추가2. 요소 편집2.1 요소 편집  안녕하세요 여러분!오늘은 미리캔버스의 꽃, 요소를 추가하고 편집하는 방법에 대해 알아보겠습니다.요소 추가요소 종류미리캔버스에서 제공하는 요소의 종류에는 일러스트, 도형, 선, 아이콘, 애니, 컬렉션, 프레임, 표, 차트, 조합이 있어요. 1. 일러스트직접 그린 듯한 느낌을 줄 수 있는 요소입니다.2. 도형원, 사각형 등의 도형 요소입니다.3. 선기본적인 선과, 그 외에 밑줄 등의 선도 있습니다.4. 아이콘홈, 돋보기 등 아이콘 요소입니다.5. 애니애니메이션 요소입니다.6. 컬렉션여러 요소를 모아놓은 컬렉션이 있습니다.7. 프레임사진을 담을 수 있는 여러 가지 모양의 요소입니다.8. 표간단한 표를 만들 수 있는 요소입니다... 2024. 7. 25.
미리캔버스 200% 활용하기 | 5편. 텍스트 추가/편집하기 목차1. 텍스트 추가하기1.1 텍스트 추가2. 텍스트 편집하기2.1 내용 변경2.2 폰트/크기 등 변경  지난 시간에 배경 설정과 편집 방법을 알려드렸었죠,오늘은 텍스트를 추가하고 편집하는 방법에 대해 알아보겠습니다!텍스트 추가하기텍스트 추가먼저 텍스트 추가 방법입니다.기본 텍스트를 추가하기 위해 먼저 메뉴에서 텍스트를 눌러주시고,제목, 부제목, 본문 텍스트 추가 또는 아래의 효과가 적용된 텍스트를 각각 눌러 추가하실 수 있습니다!텍스트 편집하기내용 변경내용을 변경하실 때는 먼저 텍스트를 추가해주시면 파란 바탕에 흰 글자가 나올 텐데(안 나온다면 텍스트를 더블클릭해주세요!),이 때 바로 입력해주시면 내용 변경이 가능합니다!폰트/크기 등 변경폰트와 크기, 볼드체 등의 변경은 먼저 텍스트를 클릭해주시고, 사.. 2024. 7. 24.
반응형