Figma for Edu: Working with components in Figma
Workshop file here: https://www.figma.com/community/file/1282006881523256512/Figma-for-Edu-Monlthy-Workshop%3A-Components
In this workshop we will cover how to create components, component sets, and publish a library so you can improve your workflow with reusable design elements that you can share with your collaborators.
Figma is free to use. Sign up here: https://bit.ly/3msp0OV
Figma is free for students and educators: https://figma.com/education
____________________________________________________
Find us on ⬇️
Twitter: https://twitter.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
Figma forum: https://forum.figma.com/
____________________________________________________
#Figma #FigmaEdu #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023
Define your design system's foundations - Lesson 2 part 2 : Introduction to design systems
Figma is free to use. Sign up here: https://bit.ly/3msp0OV
Habitz design system Community file: https://bit.ly/3BVcql4
Video course: https://bit.ly/3WwqzyI
Written course: https://bit.ly/3Oz6nKH
Foundations are the what of your design system. The building blocks you'll use to create product experiences, like visual styles, colors, typography, and components. As well as patterns, like structures, behaviors, and conventions.
____________________________________________________
Resources:
Accessibility:
The Book on Accessibility: https://bit.ly/3WC50gb
Web Accessibility Checklist: Magenta a11y.com: https://bit.ly/3Ow00ru
Color Blind Accessibility Manifesto.com: https://bit.ly/43oIuJO
Adhoc Accessibility Playbook: https://bit.ly/3BP9eHR
Universal Music: Creative Differences Handbook: https://bit.ly/424EM7g
Stark's Public Library: https://bit.ly/3MuiUwf
Book: Accessibility for Everyone: https://bit.ly/3q5KZm6
Fable: Accessible Usability Scale: https://bit.ly/45rZQHB
Color:
WCAG 1.4.1 Use Of Color: https://bit.ly/3OxeqaT
WCAG 1.4.4 Color Contrast: https://bit.ly/3ODYyDp
Figma Community: Plugins For Color Contrast: https://bit.ly/3MS5Kuo
Nielsen Norman Group: Using Color To Enhance Your Designs: https://bit.ly/42TCARb
Color From DesignSystems.com: https://bit.ly/42XuMhg
Figma Community: Resources For Color Palettes: https://bit.ly/43hxP4h
Hubspot’s Color Theory 101: https://bit.ly/3OxkDDx
Type:
Typescale by Sam Smith: https://bit.ly/3WsNmLM
Scaaale by Nicolas Massi: https://bit.ly/3BXDXlP
Kick Start Your Typographic System by Tom Lowry: https://bit.ly/45oGfYW
Typescale.com: https://bit.ly/45upBr0
Other:
A Complete Guide To Iconography: https://bit.ly/432HH1A
Spacing. Grids, and Layouts: https://bit.ly/3ozKTCF
____________________________________________________
00:00 - Introduction
00:08 - Foundations
00:35 - Accessibility
01:39 - Color
02:50 - Try it out
03:08 - 60 / 30 / 10 Rule
03:36 - Accessibility considerations for color
03:58 - Web Content Accessibility Guidelines
04:42 - Typography
05:01 - Choosing a font
05:42 - Type scale
06:32 - Typography grid tip
06:46 - Type scale hierarchy
07:43 - Limits to a type scale
08:19 - Try out an audit
8:43 - Elevation
9:12 - Elevation Tip
9:32 - Bonus elevation tip
9:45 - Iconography
10:01 - Icon system styles
10:37 - Testing an icon
11:12 Try out search terms for icons
11:36 - Icon size, container and padding
11:58 - Icon styles needs
12:15 - Icon grid
12:22 - Grids, layouts and spacing
12:51 - Layouts and breakpoints
14:13 - Responsive or fluid breakpoints
14:28 - Grids
14:39 - Column grids
15:20 - Baseline grids
16:05 - Modular grids
16:36 - Spacing
17:33 - Inconsistency
17:56 - Systematic thinking
18:10 - Patterns
19:14 - Wrap up
____________________________________________________
Find us on ⬇️
Twitter: https://twitter.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
Figma forum: https://forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems
Create 3D Site with Spline and React - Full Course
Turn your Figma UI to 3D and create a React site with Spline
Sponsored by Spline - https://spline.design
온라인셀러를 위한 피그마로 배너만들기
피그마가 처음이라 낯설고 어렵게 느껴질 수 있지만
직접 만들게 되면 얼마나 쉬운지 알게 되실거에요~
천천히 따라오세요!
피그마 32가지 기능업데이트
어떤 것들이 업데이트되었을까? | 이번 피그마 업데이트는 상당히 놀라운 것 같다. 어도비가 28조를 들여 인수한 피그마에게 자사 기술을 전면적으로 지원하여 업데이트한 것 같다. 피그마에서 이루어진 32가지 업데이트를 자세히 알아보도록 하자. 업데이트 내용 다음 링크로 이동하면 어떤 것들이 업데이트되었는지 재미있게 확인해 볼 수 있다. 1. On-can
피그마로 상세페이지에 이벤트이미지 직접 만들기
포토샵 몰라도, 디자인을 몰라도
온라인셀러, 1인사업주 분들을 위해 피그마로 상세페이지를 직접 만드실 수 있는 방법을 알려드립니다.
쉽고 트렌드에 맞게
현직 디자이너이자 온라인셀러인 리디가
알려드릴께요.
이번엔 간단한 이벤트 배너 이미지 입니다.
오늘 영상이 도움 되셨길 바라며,
구독과 좋아요도 부탁드려요^^
🔶피그마웹에서도 다운로드 가능합니다.
- 오늘 만든 배너 이미지 무료배포
https://www.figma.com/community/file/1196657466013058601
👉 문의 : draw_dreamwork@naver.com
진작 알았으면 좋았을 피그마 트릭 10개
당신이 한 번도 들어본 적 없을 피그마 꿀팁 | 해당 글은 Danny Sapio에 의해 4월 20일에 작성된 기사를 번역한 글입니다. 나는 Figma에 반영된 모든 유용한 기능에 지속해서 놀라곤 한다. 스케치에서 번거롭게 작업하던 것이 Figma에선 해결되어 있다. 나는 우연히 시간을 절약해주는 기능을 발견하고 내가 더 빨리 알았으면 했다. 바라건대
12 small and efficient Figma tips to improve your Figma workflow
No plugins are needed. Only native Figma tips |For the past three years, I’ve dedicated significant time and effort to mastering Figma, not only by using the most important features like auto layout,
Prototyping in Figma: Work smarter, not harder
A well-made, nonlinear prototype is a crucial part of great usability testing with amazing insights. Responsible designers will probably…
[피그마] 오토 레이아웃을 이용한 안드로이드와 iOS 카드 만들기
#figma #피그마사용법 #피그마오토레이아웃
[피그마] 오토 레이아웃을 이용한 안드로이드와 iOS 카드 만들기
제 커뮤니티에서 파일 다운받아서 영상 보면서 만들어 보세요.
https://www.figma.com/@designerlucy
0:33 루씨의 커뮤니티에서 파일 다운로드
0:58 Android 카드 만들기
6:45 iOS카드 만들기
-----------------------------------------------------------------------------------------------
루씨의 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.
본 영상으로 강의, 영상 추출, 참고 영상으로 사용을 금지합니다.
[Figma Playground] 피그마에서 비디오로 프로토타이핑 만들기
[Figma Playground] 피그마에서 비디오로 프로토타이핑 만들기
드디어 피그마에 비디오 삽입이 가능해졌습니다!!!!!
영상으로 만드는 웹사이트나 앱을 프로토타이핑을 해 볼 수 있습니다.
플레이그라운드 파일 다운로드 https://www.figma.com/@designerlucy
하셔서 영상과 함께 보세요~
0:58 프로토타입에 비디오 추가 Playground
2:22 비디오 삽입시 주의할 점
2:56 비디오 속성 설정
3:20 인터랙션 패널 옵션
3:40 Interctions across frames and continuity
4:40 Video State management
5:07 예제 미리보기
7:46 프레임 인터렉션 예제 살펴보기
8:29 랜딩 페이지 예제 살펴보기
9:12 프러덕트 갤러리 예제 살펴보기
10:05 소셜미디어 드래그 스크롤 예제 살펴보기
10:53 비디오 크기 설정 예제 살펴보기
11:35 비디오 썸네일 예제 살펴보기
12:24 뮤직 플레이어 예제 살펴보기
#figma #피그마사용법 #피그마비디오삽입
-----------------------------------------------------------------------------------------------
루씨의 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.
본 영상으로 강의, 영상 추출, 참고 영상으로 사용을 금지합니다.
나에게 맞는 생산성 툴은?
회사는 싫지만!!! 일은 잘하고 싶고, 인정받고 싶을 때, 나와 여러분의 퇴근을 보다 빨라지게 해주는 생산성 도구, 이럴 땐 이런 Tool !