style-figma-clean

Generates Figma Clean style tokens and rowFormatter JSON for SharePoint list view formatting.

128|50|Updated May 4, 2026
One-click install
npx skills add https://github.com/pnp/sharepoint-skills --skill style-figma-clean-pnp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: style-figma-clean
Source: https://github.com/pnp/sharepoint-skills/tree/main/Skills/style-figma-clean/style-figma-clean
Command: npx skills add https://github.com/pnp/sharepoint-skills --skill style-figma-clean-pnp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling SharePoint list views with JSON view formatting is verbose and error-prone, and achieving a polished, design-tool-quality card layout requires precise color tokens, status mappings, and responsive rules that are tedious to write by hand. ## Core Features & Use Cases - Style Token System: Provides badge, card, and status color tokens (Draft, In Review, Revising, Approved, Published) with a 4px status-colored top stripe per card. - Ready-to-Adapt rowFormatter JSON: Ships a complete SharePoint view-formatting JSON template with status stripes, progress bars, overdue highlighting, and inline date metadata. - Responsive & Adaptation Guidance: Includes mobile stacking rules, min-width truncation hygiene, and warnings about keeping status color and progress color channels independent. - Use Case: A user asks Copilot in SharePoint to restyle a document library as "clean, Figma-like cards"; the skill supplies the exact tokens and rowFormatter JSON, adapted to the list's actual column names and Choice values. ## Quick Start Ask Copilot in SharePoint to apply the Figma Clean style to your list, replacing the placeholder column names with your actual Status, Progress, and Deadline fields.

Frequently Asked Questions about style-figma-clean

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style a SharePoint list view with custom JSON formatting?▼

Apply a rowFormatter JSON template through SharePoint view formatting to replace the default column grid with custom cards. This skill provides a complete Figma Clean template with a status-colored top stripe, badge, progress bar, and deadline text that you adapt to your column names.

How to add color-coded status badges in SharePoint list formatting?▼

Use nested if() expressions in the rowFormatter to map each Choice value to a background, text, and border color. The Figma Clean style maps Draft, In Review, Revising, Approved, and Published to distinct palette swatches with self-colored borders.

Can SharePoint view formatting show a progress bar?▼

Yes, a progress bar is built from two nested divs where the inner div width is set via toString([$Progress]) + '%'. The fill color changes by threshold: red below 30%, blue mid-range, and green at high completion.

Why does my SharePoint rowFormatter show wrong colors after adapting a template?▼

The most common mistake is collapsing the two independent color channels: the top stripe is driven by the Status field while the progress fill is driven by the Progress percentage. Keep these if() expressions separate and update all status value strings to match your actual Choice values.

Does SharePoint list formatting work on mobile devices?▼

Yes, but layouts need responsive rules. At 480px or below, stack the status pill, progress, and deadline under the title, keep min-width: 0 on text children for ellipsis truncation, and maintain row height of at least 56px for touch targets.