Design/Figma (14) 썸네일형 리스트형 [Figma] 컴포넌트안에 컴포넌트 만들기, Nested Component 실무 활용법 1. Nested Component란?컴포넌트 안에 또 다른 컴포넌트를 넣는 구조를 의미해요.예를 들어 버튼 안에 아이콘이 들어가 있다고 해볼게요.이 아이콘도 별도로 만든 ‘아이콘 컴포넌트’라면, 이건 Nested Component 구조라고 할 수 있어요. 이렇게 만들면 디자인 시스템을 더 깔끔하고 유연하게 관리할 수 있어요. 2. 왜 써야 할까? 유지보수 효율 ↑ → 아이콘이나 서브 컴포넌트를 수정하면, 모든 인스턴스에 자동 반영됨재사용성 ↑ → 같은 아이콘, 같은 텍스트 스타일을 여러 곳에서 활용 가능스타일 일관성 유지 → 브랜드 가이드를 지키기 쉬움 예: 아이콘 색상을 바꾸고 싶을 때, ‘아이콘 컴포넌트’ 하나만 수정하면 버튼, 탭바, 카드 등 전체에 반영됨. 3. 실전 예시: 버튼.. [Figma] 컴포넌트 만들기 피그마를 조금 써본 분들이라면, "컴포넌트"라는 말을 자주 들으셨을 거예요.처음에는 헷갈릴 수 있지만, 한 번 이해하고 나면 디자인 작업이 훨씬 편해집니다.이번 글에서는 컴포넌트의 기본 개념부터 실무에 필요한 팁까지 정리해볼게요.출처: figma 공식 사이트 📌 컴포넌트란 무엇인가요?간단히 말하면, 반복 재사용할 수 있는 UI 요소예요.버튼, 카드, 아이콘처럼 여러 곳에서 똑같이 쓰이는 디자인을컴포넌트로 만들면 유지보수가 정말 쉬워집니다.컴포넌트를 사용하면 좋은 점:작업 효율성 증대 (반복 작업 감소)수정할 때 메인 컴포넌트만 고치면 모든 인스턴스에 반영라이브러리를 통해 다른 프로젝트에서도 불러와 재사용 가능전체 디자인을 규격화하여 디자인 시스템 구축 가능 2. 컴포넌트 만드는 방법1️⃣ 요소를 선.. [Figma] 팀을 다른 회사로 옮기기, 파일 대규모 이동 (무료버전 불가,유료기능) 프로젝트 파일을 옮기는건 기본적으로 빈번하게 자주 쓰는 기능이라서 별로 어렵지 않은데 팀을 통으로 다른 회사에 보내는 방법을 알고 있으신가요? 일일이 프로젝트 파일을 낱개로 옮기지 않고 통채로 옮길 수 있습니다. 팀 조직을 다른 회사로 간단하게 보낼 수 있습니다. 팀에 퇴사자가 있는경우 그 퇴사자만 제외하고 새로운 회사 계정을 생성해서 갈아 타는게 가능해진다고 해요. 주의할점&안내사항❶프로페셔널, 오거나이저, 엔터프라이즈 에서만 팀 이전이 가능하고요, 무료로 사용중인경우에는 사용할 수 없는 기능입니다. ❷더 치사한건요(?) 프로페셔널은 오직 오거나이저와 엔터프라이즈 쪽으로 팀이나프로젝트를 보내는것만 가능하고 반대로 받는건 불가능합니다. ➌ 기존 작업 파일에서 만약에 라이브러리를 불러와서 에셋을 연동해서 .. [Figma] 피그마로 PPT 만들기 PDF로 추출하기, 피그마 입문 일단 Frame을 전체 다 선택해 주시고File > Export frames to PDF 를 눌러서 pdf 확장자로 내보내면 됩니다. 16:9 비율로 제작하면 됩니다. 2560X14402048X11521920X10801440X8101280X7201024X576 다른 추천글 2022.09.16 - [design/figma] - [Figma] 피그마 하이퍼 링크 걸기 , 링크만들기 2가지방법 [Figma] 피그마 하이퍼 링크 걸기 , 링크만들기 2가지방법1. 텍스트 링크 간단하게 텍스트에 링크를 넣을 수 있습니다. 텍스트를 작성했을때 상단 메뉴에 링크 아이콘이 보입니다. creat link를 눌러서 링크 생성이 가능합니다. * 단축키: 맥에서 command+K, 윈paper-garden.tistory.. [Figma] 피그마에서 PDF 파일 불러오기 불가 / PDF 이미지 변환, (입문자용) https://cloudconvert.com/pdf-to-png PDF to PNG | CloudConvertPDF 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 plucloudconvert.com최근에 PDF 파일을 피그마에서 작업할 일이 있었는데요 pdf 파일 추출은 가능하지만 불러오는건 할 수 없었어요ㅜㅜ .. [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. 전체 이미지를 한꺼번에 추출하.. [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 prototypesWho can use this feature Supported on any team or organization pla.. 어도비, 피그마 28조 인수…10년만에 대박난 30대 청년 정체 https://www.joongang.co.kr/article/25102345 어도비, 피그마 28조 인수…10년 만에 대박난 30대 청년 정체 창업 10년 만에 억만장자 대열에 오르게 됐다. www.joongang.co.kr 피그마 28조원에 어도비에 인수됐다고 하네요 ... ㅠㅠ 피그마가 어도비 자리를 위협하는 경쟁사여서 막대한 자금을 투자해서라도 인수했나 봅니다. 근데 어도비에 인수되더라도 피그마 기능 계속 업데이트 해주는거 맞겠죠? ㅜㅜ 갑자기 피그마가 포토샵이나 XD처럼 오류나면서 꺼지는거 상상하면 나는 돈다.. 기사 내용 ‘포토샵’으로 유명한 미국 소프트웨어 업체 어도비(Adobe)가 경쟁업체 피그마(Figma)를 200억 달러(약 28조원)에 인수하기로 하면서 피그마 공동 창업자인 딜런 필드.. 이전 1 2 다음
