Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 4 Monaten •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

6 Kommentare

Profilbild von Jason Calleiro
Jason Calleirovor 4 Monaten

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

Profilbild von Jason Calleiro
Jason Calleirovor 4 Monaten

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

Profilbild von Jason Calleiro
Jason Calleirovor 4 Monaten

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

Profilbild von ˗ˏˋmaya ˎˊ˗
˗ˏˋmaya ˎˊ˗vor 4 Monaten

@figma thank you for going through this step by step

Profilbild von Bryce Driesenga
Bryce Driesengavor 3 Monaten

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

Profilbild von Jason Calleiro
Jason Calleirovor 3 Monaten

@figma Yeah! I love the ability to add those

Ähnliche Videos

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 Aufrufe • vor 2 Jahren

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,066 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 1 Jahr

🇨🇳☢️ 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 Aufrufe • vor 1 Jahr

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

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

ginyoagoldie

748,611 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 11 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 10 Monaten

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 2 Jahren

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

91,160 Aufrufe • vor 1 Jahr