Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

"Nice design but you wont be able to make it responsive!" Right. Responsive design in Framer. Biggest takeaway: - What takes about 20 min to create in Figma - Takes about 2 days to create in Framer First iteration WIP.

TyroneC__'s profile picture

Tyrone C.

5,333 subscribers

14,391 Aufrufe • vor 1 Jahr •via X (Twitter)

KunstWissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

12 Kommentare

Profilbild von Saja
Sajavor 1 Jahr

Nice man

Profilbild von Tyrone C.
Tyrone C.vor 1 Jahr

Ayyy Saja what’s up?! Appreciate you mate!

Profilbild von RedDeer.Games
RedDeer.Gamesvor 1 Jahr

🚨 New HIT on Nintendo! 🚨 🎮 My Cozy Room – the ultimate sandbox game to unleash your creativity! 🛋️Design dream spaces with 500+ furniture items & 30+ styles. 👉 Play now: #Nintendo #Indiegames #RedDeerGames #MyCozyRoom

Profilbild von Aydar Rakimov
Aydar Rakimovvor 1 Jahr

You are so right. Just like - What takes 1 day ito create in Figma - Takes about two weeks iteration in Xcode. Your figma file is not a product. But from framer you can publish at least.

Profilbild von Kirill Mangutov
Kirill Mangutovvor 1 Jahr

Interesting, I wonder if you uncovered any ideas on ways this could be sped up. I like the idea of Framer as a dedicated web design tool vs. Figma which seems more general.

Profilbild von Tyrone C.
Tyrone C.vor 1 Jahr

Something that took a while to figure out was the hover state to reveal the image- done with a code component (surely there are better ways) Also figuring out the correct spacings using grids, fill and relative width. I think it’s just more practice

Profilbild von Skar
Skarvor 1 Jahr

Fr Man, making an unusual layout responsive in Framer is just a lot of effort, but surely possible

Profilbild von Pınar Bahar
Pınar Baharvor 1 Jahr

Yes this really happened to me this week and I had to massacre my own work for responsiveness. 😭 Very Great work btw @TyroneC__ Did you use any specific tutorial for Framer dev?

Profilbild von Tyrone C.
Tyrone C.vor 1 Jahr

I didn’t use any specific tutorial for this build but learned framer with a @FluxAcademyHQ course taught by @mattjumper Highly recommend 🔥

Profilbild von dare
darevor 1 Jahr

looking good so far

Profilbild von Jay Jihane
Jay Jihanevor 1 Jahr

It might took time, but the result is worth it👏

Profilbild von Tyrone C.
Tyrone C.vor 1 Jahr

Thank you Jay!

Ähnliche Videos

I've been working on a course for ~2 years, and it's finally out! It's called Responsive Design for Beginners, and in it you'll learn how to build a responsive website from a Figma design with HTML, SCSS, JS. here's what the final website looks like:
0:22

I've been working on a course for ~2 years, and it's finally out! It's called Responsive Design for Beginners, and in it you'll learn how to build a responsive website from a Figma design with HTML, SCSS, JS. here's what the final website looks like:

Jess Chan | Coder Coder

23,354 Aufrufe • vor 2 Jahren

Just published Parametric Tables in Figma ✶ A new cool technique to use Figma variables to create 100% responsive and scalable tables, Check it out ↓
0:31

Just published Parametric Tables in Figma ✶ A new cool technique to use Figma variables to create 100% responsive and scalable tables, Check it out ↓

Dmitriy Bunin

11,630 Aufrufe • vor 1 Jahr

Create an AI-Powered Prototype in Figma Make Full process from Design to Code
18:37

Create an AI-Powered Prototype in Figma Make Full process from Design to Code

Gary Simon

44,986 Aufrufe • vor 8 Monaten

🎬 Framer Creators Ep. 3 is here! Meet Asia Gawron, winner of the Best Newcomer award. In just one year, she went from discovering Framer to becoming a Framer Expert, creating websites that went viral along the way. With a background in architecture, she brings together graphic design, 3D, and typography to create standout work on the web
0:23

🎬 Framer Creators Ep. 3 is here! Meet Asia Gawron, winner of the Best Newcomer award. In just one year, she went from discovering Framer to becoming a Framer Expert, creating websites that went viral along the way. With a background in architecture, she brings together graphic design, 3D, and typography to create standout work on the web

Framer

14,600 Aufrufe • vor 3 Monaten

We’re about to find out if design alone can make $100,000 in 16 weeks using nothing but Framer. No Ads. Just design, strategy, and sleepless nights. ben Jorn van Dijk Platform:- Framer + Contra If we miss a milestone, we pay the community $500 — and it doubles each time. If we hit them all, we prove Framer can pay the bills. Follow the journey 🫡✌🏿
1:09

We’re about to find out if design alone can make $100,000 in 16 weeks using nothing but Framer. No Ads. Just design, strategy, and sleepless nights. ben Jorn van Dijk Platform:- Framer + Contra If we miss a milestone, we pay the community $500 — and it doubles each time. If we hit them all, we prove Framer can pay the bills. Follow the journey 🫡✌🏿

hakeem ☻ 💜 | Studio Duo | Top 1% Framer Designer

21,603 Aufrufe • vor 10 Monaten

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

It's 2026, stop shipping design slop. It only takes 5 minutes to clone and work from any design system in the world with Figma MCP.
9:36

It's 2026, stop shipping design slop. It only takes 5 minutes to clone and work from any design system in the world with Figma MCP.

nader dabit

64,250 Aufrufe • vor 16 Tagen

I built a free Figma to React plugin used by Lovable! In 1 click you can convert your Figma design into React + Tailwind CSS code They said it had better code gen than even paid plugins like Anima, Builderio, Framer, etc. but no one knew about it :( ✅ Try Figroot (it's completely free) Like + comment to help me share it 🫶
0:58

I built a free Figma to React plugin used by Lovable! In 1 click you can convert your Figma design into React + Tailwind CSS code They said it had better code gen than even paid plugins like Anima, Builderio, Framer, etc. but no one knew about it :( ✅ Try Figroot (it's completely free) Like + comment to help me share it 🫶

patti

17,909 Aufrufe • vor 8 Monaten

Curious about design systems but don't know where to start? Whether you're about to build your first design system or just curious about them, our new 4- part course, "Introduction to Design Systems," will provide guidance, real-world applications, and tools to help you make the most informed decisions. - Understand what a design system is - Discover what goes into a design system and explore foundational concepts - Learn which Figma features help manage design systems - Explore the importance of documentation and how to maintain, improve, and advocate for your design system. Learn more:
0:59

Curious about design systems but don't know where to start? Whether you're about to build your first design system or just curious about them, our new 4- part course, "Introduction to Design Systems," will provide guidance, real-world applications, and tools to help you make the most informed decisions. - Understand what a design system is - Discover what goes into a design system and explore foundational concepts - Learn which Figma features help manage design systems - Explore the importance of documentation and how to maintain, improve, and advocate for your design system. Learn more:

Figma

551,164 Aufrufe • vor 3 Jahren

Created AI Chatbot Design using Figma Make, and converted it into Responsive using Variables & applied Light/Dark Modes. Comment Figma to get Source file & Tutorial. (Must be Follow so I can DM) #crm #dashboarddesign #figma #uidesign #uiuxdesign
0:26

Created AI Chatbot Design using Figma Make, and converted it into Responsive using Variables & applied Light/Dark Modes. Comment Figma to get Source file & Tutorial. (Must be Follow so I can DM) #crm #dashboarddesign #figma #uidesign #uiuxdesign

Harshil Acharya

48,447 Aufrufe • vor 5 Monaten

I'm building a new Framer Template. This hero component is a taste of what's coming: – 2 Premium layouts (split & centred) – 100% Responsive design – Ready to use Like, RT & comment "Hero" and I'll DM it now (must follow)
0:27

I'm building a new Framer Template. This hero component is a taste of what's coming: – 2 Premium layouts (split & centred) – 100% Responsive design – Ready to use Like, RT & comment "Hero" and I'll DM it now (must follow)

Andrea Montini

27,058 Aufrufe • vor 1 Jahr

This is how a top designer documents design decisions in Figma Steal this pro technique to ace your design critiques! By keeping design principles, user goals and problems, scope etc in one place you can surface them to your team in weekly design crits. You never know who might be able to help you out! Cecilia Uhr shows how she document design decisions for @bezi_3d in Figma 👇
1:31

This is how a top designer documents design decisions in Figma Steal this pro technique to ace your design critiques! By keeping design principles, user goals and problems, scope etc in one place you can surface them to your team in weekly design crits. You never know who might be able to help you out! Cecilia Uhr shows how she document design decisions for @bezi_3d in Figma 👇

Jayneil Dalal

68,091 Aufrufe • vor 2 Jahren

figma "god mode" just leaked.. this week i tried the future of autonomous design: claude connected directly to the figma api with full edit access.. yes it can design in figma what does it mean? you prompt, it designs. it’s like having a team of designers inside figma working with you and 10x ing your capacity ​why is this different? ​official figma ai/mcp only "reads" files to help devs. this tool (unofficial MCP) "writes" in figma to replace manual labor. hours of grinding turned into seconds of waiting ​imagine this: - ​prompt to design: generate a new screen based on your design or not - prompt to flow: generate end to end user journeys - iteration: create multiple variations in one click - design system: it can use your components to create new screens - ​zero click management: auto layout, component creation, deduplication handled by prompt - ​universal control: if you can do it in figma, it can do it for you ​the impact ​if figma officially releases this, almost every existing plugin becomes obsolete overnight it feels like figma on steroids. i’m still processing whether i feel empowered or replaced ​full tutorial in this article from Mark A. Cianfrani. handle with care: ai will have access to everything in figma »
0:48

figma "god mode" just leaked.. this week i tried the future of autonomous design: claude connected directly to the figma api with full edit access.. yes it can design in figma what does it mean? you prompt, it designs. it’s like having a team of designers inside figma working with you and 10x ing your capacity ​why is this different? ​official figma ai/mcp only "reads" files to help devs. this tool (unofficial MCP) "writes" in figma to replace manual labor. hours of grinding turned into seconds of waiting ​imagine this: - ​prompt to design: generate a new screen based on your design or not - prompt to flow: generate end to end user journeys - iteration: create multiple variations in one click - design system: it can use your components to create new screens - ​zero click management: auto layout, component creation, deduplication handled by prompt - ​universal control: if you can do it in figma, it can do it for you ​the impact ​if figma officially releases this, almost every existing plugin becomes obsolete overnight it feels like figma on steroids. i’m still processing whether i feel empowered or replaced ​full tutorial in this article from Mark A. Cianfrani. handle with care: ai will have access to everything in figma »

Aurelien

79,132 Aufrufe • vor 6 Monaten

When it comes down to it, it's all about how you tell the story and not what model you use. BUT it is nice to be able to generate in 4K and up to 20 seconds. 😉
0:52

When it comes down to it, it's all about how you tell the story and not what model you use. BUT it is nice to be able to generate in 4K and up to 20 seconds. 😉

OpenArt

15,913 Aufrufe • vor 8 Monaten

✨Giveaway Alert✨ Introducing Portfolio template made in Framer This customizable template is ideal for creatives, freelancers, and businesses to quickly build a responsive online presence. Like and Comment "Portfolio" to get it free. (Must be following to DM)
1:15

✨Giveaway Alert✨ Introducing Portfolio template made in Framer This customizable template is ideal for creatives, freelancers, and businesses to quickly build a responsive online presence. Like and Comment "Portfolio" to get it free. (Must be following to DM)

Sai Satvik

31,979 Aufrufe • vor 1 Jahr

Arrow Dynamics (by Framer.zip) is a single code-component library that lets you create interactive 2D animations and patterns right inside Framer 🎛️ Tried to create something different for the landing page. (Link ↓) P.S: Flat design is over ✨
0:45

Arrow Dynamics (by Framer.zip) is a single code-component library that lets you create interactive 2D animations and patterns right inside Framer 🎛️ Tried to create something different for the landing page. (Link ↓) P.S: Flat design is over ✨

Rahul Chakraborty

107,910 Aufrufe • vor 2 Jahren

You design products, not just screens. When you create frames in Figma, you already know how they fit together — which buttons users can press & what happens when they do. Let's talk about the new "Make prototype" feature, which uses AI to bring those static frames to life. 🧵
0:27

You design products, not just screens. When you create frames in Figma, you already know how they fit together — which buttons users can press & what happens when they do. Let's talk about the new "Make prototype" feature, which uses AI to bring those static frames to life. 🧵

Jediah Katz

73,664 Aufrufe • vor 2 Jahren

URL to Shopify store with Instant MCP is now live. Paste in any URL of a store you like. Instant AI turns it into a working Shopify build. Fully responsive. Fully functional. Fully connected. What used to take days now takes minutes. Try it in Instant
0:22

URL to Shopify store with Instant MCP is now live. Paste in any URL of a store you like. Instant AI turns it into a working Shopify build. Fully responsive. Fully functional. Fully connected. What used to take days now takes minutes. Try it in Instant

Coen van Hees

28,137 Aufrufe • vor 3 Monaten

Screenshot to Shopify store with Instant MCP is now live. Screenshot any store you like. Instant AI turns it into a working Shopify build. Fully responsive. Fully functional. Fully connected. What used to take days now takes minutes. Try it in Instant.
0:23

Screenshot to Shopify store with Instant MCP is now live. Screenshot any store you like. Instant AI turns it into a working Shopify build. Fully responsive. Fully functional. Fully connected. What used to take days now takes minutes. Try it in Instant.

Coen van Hees

19,791 Aufrufe • vor 4 Monaten