pro
Jan Mráz
Become 1% better in UX/UI and web design every day! 💜
- $10k+
- Earned
- 1x
- Hired
- 5.00
- Rating
- 835
- Followers
I compared Framer AI Agent with Claude Design 👇
Use code JAN1 for 30% off for annual Framer Pro plan! 🔥
4
48
1K
6 amazing UI color combos, part 2
Neon Lime /C8FF3D/ + Violet Ink /2D1B69/
Burnt Orange /FC6C26/ + Vanilla /FFF4D6/
Warm Lime /CFFF74/ + Olive Ink /2F3A1D/
Electric Indigo /5B3DF5/ + Soft Lilac /E8DEFF/
Sky Mint /B8F7E4/ + Graphite /25272C/
Electric Orchid /E46CFF/ + Deep Plum /2E0F35/
✅ Save them for later reference!
9
48
766
Turn any Figma UI into a reusable animation system with Jitter AI
10
29
657
How to animate any UI icon with Figma Motion
5
34
884
My favorite AI plugins for Figma 🔥
Try more than 20 Figma plugins by ‹div›RIOTS ! You can grab 50 free credits on a new account by signing up here (https://credits.divriots.com/?coupon=jan50)!
9
102
Don’t design websites for mobile devices 💙
1. Instead, go to Framer
2. Prepare your design for desktop only
3. Launch Framer agent
4. And enter the prompt below
5. Get a mobile and tablet view instantly
6. Fine-tune inside chat
7. And launch as a fully-responsive site
Prompt:
Implement the existing desktop design as a responsive layout with two breakpoints: tablet at 768–1199px and mobile at 320–767px. Keep the desktop design as the source of truth, preserve the visual style and hierarchy, adapt tablet layouts into cleaner 2-column sections where needed, stack mobile layouts into one column, use hamburger navigation on mobile, keep buttons at least 44px tall, use flexible widths and responsive images, and fix any overflow, overlap, or horizontal scrolling.
Use code JAN1 for 30% off for the annual Framer Pro plan! 🔥
/FramerPartner/
5
79
Claude with Perspective designs landing pages with 7x better conversion. Here’s how! 🚀
👉 Get the full guide here: https://perspective.co/janmraz-ig
4
24
826
Stop prompting in Claude ~ Framer Agents changed the workflow!
How do you like Framer V3 so far?
9
25
643
Amazing sites for UX/UI designers, part 11
1. Grainient Supply for static and animated color gradients
2. Supahero for hero section inspiration at one place
3. Freefaces Gallery for free fonts that stand out
3
31
757
One Chrome extension for any webpage to Figma auto layout 🤯
4
23
671
Stop making flat Figma prototypes — make them feel 10x more realistic! ❌
Last call to join the Config Makeathon and get a chance to win $100k!
👉 Join here (https://psxid.figma.com/jan_makeathon)
12
101
16K
3 Figma Make hacks you wish you knew sooner! 🔥
👉 Keep these in mind when working on your project for Config Makeathon. 7 days left to submit your prototype!
17
115
24K
How to design Figma prototypes with Claude Opus
👉 Can't wait to see your work in Config Makeathon!
16
176
26.5K
Amazing sites for UX/UI designer, part 10 🔥
1. Shaders is an ultimate source of animated shader gradients with own editing tool
2. LS Graphics is a premium collection of top-tier device mockups
3. Pikaicons for rounded consistent icons pack in 5 different styles
9
33
2.3K
How to make a light beam effect in Framer ⚡️
1. Go to @framer
2. Prepare your web section layout
3. Go to Framer University
4. And find this component
5. Just hit copy and paste to your Framer canvas
6. Here you can easily style to fit your web styleAnd even adjust the beam properties
👉 Use code JAN to get free month of Framer Pro!
18
60
1.6K
Stop hiding your website from AI search! ❌
1. Instead, go to @framer AEO analyzer
2. Here, you just paste your web URL
3. Framer analysis visibility across AI engines and provide a clear score
4. The key is actionable recommendations
5. So you can iterate and finally be seen for AI!
10
47
931
Steal these free Framer components! 💙
1. 3D Image Split Scroll Animation is an excellent choice for immersive scroll-driven experience!
👉 Available in Framer University
2. Kinetic Grid Component is a perfect technique to make your hero section stand out!
👉 Available in Framer University
3. Logo Preloader is a minimalist, elegant component to capture attention from the first moment a visitor lands on your website.
👉 Available in Framer Components Library
🔥Use code JAN to get free month of Framer PRO!
9
35
747
Make your website look instantly premium with a Stripe-Style gradient in Framer 💙
👉 Use code JAN for free Framer PRO for one month
11
40
832
Designing animated shader logo in Framer
Use code JAN for free Framer Pro for one month! 🔥
6
35
702
Designing an interactive Before / After slider in Framer 💙
Use code JAN for free Framer Pro for one month! 🔥
9
40
913
Go from basic hero section design to PRO with this simple tip in Framer!
👉 Use code “JAN” for free Framer PRO for one month! 💙
5
102
How to get instant feedback on your Figma designs 🙌
1. Run the Visual Usability Checker plugin
2. Choose from 3 methods to answer key questions.
3. Will users notice the right elements? Visual hierarchy gives instant heatmaps of attention.
4. Is my design too complex? Use cognitive load analysis to understand mental effort.
5. When choosing between variants, use iterative testing to validate UI elements like CTA buttons.
6. All backed by actionable AI recommendations.
👉 Use the promo code ATHEROS for the 20% discount for PRO during the first 6 months.
2
27
717
Must-known Chrome extensions for UX/UI designers
2
20
661
How to design an app with an interactive map using Figma Make
You can duplicate the prototype here: https://psxid.figma.com/jan_mraz
/FigmaPartner/
4
23
696
How to design customizable shader gradients in Framer 💙
6
35
1.2K
E-learning mobile app screen timelapse from wireframe to final screen design
👉 Duplicate the Figma file for free here: https://learning.atheros.ai/figma-components/e-learning-app-home-screen
10
44
824
3 Must-know Figma Plugins, part 14
4
30
670
How to built hero sections with glow gradients using Framer 💙
10
56
1.4K
3 Framer plugins to design 10x faster, part 2 💙
1. TypeScale generates the typography system for your website with ease!
2. Back to Top is a library of buttons that appears when users scroll down and smoothly takes them back to the top of the page
3. Iconstack gives you 50,000+ free SVG icons from top libraries like Material, Tabler, Lucide, Phosphor, Bootstrap, and more.
Use code JAN for free Framer PRO for one month! 🔥 /FramerPartner/
1
18
543
3 Figma hacks to design 10x faster, part 11 🚀
3
36
1.4K
Stop prototyping manually in Figma! Instead, try this! 👇🏼
4
30
597
Every UX/UI designer should know these sites, part 4
1
25
524
One Figma plugin for fantastic patterns and effects
4
23
527
3 Figma AI tips and tricks, part 2
10
41
555
Don’t build your Figma design system from scratch!
34
559
3 Figma AI tips and tricks part 1
4
40
591
You must know these free Framer plugins! 🔥
3
45
613
Name a more powerful combination!
4
37
552
How to design glow box effect in Figma 💜🔥
2
40
505
How to animate visuals in Framer
6
36
524
I animated this app UI in a single minute using Jitter AI. Here’s how!
8
32
476
How to animate using 3D transforms in Framer
6
30
513
A good-looking website isn’t enough. Let’s build a site that converts using Framer ⚡️
4
38
533
How to design top-tier 3D visuals for an app UI
1. Go to Freepik.com
2. And choose Image generation
3. I'm going to build a 3D illustration for this mobile app.
:. Then prompt the idea - I go with a metallic card with a reference logo.
5. In seconds, you get a professional illustration.
6. When satisfied, save it as a style and prompt other variants.
7. And you can even animate them with the Video Generator for smooth interactions.
1
31
506
Never design a website from scratch again! ❌
2
26
471
Decided to join the Webflow x Contra Challenge!
Cuid is an ambitious startup with a powerful mission — to prevent crime before it happens.
Here’s the final output, showcasing both our software and hardware products. Looking forward to hearing your thoughts! 💜
🔗 https://www.cuid.tech/
3
29
593
You must know these free Figma community files!
1. PROto cursor tracking - for fantastic mouse one interaction template
2. DesignCode UI for an extensive Glass UI style design system with tens of premade templates and components
3. Dark Mesh Holographic Gradients for sleek and minimal backgrounds
4. Empty State Illustration for free, editable SVG visuals for your no-data app screens
14
53
547
3 Figma hacks to design 10x faster, part 5 🚀
18
448
Convert any image into editable 3D!
2
3
399
I'm creating an app from the gym floor!
6
30
466
Your next Figma design system 10x faster? Here you go!
3
33
1K
Jitter is like Figma, but for motion design! Do you agree?
18
106
954
How to design unique mockup scenes in Figma
5
32
420
One Figma shortcut you need to show dynamic UI measures!
2
378
Ultimate guide for designing a card with progressive blur in Figma 🚀
3
33
415
UI screen timelapse from wireframe to high-fidelity crypto wallet app 🔥
How do you like the final results?
17
374
Wix Studio & Spline is a powerful combination!
11
39
491
You need one Figma plugin to create a glass 3D from any shape!
7
17
319
You need only one click to go from design to live website!
5
30
459
Stop managing Figma color styles manually — This plugin does it all for you!
11
87
767
The beauty of clean design isn’t magic — it’s math. Here’s how 4pt spacing brings structure to the chaos.
5
42
489
Contra community — here is a quick reminder to keep posting here! 😍
Let's connect! 💯
2
28
486
Did you know there's a plugin that turns any screenshot into a Figma Auto Layout UI?! 🙌
25
153
1.7K
GRIT Fitness App Home Screen Design
17
925
(freebie inside 🎁) How to design iOS app navigation in Figma
26
833
From Figma prototype to responsive website with Wix Studio
34
715
Designing fully responsive web card using Figma auto layout
8
283
10 AI workflows I really use in Figma
3
335
Atheros Learning Platform - UX & UI Design
8
534
Quantum VPN App UX/UI Breakdown
6
359
Designing a Perfect Login Form
7
337
Ultimate list of 80 UX/UI design resources
8
417
Design better hero sections
5
78