sahilrajput03

Learning Figma

Ansh Mehra’s Recommended 50-60hrs of Figma’s Resources Tutorials: Source

Resources for images, gifs, svgs ?: Click here

Courses:

Zoom

Exporting elements

Resize

While holding and dragging edges/corner_squares of the element, you can -

Making a obs camera mark here.

You can save a complete figma file locally via File > Save local copy... option easily.

My learning Prototyping File @ figma: Click here

Copy objects: Hold alt and drag elements to create copies.

**You can crop the object sizes by holding alt key, and using edge points to crop proportioal to ?????

Pages concept: It is an amazing concept to keep designs isloated in each page, thus you can do a large number of separate design works in a single file of figma. Yo!

Quick actions: ctrl+/

Presentation Mode(preview mode, show/hide UI): ctrl+\, you can right click empty area around the frame and click on Show/Hide UI as well.

Undo/Redo/copy/cut/selectAll: Use ctrl+z/ctrl+y/ctrl+c/ctrl+x/ctrl+a.

Lock a object/objects to fix them and disable selection of them: Select object/objects and use ctrl+shift+l to toggle lock/unlock. BETTER WAY IS TO USE lock icon in the Layers section.

Show help shortcuts for tools: Ctrl+shift+? (or use the bottom right ? button and select Keyboard Shortcuts) and switch to Tools tab to view the tools shortcuts. List of all hotkeys.

Hand tool - BEST WAY TO MOVE AROUND PAGE: Hold down space key to activate hand tool temporarily and move the page with mouse simply.

Move objects horizontally or vertically: Hold down shift key and drag them.

PROPORTIONALLY SCALING:: Create squares or perfect circles or aligned line or aligned arros using rectange tool or ellipse tool or line or arrow: Choose rectange tool with r or ellipse with o and then hold down shift key and now you can draw square or perfect circle now.

Set opacity of any object: Select object and press 1 for 10%, 2 for 20% so on.. and 0 for 100%. TIP: To set opacity to 0%, press 00

Copy selected object/objects as PNG: Ctrl+shift+c

Prototyping

Official getting started post of prototyping in figma is good though.

Tips:

Component:

image

image

image

yet another amazing prototyping tool

- Framer - Interactive Prototypes: [Click here@youtube__video](https://www.youtube.com/watch?v=k7gwtxeeOQM)
- prototypign with framer - [youtube search](https://www.youtube.com/results?search_query=prototyping+in+framer)