Home

Awesome

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 <kbd>command</kbd> + <kbd>/</kbd> (mac) OR <kbd>Ctrl</kbd> + <kbd>/</kbd> (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

<a href="https://www.figma.com/proto/dWPMZc0LYEkG7VB9uqUV6S/Figma-Tutorial?node-id=2%3A2&scaling=scale-down" target="_blank"><img src="https://github.com/hchiam/learning-figma/blob/main/Figma_Tutorial.svg" width="600" alt="Image of Figma Tutorial Demo"/></a>

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.

Tips on Figma components: tips like how to organize and swap between components - pros/cons of separate state components vs nested (hidden) variations in single master components

Prototype interaction info: https://youtu.be/lTIeZ2ahEkQ?feature=shared&t=316

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):

Design system / design tokens:

A quick summary of other design tools:

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

While Figma is good for collaboration, you might want to consider Storybook instead for code and "live" components.

You might also be interested in:

Lottie files for animations