Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Figma Generative plugins can use on-canvas handles. Lets use it to manipulate a vector. Here are 3 quick examples that build on each other: 1. point 2. point + radius 3. point + angle + radius 4. multiple handles next: point + radius 🧵

jjcall's profile picture

Jason Calleiro

1,237 subscribers

14,944 görüntüleme • 4 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

6 Yorum

Jason Calleiro profil fotoğrafı
Jason Calleiro4 ay önce

2. point + radius The point says where the effect starts. The radius says how far it reaches. next: pont + angle + radius

Jason Calleiro profil fotoğrafı
Jason Calleiro4 ay önce

3. point + angle + radius Point controls the origin. Radius controls the spread. Angle controls the gradient direction and spread. next: multiple handles

Jason Calleiro profil fotoğrafı
Jason Calleiro4 ay önce

4. Multiple handles A secondary handle for secondary effect and radius

˗ˏˋmaya ˎˊ˗ profil fotoğrafı
˗ˏˋmaya ˎˊ˗4 ay önce

@figma thank you for going through this step by step

Bryce Driesenga profil fotoğrafı
Bryce Driesenga4 ay önce

@figma I didn't even realize it would be possible until I tried, but generative shaders can use on-canvas handles too!

Jason Calleiro profil fotoğrafı
Jason Calleiro4 ay önce

@figma Yeah! I love the ability to add those

Benzer Videolar

I missed #AnimatingSoilModels. So I visualised Mohr's circle with GeoGebra. In the interactive figure you can vary the radius and move point A and centre point C:
1:10

I missed #AnimatingSoilModels. So I visualised Mohr's circle with GeoGebra. In the interactive figure you can vary the radius and move point A and centre point C:

Gertraud Medicus

12,740 görüntüleme • 2 yıl önce

Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's an interactive visual you can mess with 🤙 CodePen.IO link below 👇
0:32

Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's an interactive visual you can mess with 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

533,123 görüntüleme • 3 yıl önce

You can create the outer radius with CSS alone and no SVG 🤙 1. Create 2 elements 2x the radius size 2. Pin each side 3. Clip segment: clip-path: inset(50% 50% 0 0) 4. Radial gradient mask a pseudo 5. Border the other 6. Flip one side with scale: -1 1; Easier to watch 👇😅
0:28

You can create the outer radius with CSS alone and no SVG 🤙 1. Create 2 elements 2x the radius size 2. Pin each side 3. Clip segment: clip-path: inset(50% 50% 0 0) 4. Radial gradient mask a pseudo 5. Border the other 6. Flip one side with scale: -1 1; Easier to watch 👇😅

jhey ʕ•ᴥ•ʔ

100,684 görüntüleme • 2 yıl önce

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇
0:48

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

795,795 görüntüleme • 3 yıl önce

India first versus family first ! Impact/Landing point names on Moon 1. Chandrayaan1: Jawahar Point 2. Chandrayaan2: Tiranga Point 3. Chandrayaan3: Shivshakti Point Lander was called Vikram Lander after Vikram Sarabhai Had it been UPA they would have never sent Chandrayaan 2 & 3 & if they did they would have named it Indira Point and Rajiv Point
1:36

India first versus family first ! Impact/Landing point names on Moon 1. Chandrayaan1: Jawahar Point 2. Chandrayaan2: Tiranga Point 3. Chandrayaan3: Shivshakti Point Lander was called Vikram Lander after Vikram Sarabhai Had it been UPA they would have never sent Chandrayaan 2 & 3 & if they did they would have named it Indira Point and Rajiv Point

Shehzad Jai Hind

73,144 görüntüleme • 3 yıl önce

🇨🇳☢️ China showcased its DF-5C intercontinental ballistic missile (ICBM) at the Beijing parade. With a global strike radius, the DF-5C is capable of carrying multiple nuclear warheads and reaching any point on Earth.
0:21

🇨🇳☢️ China showcased its DF-5C intercontinental ballistic missile (ICBM) at the Beijing parade. With a global strike radius, the DF-5C is capable of carrying multiple nuclear warheads and reaching any point on Earth.

DD Geopolitics

95,719 görüntüleme • 1 yıl önce

New year / New frame improvements in Figma ! 🥳 1. (0,0) origin point for new frames on a blank canvas 2. New frames remember previous dimensions 3. New Quick add insert to duplicate new frame (press option / alt to add blank frame) Let's go!
3:33

New year / New frame improvements in Figma ! 🥳 1. (0,0) origin point for new frames on a blank canvas 2. New frames remember previous dimensions 3. New Quick add insert to duplicate new frame (press option / alt to add blank frame) Let's go!

miggi from figma

79,532 görüntüleme • 1 yıl önce

1, 2, 3, 4, 5, 6 point perspectives
0:31

1, 2, 3, 4, 5, 6 point perspectives

ginyoagoldie

748,641 görüntüleme • 3 yıl önce

Bessent: “We can see the Iranians are trying to use the Strait of Hormuz as a choke point. It's not a choke point for the U.S., but it is a choke point for many, many other countries…That will be bypassed in 2 years. In 2 years, the Strait of Hormuz will be like a worthless piece of water.”
0:23

Bessent: “We can see the Iranians are trying to use the Strait of Hormuz as a choke point. It's not a choke point for the U.S., but it is a choke point for many, many other countries…That will be bypassed in 2 years. In 2 years, the Strait of Hormuz will be like a worthless piece of water.”

Bulwark Clips

150,181 görüntüleme • 2 ay önce

6’10 3 Level Point Center Cleaner Build on 2K26 #NBA2K26
0:44

6’10 3 Level Point Center Cleaner Build on 2K26 #NBA2K26

NBA2KLab

41,682 görüntüleme • 11 ay önce

React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle. (0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle. (0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle. (0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle. (0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle. (0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.
0:33

React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle. (0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle. (0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle. (0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle. (0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle. (0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.

Delba

157,416 görüntüleme • 2 yıl önce

In a recent video, I showed that in a 3-4-5 right triangle, the radius of the inscribed circle is 1. We can generalize this: in an a-b-c right triangle, the radius of the inscribed circle is (a+b-c)/2. Here's how we know this:
2:13

In a recent video, I showed that in a 3-4-5 right triangle, the radius of the inscribed circle is 1. We can generalize this: in an a-b-c right triangle, the radius of the inscribed circle is (a+b-c)/2. Here's how we know this:

Howie Hua

48,338 görüntüleme • 10 ay önce

The classic Spool Problem (Bicycle Wheel Paradox) is the perfect test of intuition vs. reality. Watch what happens when you pull the crank forward: Crank Radius: Rolls BACKWARD. (Wait, what?) Crank ≈ Radius: Pure Z-axis rotation! Why? It’s all about the line of action relative to the instantaneous center of rotation (the contact point on the table). If the force acts below that pivot, the torque reverses. Credit: PhysicsNinja
0:40

The classic Spool Problem (Bicycle Wheel Paradox) is the perfect test of intuition vs. reality. Watch what happens when you pull the crank forward: Crank Radius: Rolls BACKWARD. (Wait, what?) Crank ≈ Radius: Pure Z-axis rotation! Why? It’s all about the line of action relative to the instantaneous center of rotation (the contact point on the table). If the force acts below that pivot, the torque reverses. Credit: PhysicsNinja

Cosmos Archive

13,785 görüntüleme • 6 ay önce

it's that time again — the Q2 '25 CSS nested radius post .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } * realistically these will be static values
0:27

it's that time again — the Q2 '25 CSS nested radius post .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } * realistically these will be static values

jhey ʕ•ᴥ•ʔ

161,396 görüntüleme • 1 yıl önce

How to draw 3 point perspective. Let’s start with a video. A thread 🧵 1/6
0:30

How to draw 3 point perspective. Let’s start with a video. A thread 🧵 1/6

Mitch Leeuwe

509,510 görüntüleme • 3 yıl önce

3D CSS image slider works well on device 🤙 li { --item-width: clamp(120px, 20vmin, 12rem); --radius: calc( (var(--item-width) / sin(var(--inner-angle))) * -1 ); } It's cool how you can use a clamped value with "calc"
0:45

3D CSS image slider works well on device 🤙 li { --item-width: clamp(120px, 20vmin, 12rem); --radius: calc( (var(--item-width) / sin(var(--inner-angle))) * -1 ); } It's cool how you can use a clamped value with "calc"

jhey ʕ•ᴥ•ʔ

173,088 görüntüleme • 2 yıl önce

Nick Saban - MOFC Bunch Checks - Lock & Level = Lock the point man. Play man on #1 at three yards and man on #3 at six yards (Levels) - Traffic = Lock the point man and play in and out on #1 and #3. - Interstate = Show lock alignment on point, but play man on #3. CB/Safety plays push alert on #1 and #2.
2:15

Nick Saban - MOFC Bunch Checks - Lock & Level = Lock the point man. Play man on #1 at three yards and man on #3 at six yards (Levels) - Traffic = Lock the point man and play in and out on #1 and #3. - Interstate = Show lock alignment on point, but play man on #3. CB/Safety plays push alert on #1 and #2.

James Light

29,520 görüntüleme • 10 ay önce