Figma Plugins & Final Design

Installing the Unsplash Plugin

Figma has a rich ecosystem of community plugins. Open the Resources panel (Shift+I), search for "Unsplash", and install it. Now you can insert high-quality, royalty-free stock photos directly into your designs without ever leaving Figma. Use it to fill your hero image and about section photo placeholders.

Installing the Iconify Plugin

Search for "Iconify" in the plugins panel and install it. Iconify gives you access to over 100,000 open-source SVG icons from sets like Material Design, Feather, and Lucide. Use it to add social media icons (GitHub, LinkedIn, Twitter) to your footer and any other UI icons you need.

Checking Accessibility with Contrast

Install a contrast checker plugin like "Stark" or "A11y - Color Contrast Checker". Run it on your text and background color combinations to ensure they meet WCAG AA accessibility standards. This guarantees that your text is readable for all users, including those with visual impairments.

Applying Auto Layout

Select groups of elements and press Shift+A to wrap them in Auto Layout. Auto Layout in Figma works similarly to CSS Flexbox. It automatically arranges child elements in a row or column with consistent spacing. Apply it to your navigation links, button contents, and footer elements to make the design responsive and well-structured.

Creating a Clickable Prototype

Switch to the Prototype tab in Figma. Drag connections between your frames to simulate navigation. For example, link the "Contact" nav link to a Contact page frame. Press the Play button in the top right to preview your prototype in the browser. This lets you test the user experience before writing any code.

Exporting Assets for Development

Select each icon and logo element, then go to the Export section in the right panel. Choose SVG as the format for vector graphics and PNG or WebP for photographs. Click "Export" to download the files. Organize them into folders named "icons" and "images" to prepare them for inclusion in your Astro project.