Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Row-level actions + confirmation toast. Interaction design made entirely in Figma using component states and some keyboard hacks 😁

virgil_pana's profile picture

virgil pana

2,763 subscribers

15,506 görüntüleme • 1 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

Design Comrades let me show you the power of Figma using; Component(Variants), Smart Animate, and After Delay. Are we learning? #ui #figma
2:20

Design Comrades let me show you the power of Figma using; Component(Variants), Smart Animate, and After Delay. Are we learning? #ui #figma

TimX | Million-Dollar UX Design 🚀

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

Introducing Table and Data Table components. Powered by TanStack Table ✨ Built using Radix UI and Tailwind CSS. With Pagination, Row Selection, Sorting, Filters, Row Actions and Keyboard Navigation.
0:47

Introducing Table and Data Table components. Powered by TanStack Table ✨ Built using Radix UI and Tailwind CSS. With Pagination, Row Selection, Sorting, Filters, Row Actions and Keyboard Navigation.

shadcn

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

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.
0:33

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.

Claude

2,597,925 görüntüleme • 11 ay önce

Smart Componets + Autolayout in Figma ✨ Long time ago, I created this component to design some cool posters to hang on my studio wall.
0:20

Smart Componets + Autolayout in Figma ✨ Long time ago, I created this component to design some cool posters to hang on my studio wall.

vijay verma

39,104 görüntüleme • 1 yıl önce

Moving with purpose achieves focus, and all complexity fades away. Open-source component illustrations, made in Figma.
0:28

Moving with purpose achieves focus, and all complexity fades away. Open-source component illustrations, made in Figma.

Natko Hasic

44,009 görüntüleme • 1 yıl önce

I haven't fully thought this through but... I think there's a lot of potential in using Figma Make embeds in Figma Design for inline and interactive design system documentation
0:33

I haven't fully thought this through but... I think there's a lot of potential in using Figma Make embeds in Figma Design for inline and interactive design system documentation

luis.

23,352 görüntüleme • 7 ay önce

I made this site entirely in Figma using Locofy.ai Responsive layout, breakpoints, pages, animations. The code is near perfect and exportable to React w/ styles, components and variables. For simple sites like portfolios and landing pages, you can do everything in Figma.
0:43

I made this site entirely in Figma using Locofy.ai Responsive layout, breakpoints, pages, animations. The code is near perfect and exportable to React w/ styles, components and variables. For simple sites like portfolios and landing pages, you can do everything in Figma.

Meng To

32,205 görüntüleme • 2 yıl önce

Cursor can now create new components and frontends in Figma using your team's design system.
0:25

Cursor can now create new components and frontends in Figma using your team's design system.

Cursor

635,574 görüntüleme • 5 ay önce

Back next week with 5 more features on Figma Slides, but for now have fun with these → View layers in Design mode in grid view → Keyboard shortcut to toggle on Design mode (⇧ + D) to access your fave Figma features → Add template text styles in Design mode → Click the right arrow to advance slides AND play videos → Create and save your Grid styles
0:28

Back next week with 5 more features on Figma Slides, but for now have fun with these → View layers in Design mode in grid view → Keyboard shortcut to toggle on Design mode (⇧ + D) to access your fave Figma features → Add template text styles in Design mode → Click the right arrow to advance slides AND play videos → Create and save your Grid styles

Figma

124,690 görüntüleme • 2 yıl önce

File Upload component, now in code. 🔥 Drag-and-drop, progress, and file icons, shipped as clean React, perfectly matched to the Figma design. A complete design & code ecosystem. → [Create UI - Design System]™
0:39

File Upload component, now in code. 🔥 Drag-and-drop, progress, and file icons, shipped as clean React, perfectly matched to the Figma design. A complete design & code ecosystem. → [Create UI - Design System]™

Chatto

20,277 görüntüleme • 1 ay önce

Created this homepage using Codex (GPT-5.5) and Rive animations! Honestly I’m speechless I made the design in Figma and animations in Rive, then brought it all together Rive
0:51

Created this homepage using Codex (GPT-5.5) and Rive animations! Honestly I’m speechless I made the design in Figma and animations in Rive, then brought it all together Rive

Dani Bayanov

30,536 görüntüleme • 4 ay önce

Weekend learning - tried Cursor + Figma MCP that can turn design component in Figma into Tailwind and shadcn~30sec. still early stage, but so many fun! thx for sharing this Graham Lipsman 🙌
0:36

Weekend learning - tried Cursor + Figma MCP that can turn design component in Figma into Tailwind and shadcn~30sec. still early stage, but so many fun! thx for sharing this Graham Lipsman 🙌

Lichin Lin

18,392 görüntüleme • 1 yıl önce

Got inspired by Resend's keyboard component, made something similar using pure CSS. This way, its configurable during runtime, so you can change the text and colour to your liking.
0:30

Got inspired by Resend's keyboard component, made something similar using pure CSS. This way, its configurable during runtime, so you can change the text and colour to your liking.

balint

185,581 görüntüleme • 1 yıl önce

Flow was made entirely in Blender and rendered using EEVEE.
0:35

Flow was made entirely in Blender and rendered using EEVEE.

Gints Zilbalodis

618,412 görüntüleme • 1 yıl önce

Designers, stop manually prototyping your Figma designs, instead turn your design into realistic prototypes with Figma Make. Here’s my step-by-step process: prepare your Figma design, select the screens and send it to Figma Make, enter a prompt to generate a prototype using the reference design, and in seconds you’ll get a realistic UI prototype that stays true to your original design. Bookmark it for later 💜
0:24

Designers, stop manually prototyping your Figma designs, instead turn your design into realistic prototypes with Figma Make. Here’s my step-by-step process: prepare your Figma design, select the screens and send it to Figma Make, enter a prompt to generate a prototype using the reference design, and in seconds you’ll get a realistic UI prototype that stays true to your original design. Bookmark it for later 💜

Abraham John 🦄🦓

30,370 görüntüleme • 6 ay önce

Why I no longer use After Effects for Motion Design Designed in Figma, animated in Lottielab using Presets, Magic Animator, and Keyframes. WIP.
1:04

Why I no longer use After Effects for Motion Design Designed in Figma, animated in Lottielab using Presets, Magic Animator, and Keyframes. WIP.

Daryl Patigas

99,737 görüntüleme • 1 yıl önce

built the design using Claude and this is where ai can help you think through flows, ux, missed actions and states etc it's not perfect, but it help!
0:28

built the design using Claude and this is where ai can help you think through flows, ux, missed actions and states etc it's not perfect, but it help!

Nick

51,571 görüntüleme • 4 ay önce

Save this Figma prompt if you want to generate a full button component system with Auto Layout, sizes, states, variants, and reusable structure in 60 seconds. Copy and use this 👇
1:03

Save this Figma prompt if you want to generate a full button component system with Auto Layout, sizes, states, variants, and reusable structure in 60 seconds. Copy and use this 👇

designwithkingsley

47,732 görüntüleme • 1 ay önce

Meet the Figma design agent, with Tammy Taabassum and Rodrigo Davies 0:00 Intro 0:12 Ways to use the design agent 0:27 Automating repetitive tasks 1:01 Running explorations in parallel 1:25 Maintaining design libraries 1:43 Remixing styles and layouts 2:14 Using design libraries 2:48 Collaboration and comments 3:51 Outro
4:29

Meet the Figma design agent, with Tammy Taabassum and Rodrigo Davies 0:00 Intro 0:12 Ways to use the design agent 0:27 Automating repetitive tasks 1:01 Running explorations in parallel 1:25 Maintaining design libraries 1:43 Remixing styles and layouts 2:14 Using design libraries 2:48 Collaboration and comments 3:51 Outro

Figma

72,414 görüntüleme • 3 ay önce

📢 AI Template is now live! Figma and React, fully in sync 🥳 Built for real AI workflows — not demos. ✨ What’s inside: → AI-focused screens → Conversation-based layouts → Actions & system states → 30+ production-ready screens 🔗 w / AlignUI Design System
0:54

📢 AI Template is now live! Figma and React, fully in sync 🥳 Built for real AI workflows — not demos. ✨ What’s inside: → AI-focused screens → Conversation-based layouts → Actions & system states → 30+ production-ready screens 🔗 w / AlignUI Design System

Erşad

11,976 görüntüleme • 7 ay önce