Broadcast on Figma basics for the JS / FRONT-END course at Rolling Scopes School where I will tell you the basics of working with Figma for web developers, and also answer questions on Figma, interface design (UX/UI), and interactions between developers and designers. Join us, it's going to be hot 😉 Follow me on: 🔹 Instagram: / tony.yem 🔹 Facebook: / tony.yemelyanov 🔹 Vk: https://vk.com/tony.yemelyanov 🔹 Behance: https://behance.net/tony_yemelyanov School website RSS: https://rs.school/ My UX UI design course website: https://academy.yem.digital/ #Figma #Basics #RSS 00:00 - Introduction 01:42 - Figma Hotkeys 03:22 - Stream plan 07:30 - What is Figma 09:45 - Web version vs installed 10:45 - Local fonts in the web version 12:25 - Figma navigation 13:12 - Drafts (copy the project to your account) 14:45 - Layers panel (groups, frames) 23:10 - Burger 26:42 - Snap to pixel grid 29:44 - Hidden menu 35:02 - Frames 38:00 - Frames - clipping frame content (Clip content) 39:50 - Toolbar - shapes (rectangle, line, ellipse) 49:40 - Toolbar - text 50:32 - Measuring distances between elements 53:35 - Toolbar - text - text container size 57:19 - Measuring padding 58:33 - Toolbar - text - Code tab (css properties in Figma) 1:00:30 - Toolbar - hand 1:00:45 - Comments in Figma 1:07:22 - Layer attributes 1:11:25 - Attributes panel 1:12:18 - How to place an element inside a frame 1:13:55 - Attributes panel - alignment relative to the frame 1:15:00 - Attributes panel - Constraints (parameters for anchoring content in a frame) 1:20:00 - Attributes panel - Layer (transparency) 1:22:50 - Attributes panel - Fill (color fill, gradients, eyedropper, etc.) 1:31:40 - Attributes panel - Fill - add an image (image) 1:36:00 - Another way to add an image 1:36:55 - Export images from a layout (jpg, png, svg) 1:46:12 - Attributes panel - Stroke 1:50:27 - Attributes panel - Effects 1:53:30 - Place a photo in a frame, Resize to Fit 1:54:30 - Practice working with a frame 1:56:27 - Attributes panel - Effects (continued) - Layer Blur 1:57:57 - Typography (text properties) 2:03:47 - Typography - Paragraph spacing 2:05:40 - Typography - text alignment 2:08:00 - Typography - additional parameters (uppercase, lowercase, capitalize, etc.) 2:11:20 - What are multiple objects (components), Instance 2:17:40 - Component states (hover, active, etc.), Instance parameters 2:20:57 - Creating a component 2:22:10 - Changing parameters of individual Instances, returning to the main component parameters 2:24:57 - Limitations on changing Instance 2:26:01 - Styles and interface differences 2:28:11 - Creating a new style (create style) 2:28:45 - About naming variables, frames, etc. 2:31:17 - Changing style 2:33:04 - Applying style 2:34:33 - Naming style 2:35:25 - About HTML headings 2:41:15 - Prototyping (Prototype) 2:42:30 - Prototyping by example 2:53:40 - How to share a layout 2:57:10 - Life hacks 2:58:39 - Grid 3:07:27 - Comments, Communication, Answers to questions 3:28:00 - Finish Thanks to @Vladimir Lesnichiy for the timestamps