ShadcnStore

Appearance

Drag & Drop Builder ​

The shadcnstore Drag & Drop Builder is a dedicated Figma page featuring pre-built, ready-to-use design templates. Simply browse, select, and drag pre-designed layouts and blocks into your Figma file for rapid prototyping without starting from scratch.

What is the Drag & Drop Builder? ​

The Drag & Drop Builder is a Figma page that provides:

  • Pre-built design templates - Ready-to-use layouts for common use cases
  • Drag & drop simplicity - Select templates and drag them into your working file
  • Customizable blocks - Modify colors, text, spacing, and components to match your needs
  • Zero code required - Build entirely in Figma using visual design only

Note: The builder lives in your shadcnstore Figma file. You access it, select templates, and drag them into your designs, all within Figma.

It's perfect for:

  • Rapid prototyping - Use pre-built templates instead of building from scratch
  • Exploring possibilities - Try different layouts quickly with ready-made blocks
  • Consistency - Use vetted design patterns across your projects
  • Quick iterations - Start with templates and customize as needed
  • Team templates - Share pre-designed blocks with your team

Getting Started ​

Accessing the Builder Page ​

  1. In Figma: Open your shadcnstore Figma file
  2. In the Pages panel (left sidebar), look for the "Drag & Drop Builder" page
  3. Click on it to navigate to the builder page
  4. You'll see a collection of pre-designed template layout

Using a Template ​

Here's a quick workflow to get you started:

Step 1: Browse Templates

  • Navigate to the Drag & Drop Builder page
  • View all available pre-designed blocks and templates
  • Choose a template that matches your use case (hero, feature grid, pricing, etc.)

Step 2: Select & Drag

  • Right-click the template you want
  • Choose "Duplicate" to copy the entire template
  • Or drag the template directly into your working file/artboard
  • The template appears in your canvas ready to use

Step 3: Customize

  • Edit text directly on the template components
  • Change colors by selecting elements and using the color picker
  • Adjust sizing and spacing as needed for your design
  • Replace placeholder images with your own

Step 4: Combine Templates

  • Stack multiple templates to build full page layouts
  • Mix and match different sections (hero + features + CTA + footer)
  • Ensure consistent spacing and alignment between sections

Working with Templates ​

Using Pre-Built Templates ​

  1. Navigate to the Drag & Drop Builder page in your Figma file
  2. Browse the available templates for your use case
  3. Duplicate the template or drag it into your working file
  4. The template appears as a group or frame ready to customize

Customizing a Template ​

  • change section by clicking on hero section name on right sidebar
  • Change theme by selecting theme variables in the right sidebar
  • Replace images as needed by selecting image placeholders and using the image fill option
  • Change Mode by toggling the mode variable to switch between light and dark modes
  • Adjust sizing and spacing to fit your needs
  • Remove sections you don't need
  • Rearrange elements as desired

Template Library ​

Templates are organized by type:

  • Hero Sections - Page headers and banners
  • Feature Blocks - Product features and benefits
  • Pricing - Pricing tables and plans
  • Social Proof - Testimonials, logos, stats
  • CTAs - Call-to-action sections
  • Navigation - Headers and footers
  • Forms - Signup forms and input sections

Combining Templates ​

  • Stack multiple templates to build complete pages
  • Mix hero + features + CTA + footer sections
  • Maintain consistent spacing between template sections
  • Duplicate and modify templates for variations
  • Group sections together for easier management

Advanced Workflows ​

Building Complete Pages ​

  1. Select a Hero template for your page header
  2. Add a Feature Block to showcase key offerings
  3. Include a Pricing Block if applicable
  4. Add a Social Proof Block with testimonials
  5. Include a CTA template to drive conversions
  6. Add a Footer template to complete the page
  7. Ensure consistent spacing between sections
  8. Export as a single frame or multiple sections

Creating Design System Templates ​

  1. Customize key templates to match your brand
  2. Duplicate these templates into a new Figma page
  3. Create variations (light/dark, mobile/desktop)
  4. Document how to use each template variant
  5. Share with your team as the approved library
  6. Update templates as your design system evolves

Troubleshooting ​

"I can't find the Drag & Drop Builder page"
  • In Figma, check the Pages panel on the left sidebar
  • Look for a page named "Drag & Drop Builder"
  • Make sure you're in the correct Figma file
  • Verify you have access to that file
  • Refresh Figma if you recently added new pages
"Elements aren't aligning properly after customizing"
  • Make sure Smart Guides are enabled in Figma settings
  • Check if elements are locked - unlock them first
  • Use the Alignment tools in the right sidebar
  • Verify the parent frame has Auto Layout enabled
  • Re-group elements if needed to maintain hierarchy
"The dragged template created duplicates instead of moving"
  • Duplicate creates a copy, which is intended behavior
  • To move a template, cut (Cmd+X) and paste (Cmd+V) instead
  • Or simply drag the template to your working file first
  • Duplicates are useful for creating variations on a template

Next Steps ​

Ready to build?

  • Start with a simple layout to get comfortable
  • Change the builder section and see what's available
  • Update a hero section as your first project
  • Export your design and see the code
  • Share your creation with your team
  • Gradually tackle more complex layouts

Need guidance?

Copyright © 2025-2026 ShadcnStore