fullstack-study

베리어블 사용법  베리어블 컬러  Primary Color: 주 색상으로 가장 많이 사용되는 색상.Primary Light: 주 색상의 밝은 버전.Primary Dark: 주 색상의 어두운 버전.Secondary Color: 보조 색상.Secondary Light: 보조 색상의 밝은 버전.Secondary Dark: 보조 색상의 어두운 버전.Background Color: 배경 색상.Text Primary: 주 텍스트 색상.Text Secondary: 보조 텍스트 색상.Success Color: 성공 메시지나 알림에 사용되는 색상.Warning Color: 경고 메시지나 알림에 사용되는 색상.Error Color: 오류 메시지나 알림에 사용되는 색상.Info Color: 정보 메시지나 알림에 사용되는 색..

컴포넌트 ( Component ) 개념과 등록  1. 컴포넌트 개념컴포넌트 : 단축키 :  [ ctrl ] + [ Alt ] + [ k ]  컴포넌트는 디자인 요소를 재사용하고 유지보수하기 쉽게 만드는 방법을 제공합니다.예를 들어, 웹 페이지의 헤더, 버튼, 아이콘 등과 같이 반복적으로 사용되는 디자인 요소를 컴포넌트로 정의하면 해당 컴포넌트를 다른 디자인에서도 쉽게 사용할 수 있습니다. Figma의 컴포넌트 기능은 디자인 시스템을 구축하고 협업하는 데 큰 도움을 주며, 특히 대규모 프로젝트에서 효율적인 디자인 작업을 가능하게 합니다.장점 재사용성: 한 번 디자인한 컴포넌트를 다른 곳에서 간편하게 재사용할 수 있습니다. 수정하거나 업데이트할 때에도 모든 인스턴스에 일괄적으로 적용됩니다.일관성: 컴포넌트를..

이미지 누끼 플러그인 Remove BG  1. Remove BG 검색    2. Set API Key  3.  wesite 클릭  4. 가입 ( 메일 인증받기 )https://www.remove.bg  이미지 배경 제거, 투명 배경 만들기 – remove.bg사진이나 이미지 배경을 한 번 클릭으로 5초만에 무료로 제거할 수 있습니다. 이미지 배경 투명하게 만드는 법. 누끼 따기 프로그램.www.remove.bg 구글로 가입하세요    5. Tools & API - figma 선택  6. 인스톨은 안 해도 됩니다.  api key 7. API Keycopy - save changes    8. 9. 이미지 선택 실행

이미지 가져오기, 속성, 이펙트, 마스크   이미지 가져오는 방법 이미지 속성 이미지 자르기이펙트 마스크 만들기마스크 제거하기   1. 이미지 가져오기 무료 이미지 : https://pixabay.com/ 1) 메뉴, 툴- [피그마아이콘] - [file] - [place image]- 단축키 : Ctrl+Shift+k- 도형툴 -  [place image]    2) 도형안에 이미지 넣기   3) 여러개의 도형 안에 이미지 넣기         2. 이미지 보정과 속성   1. 이미지 2. 이미지 또는 GIF의 섬네일 3. 불투명도 백분율 값(%)  0% ~ 100% 4. 숨기기 / 보이기  5. [-] 이미지를 제거 6. [+] 추가 7. 이미지, 단색 및 그라디언트에서 색상 스타일을 만들고. 스타일 아..

그룹 프레임 섹션, 펜툴, Boolean operations ( 패스파인더 ), 텍스트  #  그룹(Group) ,  프레임(Frame) , 섹션(Section)  1. 프레임(Frame)설명: 프레임은 피그마에서 가장 기본적인 레이아웃 컨테이너로, 디자인의 개별 요소들을 감싸고 배치할 수 있는 영역을 의미합니다. 프레임은 보통 아트보드(artboard)로 사용되며, 디바이스의 화면 크기나 디자인 시스템의 구성 요소를 정의할 때 사용됩니다.특징:프레임은 디자인 요소(텍스트, 이미지, 기타 오브젝트)를 포함할 수 있으며, 개별 요소들의 위치와 크기를 관리합니다.프레임 내부에 다른 프레임을 중첩시킬 수 있습니다.프레임 자체에 배경색, 그림자, 모서리 곡률 등을 설정할 수 있습니다.자동 레이아웃(Auto La..

프레임, 페이지, 정렬, 편집        # 프레임프레임 프리셋 : 아이폰, 안드로이드, 데스크톱 사이즈 등을 지정합니다. 프레임을 제어하는 기능 외에는 레이어와 동일하게 사용 가능합니다. , Frame , Group , Seciton 가능위치와 사이즈 : 모든 프레임과 레이어에는 위치값(x , y)과 사이즈 (width, height)가 있습니다.  Rotation : 로테이션 각도를 지정합니다. (  360도를 기준으로 , + 양수, 음수 - )가 존재합니다. 360도를 기준으로 입력하면 음수각도와 양수각도를 자동으로 설정해 줍니다.Coner radius: 코너 라운딩 수치를 입력합니다. Clip content : 옵션 체크하면 레이어가 프레임에 걸쳐있을 때 해당 프레임에 잘려서 보입니다 ( css..

화면구조, 메뉴,  룰러, 가이드 캔버스(Canvas):피그마의 핵심 작업 영역으로, 디자인 요소들이 배치되고 편집되는 곳입니다. 프로젝트마다 하나의 캔버스가 있으며, 사용자는 캔버스를 생성하고 필요에 따라 크기를 조정할 수 있습니다. 사용자가 생성한 디자인 요소들을 캔버스에 배치하여 프로토타입을 만들거나 디자인을 완성합니다. 레이어(Layers):캔버스 위에 배치된 개별 요소들(텍스트, 모양, 이미지 등)을 관리합니다. 레이어 패널을 통해 사용자는 캔버스에 배치된 모든 요소들을 확인하고 관리할 수 있습니다. 레이어는 순서대로 쌓이며, 위에 있는 레이어가 하위에 있는 레이어를 가리게 됩니다. 이를 통해 요소들의 배치 순서를 조정할 수 있습니다. 그리드(Grids):디자인 요소를 정렬하고 배치하는 데 도움..

피그마 단축키  Ctrl(cmd)+Shift+/를 누르시면 여러 단축키 확인하기명령어 검색 : ctrl + /이동과 선택:V: 이동 도구 A: 선택 도구 Shift + 드래그: 여러 개의 요소 선택 Ctrl (Cmd) + 드래그: 선택한 요소 이동 시 그리드에 자동 스냅 Alt (Option) + 드래그: 요소를 복사해서 이동편집:Ctrl (Cmd) + C: 복사 Ctrl (Cmd) + V: 붙여넣기 Ctrl (Cmd) + Z: 되돌리기 Ctrl (Cmd) + Shift + Z: 다시 실행 Delete: 요소 삭제 화면 조작:Spacebar: 화면 드래그 Ctrl (Cmd) + +/-: 확대/축소 1: 100% 화면 보기 2: 캔버스에 맞추기 0: 선택한 요소 확대 레이어 및 그룹 관..

가입하기, 피그마 소개 #. 사이트 접속https://www.figma.com/ 엡데이트 이전에 사용중인 분들은  피그마 UI3 베타버전 사용으로 업데이트  #. 가입 ( 이메일가입 )Google 계정Google 비즈니스 계정 등 Google 계정을 갖고 있는 경우 Google 계정 세부 정보를 사용해 Figma 계정에 가입할 수 있습니다.Figma.com으로 이동하여 오른쪽 상단에서 가입을 클릭합니다. 또는 링크(https://www.figma.com/signup)로 직접 이동합니다. 창 상단에서 Google로 계속을 선택합니다.이미 Google에 로그인되어 있다면 세부 정보를 확인하라는 메시지가 표시됩니다.Google에 로그인되어 있지 않다면 표시된 필드에 Google 이메일 또는 전화번호를 입력하고..