Frequently Asked Questions

What is Speedboat?

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.

Can Speedboat automatically convert designs into code?

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.

Can I use the copy class names feature on any design?

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.

What design platforms do you support?

The plugin currently supports Figma. We plan to release a Sketch version in the future.

How do I install the plugin?

  1. On the Figma startup screen, select "Community"
  2. Search for "Speedboat"
  3. Click "Plugins"
  4. Click the plugin name in the results list
  5. Click "Install"

Or follow the guide at https://help.figma.com/hc/en-us/articles/360040450413-Install-and-run-Plugins

How do I use the plugin?

  1. Open a Figma design
  2. Click the hamburger menu in the toolbar
  3. Hover over Plugins → Speedboat and select the command you want to run

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.

Which layer types are supported?

Currently, only the essential layer types are suported. Group and Artboard support may come in a future release.

  • Shape layers
  • Image layers
  • Text layers

How is the configuration stored?

The configuration is embedded into the design file so you can easily share the file or open it on any device you need.

Purchase & License

Can I refund my purchase?

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 hello@speedboat.sh 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.)

How many devices does my code support?

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.

I have other question

Don’t hesitate and contact us at hello@speedboat.sh.