Figma Sites For Beginners (Design & Build A Custom Website)

Key Concepts

Figma Sites, web design, responsive design, publishing, AI tools, layout grids, auto layout, variables, accessibility, interactions, breakpoints, mobile design, tablet design, desktop design, prototyping, Google Analytics, custom domain.

Figma Sites Crash Course Summary

1. Introduction and Course Goals

The course aims to teach users how to design and publish custom live websites using Figma Sites, even without prior knowledge. The goal is to enable users to design, add interactions, make designs responsive, and publish websites entirely within Figma. The instructor hopes that users will become proficient and excited about using Figma for web design, potentially leading to professional use or further in-depth study with Flux Academy.

2. Setting Up the Figma File

Step-by-step process:

1. Install the specified fonts.
2. Duplicate the Figma site starter file.
3. Rename the duplicated file (e.g., "Figma Sites").
4. Copy the "desktop" frame to a new Figma Sites file.
5. Copy and paste the supplied assets and sketch into the new Figma Sites file.

3. Figma Interface and Navigation

• Zooming: Command/Control + Plus/Minus, Shift + 2 (zoom to selection).
• Layers Panel: Used to select and manipulate elements.
• Insert Menu: Accessed via the "+" icon, provides pre-built page and section templates.
• File Menu: Provides access to all the different layers.

4. Utilizing Pre-built Templates

Figma Sites offers pre-built templates for pages and sections (navigation, heroes, features, embeds).

Example: Inserting a footer template ("footer company long") into the desktop frame.

Process: Drag and drop the template from the Insert menu into the desired frame.

5. Customizing the Footer

• Editing existing text by selecting and typing.
• Deleting elements (e.g., social links) by selecting and pressing backspace.
• Adjusting column layouts by deleting unnecessary columns.
• Changing text content (e.g., "support" to "privacy policy").

6. Setting Up Layout Grids

Process:

1. Select the desktop frame.
2. Add a layout grid in the "layout guide" section.
3. Change the grid type to "columns."
4. Set the number of columns (e.g., 12).
5. Adjust the color, opacity, margin (e.g., 24), and gutter (e.g., 24).

7. Understanding and Adjusting Auto Layout

• Auto Layout: A feature in Figma that automatically arranges elements in rows and columns based on defined parameters.
• Adjusting Padding: Modifying the left, right, top, and bottom padding values in the Auto Layout panel.
• Nudge Amount: Adjusting the increment by which elements move when using arrow keys (recommended: 8 pixels).

Process: Select the element with Auto Layout, go to the Auto Layout panel, and modify the padding and spacing values.

8. Typography and Font Management

• Changing fonts by selecting text elements and choosing a new font in the typography panel.
• Adjusting font size, line height, and letter spacing.
• Installing custom fonts for use in Figma.

Example: Changing the font to "Special Gothic" and setting the font size to 16.

9. Embedding a Google Map

Process:

1. Insert a Google Map from the "embeds" section of the Insert menu.
2. Drag the map to the desired location in the layers panel.
3. Set the width to "fill container" to make it responsive.
4. Enter the desired location in the Google Map URL field (e.g., "Kings Cross station London").

10. Creating Category Sections

• Using pre-built card templates for displaying categories.
• Deleting unnecessary cards and adjusting the layout.
• Setting the width of cards to fill container and removing min/max width constraints.
• Adding images and text to the cards.

Example: Creating two category cards for "professional athletes" and "professional models."

11. Image Manipulation and Cropping

• Dragging images into the card containers.
• Cropping images to achieve a consistent look.
• Locking/unlocking aspect ratios for scaling.

Process: Select the image, adjust the crop using the handles, and set the desired dimensions.

12. Utilizing Figma AI for Copywriting

• Using the "rewrite this" action to improve generic or poorly written text.

Process: Select the text, click the actions menu, and choose "rewrite this."

13. Fine-Tuning Layout and Spacing

• Adjusting vertical gaps between elements to create visual hierarchy.
• Ensuring consistent spacing throughout the design.

14. Creating a Logo

• Duplicating existing text and modifying the font.
• Converting text to vector shapes using the "flatten" option.
• Adding the logo to the header and footer.

Process: Select the text, right-click, and choose "flatten."

15. Implementing Variables for Responsive Design

• Variables: Reusable numbers that can be applied to various design elements.
• Creating Variables: Define a variable (e.g., "margin") with a value (e.g., 24).
• Applying Variables: Apply the variable to padding, spacing, and other numerical values.
• Variable Modes: Creating different variable modes for different screen sizes (e.g., desktop, mobile).

Process: With nothing selected, click on the settings icon for variables, create a new number variable, and apply it to the desired elements.

16. Adding Interactions

• Hover Effects: Creating visual feedback when hovering over elements (e.g., buttons, social icons).
• Reveal Effects: Fading in elements as they come into view during scrolling.
• Parallax Scrolling: Making images move at different speeds during scrolling.

Process: Select the element, go to the interaction panel, add an interaction (e.g., hover effect), and configure the animation.

17. Responsive Design with Breakpoints

• Breakpoints: Defining different layouts for different screen sizes (desktop, tablet, mobile).
• Adding Breakpoints: Click the "add breakpoint" icon and choose the desired screen size.
• Adjusting Layouts: Modify the layout, typography, and spacing for each breakpoint.

Process: Select the breakpoint, adjust the layout grid, and modify the elements to fit the screen size.

18. Accessibility Considerations

• Accessibility Tags: Adding HTML tags (e.g., P, H1, H2) to text elements for screen readers.
• Alt Text: Providing alternative text for images for users who cannot see them.

Process: Select the element, go to the accessibility panel, and add the appropriate tag or alt text.

19. Publishing the Website

• Click the "publish" button.
• Give the site a title.
• Review any issues.
• Click "publish" again.
• Copy the generated URL.

20. Custom Domain and Site Settings

• Connecting a custom domain by updating DNS records.
• Adding a site description for accessibility.
• Adding a Google Analytics ID for tracking.
• Adding a favicon and social sharing image.

21. Conclusion

The course provides a comprehensive overview of using Figma Sites to design and publish custom, responsive, and interactive websites. It covers essential concepts such as layout grids, auto layout, variables, accessibility, and interactions. The course emphasizes the ability to create unique designs and functionalities that go beyond the capabilities of basic template-based website builders.