All
Design Tips
Resources
Education
Tools
Illustrations
Currents
Interactions
Create an accountAlready have an account? Sign in
Your Name
View Profile
Saved Whiz
Logout
Common Actions
Design Tips
Category
Currents
Category
Interactions
Category
Illustrations
Category
Resources
Category
Education
Category
Tools
Category
CodeFun
Tools
CodeFun
Tools

CodeFun is an excellent tool for intelligently generating source code from UI design drafts. Through AI algorithms, it can convert Figma's design drafts into source code like engineers' handwriting with one click.

Typper
Tools

Functional code for any language from Figma

Buzzy
Tools

Create fully working native apps and responsive websites, MVPs or prototypes with real data, user-generated content and live forms straight from Figma, without coding.

Dualite
Tools

We, at Dualite, aim to fasten development production speed with the first-of-its-kind design-to-code tool that lets designers export interactive design prototypes and get them converted to React and HTML/CSS.

Tencent CoDesign
Tools

Tencent CoDesign is a one-stop collaborative platform for product design and development, helping teams improve design collaboration efficiency, effectively manage and use design assets, and make product design easier and more efficient.

QR Code Designer
Tools

QR Code Designer is the missing QR code customization tool. Create custom QR codes that match your brand and design guidelines. This tool integrates with Figma seamlessly by leaving complex QR code generation to the plugin, while allowing you to customize the colors, logo, and effects using regular old Figma.

Icons → Code
Tools

The Design System Middleware that allows you to manage, import, convert and sync graphical assets or icons directly from Figma into your application code.

CoderPad
Tools

CoderPad is a comprehensive technical assessment platform that helps companies identify the best software engineering candidates regardless of their background.

Codia AI
Tools

Codia AI can convert Figma designs to production-ready code within minutes for web and app development, just like a human coder. This significantly amplifies design-to-code efficiency by 10 times or more.

Figma to Dora
Tools

With this plugin, you can effortlessly transfer your Figma design into Dora. Just paste, add interactions, and publish your creation as a fully functional webpage. Dora also supports the use of 3D models and CMS data.

Clapy
Tools

Generate clean React, HTML and CSS code from your Figma files in a few seconds.

QR Coder
Tools

Just type in any URL or text and the plugin will generate the QR code that you can use your phone camera to scan.

FireJet
Tools

Export Figma Design to Code,  Tailwind,  React,  Vue,  Svelte,  HTML,  TypeScript.

Codejet.ai
Tools

Codejet Plugin seamlessly converts auto layout frames natively in Figma to clean and open source code (HTML/CSS) that you can edit in Visual Editor or export.

AutoHTML
Tools

Export React, Vue, Svelte or HTML with Tailwind or CSS Styling.

PxCode
Tools

pxCode is a Design to Code tool. With the revolutionary features provided, you hold the complete control to make flexible edits on your design, obtain developer-friendly HTML / CSS / React.js / Vue / Tailwind CSS code to export for integration. 

Adventures in Imagination: Creative Storytelling for Children
Resources
22 Rules for Storytelling
Resources
Typography Style Tiles
Interactions
Barlow | Typographic Scale & Color Base.
Resources
Design System Tutorial: Typography
Resources
Typography Setup for Mobile Web Design
Resources
Typography - Ultimate Design Systems Breakdown
Resources
Typography Grid and Layout Design
Resources
Modular Typographic Scale System
Resources
Oops! No results found
Please make sure your words are spelt correctly.
Search for designs, illustrations, books instead?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Sign in
Sign up
Welcome
Please enter your details.
Continue with Google
New here? Sign up
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Welcome
Please enter your details.
Continue with Google
Already have an account? Sign in
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
All
Design Tips
Resources
Education
Tools
Interactions
Currents
Illustrations
Your own Personal Design Buddy 😍
Grab UI 500+ components, 40+ illustrations and boost your design workflow.
Explore
Request Ad
How-To's
Adobe XD
Figma
Sketch
Adobe Illustrator
Framer
No-tool
Spline
Webflow
ChatGPT
Photoshop
Canva
Category
Tag
Tools
Type
Youtube
Website
Blog Posts/Article
Tool or Software
IG Post or Carousel
Asset (icons, templates)
IG video
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Education
IG Post or Carousel
How to present UX problems in your UX portfolio
No-tool
Education
IG Post or Carousel
How to make your portfolio text readable
No-tool
Education
IG Post or Carousel
How to change Ux artefacts into stories
No-tool
Education
IG Post or Carousel
How to document your design process
No-tool
Design Tips
Youtube
How to create 3D Website Designs With No Code
No-tool
Education
Youtube
How to Use the Golden Ratio in Graphic Design
No-tool
Design Tips
IG Post or Carousel
How to make water texture in adobe illustrator
Adobe Illustrator
Education
IG Post or Carousel
Gestalt Principles in ux design
No-tool
Education
IG Post or Carousel
Ui token types
Figma
Design Tips
IG Post or Carousel
Auto layout in practice
Figma
Education
IG Post or Carousel
How do we define good UX
No-tool
Education
IG Post or Carousel
How to present branding to clients
No-tool
Education
IG Post or Carousel
Storytelling in brand strategy
No-tool
Design Tips
IG Post or Carousel
Dashboard Design Tips
No-tool
Education
Website
Uxspot
No-tool
Education
Website
Principles of using Grids
No-tool
Design Tips
IG Post or Carousel
How to make 3d inflate text in adobe illustrator
Adobe Illustrator
Design Tips
IG Post or Carousel
How to make gritty shadow in adobe illustrator
Adobe Illustrator
Design Tips
How to create a seamless pattern in adobe illustrator
Adobe Illustrator
Design Tips
IG Post or Carousel
The ultimate instagram sizes guide
No-tool
Tools
Blog Posts/Article
Visualize Your Colors & Fonts On a Real Site
No-tool
Design Tips
IG Post or Carousel
How to create paper cut effect in photoshop
Photoshop
Education
IG Post or Carousel
How to improve your Website or App With UX Audit
No-tool
Tools
Website
Neat
No-tool
Design Tips
IG Post or Carousel
How to create cool glass icons in figma
Figma
Design Tips
IG Post or Carousel
How to create colorful sphere in figma
Figma
Design Tips
IG Post or Carousel
How to create 3d cube from 2d images
Figma
Education
IG Post or Carousel
how to create personas
No-tool
Tools
Tool or Software
Breakpoints
Figma
IG Post or Carousel
How to Start Offering Brand Strategy
No-tool
Design Tips
IG Post or Carousel
How to Create a high converting landing page design
No-tool
Education
IG Post or Carousel
How to build trust to win clients
No-tool
Design Tips
IG Post or Carousel
Auto layout, 4 Pro tips.
Figma
Design Tips
Youtube
4 EASY Figma Animations for Beginners
Figma
Design Tips
IG Post or Carousel
How to create a more complete registration and login
No-tool
IG Post or Carousel
How to create stunning onboarding screens
No-tool
Education
Youtube
How to Create an Image Carousel Animation In Figma
Figma
Design Tips
Youtube
Framer Card Overlap Tutorial
Framer
Design Tips
Youtube
How to Create Full Page Website Scroll Animation in Figma
Figma
Design Tips
Blog Posts/Article
How to master Grids in UI
Figma
Interactions
IG video
Accordion effect in figma
Figma
Interactions
IG video
Ring carousel in figma
Figma
Interactions
IG video
3D planet effect in figma
Figma
Interactions
IG video
Pizza Carousel in Figma
Framer
Interactions
IG video
How to create character slider in figma
Figma
Interactions
IG video
How to create a carousel transition in Figma
Figma
Interactions
IG video
How to create a circular rotating design
Figma
IG video
How to create a masterful glow effects
No-tool
Interactions
IG video
Smoothie carousel in figma
Figma
Illustrations
IG video
3D Text Effect
Adobe Illustrator
Education
Youtube
UX Portfolio: How to write a great tagline to describe yourself
No-tool
Tools
Website
Vectorizer
No-tool
Youtube
Figma Components, Variants & Components Properties
Figma
Design Tips
IG Post or Carousel
how to not suck at colors
No-tool
Design Tips
IG Post or Carousel
How to design for peoples attention
No-tool
Education
Youtube
3 Things to Help you Grow in Confidence as a Product Designer
No-tool
Education
Youtube
How to Get Started Designing Native Apps
No-tool
Education
Youtube
UX Research Methods: The Basics You Need to Get Started
No-tool
Education
IG Post or Carousel
How to get people to buy faster
No-tool
Education
IG Post or Carousel
Idea To Launch: Complete Guide
No-tool
Education
IG Post or Carousel
9 eye scanning patterns you must know
No-tool
Education
IG Post or Carousel
UI UX Portfolio Hacks
No-tool
Education
IG Post or Carousel
Thinking outside the box in ui/ux design
No-tool
Design Tips
IG Post or Carousel
How to design better text inputs & forms
No-tool
Design Tips
Youtube
How To Get The Perfect Spacing In Web Design
Figma
Design Tips
Youtube
The secret Spacing Framework You Need
Figma
Design Tips
Youtube
Perfect Responsive Grid Systems Masterclass
Figma
Design Tips
Youtube
Giving your FLAT Designs some DEPTH
Figma
Photoshop
Design Tips
Youtube
6 Advanced UI Design Tips
Figma
Design Tips
Youtube
5 Tricks For Epic Hero Animations
Framer
Design Tips
Youtube
Build a Responsive Bento Box Layout in Webflow
Figma
Webflow
Design Tips
Youtube
Figma's new multi edit tool
Figma
Design Tips
Youtube
Add patterns to your designs in Figma
Figma
Resources
Website
Ux case studies to improve your design skills
No-tool
Education
Youtube
Framer Parallax Trick (Loop & Scroll Speed Tutorial)
Framer
Education
Youtube
Crash course on Framer CMS
Framer
Education
Youtube
From Figma to 3D website using Framer and Spline
Figma
Framer
Spline
Education
Youtube
Designing dark modes for iOS apps
Adobe XD
Figma
Education
Youtube
Animated bottom navigation bar in figma
Figma
Education
Youtube
How to create an interactive app navigation menu in figma
Figma
Education
Youtube
Design faster with Figma's new multi-edit feature.
Figma
Education
Youtube
Do's and Don'ts of UI design
Figma
Education
Youtube
Framer features that you should know.
Framer
Education
Youtube
Create a full color pallet with figma plugin
Figma
Education
Youtube
Animation basics in figma
Figma
Education
Youtube
Ultimate guide to becoming a web designer.
Webflow
Design Tips
Youtube
Ways to improve your UX design
Figma
Education
Youtube
UX design process explained using a real mobile app project.
Figma
Education
Youtube
Learning how to use Jitter: A superfast UI/UX animation tool.
Framer
Design Tips
Youtube
How to create the rolling text animation in Framer
Framer
Design Tips
Youtube
How to create Framer Parallax Trick; loop & scroll speed
Framer
Design Tips
Youtube
How to make a responsive 3D illustration for Web
Spline
Design Tips
Youtube
How to integrate 3D into Webflow with Spline Scene
Spline
Webflow
Design Tips
Youtube
How to create 3D Scroll Interactions in Webflow
Spline
Webflow
Design Tips
Youtube
From Figma To 3D Website Using Framer & Spline
Figma
Spline
Framer
Education
Youtube
How to Hand-off UI Designs to Developers using figma or zepling
Figma
Education
Youtube
How to organize your Figma File like a Pro
Figma
Education
Youtube
What Is A User Flow? How To Quickly Get Started
Figma
Design Tips
Youtube
Handing off designs to software engineers using flows and annotations
Figma
Education
Youtube
How to Win Against UX Design Pushback
No-tool
Adobe XD
Figma
Sketch
Adobe Illustrator
Framer
No-tool
Spline
Webflow
ChatGPT
Photoshop
Canva

Unlock all access

Get unlimited access to full collection of bit sized design tips and tricks made by designers for designers to boost your design workflow easily
By continuing, you acknowledge that you have read and understood, and agree to Dsgnwhiz's Terms of Service and Privacy Policy