Common Actions
Design Tips
Category
Currents
Category
Interactions
Category
Illustrations
Category
Resources
Category
Education
Category
Tools
Category
Gradient Generator
Resources
Gradient Generator
Resources

Creates more brilliant gradients than standard tools (by interpolating in radial color spaces)

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

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. 

VectorPortal
Tools
Ira Design
Tools
TeleportHQ
Tools

Export your components and design system to teleportHQ, integrate the generated code into your web application codebase and publish your website with one click.

CodeTea
Tools

Craft user interfaces for mobile apps effortlessly and professionally right from your browser.Conveniently import designs from Figma, Zeplin, and swiftly adjust components using the 'Drag & Drop' tool. Generate precise code output across multiple frameworks: React Native, Flutter, SwiftUI IOS, and Kotlin Android. The product's correlation level is a direct 1-1 match

Locofy Lightning
Tools

Transform your Figma designs into production-ready front-end code in one click with Locofy Lightning! Effortlessly build full apps, screens, components, and design systems at lightning speed. Experience the future of design-to-code with our cutting-edge technology.

Tabler icons
Resources

4926 Open source free SVG icons. Highly customizable. No attribution required. For commercial use.

Jam.dev
Tools

1 click to capture a perfect bug report. Trusted by 32 of the Fortune 100, and 100K happy users.

Shrink.media
Tools

Reduce the file size of your images by smartly compressing & reducing dimensions, and download the compressed images for free.

Font Bundles
Resources

Explore, design, and personalize with limitless font selections at Font Bundles.

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
All
Design Tips
Resources
Education
Tools
Illustrations
Currents
Interactions
Create an accountAlready have an account? Sign in
Your Name
View Profile
Saved Whiz
Logout
Welcome
Please enter your details.
New here? Sign up
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Welcome
Please enter your details.
Already have an account? Sign in
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
HomeToolsAuto Documentation

Auto Documentation

by Eddy Salzmann
Share
No items found.
No items found.
01 / 00

Documents all of the color styles defined in your file and puts them into an adjustable component. You can create your own template or use the auto-generated one. It outputs the following fields:

Tags
UI/UX Design
Visual Design
Product Design
Colour
Author
Eddy Salzmann
Source
Link
Featured
July 2, 2024
More like this
Tools
Tool or Software
CodeFun
Tools
Tool or Software
Typper
Tools
Tool or Software
Dualite
Tools
Tool or Software
Tencent CoDesign
Tools
Tool or Software
QR Code Designer
Tools
Tool or Software
Icons → Code
Tools
Tool or Software
CoderPad
Tools
Tool or Software
Codia AI
Tools
Tool or Software
Figma to Dora
Tools
Tool or Software
Clapy
Tools
Tool or Software
QR Coder
Tools
Tool or Software
FireJet
Tools
Tool or Software
Codejet.ai
Tools
Tool or Software
AutoHTML
Tools
Tool or Software
PxCode
Tools
Website
VectorPortal
Tools
Website
Ira Design
Tools
Tool or Software
TeleportHQ
Tools
Tool or Software
CodeTea
Tools
Tool or Software
Locofy Lightning
Tools
Website
Jam.dev
Tools
Website
Shrink.media
Tools
Website
Morflax
Tools
Website
SVGator
Tools
Website
Upscale.media
Tools
Website
Bubble
Tools
Website
Psdrepo
Tools
Website
UIverse
Tools
Tool or Software
DesignDoc [Spectral]: Measures, Annotations, and Handoff
Tools
Tool or Software
EightShapes Specs
Tools
Tool or Software
Redlines & Annotations
Tools
Tool or Software
Measure
Tools
Tool or Software
Redlines
Tools
Tool or Software
Icons8 Background Remover
Tools
Tool or Software
uiGradients
Tools
Tool or Software
Blobs
Tools
Website
Atmos
Tools
Website
Coverr
Tools
Tool or Software
Codelessly
Tools
Tool or Software
Super Tidy
Tools
Website
Vectary
Tools
Website
Format mockup
Tools
Website
Mockrocket
Tools
Website
Afterimage
Tools
Tool or Software
Design System Hub
Tools
Website
Pixcap
Tools
Tool or Software
Xmind
Tools
Website
Creatsy
Tools
Website
Pictogrammers
Tools
Tool or Software
Fullstory
Tools
Tool or Software
Origami Studio 3
Tools
Website
Lunacy
Tools
Tool or Software
KERNTYPE
Tools
Tool or Software
Colors by Fardos
Tools
Tool or Software
Super Tidy
Tools
Tool or Software
Blobs
Tools
Tool or Software
uiGradients
Tools
Tool or Software
Icons8 Background Remover
Tools
Tool or Software
Redlines
Tools
Tool or Software
Measure
Tools
Website
Site Inspire
Tools
Tool or Software
Google sheet sync
Tools
Tool or Software
Angle Mockups
Tools
Tool or Software
Content Reel
Tools
Tool or Software
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Tools
Tool or Software
Stark - Contrast & Accessibility Checker
Tools
Tool or Software
Remove BG
Tools
Tool or Software
Status Dropdown
Tools
Tool or Software
TagIt: Tags Manager
Tools
Tool or Software
Commentify
Tools
Tool or Software
AnnoDot
Tools
Tool or Software
Qualas Tracking Plan
Tools
Tool or Software
Stickies
Tools
Tool or Software
Locksmith
Tools
Tool or Software
Simple Status
Tools
Tool or Software
Amplitude Event Planner
Tools
Tool or Software
Quick Status
Tools
Tool or Software
Variant Annotator
Tools
Tool or Software
Auto Number
Tools
Tool or Software
Tracking
Tools
Tool or Software
Anno-tation
Tools
Tool or Software
MockFlow AnnotatePro
Tools
Tool or Software
specspec
Tools
Tool or Software
FigDone
Tools
Tool or Software
axe for Designers: A Free Accessibility Plugin
Tools
Tool or Software
Include—Accessibility Annotations
Tools
Tool or Software
Annotation
Tools
Tool or Software
Sticky Notes Kit
Tools
Tool or Software
Annotate Design
Tools
Tool or Software
Handoff notes
Tools
Tool or Software
A11y - Focus Order
Tools
Tool or Software
Status Annotations
Tools
Blog Posts/Article
Visualize Your Colors & Fonts On a Real Site
Tools
Tool or Software
Motion
Tools
Tool or Software
Figmotion
Tools
Tool or Software
Beatflyer
Tools
Tool or Software
Parallax
Tools
Tool or Software
Physics animation
Tools
Tool or Software
Trace Images
Tools
Tool or Software
Export to GIF/Video

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