Here are my getting started resource
Naming and organizing things
Naming things in Figma by Joey Banks
https://youtube.com/watch?v=hEUO-9s7db4&feature=share
keeping things organized how microsoft team does it
https://medium.com/inside-designing-microsoft-teams/keeping-things-organized-7586999982f6
figma component the frontify way (tips)
https://medium.com/digital-branding/figma-components-the-frontify-way-3fbc7784a655
Scalable design system and Block Element Modifier way
https://www.headway.io/events/creating-scalable-design-systems
http://getbem.com/naming/
https://9elements.com/bem-cheat-sheet/
Best practices
The Library + Flow approach to organizing Figma files by Tess Gadd
https://uxdesign.cc/the-library-flow-approach-to-organizing-figma-files-70c02135c71f
Spacing guide for designers
https://uxplanet.org/spacing-guide-for-designers-5bd140afe52a
Responsive layout grid guide for designers
https://medium.com/user-experience-design-1/responsive-layout-grid-guide-for-designers-c3ba7d161bdfÂ
Best practices of components, styles, and shared libraries
https://www.figma.com/best-practices/components-styles-and-shared-libraries/
How does figma structure things
https://www.figma.com/community/file/958707742167149115
File structure best practice guide
https://www.figma.com/community/file/1004041613962064465
11 steps to keep Figma clean (super clean)
https://uxdesign.cc/11-steps-to-keep-figma-clean-6cbf86d46f00
Atomic 2.0 (Extending Atomic Design (update atomic design by Brad Frost)
https://medium.com/@hannah.heinson/atomic-2-0-d94e5601200c
Atomic Design originated from Brad Frost
https://uxdesign.cc/atomic-design-2022-what-we-can-learn-from-eames-and-other-design-giants-4d8e2f579daa
Another example of another’s interpretation of Atomic Design 2.0
https://medium.com/@hannah.heinson/atomic-2-0-d94e5601200c
Figma styles to setup, these lend well from web design &web development and in Design Systems such as Google’s Material Design
- Color Style
- Color Saturation Scale 100 – 900
- Text Style
- Font Weight Scale 100 – 900
UI Design Tips by Jim Raptis
https://www.uidesign.tips/ui-tips
Aleksandr Morozov’s collection of figma tips in a twitter thread.
@morozov_dev50 UI Design Tips by pixselacademy
Complete thread
https://twitter.com/morozov_dev/status/1547857531313070086
Figma Auto-layout in 5 minutes and Advanced Figma tips
All by By Christine Vallaure
New Figma Auto-layout in 5 minutes
https://uxdesign.cc/new-figma-auto-layout-in-5-min-b68cc1b6941f
Advance Figma tips
https://christinevallaure.medium.com/advanced-figma-tips-tricks-2022-20cbf9fdda45
Figma project structure inspo
project template
https://www.figma.com/community/file/872568832985837673
project index (figma cover)
https://www.figma.com/community/file/938084055059390892
Figma component tips by Danny Sapio
https://uxdesign.cc/10-components-tips-in-figma-12b80389574
Youtube Videos on Figma must knows
Figma vs FigJam by Femke
https://www.youtube.com/watch?v=UC-EqfyJBxY
setting up your grids by Mizko
https://www.youtube.com/watch?v=_w-iYiEXrl0
Why you should use components by AM Design
https://youtube.com/watch?v=6FB4MkPAYu4&feature=share
Mistakes Designers make with Figma Components by AM Design
https://www.youtube.com/watch?v=Ei9yebCBY0w
Mistakes noobs & pros designers made in Figma by AM Design
https://youtube.com/watch?v=ku1fKVd8-X0
Mastering autolayout in Figma by AM Design
https://youtube.com/watch?v=hicPvJDH7J4&feature=share
Figma tips and tricks from the team that builds Figma
https://www.youtube.com/watch?v=bhDUMTjfhF4
Optionals
Startup Drive Folder Organization: Free Template
https://danielstrangfeld.medium.com/startup-drive-folder-organization-free-template-b0ae80c25a85
Grids
Author: Tom Lowry on Nested Grids
https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/nested-grids/
Nested Grids figma design demo file (duplicate the file)
https://www.figma.com/file/KpGnFzwTnzpu2Z5T4CSFuQ/Layout-Grids
The Comprehensive 8pt Grid Guide
Start your UI project right with this extended framework for the 8pt grid: Typography, Icons and Layout.
https://medium.com/swlh/the-comprehensive-8pt-grid-guide-aa16ff402179
Design System based on the 8pt Grid
This article is the 2nd in a two part series
https://medium.com/swlh/design-system-based-on-the-8pt-grid-2473ca5f0ae1
Responsive layout grid guide for designers
Start your UI project learning how to build a responsive layout grid on Sketch or Figma for your responsive websites.
https://uxdesign.cc/responsive-layout-grid-guide-for-designers-c3ba7d161bdf
The 8-Point Grid
Using multiples of 8 to define dimensions, padding, and margin of elements.
https://spec.fm/specifics/8-pt-grid
Using layout grids for UI elements
https://tanzu.vmware.com/content/built-to-adapt/8-point-grid-borders-and-layouts
Mobile Layouts and Grids
https://design.infinum.com/case/mobile-layouts-and-grids
Red flags design interviews can reveal
https://blog.prototypr.io/design-interviews-10-red-flags-design-interviews-can-reveal-to-you-53055a362a77
9 Figma design system tips
A collection of handy tips to improve your design system workflow in Figma.
https://uxdesign.cc/9-figma-design-system-tips-8ce43ff309a0
Typography systems in Figma by Thomas Lowry
https://www.figma.com/best-practices/typography-systems-in-figma/typography-scales/
Why designers should move from px to rem (and how to do that in Figma)
by Christine Vallaure
https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15
Job Process
Dear Student
http://kritikakushwaha.com/dear-student
by Kritika Kushwaha
No-frills process & portfolio design advices & other stuff (PDFing in thread)If you’re a design student or aspiring designer, I suggest you check out the deck below where I talk about all the things you need to do to make a killer Interaction Design portfolio.
Figma prototype presentation
https://www.figma.com/proto/zPOpljxy9UZW5ZHEy4zagm/No-frills-Process-%26-Portfolio-[…]6-Other-Stuff?node-id=34%3A461&starting-point-node-id=34%3A461