Once your Figma project is connected to Cropink, you're ready to start working on your design. You can either:
Create a design directly in Figma, or
Open an existing design you’ve already made
Step 1: Add Relevant Layers in the Plugin
In the Cropink Design Tools plugin inside Figma, it’s time to add the layers you want to use in Cropink.
These layers will later become editable in Cropink – meaning you’ll be able to map them to product data (like price, title, or image), set conditions (like showing a badge only on discounted items), or change their style dynamically (color, font etc.).
You’ll see an option to click:
“Add first layer” (if you're starting fresh)
or “Add relevant layers” (if you’ve already designed something)
💡 Tip: You don’t need to add every single layer — only the ones you plan to customize later in Cropink. But as a best practice, it’s often helpful to import all layers so you have full visibility and flexibility later on.
Step 2: Finalize and Publish Your Design
Once you've selected all the layers you want to use and you're happy with your layout:
Make any final design adjustments in Figma
In the Cropink plugin, click “Publish in Cropink”
That’s it! Your new design will now appear in the “Designs” section of your Cropink project.
Step 3: Customize Your Design in Cropink
Now that your design is inside Cropink, you can open it in the Design Manager.
There, you’ll be able to:
Map elements to your product feed (like showing products" price)
Add conditional rules (e.g. show “Sale” only if a product has a sale price)
Adjust styling for text, images, badges, and more
Check THIS ARTICLE for a full guide on using the Design Manager.