Retour aux vidéos

Figma

First look: CMS in Figma Sites Content management and editing–right...

Plateforme
X
Durée
4:20
Langue parlée (déduite)
anglais
Vues
190 k
Coupe médiane
27.89s
Visage à l'écran
80%
Images sombres
36%
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:00
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:00
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:02
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:02
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:04
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:04
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:05
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:05
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:08medium presenter
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:08
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:09medium presenter
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:09
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:10medium presenter
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:10
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:10medium presenter
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:10
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:14medium presenter
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:14
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:15medium presenter
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:15
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:16medium presenter
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:16
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:19medium presenter
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:19
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:20corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:20
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:21corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:21
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:27corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:27
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:28corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:28
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:36corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:36
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:42corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:42
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:42corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:42
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:50
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:50
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:50
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:50
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:51
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:51
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:52
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:52
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:55
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:55
Figma First look: CMS in Figma Sites Content management and editing–right... at 0:56corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
0:56
Figma First look: CMS in Figma Sites Content management and editing–right... at 1:03corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
1:03
Figma First look: CMS in Figma Sites Content management and editing–right... at 1:18corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
1:18
Figma First look: CMS in Figma Sites Content management and editing–right... at 1:30
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
1:30
Figma First look: CMS in Figma Sites Content management and editing–right... at 1:31medium presenter
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
1:31
Figma First look: CMS in Figma Sites Content management and editing–right... at 1:34medium presenter
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
1:34
Figma First look: CMS in Figma Sites Content management and editing–right... at 1:38corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
1:38
Figma First look: CMS in Figma Sites Content management and editing–right... at 1:46corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
1:46
Figma First look: CMS in Figma Sites Content management and editing–right... at 1:50corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
1:50
Figma First look: CMS in Figma Sites Content management and editing–right... at 2:02corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
2:02
Figma First look: CMS in Figma Sites Content management and editing–right... at 2:06medium presenter
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
2:06
Figma First look: CMS in Figma Sites Content management and editing–right... at 2:10corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
2:10
Figma First look: CMS in Figma Sites Content management and editing–right... at 2:18corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
2:18
Figma First look: CMS in Figma Sites Content management and editing–right... at 2:58corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
2:58
Figma First look: CMS in Figma Sites Content management and editing–right... at 3:02
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
3:02
Figma First look: CMS in Figma Sites Content management and editing–right... at 3:10corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
3:10
Figma First look: CMS in Figma Sites Content management and editing–right... at 3:14corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
3:14
Figma First look: CMS in Figma Sites Content management and editing–right... at 3:18corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
3:18
Figma First look: CMS in Figma Sites Content management and editing–right... at 3:50
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
3:50
Figma First look: CMS in Figma Sites Content management and editing–right... at 3:58corner inset
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
3:58
Figma First look: CMS in Figma Sites Content management and editing–right... at 4:10medium presenter
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
4:10
Figma First look: CMS in Figma Sites Content management and editing–right... at 4:14medium presenter
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
4:14
Figma First look: CMS in Figma Sites Content management and editing–right... at 4:17
FigmaFirst look: CMS in Figma Sites Content management and editing–right...
4:17

Transcription de First look: CMS in Figma Sites Content management and editing–right...

Transcrit par un modèle vocal à partir du son du film, et non rédigé par la marque. Cliquez sur une ligne pour y amener la lecture.

  1. 0:00Now we know many of you are going to be building websites that are very content heavy,
  2. 0:04and of course with that comes the need for dynamic content and also an easy way to manage them.
  3. 0:09So we're building a CMS that's directly integrated into Figma Sites, and we want to give you a preview.
  4. 0:20Okay, so here we are back working on Kicken's website, and we're starting to scaffold out our blog page.
  5. 0:27And you can see here that we've got a row that's going to be representing each article that's in our blog.
  6. 0:33We don't want to have to go in here and edit this content manually all the time.
  7. 0:36And the keen eyes in the audience may have noticed this little database icon over here in the left rail.
  8. 0:41And if we open that, that takes us into our CMS view.
  9. 0:45Here we can create CMS collections to find each of the properties of our article
  10. 0:49and easily access each of the articles in the CMS to edit all the content.
  11. 0:54And we think this focused editing experience is going to make it easy for you to bring
  12. 0:57collaborators in to just manage the content without clicking around on the canvas to edit
  13. 1:02text.
  14. 1:03Now, once you have all that content, you need to get it into the design.
  15. 1:06So we can flip over here to connect mode, and all we have to do is select the property
  16. 1:11from our blog that we want to map to a layer on the canvas.
  17. 1:14So if we click on our title, you'll see that all the content already subs in and repeats
  18. 1:18down through all of our rows.
  19. 1:20And we can do that to our cover photo, our summary, and our date.
  20. 1:27And just like that, we've bound all the content dynamically from our CMS.
  21. 1:31Now, over here we have our blog article page, and we've already gone ahead and bound all the properties.
  22. 1:35But one thing that you'll notice is that we can preview each one of the entries in our CMS directly on the canvas.
  23. 1:42And if we're in a situation where we want to make a quick edit,
  24. 1:46it, we can click on any of these objects on the canvas,
  25. 1:49and we can access that inline editor right from the canvas
  26. 1:52to make some quick changes.
  27. 1:53We're really excited to bring CMS later on in the year,
  28. 1:56and I'm going to turn it over to Tom to give us one more
  29. 1:58preview.
  30. 1:59TOM MCGEELEEYER- OK, let's talk about one of my favorite
  31. 2:05subjects, and that's code.
  32. 2:08Sometimes you need to do something that's just more
  33. 2:10complicated than what you could do with normal design tools.
  34. 2:14Let's take a look at this example.
  35. 2:15So here, Kicken wants to add this interactive calculator to their site so that visitors can calculate their funding.
  36. 2:21They want to be able to drag these sliders around, update the values, do all sorts of math, and have this update the estimated funding down below.
  37. 2:31That would be pretty hard to do with the point-and-click interactions, but it's a really good use case for code.
  38. 2:36And I'm excited to say that now you can use code with Figma sites with what we call code layers.
  39. 2:42And I'll show you how to get started.
  40. 2:44First, I'm going to select this design.
  41. 2:47This is just the normal design that you would create, auto layout is all set up in here.
  42. 2:52But I'm going to come over here and I'm going to click this new button.
  43. 2:54It's called Make Code From Design.
  44. 2:57And when I click that, that's going to automatically convert all of those layers into well-structured
  45. 3:02React and Tailwind.
  46. 3:04That's pretty cool.
  47. 3:06So now I can jump in here and start adding a bunch of interactions.
  48. 3:10That's not terribly fun to watch, so I'm actually going to slide over to an example that's already built.
  49. 3:15So here's one that's built out.
  50. 3:18And in here you'll see that the right-hand side is a live preview, so I can interact with this.
  51. 3:24I can drag these sliders around. This has all been built out.
  52. 3:27But that animation felt like it took forever.
  53. 3:30That's a long animation.
  54. 3:31Yeah. So I'm going to come over. I can just make a couple tweaks to the code here.
  55. 3:36Let's try 0.3. This is going to live update for me.
  56. 3:39and now I can play with this, and that's feeling much snappier.
  57. 3:44A couple other things just to point out while we're here.
  58. 3:47You may have noticed we're actually importing NPM modules here.
  59. 3:51There are some Figma-provided hooks
  60. 3:53so that you can expose properties for your code layers
  61. 3:56or customize your code for different breakpoints.
  62. 3:59And there's some really exciting new ways to work with code
  63. 4:02that you're going to learn about in a few minutes.
  64. 4:04So stay tuned.
  65. 4:06CMS and code layers are coming soon.
  66. 4:08to many of the updates that we have planned for Figma Sites.
  67. 4:13We can't wait to see what you publish.
  68. 4:15Back to you, Dylan.
68 lignes · 839 mots

More from Figma

All of Figma →

The rest of their work we have taken apart.

Oh wait there’s more: we’re building 3D Transforms, here’s a preview ...39M views
Figma
Oh wait there’s more: we’re building 3D Transforms, here’s a preview ...
1:0423 frames4.0s cut78% face
Made in Figma (2025) Like this ❤️ we designed it for you36M views
Figma
Made in Figma (2025) Like this ❤️ we designed it for you
0:3872 frames0.5s cut7% face
Like a post with ‘Made in Figma’ You’ll get a surprise29M views
Figma
Like a post with ‘Made in Figma’ You’ll get a surprise
1 frames0% face
Now you can use AI agents to design directly on the Figma canvas, wit...18M views
Figma
Now you can use AI agents to design directly on the Figma canvas, wit...
0:3719 frames1.5s cut0% face
What’s your favorite scary movie?8.2M views
Figma
What’s your favorite scary movie?
2:32216 frames3.3s cut80% face

Cut at the same speed

Films whose median shot runs closest to 27.89s.

Seedance 2.5 is coming soon to Runway. Bring up to 50 references int...51K views
Runway
Seedance 2.5 is coming soon to Runway. Bring up to 50 references int...
0:3816 frames27.0s cut81% face
Why are you paying for dictation? We're releasing free, unlimited AI...916K views
Willow
Why are you paying for dictation? We're releasing free, unlimited AI...
1:2632 frames29.0s cut63% face
How to hand off local agents to the cloud in Warp506 views
Warp
How to hand off local agents to the cloud in Warp
3:06110 frames26.6s cut0% face
Perfect lighting, zero-typing, instant recaps, and live translation? Am I dreaming"1K views
Google Workspace
Perfect lighting, zero-typing, instant recaps, and live translation? Am I dreaming"
2:0798 frames26.4s cut96% face
More of the iOS app loop, now inside Codex. The Build iOS Apps plugi...2.1M views
OpenAI Developers
More of the iOS app loop, now inside Codex. The Build iOS Apps plugi...
0:4217 frames29.4s cut0% face
Gen-4.5 has exceptional prompt adherence allowing you to tell a story...43K views
Runway
Gen-4.5 has exceptional prompt adherence allowing you to tell a story...
1:1327 frames26.2s cut4% face
Introducing @claudeai agents in Notion. Your task board is Claude’s t...Launch495K views
Notion
Introducing @claudeai agents in Notion. Your task board is Claude’s t...
1:2833 frames26.1s cut15% face
Team-Kollaboration | Infinity Maps Tutorial DE183 views
Infinity Maps
Team-Kollaboration | Infinity Maps Tutorial DE
1:2132 frames25.8s cut6% face
Introducing a new design for Microsoft 365 CopilotLaunch11K views
Microsoft Design
Introducing a new design for Microsoft 365 Copilot
1:3638 frames25.7s cut11% face
Sidekick demo145 views
Ben Issen (Beni)
Sidekick demo
1:2131 frames25.4s cut94% face
Your users are on Slack, Discord, Teams, WhatsApp, Telegram, GitHub, ...99K views
Vercel
Your users are on Slack, Discord, Teams, WhatsApp, Telegram, GitHub, ...
8:31589 frames25.4s cut98% face
⚡️Introducing ion design (YC W24)⚡️ We instantly turn Figma designs ...Launch161K views
Samraaj Bath
⚡️Introducing ion design (YC W24)⚡️ We instantly turn Figma designs ...
2:1299 frames30.5s cut100% face

Lit and framed like this

Closest on how much of the running time has a face in it and how dark the frames are.

What It's Really Like to Build Drones at Skydio836 views
Skydio
What It's Really Like to Build Drones at Skydio
1:3573 frames2.0s cut81% face
Meet OIKOS Fusion™: Helps Build & Retain Muscle While Losing WeightLaunch715 views
OIKOS Protein
Meet OIKOS Fusion™: Helps Build & Retain Muscle While Losing Weight
0:1617 frames0.8s cut82% face
Awesome vibe coding ad, with Gilfoyle from Silicon Valley! 😂😂https:...317K views
Railway
Awesome vibe coding ad, with Gilfoyle from Silicon Valley! 😂😂https:...
0:4531 frames1.7s cut84% face
Perplexity helps you know it all, whether you’re a world champ fine t...653K views
Perplexity
Perplexity helps you know it all, whether you’re a world champ fine t...
2:02197 frames1.9s cut84% face
Your mind is a portal to millions of worlds. Ray3 Modify brings them ...49K views
Luma
Your mind is a portal to millions of worlds. Ray3 Modify brings them ...
1:2047 frames2.6s cut74% face
We just killed…everything. Introducing Monid, the OpenRouter for age...Launch614K views
Shengkun Ye
We just killed…everything. Introducing Monid, the OpenRouter for age...
0:5720 frames85% face
We rebuilt Premiere Pro from scratch for AI agents. Not a toy that g...459K views
Tom Kim
We rebuilt Premiere Pro from scratch for AI agents. Not a toy that g...
1:5189 frames1.7s cut75% face
i killed our india ad budget and wrapped 100 autorickshaws in @wisprf...46K views
Tanay Kothari
i killed our india ad budget and wrapped 100 autorickshaws in @wisprf...
0:5758 frames1.1s cut81% face
Learn how to Produce a video in D-ID Studio2K views
D-ID AI Video Platform
Learn how to Produce a video in D-ID Studio
1:5644 frames5.6s cut82% face
Seedance 2.5 is now on Runway. Build entire worlds full of characters...1.0M views
Runway
Seedance 2.5 is now on Runway. Build entire worlds full of characters...
1:2338 frames1.4s cut79% face
This is how you do a great startup video Humble and chill and a real...
steijnpelle
This is how you do a great startup video Humble and chill and a real...
2:27181 frames1.5s cut78% face
Codex, but make it weird. Hahahacks.23K views
OpenAI
Codex, but make it weird. Hahahacks.
1:1774 frames1.4s cut73% face

More social

Same category, other makers, most watched first.

Your ideas, your apps—Base44622M views
Base44
Your ideas, your apps—Base44
0:5651 frames1.1s cut6% face
Turn any idea into an app with Base44538M views
Base44
Turn any idea into an app with Base44
0:5538 frames2.2s cut50% face
Build Your Website with One Sentence | Base44154M views
Base44
Build Your Website with One Sentence | Base44
0:4835 frames0.9s cut31% face
Rip The Script | Nike Football81M views
Nike Football
Rip The Script | Nike Football
6:00310 frames1.1s cut60% face
PetSmart | "Pickup in...STORE!"75M views
PetSmart
PetSmart | "Pickup in...STORE!"
0:1511 frames1.4s cut64% face
NEO The Home Robot Order Today69M views
1X
NEO The Home Robot Order Today
9:53271 frames2.8s cut25% face
Apple Education: Ready for every learning opportunity69M views
Apple
Apple Education: Ready for every learning opportunity
1:4687 frames1.3s cut40% face
Phone calls suck. So, we bought a giant telephone car, raised $65,00...64M views
Bland
Phone calls suck. So, we bought a giant telephone car, raised $65,00...
1:4854 frames4.3s cut81% face
The Impossible Return – OIKOS 15s Commercial 202646M views
OIKOS Protein
The Impossible Return – OIKOS 15s Commercial 2026
0:1517 frames1.0s cut65% face
Getting Help is Simple, With Hims36M views
hims
Getting Help is Simple, With Hims
0:3023 frames2.0s cut70% face
Hello, MacBook Neo35M views
Apple
Hello, MacBook Neo
3:50291 frames67.5s cut1% face
Build it your way with Base44.34M views
Base44
Build it your way with Base44.
0:5133 frames1.9s cut0% face
Browse every frame in the library