sahilrajput03

Learning Figma

• TODO: Official Article - Explore auto layout properties: Click here
  • Please continue this official video (same page above): Click here (time stamped)
• Ansh Mehra’s Recommended 50-60hrs of Figma’s Resources Tutorials: Source
  • TODO - 10 Figma Plugins: https://twitter.com/Sahil_dev12/status/1610938078977490944
  • TODO - Playlist - Explore design features in Figma: Click here
  • TODO - Playlist - Figma Tips: Click here
  • TODO - Playlist - Office hours: Click here
  • TODO - https://awesomefigtips.com/
  • TODO - https://figmalion.com/
  • More Resoucres source
    • Case Studies of big companies - https://growth.design/
    • Mobile Designs: https://mobbin.com/
  • TODO - https://medium.com/ansh-mehra
  • Chrome New Tab Extension: Click here

Resources for images, gifs, svgs ?:

Click here

Resizing controls have been changed in toolbar

You can use ctrl+alt and hover mouse over items to see their spacing and alignments from different items like that

You can set Nudge Amount like that

FYI: Nudge means to touch or push someone or something gently.

What is nudge? When you select a item and move it via left/right/up/down arrow. Also, if you press shift+left/right/up/down you can move items by bigger spaces.

Then you can select smaller and bigger nudge -

You can search superfast in your design file in figma

Search in figma file by using ctrl+f and then you follow like that:

Courses:

• Learn Design (100% theory): Click here
• TODO - Article: https://medium.com/@satjaleenmadan/little-figma-tricks-that-saved-my-time-75f65df684ac
• TODO - Article: https://uxdesign.cc/10-figma-tricks-i-wish-i-knew-earlier-698e66a893f8
• TODO - Article: https://medium.com/codeart-mk/must-have-figma-plugins-to-boost-your-design-workflow-4592ce4dd640
• TODO(theory) - Design sense: Click here
• TODO(theory) - Design sense: Click here
• TODO: Figma (theory) best practises: Click here
• TODO (URGENT1): Article(practical-prototyping): From official figma.
• TODO (URGENT2): Article(practical-prototyping): From official figma
• TODO (URGENT3): Article(practical-prototyping): From official figma
• TODO (URGENT4): Article(practical-prototyping): From official figma
• Kevin@YouTube:
  • DONE: Getting started with Figma: A beginner’s guide
  • DONE: Figma components: the basics to creating robust components
  • DONE: Figma in 5: Auto Layout
  • DONE: Figma tutorial: Auto layout button
  • DONE: (above video was contained in this article): Create dynamic designs with auto layout
  • DONE: CHANNEL-CharliMarieTV - Figma 101: An introduction tutorial
  • DONE: CHANNEL-CharliMarieTV - Figma Smart Animate first impressions & testing!
  • TODO-VIDEO-KEVIN: video @ youtube
  • TODO-VIDEO: KEVIN-search-@-yt - He has couple of other video there as well, Click here
  • TODO-ARTICLE: Create advanced animations with smart animate
  • TODO-ARTICLE: Explore text properties from FIGMA OFFICIAL: Click here
  • DONE: CHANNEL: AJ&Smart - Figma UI Design Tutorial: Get Started in Just 24 Minutes! (2022)
  • TODO: Figma search @ youtube
  • AMAZING FREE FIGMA TEMPLATES/FILE RESOURCES for figma: Checkout: Click here and then open any figma design from there and then click on Copy to Figma button to get it in your draft. ALSO if this site is not sufficient, then you may find other free figma resource - by Google search - to get free figma files to copy from.
  • TODO: Make a twitter clone of mobile of different screens.
  • TODO: Make a telegram clone of mobile app as well.
  • TODO: Join some community for figma @ slack, discord or telegram to get help, feedback, etc with people and get in a good social reln in terms of figma and designing.
  • There are thousands of free designs on different vast variety of topics.
  • Food delivery app design page @ Click here
  • My copy version of FOOD DELIVERY APP in my figma draft: Draft file
  • File
  • File
  • FYI: There are tons of free icon figma files shared by community on figma sites itself
  • For icons search Free figma icons on google to get such resources.
  • Charlie marietv summary of salaries: @ keep notes.
  • Explore auto layout properties: (OFFICIAL - Click here
    • We can adjust the baseline of items in auto layout by doing that -
    • We can change the order of stacking (first item on to or last item on top) by using Canvas stacking feature -
• Shortcuts:
  • Zoom to eye view or current view:
  • ❤️❤️❤️ Navigating Layers ❤️❤️❤️:
    • enter and shift+enter to go into and to parent layer
    • tab and shift+tab to go to next and previous layers
    • alt+l to collase layers (this is not working currently (12 Aug, 2023) but you collapse layers by using quick menu ctrl+? and then typing Collapse layers
    • Show/Hide keyboard shortcuts by ctrl+shift+?
• 1st week of march:
  • We can share styles across different files very easily with Team Library feature very easily. For demo check this timestamped video here from figma itself.
• You can press and hold alt key while hovering over text size numbers in the Design tab to get a nice text size dragger to change the text size of textual number simply via mouse i.e, double headed arrow.
• Select frame tool (hotkey F) and you can now get a base frame of any device say for:
  • Phones you can select from Android Large, Android Small, iPhone8 (8 Plus, SE, 13mini, 13, 13 Pro, 13 Pro Max)
  • Tablet you can select from Surface Pro 8, iPad mini 8.3, iPad Pro 11” or iPad Pro 12.9”
  • Desktop you can select from MacBook Pro 14”, MacBook Pro 16”, Desktop or iMac
  • Presentation you can select from Slide 16:9 (1920x1080) or Slide 4:3 (1024x768)
  • FYI: You can change the width/height, round corner sizes, angle of the titlment of the frame later anytime as well.
• Fill:
  • We can add multiple layers of Fill in a shape by clicking the + sign on next to Fill menu under Design tab.
  • We can choose from fill types as Solid, Linear, Radial, Angular, Diamond or Image.
  • Tip: In Liner type, you have control of two types of opacity i.e., transparency of each color you have, and second is the overall transparency of the whole(you can set this by setting value in the text with % sign before the eye icon).
  • Tip: We can add multiple solid, gradient or radial fills here, that could be interesting though.
• Layers? In the left bar i.e., Layers menu, object on the very top will show up on the very top in the cavase as well. THATS ALL!
• Layers: You can select multiple entities and move them at the top or bottom very easily from the left bar, i.e., Layers menu directly.
• Layers: It is very intutive to anybody else if you arrange the entites in the Layers menu according to the entity flow in the canvas. ALSO, instructs the very fundamental base of the distribution of entities as well. ~Kevin.
• When you select text tool, always drag and draw the text box first so your text reflow is bounded to that area only.
• Typography choice - Font: Roboto, Handlee (for human writing) Font Size: 72, Font style: Black (or say Bold, although Black is little better IMO)
• You can move around using
  • hand tool
  • but a better way is to use hold and now you can drag using mouse to move the page for the time.
  • but BEST WAY IS TO USE MOUSE MIDDLE CLICK TO HOLD AND DRAG TO MOVE PAGE. YO!
• You can align a group of items together by selecting (more than one elements) and choosing one of the styles of bars that are showing up just below the Design menu on the right bar.
• Lock layer: When you want that you don’t accidentally select and move any element (say many big entities on the canvas), you can lock them by clicking the lock icon (OR ctrl+shift+l) in the left bar under Layers menu.
• Shift key can be used to select multiple elements, tip: say when dran area with move tool you get bunch of elements selected and then you can use shift key to toggle unselect any element as well. WhoaaAA!!
• You can group a number of entities together by selecting them (more than one elements) and pressing ctrl+g and now you can drag them as a single entity i.e., group only.
• WHEN GROUPED, you can still individually alter each elements properties, so need to ungroup if you want to play with any individual entity inside it.
• You can ungroup a group by selecting it and pressing ctrl+shift+g.
• You can use copy cursor to create copy of an element by pressing and holding alt key, you can visually see the cursor changing to copy cursor(two cursors) as well. Thats handy way to check with the functionality though.
• You can double click the text box edge to shrink the text box to the minimum it can go!
• You can rotate any entity by selecting it and placing the cursor outside the entity till you get the nice arc shaped cursor, and then you can click and drag to rotate the entity as per wish.
• To make a box with border only (i.e, no fill) then you can simply delete all your Fill layers from the right bar under Fill menu and add a stroke instead of your choice for your shape.
• Figma tracks all the colors that you have used so far in your file, you can see them under Document colors in all your color pickers (i.e., say, Fill or Stroke or others).
• You can move any entity up/down in the z-index by using ctrl+[ (move backward/downward) or ctrl+] (move forward/upward), to see the effects notice changes in the left bar under the Layers menu.
• SUPER:TIP - You can use ctrl+shift+[ (move to bottom) or ctrl+shift+] (move to top) to move. YO!
• You can choose the Letter Case of text box (i.e., say if you want text to be uppercase only), you can do that by selecting your text box then navigating to Text menu then clicking the ... button (in the end of the menu) and under the Letter Case section we can choose our required case.
• To make sharp corners of a rectangle to rounded, you can do that by clicking and dragging any of the tiny blue circles inside of each corner of the rectangle shape. WARN: In case you don’t see the tiny blue circles around each of the corner, then probably you are not zoomed enough OR possibly your cursor is not inside of the rectange. ~thanks to kevin.
• While you need to align multiple entities, you can choose to Align left/right/top/bottom OR Align horizontal/vertical centers.
• When you want to use any image as a fill for the text, you can right click the text entity and right-click to choose Use as Mask (ctrl+alt+m) option. Now you can put any image by dragging the image over it and it’ll simply fill it. You can go to Fill menu in the right bar and choose the Exposure, Contrast, Saturation, Temperature, Tint, Highlight of image.
• When you need to scale (make bigger) multiple text blocks so that your your font size also scales accordingly, you must use Scale tool i.e, (hotkey: k) {instead of move tool} and then you may click and drag the corner boxes to scale.
• MAGIC: While you are in between of dragging your shapes when you’re drawing them you press and hold hold <space> to actually move the shape without going distoring the shape that you have at the moment and after deciding the position you may rescale the shape as well. Magic isn’t it?.
• Color picker: You can select any entity(shape or text) and then press i to launch the color picker on the fly to select the entity’s fill color.
• From Figma components: the basics to creating roubs components:
• Auto layout feature:
  • An Auto layout entity in the layers menu has a icon like two rectangles stacked vertically or horizontally depending on the direction you choose for the Auto layout.
  • Select one or more entites and press shift+a to enable Auto layout menu in the right bar under Design menu.
  • Auto layout: You can see the Auto layout option in the right bar under Design menu ONLY when you have selected TWO OR MORE entities. (TIP: You can still enable Auto Layout for single entity as well by using shortcut shift+a, thanks to Kevin).
  • Auto layout enables you to specify the positioning of one entity inside other entity(i.e., horizontally alignment and vertical alignment), you can do that by Choosing Alignment and Padding option which is the last icon in the auto layout menu.
  • A Auto layout is almost like a flexbox, i.e., it can have direction horizontal or vertical. You may change the the direction by the two arrows in the Auto layout menu.
  • IMPORTANT TIP: in your auto layout, say you want a group of items to be be act as a single entity then you can simply use the group option (ctrl+g) to group a list of items so that when you alter the attributes in your Auto layout that has your group in it will behave as a single fixed entity. Yo! Thanks to kevin!
  • Source of below points: click here
  • You may set the space (margins) b/w items in auto layout items by adjusting Spacing between items option in the Auto layout menu. FYI: In case you have mixed padding right now and you want to get even padding all around, you may put the value like 10 in place of where Mixed text is written. FYI: To set manual padding you can toggle around in the Padding/alignment panel with the help of <TAB> key.
  • For the padding for the contents you can enter the padding values manually as well say in order of top(bottom)-right(left) as 8,16 will set top-bottom as 8 and right-left as 16. Also you can give value like in order of top, right, bottom, left as 10,20,30,40 and it’ll fill it in the padding panel.
  • When you have text fields inside your Auto layout, you can fix the width attribute of the entity from Fixed width to Fill container in the Resizing menu and that way if we need to change the width of the our container Auto layout the text entities will scale horizontally with the our container, yo!
  • Another amazing benefit of using Fill container as width for text entities is that if we add more text content in the same text box then it’ll simply wrap the text and thats looks really smooth though!
  • We can choose between Space-between and Packed in the Alignment and padding menu(last icon in the Auto layout menu) when choosing the inbetween spacing (margins) for the entites in your Auto layout, and this way we can have settings like space-around or space-between the way we have in flexbox, yikes! And now if we scale our Auto layout the items would scale accoding to the settings you choose.
  • We cannot set height of anything as 0 and even if we add 0 as value to height input it’ll ignore it and replace it with 1, so the fix for this is to put value i.e., 0.001 and that’ll actually set the value to 0 which we actually wanted.
  • Say in a horizontal button auto layout you want to add more content to the button text but keep the padding (horizontal padding) constant which we most of the times want to have consistent padding around all the buttons irrespective if the button text is small or large, so what we can do to achive this by changing the setting for OUR AUTO LAYOUT ITSELF i.e, width as Hug contents in Constraints and resizing menu under Design tab, and also set the padding around items in the Auto layout menu as our desireable padding for our required button.
  • AMAZING: To make a simle text field a button you can make use of Auto layout. Say, create a text field and press shift+a and now you can use this auto layout to fill color to the auto layout box itself, cool(NO NEED to make separate rectangle for making buttons)! BONUS: When you change the text the color filled box will automatically adjus to the width of the text, yo!
  • Hug contents means to resize to the smallest possible size to surround all of its children with only leaving space for padding. The simple meaning of hug is that the containe will try to hug the contents so leaving no extra space except the padding.
  • Setting Horizontal Spacing to Fill Container -
  • You can also make the entity be controlled automatically say left attached or right attached or center placed or stick to left_and_right edges with the help of properties under Constraints and resizing See here for visual.
  • Add, edit, and remove objects in Auto layout: Click here.
  • Nested auto layout frames: Amazinlgly explaines - Click here
  • Removing Auto layout : There are a couple of ways to remove auto layout:
    • Right-click on the frame and select Remove auto layout
    • In the right sidebar, click the next to Auto layout
    • Note: You can’t use the Add auto layout keyboard shortcut to remove the auto layout property. Using this shortcut will create a new auto layout frame around your current selection.
• Component Properties (Make an entity component with ctrl+alt+k ):
  • The Component entities appear is a solid diamond shaped icon whereas the instances(copies) if any appear as outlined diamond icon in the layers menu in the left bar.
  • Inherited attributes can be: text content, text color, border radius, text style, text font, fill color, and many more!!
  • If you create multiple copies of a component and change the properties(say inherit attributes) of the Main component then all other copies will get same effect instantly. IMPORTANT: Only properties which you altered manually in the copied components will NOT BE affected when you change the Main component.
  • TIP: Main component is the one from which you made other copies.
  • You can refer(go) to master component of any copied component by right-clicking it and select Go to main component.
  • You can right-click any copy(instance) of the main component by right-clicking it and select Detach Instance option
  • In a copy(instance) of the main component, you can right-click and us Reset all overrides to reset all changes w.r.t to main component.
  • Top reason to create a component is that when we need our some other copied enties to inherit properties from the main entity(main component) along with the facility of still be able to modify the attributes of each copy of entity, yo!
  • TIP: You can created nested level of components as well:: thanks to Kevin. The way its helpful is that, say you have Componnent C1 and we make a copy of it and make that itself a component say C2. Now when we make a copy of C2 entity say E3 we see that if we change attrib of C1, it reflects in both C1 and E3. FUN FACT: When we change attrib of C2 the proeprties of E3 will be changed as well. So this illustrates properties linked in a nested manner with the help of component feature we have applied to C1 and C2 (and key point is that C2 is a copy of C1 component so its also linked to C1 and E3 inherits from C2 altogether).
  • THE OTHER BIG REASON TO CREATE COMPONENTS: You can import any component into any frame or any other page or other frame (coz our components are available as assets in whole file) by selecting Assets tab in the left bar, and then simply drag and drop any of the component you want.
  • After importing a component as asset in any frame/other page, we can change the component very simply by clicking the drop down menu and choose from the other available options from there. YO!
  • The main component can be very powerfully used in a way like: You may add tons of items in it {as its the base component for all the other components that you are making} and hide/show them accordingly in the instances of the main component so that you just have to maintain one single main component and don’t redraw any new entity in any of the instances. THE BIG REASON we try not to add more entities to any instance of the main component is bcoz we simply cannot unless we detach the instance from its main component(by righ-clicking and choose Detach option and it would just take away all the benefits we intended to leverage from the component’s inheritance properties say padding, margins, widths, shadows, text fonts, etc). Thanks to Kevin.
• Color Style:
  • You can create a Color Style simly by selecting a color first in Fill and then open the Style menu (the for small squares stacked icon) and then press the + icon and type the name for the color style you want to give it.
  • You can change any existing color by right clicking on the color in the Color Styles section and simply choosing a new color now.
• Frames:
  • A frame in the layer menu has an icon like #
  • You can rename a frame as well as suited to what describes your current frame.
  • We can change the size of the frame by first selecting the frame via clicking on the frame name on top-left and then via the highlighted edges we can resize the frame easily.
• Pages:
  • You can rename the page name as well, by double clicking the page name.
• Others:
  • You can duplicate a layer by selecting it and the layer first and then using ctrl+d shortcut.
  • Auto layout vs. Grouping: Auto layout works like a group though but with additional capability like {internal margin to each other can be set at once}, or we can center content in a parent container via both horizontally or vertically by the settings in the Auto layout menu, whereas in a group feature there’s no such thing.
  • Click any entity and then press and hold alt key and now hover over different entities to know the vertical and horizontal distancing in pixels of our original selected entity that entity which are currently hovering over. AND interesting thing is that while the view is showing how far your entity is from the mouse hovered entity you can use up/down/right/left arrows to move our current entity according to the need we have (say when we are copying from other designs we need to set two entities exactly some pixels apart) Yo!
  • We can make use of auto-width and auto-height icons from the Text menu under the Design tab for tex entities to make the widths and heights auto-adjust to take minimum as required by the text to have same font-size. Yikes!

Zoom

• You can zoom in/out/100% with +,- and ctrl+0.
• You can invert the zoom scroll direction(which is better IMO) by - Preferences > Invert zoom directions.
• You can set the zoom level in figma from the right top corner.
• Zoom: Hold down ctrl key to enable zoom with mouse scroll. NOTE: pgdown scroll causes to zoom out, pageup scroll causes to ZOOM-IN in the canvas.
• Zoom to select region: First press and hold z and then hold mouse make region to zoom into.
• You can zoom to particular frame-by-frame as well, use n to next frame use shift+n to zoom to previous frame.

Exporting elements

• Right click an element and select “copy as png” option to export/copy any particular object in figma. TIP: You can use paste_png in linux cli to paste the copied png image then.
• Select an element and go to Design tab in the right bar of the desktop and select Export option to be able to export it into one of png, jpg, svg and pdf format.

Resize

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

• resize freely: no-modifier
• resize keeping aspect-ratio: shift
• resize keeping aspect-ratio and STAY in place: shift+alt

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.

• “You must have a copy of the enity for what you want to animate(move actually say with increasing opacity) from the fram1 to frame2 if you are making animation from frame1 to frame2” ~ Kevin Powell.

• DONE - [Prototyping animations with Figma ~ Kevin Powell]: Youtube link

Tips:

• While trying select a bunch of elements on the canvas but you encounter that you accidentally move the elements under your mouse (which you fix by ctrl+z though), Solution: You can press Ctrl key and then pressig and holding the ctrl key will actually NOT move elements but creates a blue selection box using which we select the elements usually (if no elements were under our mouse).

Component:

• You must navigate to Prototype Menu menu in order to see the right circle of prototying extender. THIS IS MUST!
• To be able to have the right dot for creating transitions for the prototyping, you must first select all the objects and use ctrl+alt+k to create a single component of those items which then just stick together. Now your transition would work good! 💯
• IMPORTANT: You must convert a object to a component first to be able to get prototyping circle connector. You can do it via right clicking and select Create Component option or simply use ctrl+shift+k.
• You can use r in prototyping to restart the prototype(in case of hovering you don’t need to restart prototype though coz unhovering it causes to undo the effect instantly).
• Use right mouse click to shown options in prototype display tab.
• Toggle between prototype mode and design mode using hotkey shift+e or simply choose from the right Prototype or Design tab in the right hand side bar.

• In the prototype tab, you can select one of the interactions with mouse to open its interaction details or you can simply click the prototype arrows to open it directly.

• Un-component a component, #remove a component:

• Identifying component vs. component instance?

  

  

• Making use of copmonents the way Kevin Powell uses them:

• You can go to original component from the selected component instace simply by clicking that button:

• Creating variant in figma (Make sure you have selected a component first):

  Source: Amazing video by figma itself on variant feature of components: https://youtu.be/y29Xwt9dET0

  Enable variants by,

  

  Now use that button to add variants,

  

  You can see the hierarchy created like that:

  

  So, now I created a copy (duplicate of default) and we can select the variant for that component instance now via that select-menu:

  

  so, selecting Variant2 would make it like look like that:

  

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)

Thats how you go into image crop mode

You can duplicate someone else’s figma file even in case they have given you only read access