Design/Figma
-
출처: figma 공식 사이트 컴포넌트 , 반복 재사용 가능한 UI 요소 컴포넌트를 사용하는 이유 디자인 자산 운용으로 작업 효율성 증대하기 만들어 놓은 디자인 자산을 다시 재활용 할 수 있습니다. 메인 요소를 수정하면 복제된 디자인에도 수정사항이 반영 되어 반복 작업을 줄여줍니다 라이브러리 기능을 활용해서 디자인시스템운용 컴포넌트로 제작한 UI 요소들을 라이브러리로 보내놓고 다른 프로젝트 파일에서도 라이브러리를 통해 불러와서 재사용 가능합니다. 요소들을 전부 합쳐 거대한 디자인 시스템으로 규격화 할 수 있습니다. 1. 컴포넌트 만들기 1-1. 마우스 우클릭후에 'Create component' 실행 component를 생성하면 메인 컴포넌트가 생성됩니다. 메인 컴포넌트(부모)를 복제한 것을 Instan..
[Figma] 컴포넌트 만들기 1탄출처: figma 공식 사이트 컴포넌트 , 반복 재사용 가능한 UI 요소 컴포넌트를 사용하는 이유 디자인 자산 운용으로 작업 효율성 증대하기 만들어 놓은 디자인 자산을 다시 재활용 할 수 있습니다. 메인 요소를 수정하면 복제된 디자인에도 수정사항이 반영 되어 반복 작업을 줄여줍니다 라이브러리 기능을 활용해서 디자인시스템운용 컴포넌트로 제작한 UI 요소들을 라이브러리로 보내놓고 다른 프로젝트 파일에서도 라이브러리를 통해 불러와서 재사용 가능합니다. 요소들을 전부 합쳐 거대한 디자인 시스템으로 규격화 할 수 있습니다. 1. 컴포넌트 만들기 1-1. 마우스 우클릭후에 'Create component' 실행 component를 생성하면 메인 컴포넌트가 생성됩니다. 메인 컴포넌트(부모)를 복제한 것을 Instan..
2023.06.14 -
프로젝트 파일을 옮기는건 기본적으로 빈번하게 자주 쓰는 기능이라서 별로 어렵지 않은데 팀을 통으로 다른 회사에 보내는 방법을 알고 있으신가요? 일일이 프로젝트 파일을 낱개로 옮기지 않고 통채로 옮길 수 있습니다. 팀 조직을 다른 회사로 간단하게 보낼 수 있습니다. 팀에 퇴사자가 있는경우 그 퇴사자만 제외하고 새로운 회사 계정을 생성해서 갈아 타는게 가능해진다고 해요. 주의할점&안내사항 ❶프로페셔널, 오거나이저, 엔터프라이즈 에서만 팀 이전이 가능하고요, 무료로 사용중인경우에는 사용할 수 없는 기능입니다. ❷더 치사한건요(?) 프로페셔널은 오직 오거나이저와 엔터프라이즈 쪽으로 팀이나 프로젝트를 보내는것만 가능하고 반대로 받는건 불가능합니다. ➌ 기존 작업 파일에서 만약에 라이브러리를 불러와서 에셋을 연동해..
[figma] 팀을 다른 회사로 옮기기, 파일 대규모 이동 (무료버전 불가,유료기능)프로젝트 파일을 옮기는건 기본적으로 빈번하게 자주 쓰는 기능이라서 별로 어렵지 않은데 팀을 통으로 다른 회사에 보내는 방법을 알고 있으신가요? 일일이 프로젝트 파일을 낱개로 옮기지 않고 통채로 옮길 수 있습니다. 팀 조직을 다른 회사로 간단하게 보낼 수 있습니다. 팀에 퇴사자가 있는경우 그 퇴사자만 제외하고 새로운 회사 계정을 생성해서 갈아 타는게 가능해진다고 해요. 주의할점&안내사항 ❶프로페셔널, 오거나이저, 엔터프라이즈 에서만 팀 이전이 가능하고요, 무료로 사용중인경우에는 사용할 수 없는 기능입니다. ❷더 치사한건요(?) 프로페셔널은 오직 오거나이저와 엔터프라이즈 쪽으로 팀이나 프로젝트를 보내는것만 가능하고 반대로 받는건 불가능합니다. ➌ 기존 작업 파일에서 만약에 라이브러리를 불러와서 에셋을 연동해..
2023.06.03 -
일단 Frame을 전체 다 선택해 주시고 File > Export frames to PDF 를 눌러서 pdf 확장자로 내보내면 됩니다. 16:9 비율로 제작하면 됩니다. 2560X1440 2048X1152 1920X1080 1440X810 1280X720 1024X576 다른 추천글 2022.09.16 - [design/figma] - [Figma] 피그마 하이퍼 링크 걸기 , 링크만들기 2가지방법 [Figma] 피그마 하이퍼 링크 걸기 , 링크만들기 2가지방법 1. 텍스트 링크 간단하게 텍스트에 링크를 넣을 수 있습니다. 텍스트를 작성했을때 상단 메뉴에 링크 아이콘이 보입니다. creat link를 눌러서 링크 생성이 가능합니다. * 단축키: 맥에서 command+K, 윈 paper-garden.tis..
[Figma] 피그마로 PPT 만들기 PDF로 추출하기일단 Frame을 전체 다 선택해 주시고 File > Export frames to PDF 를 눌러서 pdf 확장자로 내보내면 됩니다. 16:9 비율로 제작하면 됩니다. 2560X1440 2048X1152 1920X1080 1440X810 1280X720 1024X576 다른 추천글 2022.09.16 - [design/figma] - [Figma] 피그마 하이퍼 링크 걸기 , 링크만들기 2가지방법 [Figma] 피그마 하이퍼 링크 걸기 , 링크만들기 2가지방법 1. 텍스트 링크 간단하게 텍스트에 링크를 넣을 수 있습니다. 텍스트를 작성했을때 상단 메뉴에 링크 아이콘이 보입니다. creat link를 눌러서 링크 생성이 가능합니다. * 단축키: 맥에서 command+K, 윈 paper-garden.tis..
2023.04.19 -
https://cloudconvert.com/pdf-to-png PDF to PNG | CloudConvert PDF Converter PDF PDF is a document file format that contains text, images, data etc. This document type is Operating System independent. It is an open standard that compresses a document and vector graphics. It can be viewed in web browsers if the PDF plu cloudconvert.com 최근에 PDF 파일을 피그마에서 작업할 일이 있었는데요 pdf 파일 추출은 가능하지만 불러오는건 할 수 없었어요..
[Figma]피그마에서 PDF 파일 불러오기 불가 / PDF 이미지 변환https://cloudconvert.com/pdf-to-png PDF to PNG | CloudConvert PDF Converter PDF PDF is a document file format that contains text, images, data etc. This document type is Operating System independent. It is an open standard that compresses a document and vector graphics. It can be viewed in web browsers if the PDF plu cloudconvert.com 최근에 PDF 파일을 피그마에서 작업할 일이 있었는데요 pdf 파일 추출은 가능하지만 불러오는건 할 수 없었어요..
2023.04.06 -
1. Viewer 뷰어 일때 이미지 출력 방법 숫자 1x 는 원본 크기로 추출 (윈도우) 2x는 2배 크기입니다. (기타 디스플레이 대응) + 아이콘을 눌러서 더 필요한 확장자나 여러 크기로 추출하시면 됩니다. 2. Edit, Owner, Admin권한일때 export하기 1. 오른쪽 패널 / Design 탭을 누르면 제일 밑 하단에 위치해 있습니다. 2. 만약 비어 있는 상태면 + 아이콘을 눌러서 추출(export)할 파일을 활성화 합니다. 3 .export 할 파일을 활성화 하면 제가 캡쳐한 이미지처럼 export '이미지 파일명'이 입력된 버튼이 나타납니다. 4. + 아이콘을 눌러서 PNG, SVG, JPG 등 다양한 옵션을 추가하셔서 사용하실 수 있습니다. 3. 전체 이미지를 한꺼번에 추출하기 1..
[Figma]피그마에서 png, svg, jpeg 등 이미지 파일 저장하기 (뷰어권한/에디트권한)1. Viewer 뷰어 일때 이미지 출력 방법 숫자 1x 는 원본 크기로 추출 (윈도우) 2x는 2배 크기입니다. (기타 디스플레이 대응) + 아이콘을 눌러서 더 필요한 확장자나 여러 크기로 추출하시면 됩니다. 2. Edit, Owner, Admin권한일때 export하기 1. 오른쪽 패널 / Design 탭을 누르면 제일 밑 하단에 위치해 있습니다. 2. 만약 비어 있는 상태면 + 아이콘을 눌러서 추출(export)할 파일을 활성화 합니다. 3 .export 할 파일을 활성화 하면 제가 캡쳐한 이미지처럼 export '이미지 파일명'이 입력된 버튼이 나타납니다. 4. + 아이콘을 눌러서 PNG, SVG, JPG 등 다양한 옵션을 추가하셔서 사용하실 수 있습니다. 3. 전체 이미지를 한꺼번에 추출하기 1..
2023.02.01 -
피그마에서도 gif이미지를 넣는게 가능한데 움직이는 형태의 이미지를 보려면 Present모드에서 보는게 가능하다. 발표용 ppt를 만들거나 디자인 프로토타입 버전에서 움직이는 애니메이션 이미지를 보여줘야 할 필요가 있을 때 활용해 볼 수 있다. 부가설명은 피그마 가이드 문서 내용 참고. https://help.figma.com/hc/en-us/articles/360041486873-Add-animated-GIFs-to-prototypeshttps://help.figma.com/hc/en-us/articles/8878274530455 Add animated GIFs to prototypes Who can use this feature Supported on any team or organization pl..
[Figma]피그마 프로토타입에서 영상과 Gif 이미지 넣기피그마에서도 gif이미지를 넣는게 가능한데 움직이는 형태의 이미지를 보려면 Present모드에서 보는게 가능하다. 발표용 ppt를 만들거나 디자인 프로토타입 버전에서 움직이는 애니메이션 이미지를 보여줘야 할 필요가 있을 때 활용해 볼 수 있다. 부가설명은 피그마 가이드 문서 내용 참고. https://help.figma.com/hc/en-us/articles/360041486873-Add-animated-GIFs-to-prototypeshttps://help.figma.com/hc/en-us/articles/8878274530455 Add animated GIFs to prototypes Who can use this feature Supported on any team or organization pl..
2022.10.03