Component Library & Desktop Layout Assembly

1. A Systematic Approach: Component-Based Design

Before we start building, let's touch on the "why." You've mentioned you prefer systematic, rule-based frameworks. The approach we're taking is often called Component-Based Design or Atomic Design.

The core idea is simple: you build small, independent "atoms" (like buttons and icons), combine them into more complex "molecules" (like a search bar or a card), and then arrange those into "organisms" (like a page header or a full section).

By creating components for elements like buttons and cards, you establish a single source of truth. If you decide to change your brand's button style later, you only need to edit one main component, and every instance of that button across your entire design will update automatically. This is incredibly efficient.

2. Building the "Atom": A Versatile Button Component

Nearly every website needs buttons. Let's create a robust button component that can handle different states and styles, building on the Auto Layout principles you've been using.

We'll follow a systematic process to build a button with variants for different types (primary/secondary) and states (default/hover).

Activity: Build Your Button Component (~15 minutes)

Open your Figma file and follow these steps. Don't worry about creating all 240 variations from the video; we'll focus on the most important ones.

1. Create the Base:

   • Create a text layer and type "Button". Apply your body text style.
   • Add an icon (e.g., a simple arrow from a plugin like Iconify) next to the text.
   • Select both and press Shift + A to apply Auto Layout. Adjust the spacing and padding to your liking (e.g., 16px horizontal padding, 8px vertical padding, 8px gap).

2. Build the Variants:

   • Primary/Default: Style your first button. Give it a fill color from your brand palette and use a light text color for contrast.
   • Primary/Hover: Duplicate the first button. Change the fill to a slightly lighter or darker shade to indicate a hover state.
   • Secondary/Default: Duplicate the primary button. Remove the fill, add a stroke using your primary brand color, and change the text color to match the stroke.
   • Secondary/Hover: Duplicate the secondary button. Add a light fill color (e.g., a 10% opacity of your primary color) to indicate a hover state.

3. Create the Component Set:

   • Turn each of your four button styles into a component (Option + Command + K).
   • Select all four components. In the right sidebar, click Combine as variants.
   • Figma will create a component set. Rename the properties to Type (with values Primary, Secondary) and State (with values Default, Hover).

4. Add Component Properties:

   • Select the text layer inside all variants. In the Content section of the right sidebar, click the "Create text property" icon and name it Label.
   • Select the icon layer inside all variants. Next to the instance name in the sidebar, click the "Create instance swap property" icon and name it Icon.

You now have a flexible button component! You can drag an instance onto your canvas and easily change its type, state, label, and icon directly from the design panel.

3. Building the "Molecule": A Flexible Card Component

Cards are containers used to group related information, like a blog post preview, a product feature, or a user profile. You already made a Quote Card; now we'll make a more generic Content Card.

Activity: Build Your Content Card Component (~10 minutes)

1. Assemble the Structure:

   • Create a frame for an image placeholder (a grey rectangle is fine for now).
   • Add a title (H3 style) and a short description (body text style).
   • Drag an instance of the Button component you just created.
   • Select the title, description, and button. Apply vertical Auto Layout (Shift + A).
   • Select this text-and-button group and the image placeholder. Apply vertical Auto Layout again to create the full card structure.

2. Add Styling and Responsiveness:

   • Apply a Fill (white or a light grey), Padding, and Corner Radius to the main card frame.
   • Set the image placeholder's horizontal resizing to Fill container.
   • Set the title and description layers' horizontal resizing to Fill container.

3. Turn into a Component with Properties:

   • Turn the entire card into a main component and name it Content Card.
   • Create text properties for the Title and Description.
   • Select the Button instance inside the card. In the Layer section of the right sidebar, click the "Create boolean property" icon and name it Show Button, with a default value of True.
   • Now, expose the button's own properties. Select the main Content Card component. In the Properties section, click + and select Nested instances. Check your button component to expose its properties.

Now you have a powerful Content Card component where you can change the text, toggle the button on or off, and even change the button's style, all from the top level.

4. Assembling the "Organism": Your Full-Page Layout

You've created the building blocks. Now it's time to assemble them into a cohesive desktop landing page. The key to a professional, organized layout is using a grid.

Activity: Assemble Your Desktop Page (~15 minutes)

1. Create Your Desktop Frame and Grid:

   • Create a new frame. A standard desktop width is 1440px. Give it a height of around 3000px to start; you can adjust it later.
   • Select the frame and, in the right sidebar, click the + next to Layout grid.
   • Change the grid from Grid to Columns. Set the Count to 12, Margin to around 80, and Gutter to 24. These are common starting values.

2. Add a Header and Footer:

   • At the top of your frame, create a simple header. Drag in your wordmark logo from Module 3 and add a few text links ("Features", "Pricing", "Blog"). Place an instance of your new Button component for a "Sign Up" or "Get Started" call-to-action.
   • At the very bottom, create a simple footer. Include your wordmark again and some placeholder copyright text.

3. Stack and Align Your Sections:

   • Copy and paste the sections you've already designed (Hero, Features, Social Proof) into your new 1440px frame.
   • Arrange them vertically in a logical order: Header -> Hero -> Social Proof -> Features -> Footer.
   • Adjust the content within each section to align with your 12-column grid. For example, a centered headline should span the inner columns, and a two-column feature layout might have each column spanning 5-6 grid columns.

4. Integrate Your New Components:

   • Go through your sections and replace any static, non-component buttons with instances of your new Button component.
   • Optional: If you have time, create a new section called "From the Blog" or "Related Products." Use your 12-column grid to lay out three instances of your new Content Card component side-by-side. This is excellent practice.

Conclusion

Fantastic work today! You've taken a massive step from designing individual sections to building a systematic and scalable design for an entire page. By creating a library of reusable components, you're not just designing faster; you're designing smarter and more consistently.

Key Takeaways:

• Component-Based Design (or Atomic Design) provides a systematic framework for building complex UIs from simple, reusable parts.
• Variants and Component Properties in Figma are the tools that make your components powerful and flexible, allowing for different states, styles, and content.
• A 12-column layout grid is the essential skeleton for a desktop page, ensuring everything is aligned and visually organized.
• Assembling a full-page layout involves stacking your sections and aligning them to the grid, creating a cohesive user experience from top to bottom.

Preview of the Next Lesson:
We've successfully designed a beautiful desktop landing page. However, over half of all web traffic comes from mobile devices. In the next lesson, we will adapt the desktop design to a mobile-first layout using breakpoints and responsive techniques. This is the final and most critical design step before we prepare to bring your site to life with Framer.