Last active
April 6, 2020 21:47
-
-
Save realph/b2f11c22a75e4e8ef002f7e3964a4dc8 to your computer and use it in GitHub Desktop.
Revisions
-
realph revised this gist
Apr 6, 2020 . 1 changed file with 1 addition and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -63,4 +63,5 @@ https://lawsofux.com/ ### Atomic Design Principles > TLDR: https://bradfrost.com/blog/post/atomic-web-design/ Book: http://atomicdesign.bradfrost.com/ -
realph revised this gist
Apr 6, 2020 . 1 changed file with 1 addition and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -62,6 +62,5 @@ Some of these tutorials may be missing some of the most-recent features that hav https://lawsofux.com/ ### Atomic Design Principles > TLDR: https://bradfrost.com/blog/post/atomic-web-design/ Book: http://atomicdesign.bradfrost.com/ -
realph revised this gist
Apr 6, 2020 . 1 changed file with 1 addition and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -63,4 +63,5 @@ https://lawsofux.com/ ### Atomic Design Principles TLDR: https://bradfrost.com/blog/post/atomic-web-design/ Book: http://atomicdesign.bradfrost.com/ -
realph revised this gist
Apr 6, 2020 . 1 changed file with 3 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -56,11 +56,11 @@ Some of these tutorials may be missing some of the most-recent features that hav * [Prototyping and Interactions in Figma](https://www.youtube.com/watch?v=E-H06QNkHTU) * [Working with Contraints and Adaptive Layout in Figma](https://www.youtube.com/watch?v=n5LOZm3mdY4) ## Other Resources ### The Laws of UX https://lawsofux.com/ ### Atomic Design Principles TLDR: https://bradfrost.com/blog/post/atomic-web-design/ Book: http://atomicdesign.bradfrost.com/ -
realph revised this gist
Apr 6, 2020 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -18,7 +18,7 @@ Heard good things about this book. ### [Don't Make Me Think](https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10) Well-regarded bible on UX design. Does what it says on the tin by stressing one of the most important priciples of screen design — never making the user think. <img src="https://i.imgur.com/qQHjEZRl.jpg" width="70"> -
realph revised this gist
Apr 6, 2020 . 1 changed file with 6 additions and 8 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -32,21 +32,21 @@ There is a large pool of design tools to choose from, but if there was one tool In the last few years it's become *the* tool to use for interface designers. Why do people love it, you ask? Some years back the popular design tools (mainly Adobe and Sketch) started to plateau, and they also did a good job of convincing designers at the time that the design tool was never going to close the gap between design and engineering, and that handoff, the process where designers "hand-off" finished designs for engineers to implement, would remain a somewhat arduous and painful task forevermore. This went on to spawn a new market of separate handoff tools, but that's another story. With Sketch and Adobe having taken their eye off the ball, a little tool called Figma came along and it wasn't shy about pushing the envelope, and slowly nudging itself closer to the engineering tools that were responsible for implementing these designs. Yay! Fast-forward a few years and many innovations later, Figma has dethroned Sketch and become the defacto interface design tool in the industry. It's also platform agnostic (yay!), running on Mac, PC, Linux, and Web. Also this wraps up the the history lesson. Another yay! -- ### Figma tutorials Here are some great tutorials from the Figma team's YouTube channel which should help you get started. 1. [What's Figma](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4&index=1) 2. [The Basics (playlist)](https://www.youtube.com/watch?v=5i-ebNTjad8&list=PLXDU_eVOJTx6zk5MDarIs0asNoZqlRG23) 3. [Components (playlist)](https://www.youtube.com/watch?v=k74IrUNaJVk&list=PLXDU_eVOJTx5LSjOmeBYMuvaa4UayfMe4) Speaking of YouTube, here's some more videos I found that delve into process and techniques. Some of these tutorials may be missing some of the most-recent features that have come to Figma in the last 12 months. However they're still a good watch. @@ -58,11 +58,9 @@ Some of these tutorials may be missing some of the most-recent features that hav # Other Resources ## The Laws of UX https://lawsofux.com/ ## Atomic Design Principles TLDR: https://bradfrost.com/blog/post/atomic-web-design/ Book: http://atomicdesign.bradfrost.com/ -
realph revised this gist
Apr 6, 2020 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -12,13 +12,13 @@ Haven't read it before but it's often heralded as good entry point for designing ### [Simple and Usable Web, Mobile, and Interaction Design](https://www.amazon.co.uk/dp/0321703545/ref=as_li_qf_sp_asin_il_tl?slotNum=7&ie=UTF8&linkCode=g12&linkId=JBCV6SPPET4C6AOF&imprToken=4WTZS89U--bVJlA7LFuWoQ&creativeASIN=0321703545&tag=cre8ivecomman-21&creative=9325&camp=1789) Heard good things about this book. <img src="https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg" width="70"> ### [Don't Make Me Think](https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10) Well-regarded bible on UX design. Does what it says on the tin by stressing one of the most important priciples of screen design — don't make the user think. <img src="https://i.imgur.com/qQHjEZRl.jpg" width="70"> -
realph revised this gist
Apr 6, 2020 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -18,7 +18,7 @@ Heard good things about this book too. ### [Don't Make Me Think](https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10) Well-regarded bible on UX design. <img src="https://i.imgur.com/qQHjEZRl.jpg" width="70"> -
realph revised this gist
Apr 6, 2020 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -26,7 +26,7 @@ Well-regarded bible on UX design. Full of good examples too! I'd highly recommend giving this one a read. It's full of golden nuggets founded in good/solid/grounded interface design principles. Can't recommend it enough! ## Tool~s~ There is a large pool of design tools to choose from, but if there was one tool I'd recommend getting familiar with it would be [Figma](https://www.figma.com/). -
realph revised this gist
Apr 6, 2020 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -20,7 +20,7 @@ Heard good things about this book too. Well-regarded bible on UX design. Full of good examples too! <img src="https://i.imgur.com/qQHjEZRl.jpg" width="70"> ### [Refactoring UI](https://refactoringui.com/) -
realph revised this gist
Apr 6, 2020 . 1 changed file with 7 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,20 +2,26 @@ ## Books <img src="https://i.pinimg.com/originals/c2/b0/67/c2b06780a1e14e66111e16229e6b0696.jpg" width="70"> ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1) Haven't read it before but it's often heralded as good entry point for designing interfaces. <img src="https://is1-ssl.mzstatic.com/image/thumb/Publication118/v4/f9/0a/4a/f90a4a08-8e82-ec86-bbb0-2d97c74836a1/9780134778259.jpg/320x0w.jpg" width="70"> ### [Simple and Usable Web, Mobile, and Interaction Design](https://www.amazon.co.uk/dp/0321703545/ref=as_li_qf_sp_asin_il_tl?slotNum=7&ie=UTF8&linkCode=g12&linkId=JBCV6SPPET4C6AOF&imprToken=4WTZS89U--bVJlA7LFuWoQ&creativeASIN=0321703545&tag=cre8ivecomman-21&creative=9325&camp=1789) Heard good things about this book too. <img src="https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg" width="70"> ### [Don't Make Me Think](https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10) Well-regarded bible on UX design. Full of good examples too! <img src="https://refactoring-ui.nyc3.cdn.digitaloceanspaces.com/landing/book-cover-sm.png" width="70"> ### [Refactoring UI](https://refactoringui.com/) I'd highly recommend giving this one a read. It's full of golden nuggets founded in good/solid/grounded interface design principles. Can't recommend it enough! -
realph revised this gist
Apr 6, 2020 . 1 changed file with 1 addition and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,6 +3,7 @@ ## Books <img src="https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg" width="70"> ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1) Haven't read it before but it's often heralded as good entry point for designing interfaces. -
realph revised this gist
Apr 6, 2020 . 1 changed file with 0 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,7 +3,6 @@ ## Books <img src="https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg" width="70"> ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1) Haven't read it before but it's often heralded as good entry point for designing interfaces. -
realph revised this gist
Apr 6, 2020 . 1 changed file with 1 addition and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,8 +2,7 @@ ## Books <img src="https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg" width="70"> ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1) -
realph revised this gist
Apr 6, 2020 . 1 changed file with 2 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,7 +2,8 @@ ## Books <img src="https://images-na.ssl-images-amazon.com/images/I/71dAwTmZBKL.jpg" width="50"> ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1) -
realph revised this gist
Apr 6, 2020 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,7 +2,7 @@ ## Books {:width="50px"} ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1) -
realph revised this gist
Apr 6, 2020 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,7 +2,7 @@ ## Books  ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1) -
realph revised this gist
Apr 6, 2020 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,7 +2,7 @@ ## Books  ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1) -
realph revised this gist
Apr 6, 2020 . 1 changed file with 6 additions and 6 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,22 +1,22 @@ # Getting started with interface design ## Books  ### [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1) Haven't read it before but it's often heralded as good entry point for designing interfaces. ### [Simple and Usable Web, Mobile, and Interaction Design](https://www.amazon.co.uk/dp/0321703545/ref=as_li_qf_sp_asin_il_tl?slotNum=7&ie=UTF8&linkCode=g12&linkId=JBCV6SPPET4C6AOF&imprToken=4WTZS89U--bVJlA7LFuWoQ&creativeASIN=0321703545&tag=cre8ivecomman-21&creative=9325&camp=1789) Heard good things about this book too. ### [Don't Make Me Think](https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10) Well-regarded bible on UX design. Full of good examples too! ### [Refactoring UI](https://refactoringui.com/) I'd highly recommend giving this one a read. It's full of golden nuggets founded in good/solid/grounded interface design principles. Can't recommend it enough! -
realph revised this gist
Apr 6, 2020 . 1 changed file with 3 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,6 +2,8 @@ # Books  ## [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1) Haven't read it before but it's often heralded as good entry point for designing interfaces. @@ -50,7 +52,7 @@ Some of these tutorials may be missing some of the most-recent features that hav # Other Resources Here are some more resources on systems and principles. ## The Laws of UX https://lawsofux.com/ -
realph revised this gist
Apr 6, 2020 . 1 changed file with 3 additions and 7 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,23 +2,19 @@ # Books ## [Designing Interfaces](https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1) Haven't read it before but it's often heralded as good entry point for designing interfaces. ## [Simple and Usable Web, Mobile, and Interaction Design](https://www.amazon.co.uk/dp/0321703545/ref=as_li_qf_sp_asin_il_tl?slotNum=7&ie=UTF8&linkCode=g12&linkId=JBCV6SPPET4C6AOF&imprToken=4WTZS89U--bVJlA7LFuWoQ&creativeASIN=0321703545&tag=cre8ivecomman-21&creative=9325&camp=1789) Heard good things about this book too. ## [Don't Make Me Think](https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10) Well-regarded bible on UX design. Full of good examples too! ## [Refactoring UI](https://refactoringui.com/) I'd highly recommend giving this one a read. It's full of golden nuggets founded in good/solid/grounded interface design principles. Can't recommend it enough! -
realph revised this gist
Apr 6, 2020 . 1 changed file with 4 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -7,8 +7,7 @@ https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref= Haven't read it before but it's often heralded as good entry point for designing interfaces. ## [Simple and Usable Web, Mobile, and Interaction Design](https://www.amazon.co.uk/dp/0321703545/ref=as_li_qf_sp_asin_il_tl?slotNum=7&ie=UTF8&linkCode=g12&linkId=JBCV6SPPET4C6AOF&imprToken=4WTZS89U--bVJlA7LFuWoQ&creativeASIN=0321703545&tag=cre8ivecomman-21&creative=9325&camp=1789) Heard good things about this book too. @@ -32,7 +31,9 @@ In the last few years it's become *the* tool to use for interface designers. Why While Sketch and Adobe had taken their eye off the ball, a little tool called Figma came along and they weren't shy about pushing the envelope. This brought Figma closer to the engineering tools that were responsible for implementing these designs. Yay! Fast-forward a few years and many innovations later, Figma has dethroned Sketch and become the defacto interface design tool in the industry. It's also platform agnostic (yay!), running on Mac, PC, Linux, and Web. -- End of history lesson. Another yay! Here are some great tutorials from the Figma team which should help you get started. -
realph created this gist
Apr 6, 2020 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,63 @@ # Getting started with interface design # Books ## Designing Interfaces https://www.amazon.co.uk/Designing-Interfaces-Jenifer-Tidwell/dp/1449379702/ref=sr_1_1?dchild=1&keywords=designing+interfaces&qid=1586202384&s=books&sr=1-1 Haven't read it before but it's often heralded as good entry point for designing interfaces. ## Simple and Usable Web, Mobile, and Interaction Design https://www.amazon.co.uk/dp/0321703545/ref=as_li_qf_sp_asin_il_tl?slotNum=7&ie=UTF8&linkCode=g12&linkId=JBCV6SPPET4C6AOF&imprToken=4WTZS89U--bVJlA7LFuWoQ&creativeASIN=0321703545&tag=cre8ivecomman-21&creative=9325&camp=1789 Heard good things about this book too. ## Don't Make Me Think https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability-ebook/dp/B00HJUBRPG/ref=sr_1_10?dchild=1&keywords=designing+interfaces&qid=1586202154&s=books&sr=1-10 Well-regarded bible on UX design. Full of good examples too! ## Refactoring UI https://refactoringui.com/ I'd highly recommend giving this one a read. It's full of golden nuggets founded in good/solid/grounded interface design principles. Can't recommend it enough! # Tool~s~ There is a large pool of design tools to choose from, but if there was one tool I'd recommend getting familiar with it would be [Figma](https://www.figma.com/). In the last few years it's become *the* tool to use for interface designers. Why do people love it, you ask? Some years back the popular design tools (mainly Adobe and Sketch) started to plateau, and they also did a good job of convincing designers at the time that the design tool was never going to close the gap between design and engineering, and that handoff, the process where designers "hand-off" finished designs for engineers to implement, would remain a somewhat arduous and painful task forevermore. This went on to spawn a new market of separate handoff tools, but that's another story. While Sketch and Adobe had taken their eye off the ball, a little tool called Figma came along and they weren't shy about pushing the envelope. This brought Figma closer to the engineering tools that were responsible for implementing these designs. Yay! Fast-forward a few years and many innovations later, Figma has dethroned Sketch and become the defacto interface design tool in the industry. It's also platform agnostic (yay!), running on Mac, PC, Linux, and Web. -- End of history lesson. Another yay! Here are some great tutorials from the Figma team which should help you get started. 1. [What's Figma](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4&index=1) 2. [The Basics (playlist)](https://www.youtube.com/watch?v=5i-ebNTjad8&list=PLXDU_eVOJTx6zk5MDarIs0asNoZqlRG23) 3. [Components (playlist)](https://www.youtube.com/watch?v=k74IrUNaJVk&list=PLXDU_eVOJTx5LSjOmeBYMuvaa4UayfMe4) YouTube is also a fantastic resource for Figma tutorials. Here's a few videos I found that delve into process and techniques. Some of these tutorials may be missing some of the most-recent features that have come to Figma in the last 12 months. However they're still a good watch. * [Figma 101: An introduction tutorial](https://www.youtube.com/watch?v=cCNLD5IZY34) * [Design a Basic Layout in Figma](https://www.youtube.com/watch?v=L4YMVsVA8Q4) * [Components and Nesting in Figma](https://www.youtube.com/watch?v=Cu3gykpJwi0) * [Prototyping and Interactions in Figma](https://www.youtube.com/watch?v=E-H06QNkHTU) * [Working with Contraints and Adaptive Layout in Figma](https://www.youtube.com/watch?v=n5LOZm3mdY4) # Other Resources Here are some more resources on systems and principles ## The Laws of UX https://lawsofux.com/ ## Atomic Design Principles Gist: https://bradfrost.com/blog/post/atomic-web-design/ Book: http://atomicdesign.bradfrost.com/