Skip to content

CoverCraft - Figma x Hashnode, Seamlessly Set Cover Images from Figma to Hashnode, Say Goodbye to downloads, naming and Effortlessly Craft Cover Images with zero hassle - no need to switch platforms.

License

Notifications You must be signed in to change notification settings

Nabhag8848/CoverCraft

Repository files navigation

CoverCraft - Figma x Hashnode

Overview

Are you creating cover images for your Hashnode Post ? Constantly downloading, naming, renaming files and switching platforms just to ensure your cover image looks perfect. We've been there, and we understand your frustration.

But fret not, because CoverCraft is here to save the day! Say goodbye to all the hassle and frustration. With CoverCraft, certainly no more platform switching.

Imagine being able to craft your cover images in Figma and seamlessly set them on your Hashnode blog posts with just a few clicks. That's the power of CoverCraft - simplifying your workflow and allowing you to focus on what truly matters: crafting your cover.

Demo Video

Features

Firstly, To Unlock the full potential of CoverCraft you need access token. Don't have a token yet? No worries – create access token

1) Set Cover Images

ProductImage1

While plugin is open, Select image or frame containing your cover image. Next, choose the post in which you want to set the selected image as the cover, currently we support published post. Finally, Click Set as Cover to apply the selected image or frame as the cover for the chosen post.

2) Generate your Imagination

ProductImage

We discovered that users often struggled with selecting the perfect background image. To address this, Introducing Lexica AI into plugin to Generate Images from Prompt. Search for Background Images based on your imagination. Open plugin and run in file where you aim to build Cover Image. Navigate to the Search Cover Tab, Enter your imaginative prompt to initiate the Search. Browse through the generated images and select the one that resonates with your vision. Witness the magic by clicking on image and make your cover. Once your newly created cover image is ready, set without ever leaving Figma.

3) Dark and Light Mode Support

ProductImage2

Our plugin seamlessly integrates with Figma's preference theme, offering support for both dark and light modes. This means that regardless of your chosen theme in Figma, our plugin will automatically adjust its appearance to match. This ensures a consistent and comfortable user experience. If preferred working theme is dark, our plugin will automatically detect and switch to dark mode. Conversely, if you opt for a light theme, the plugin will effortlessly transition to light mode.

Development guide

This plugin is built with Create Figma Plugin.

Pre-requisites

Build the plugin

To build the plugin:

$ npm run build

This will generate a manifest.json file and a build/ directory containing the JavaScript bundle(s) for the plugin.

To watch for code changes and rebuild the plugin automatically:

$ npm run watch

Install the plugin

  1. In the Figma desktop app, open a Figma document.
  2. Search for and run Import plugin from manifest… via the Quick Actions search bar.
  3. Select the manifest.json file that was generated by the build script.

Debugging

Use console.log statements to inspect values in your code.

To open the developer console, search for and run Show/Hide Console via the Quick Actions search bar.

See also

Official docs and code samples from Figma:

About

CoverCraft - Figma x Hashnode, Seamlessly Set Cover Images from Figma to Hashnode, Say Goodbye to downloads, naming and Effortlessly Craft Cover Images with zero hassle - no need to switch platforms.

Topics

Resources

License

Stars

Watchers

Forks