Skip to content

Instantly share code, notes, and snippets.

@eonist
Created May 31, 2025 21:29
Show Gist options
  • Save eonist/44afd264992ce16c07118c78dacf7a67 to your computer and use it in GitHub Desktop.
Save eonist/44afd264992ce16c07118c78dacf7a67 to your computer and use it in GitHub Desktop.
Crowdfunding Card in Figma

Here's a step-by-step Figma design prompt for creating a crowdfunding card interface:

🎨 Build a Crowdfunding Card in Figma

Step 1: Create the Main Container Create a 400px wide frame with dark background (#1A1A1A), 24px padding, and vertical auto-layout with 20px spacing[1].

Step 2: Add Progress Section Build a rounded container (16px radius) with gray border. Add vertical layout with 16px padding for the progress elements[1].

Step 3: Design Progress Bar Create 24 small rectangles (6x42px) with 6px spacing. Make first 12 lime green, rest dark gray. Add percentage labels (0-100) above[1].

Step 4: Display Main Amount Add large white text "€ 2,565" (48px, bold) next to smaller gray subtitle "pledged of €5,000 goal"[1].

Step 5: Create Stats Grid Build 3 equal cards showing "54 backers", "52% complete", "15 days to go" with large numbers and small labels[1].

Step 6: Add Description & Buttons Include centered description text and two buttons - orange gradient "Back this project" and outlined "Remind me"[1].

Perfect for showcasing auto-layout skills and component design! 🚀

#FigmaDesign #UIDesign #AutoLayout

Citations: [1] https://ppl-ai-file-upload.s3.amazonaws.com/web/direct-files/attachments/60313916/65fdcc3a-8434-46e1-8088-4daf76487a80/paste.txt


Answer from Perplexity: pplx.ai/share

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment