Figma

Click the heading, subtitle, and button. Hold Shift and click to multi-select. Press Shift+A to convert to an Auto Layout frame.

With the elements selected, confirm the Auto Layout frame appears in the canvas and is shown with pink spacing handles.

In the right-hand Auto Layout panel, set Spacing Between Items (gap) to 32 px.

Use the alignment controls to align left, center, or right within the Auto Layout frame.

In the Auto Layout properties, switch direction from horizontal to vertical to stack items.

Select the image and the text container, then press Shift+A to create a new horizontal Auto Layout container.

Set the gap between the sub-layout and the text content to the desired value (e.g., 100 px).

Select the entire section frame and press Ctrl+D (Cmd+D on Mac) to duplicate. Repeat to create additional columns.

Select multiple section frames and press Shift+A to place them in a new parent frame. Center the new frame in the canvas.

Right-click the grouped frame and choose Ungroup to edit elements individually.

Select a child element (e.g., a button). In the resizing options, set Horizontal resizing to Fill container (and Vertical as needed). Test by resizing the parent frame.

Adjust internal gaps (e.g., 100 px between heading and content) to improve visual balance.

Drag the prepared section into the main wireframe and align center. Repeat as needed for consistency.

Resize the main frame to verify responsiveness. Lock in final spacing and colors for the final design.

Open the Figma file. In the top toolbar, click Dev Mode to switch to the developer-friendly inspect view.

Select the section to hand off. Click the status badge (Ready for Dev) to set its state for developers.

Use the Pins/Annotations tool to attach notes to frames or elements describing behavior, colors, or spacing.

Choose the Measure tool from the toolbar. Hover over the headline, then drag to the top of the frame to capture vertical spacing.

Select the element and review the right-hand panel for size (width/height) and color hex values; annotate if needed.

Assign color variables in Dev Mode by linking fills to tokens. If color changes, the annotation will update automatically.

Open the Comment tool, add notes and tag the recipient with @username to ensure notifications.

Click Share in the top-right, choose Copy Link, and send to the developer with appropriate permissions.

Switch to Focus View in the right panel to isolate the design piece and hide other canvases.

Open the Versions panel; compare the current version with the previous one to spot changes.

Update the design to reflect feedback: copy changes, color tokens, and spacing updates.

When the implementation is done, return to the status badge and select Completed to lock the design.

Open your browser, go to figma.com, sign in, click New File in the dashboard, and name it "Podcast Covers System".

Select the Frame Tool (F). Drag to create a square canvas sized 3000 by 3000 px. In the right panel, set W and H to 3000. Rename the frame to "Cover Art Master".

In the Assets panel, click the Styles area, add New Color Style, and create at least Brand Primary and Brand Secondary with your palette values.

Place a text layer for the title, apply your chosen font and size, then right-click and choose Create Style. Do the same for the subtitle.

Draw a rounded rectangle for the cover area, add an image placeholder, and place title and subtitle text inside. Select all and press Ctrl/Cmd + Alt + K to Create Component. Name it "Cover Card".

With the Cover Art Master frame selected, add a Layout Grid (e.g., 12-column guide) and set a safe margin (e.g., 40 px) from edges. Enable Snap to Grid.

Place your logo or initials inside the Cover Card, convert to a Component (Ctrl/Cmd + Alt + K), and align to position that fits your design system.

Apply the Brand Color Styles to the card background and accent elements. Apply Text Styles to the title and subtitle for consistent typography.

Select the Cover Card Component, create Variants (right-click > Add Variant). Define color overrides for Brand A and Brand B while keeping typography constant.

Use the contrast checker to ensure title contrast meets accessibility standards. Adjust colors or text size as needed.

Select the final cover frame, open the Export section, click +, set PNG format, 1x scale (3000 px), name the preset "Podcast Cover 3000", and export.

Publish components to your Team Library: go to Assets > Publish, name the library "Podcast Covers", and share with the team. Create a starter template for new episodes.