Speedboat is a Figma and Sketch plugin that helps designers and developers get what they need from the design they’re currently working on. It builds a panel UI from your custom Tailwind configuration, and makes it easier for designers to use Tailwind in their designs. It also converts layer properties into Tailwind-compatible HTML classes, which makes it also very useful for developers.
No. We want to make this very clear. Speedboat is not an automatic design to code plugin. It only enables per-layer class name mapping for the supported properties based on your Tailwind configuration.
Yup! The plugin translates applied styles and layer properties even if it wasn’t used in the design process. If the design uses just the default Tailwind sizing/colors/…, the plugin will translate those. However, in order to get all the custom colors, font sizes, etc. you will need to define them in the settings. We might provide a more automatic way of defining config from the design in the future.
The plugin currently supports Figma. We plan to release a Sketch version in the future.
Or follow the guide at https://help.figma.com/hc/en-us/articles/360040450413-Install-and-run-Plugins
Tip: you can also follow the guide at https://help.figma.com/hc/en-us/articles/360040450413-Install-and-run-Plugins
Style Library Opens a panel which will allow you to design using the values from your configuration. Here you can pick your dimensions, fills, shadows and more with just a few clicks. It also offers a handy Copy class names button so you can design and prototype quicker than ever before. 🤯
Copy class names Copies the selected layer Tailwind-compatible class names for supported properties based on your configuration to your clipboard. If your configuration specifies eg. brand-blue colour and your design uses that colour as a Fill, the result copied to your clipboard will be "bg-brand-blue".
Settings Opens a panel with Speedboat configuration. This panel will allow you to set the base font size for your design (if you use relative units) and import your own Tailwind configuration. The configuration is embedded into the file, so you can share it and don’t have to wory about also having to share the configuration.
Currently, only the essential layer types are suported. Group and Artboard support may come in a future release.
The configuration is embedded into the design file so you can easily share the file or open it on any device you need.
Absolutely! Although, we prefer if you give us a chance first. If you have any suggestion or feature request, contact us first to see what we can do.
No tool is perfect and if you feel like Speedboat is not for you, you can refund the purchase within the first 7 days. We want to be fair and transparent about this — however, we reserve the right to check our records for signs of fraud behaviour and decide not to refund your purchase if we see anything suspicious.
To request a refund, contact us at firstname.lastname@example.org with the subject "Refund". To complete the refund, we require a receipt or proof of purchase. Funds will only be returned to the origin of payment (either by canceling a card transaction, or a PayPal transaction.)
You can use the plugin on up to 3 devices. Adding more will require purchasing a separate activation code. There is not a hard limit on how many devices you can activate, but abusing this might lead to terminating your code without the possibility of a refund.
Don’t hesitate and contact us at email@example.com.