Learning Figma
Just one of the things I'm learning. https://github.com/hchiam/learning
If you can't remember keyboard shortcuts or just want to search available actions, hit command + / (mac) OR Ctrl + / (pc).
Following tutorial: https://www.youtube.com/watch?v=3q3FV65ZrUs (But you might want to look at the short official Figma intro tutorials playlist.)
Example Figma interative demo page: https://www.figma.com/proto/dWPMZc0LYEkG7VB9uqUV6S/Figma-Tutorial?node-id=2%3A2&scaling=scale-down
Example Figma project page: https://www.figma.com/file/dWPMZc0LYEkG7VB9uqUV6S/Figma-Tutorial?node-id=0%3A1
Another interactive demo (hover and click): https://www.figma.com/proto/UTTgyhTIfjDeV5r0MQg0vU/First-Figma-File?node-id=2%3A13&scaling=contain
And another, newer tutorial: https://www.youtube.com/watch?v=t-2Gdmx0t08
Learn Bravo to make native apps from Figma prototypes: https://github.com/hchiam/learning-bravo-studio
Note that Figma isn't just collaborative clean drawing or making component instances update from one place, it also has interactivity and the components can be made responsive to frame resizing (constraints) and "Auto Layout", which reminds me of CSS flexbox, but lets components expand/push down with new content like text while preserving a gap between.
Prototype interaction info: https://youtu.be/lTIeZ2ahEkQ?feature=shared&t=316
- Anyone logged in to Figma can add comments at the prototype view link.
- You can do a usability test with Figma by seeing their interactions with the prototype! Click on a viewer's avatar to use observation mode on the shared prototype view link.
Example components library (login, then see Assets and search): https://www.figma.com/file/HD9OYLfuDqWgaJ1JfScNZF/Example-Components-Library-(search-the-Assets)?type=design&node-id=0%3A1&mode=design&t=JAlvQci4xpWKErsT-1
"Figma for VS Code" extension so devs can collaborate from VSCode in real time, and get code suggestions based on Figma designs: https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension - NOTE: in beta as of 2023
Dev mode Figma to translate design to code faster (in beta as of 2023):
- NON-dev mode (design mode) example: https://www.figma.com/file/UNYqpMVdlSlnjuBO20WRfr/Mobile-Wireframe-UI-Kit-(Community)?type=design&node-id=37-92&mode=design&t=rwE92hE52j9xtQIm-0
- dev mode example: https://www.figma.com/file/UNYqpMVdlSlnjuBO20WRfr/Mobile-Wireframe-UI-Kit-(Community)?node-id=40%3A191&mode=dev (you need to be logged into Figma) with things like:
- hover to inspect some things kinda like DevTools or VisBug
- click to copy generated code (CSS/HTML/JSX/Tailwind/etc.!) to clipboard
- click to download icon SVGs
From Meng To:
My thoughts on design tools and why you should pick them.
Figma: collaboration and all-in-one
Sketch: maturity and plugins
Framer: code and advanced prototyping
Studio: free and animation
XD: speed and adobe platform
Or if you have more time, read a more involved analysis on smashingmagazine.com.
For creating images like SVGs, I'd use Photopea