Hi, welcome to Hack@Brown’s Figma starter kit. This guide walks you through the basics of how to use Figma to design, prototype, and collaborate on UI/UX projects. Figma is a cloud-based design platform that allows teams to build and iterate together in real time. It’s widely used for creating interfaces, prototypes, and reusable design systems, all without heavy installations and with an easy handoff to development.

If you haven’t used Figma before:

1. Go to https://www.figma.com and create an account.
2. (Optional) Download the desktop app for smoother performance.

Once you're set up, you should import the provided template so you can follow along while reading about the style guide, wireframes, mockups, and prototypes.

To import the template:

1. Download the figma-starter-template.json file from this repository.
2. In Figma, search for “Figma Importer” and install the plugin.
3. Open a workspace of your choice.
4. Run the plugin → click “Import JSON” → select the downloaded file.
   (You can also paste the JSON contents directly into the importer.)

This will generate a ready-to-use file with a Style Guide page, Wireframe templates, Mockup frames, and a Prototype section.

Now you’re ready for the basics.

This is where your project’s visual identity lives.

• Colors: your primary palette, secondary colors, accents, and backgrounds
• Typography: heading styles, body styles, weights, and text rules
• Components: buttons, inputs, cards, and other reusable pieces

This page acts as your design system — update it once, and reuse styles everywhere. Any style change here will automatically apply across your project.

Wireframes are your rough drafts.

They help you figure out structure without worrying about colors or polish. Think of them as sketches made of simple shapes.

Expect to:

• Use rectangles, lines, and labels (“Image”, “Button”, “Nav”).
• Sketch out information hierarchy and screen layout.
• Build both Desktop (1440×1024) and Mobile (390×844) versions early.
• Move fast — this stage is all about exploring ideas quickly.

Wireframes give you room to experiment without pressure to be “pixel perfect.”

Mockups bring your wireframes to life using real colors, components, and visual styling.

Once your layout looks solid, transition into mockups by:

• Replacing placeholders with actual buttons, cards, and type styles
• Adding icons, illustrations, spacing systems, and consistent padding
• Applying your color palette and branding
• Creating desktop and mobile versions for responsiveness

Mockups are polished and presentation-ready — ideal for demos, pitches, and handoff.

Prototypes turn your static mockups into an interactive experience.

Using Prototype Mode:

• Link buttons to other screens
• Add transitions (“Instant”, “Smart Animate”, etc.)
• Create clickable flows for user testing or demos

Prototypes help people understand how your design is meant to work, not just how it looks.

Here are some helpful beginner resources from Figma:

• Figma for Beginners
• Auto Layout Basics
• Prototyping Guide
• UI Kits

Figma is made for real-time teamwork. Here are simple ways to collaborate effectively:

• Invite teammates using the Share button
• Press C to leave comments directly on designs
• Keep a shared Notes frame to track ideas and decisions
• Have one teammate manage the design system to keep things consistent

These habits keep your project clean and prevent conflicts during fast-paced hackathons.

Dev Mode helps developers extract exactly what they need from your designs without editing anything.

With Dev Mode, developers can:

• Inspect spacing, colors, typography, and layout rules
• Export assets like SVG, PNG, or PDF
• Copy CSS, iOS, or Android-friendly code snippets
• Understand component structure and naming

This ensures smooth communication between designers and developers.

To recap the template setup steps:

1. Download the figma-starter-template.json file from this repo.
2. Go to this link and search for and install the Figma Importer plugin.
3. Open your workspace and launch the plugin.
4. Click “Import JSON” and select the file (or paste the JSON in directly).
5. Once imported, your file will include:
   • A Style Guide
   • Wireframe templates
   • Mockup frames
   • A Prototype flow

You’re now all set to design!