"Figma"의 검색 결과
필터
-
구글 시트 데이터를 피그마 UI에 맞춰서 불러오는 극강의 효율 플러그인(google sheets sync) | 피그마 강좌
안녕하세요. 오늘은 디자이너라면 한 번쯤은 맞닥트리는 반복 노동의 현장에서 벗어날 수 있는 구글 시트 싱크 플러그인을 소개해 드릴게요.
피그마에서 컴포넌트를 제작할 때 어떻게 설정해야 하는지부터 구글 시트에 작성하는 방법, 링크 공유하고 난 후 플러그인으로 불러오는 방법 등을 알려드리겠습니다.
UI 내에 제품 정보 100개를 수기로 입력해야 한다면 어떨 것 같으세요..? 벌써 머리가 뜨거워지죠. 미리 알았더라면 하는 기능입니다. 바로 알려드릴게요.
00:00 시작
00:08 디자이너의 흔한 업무 방식
01:10 피그마 컴포넌트 제작
02:35 구글 시트 작성
03:30 구글 시트 공유
03:44 Google Sheets Sync 플러그인
#피그마 #figma #플러그인 #구글시트 #googlesheets #googlesheetssync
🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요
┗ https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join
🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커멘드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.
☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea -
![[피그마] 프로토타입을 이용한 웹 사이트의 인트로 애니메이션 만들기](https://i.ytimg.com/vi/uNJumDNrfKE/mqdefault.jpg)
[피그마] 프로토타입을 이용한 웹 사이트의 인트로 애니메이션 만들기
[피그마] 프로토타입을 이용한 웹 사이트의 인트로 애니메이션 만들기
1:24 프레임을 만들기
1:44 unsplash 플러그인으로 사진 가져오기
3:36 헤더 만들기
5:53 Prototype 설정하기
#피그마 #웹사이트인트로애니메이션 #스마트애니메이트 #prototype #smartanimate #sring animation #websitedesign #uidesign #introanimation #figmatutorial
-----------------------------------------------------------------------------------------------
루씨의 UXUI 디자인 채널입니다.
디자이너를 꿈꾸는 대학생, 취업 준비 중인 디자이너 등을 위한 기초적인 툴 강의를 하고 있습니다. 다양한 제휴(디자인 툴 리뷰, 디자인 책 리뷰), 강의 요청, 궁금한 부분 있으면 댓글 또는 메일(lucymygirl@naver.com)로 해주세요. 영상이 도움 되셨다면 구독,좋아요 부탁 드립니다!
Hello ~
Welcome to The UXUI Design Channel.
This channel offers UXUI design, Figma, Photoshop, Illustrator, HTML, CSS, data driven , GA.
I'm interested in design tool review, design book review ... and more fun reviews.
Contact me: lucymygirl@naver.com
Thanks for Watching! Happy Designingggggggggg ; )
--------------------------------------------------------------------------------------------
© 루씨의 UXUI 디자인. ALL RIGHTS RESERVED.
본 영상으로 강의, 영상 추출, 참고 영상으로 사용을 금지합니다. -
Why use Node.js? 9 examples of successful Node.js apps
Why use Node.js? Let the examples of Node.js apps speak for themselves: discover Uber, Figma, SpaceX, Slack, Netflix and more!
-
11 steps to keep Figma clean
We all probably already know how it is to receive a project from someone else. Not everyone works the same way, it’s what makes our field…
-
Using Figma interactive components to create functional buttons
Using Figma’s new Interactive Components to make reusable buttons in your prototypes
-
How we use Figma’s API to deliver design to the production
Why did we choose Figma?
-
피그마, 마케터의 치트키가 될 수 있을까?
큐레터 담당자의 브라우저 엿보기 ① 아이보스 사이트② 어도비 포토샵 & 일러스트레이터 : 큐레터에 필요한 이미지를 제작해요.③ 스티비(stibee) : 큐레터를 편집하고 발송하는 사이트예요.④ 구글 애널리틱스(GA) : GA를 통해 큐레터 콘텐츠의 성과를 확인하고 있어요.⑤ 엑셀 : 콘텐츠의 성과를 분석하고 기록하기 위해 엑셀은 필수예요.⑥ 카카오 뷰 창작
-
![[Rock's Easyweb] figma(피그마)로 디자인과 프로토타이핑을 동시에 하자!](https://i.ytimg.com/vi/_myVwi0vq5s/mqdefault.jpg)
4
[Rock's Easyweb] figma(피그마)로 디자인과 프로토타이핑을 동시에 하자!
Sample Download: https://goo.gl/icduFr
1/4
- 피그마로 디자인하기
- 피그마로 요소들 그리기
- 그리드 사용하기
- 텍스트 사용하기
2/4
- 펜툴 사용하기
- 컴포넌트 사용하기
- 모바일 사이트 디자인하기
- 헤더 완성하기
3/4
- 폰트어썸 아이콘
- 로그인 입력폼, 버튼
- 첫 메인화면 완성하기
- 반응형에 맞춰 유연하게 디자인하기
- figma mirror 로 실시간으로 디자인 핸드폰에서 확인하기
4/4
- 서브페이지 만들기
- google material design 활용하기
- figma mirror 로 실시간으로 디자인 핸드폰에서 확인하기
- 페이지가 연결되는 프로토 타이핑 하기
- 디자인단계에서 css 코드 확인하기
- image 저장하기
- 수료생 포트폴리오 보기 : http://bitly.kr/yEkoJC
- 후원하기: https://toon.at/donate/ezwebpub
홈페이지 방문하기: http://ezwebpub.com/
#피그마 #웹디자인 #figma #prototyping #프로토타이핑 -
급부상하는 UI 디자인 저작툴 피그마(Figma)
현재 UI 디자인 분야에서는 기존의 포토샵이 아닌 스케치(Sketch), 피그마(Figma), XD와 같은 전용 저작툴이 인기를 끌고 있습니다. 필자는 스케치를 주력으로 사용하면서 XD를 가끔 이용해왔습니다. 스케치가 가지는 장점이 명확하지만 맥 전용이라는 단점이 존재하기 때문에 윈도우 환경에서 작업을 해야 하는 상황에서는 많은 어려움이 있습니다. 그런데
-
Figma 최신 기능 완전 정복!! 한 큐에 정리해드려요.
Figma 최신 업데이트 기능 한번에 정리했습니다!
이번에 업데이트된 기능에 대해서 완전 정복하고 가세요. :)
기획자의 피그마
브런치 👉 https://brunch.co.kr/@applehong
블로그 👉 https://blog.naver.com/drivenmyself
배경음악
Music by Anja Kotar - April - https://thmatc.co/?l=6B896CC4
Music by Scuba Baptiste - study more - https://thmatc.co/?l=35611637
#figma #피그마 #피그마사용법 -
2
피그마 강좌 l 반응형 Card 컴포넌트 제작
Card 컴포넌트 제작 Part 1
00:00 intro
00:24 웹상의 이미지 피그마에 붙여 넣기
00:52 Place Image 로컬 이미지 여러개를 피그마로 가져오는 방법
01:17 이미지 사이즈 조정
01:32 텍스트 입력
01:52 텍스트 복사 & 붙여넣기
02:15 오토 레이아웃 기능으로 텍스트 그룹핑
02:35 피그마의 레이어명 변경하기
02:52 텍스트 복제하기
03:00 객체간의 간격 확인하기
03:06 오토 레이아웃 설정 가이드
03:38 텍스트 스타일 수정하기
03:51 Uppercase 영문 텍스트 모두 대문자로 표기하는 설정
05:03 Auto Layout 단축키 Shift + A
05:49 텍스트를 프레임 기준으로 리사이징하는 방법 1
07:10 오토 레이아웃 프레임에 컬러 지정
07:23 오토 레이아웃 프레임의 여백 지정
07:57 텍스트를 프레임 기준으로 리사이징하는 방법 2
08:50 오토 레이아웃 프레임의 Corner Radius가 적용되지 않는 경우 해결 방법
09:45 이미지를 프레임 기준으로 리사이징하는 방법
10:01 Card 컴포넌트 생성하기
10:37 인스턴스가 아닌 컴포넌트를 수정해야하는 이유
10:50 인스턴스를 수정하는 방법 Override
11:37 다음 영상 예고 -
6
피그마 알아보기
무료 플랜으로 웹사이트에 접속하셨나요? 어플리케이션을 설치할 수도 있어요. 그럼 이제 화면 구성을 살펴보고 이 툴로 무엇을 할 수 있는지 살펴봅니다.…
-
6
피그마 입문자를 위한 Figma Guide
피그마 설명서 1부, 떠오르는 피그마 | 저의 처음 시작은 당연히 모두가 비슷하듯이 포토샵으로 시작하였습니다. 처음 디자인을 시작할 때 가끔 XD라는 툴이 나온다는 Figma, Sketch라는 툴이 좋다는 이야기만 들었지 왜 좋은지 왜 사용하는지 알지 못했습니다. 차후에 이 UI 디자인 툴을 사용하게 되고 새로운 세계를 접하게 되었습니다. 아직은 많은 디자인 회사에서 포토샵을 사용하고 있습니다.
-
기획자가 알려주는 ‘피그마’ 활용법 | 요즘IT
UX tools 조사에 따르면, 지난해 피그마는 디자이너가 가장 많이 쓰고 맥과 윈도우를 통틀어 가장 인기 있는 UI툴 1위로 선정되었습니다. 코로나19로 재택근무가 확대되면서 피그마가 내세운 ‘온라인 협업 툴’이라는 가치가 비로소 증명된 결과라고 볼 수 있습니다. 그렇다면 디자이너가 아닌, 기획자에게 피그마라는 툴은 어떨까요? 오늘은 기획자의 관점에서 피그마를 활용할 수 있는 방법에 대해 살펴보겠습니다.
-
Web Design for Beginners | FREE COURSE
If you're new to web design, this course on web design for beginners will teach you everything you need to know. ► Download creative digital assets with Envato Elements: https://elements.envato.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
“How do I pick typefaces, how do I pick colors, what the heck is whitespace, and how do I position and size elements correctly?” These are exactly the kinds of questions which we’ll address in this beginner web design tutorial.
In terms of fundamentals, you’ll learn about color, typography, spacing, sizing, imagery, and responsive web design. We’ll discuss the theory, best practices, and some tools you can use to make your job easier.
When it comes to common web design patterns, you’ll learn about the elements you can use to design a web page—things like headers, hero areas, buttons, image galleries, contact forms, and more.
For each of these patterns, we’ll look at the definition and some use cases, and then we’ll apply that knowledge to a demo project: a three-page portfolio website designed specifically for this course.
► Check out this link for the project brief and course assignments: https://bit.ly/37YMk4W
► Read the course notes (and more!) for Web Design for Beginners on Envato Tuts+: https://webdesign.tutsplus.com/articles/web-design-for-beginners-epic-free-course--cms-41118?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Link to wireframe portfolio website with Figma: https://www.figma.com/file/Ak0JQMv65digqiASGnoLI0/Portfolio-Website?node-id=0%3A1
What You'll Learn:
00:00:00 Welcome!
00:04:31 Course brief and assignment
00:05:48 UI design vs. UX design vs. web design
00:14:08 Learning to work with project briefs
00:19:59 Working with wireframes
00:28:08 Picking the right design tool
00:33:53 Color theory
00:51:36 Color harmonies, psychology and tools
01:03:11 Creating a color palette for our project
01:20:00 Let’s talk about typography
01:31:11 Creating the typography for our project
01:46:01 Spacing and sizing in web design
01:54:47 Using icons and images in web design
02:03:33 Definition and use cases for headers
02:11:39 Let’s design a header
02:28:16 Definition and use cases for hero areas
02:33:06 Let’s design a hero area
02:39:08 Definition and use cases for buttons
02:44:46 Let’s design some buttons
02:57:27 Definition and use cases for image galleries
03:01:38 Let’s design an image gallery
03:12:34 Definition and use cases for footers
03:17:55 Let’s design the footer
03:26:37 Definition and use cases for testimonials
03:31:48 Let’s design some testimonials
03:44:15 Definition and use cases for tabs
03:48:11 Let’s design some tabs
03:59:47 Definition and use cases for accordions
04:04:03 Let's design an accordion
04:13:19 Definition and use cases for contact forms
04:18:17 Let’s design a contact form
04:32:49 What is a responsive website?
04:36:55 Making layout changes for tablets and phones
04:56:44 Making a component responsive
05:09:52 A quick word about prototyping
05:16:11 Next steps and key takeaways
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
