Work with Figma

This guide explains how to work efficiently with Figma as a developer in our product team. It covers everything from handoff to inspect mode, design tokens, and accessibility.

1. Use Dev Mode

Figma’s Dev Mode gives you everything you need for frontend implementation.

Request a Dev Seat in Figma (include a short reason) if you’re a frequent user

Dev Mode unlocks enhanced developer features such as ready-to-use tokens, spacing, and downloadable assets.

Guide to Dev Mode

Dev Mode in Figma gives you everything you need to navigate design files and transform desi...

2. Always Use the Figma Dev Link

Designers will always share a Figma Dev Link for your project. You can also find the link in the corresponding Jira Ticket. Figma Dev Link opens the file directly in Dev Mode with all inspection features.

Note:
You will still see the entire file, including work-in-progress. Only sections marked “✅ Ready for Dev” are final and should be implemented.

3. Workflow & Handoff

Final designs are marked clearly: Look for sections that are marked “✅ Ready for Dev”

Responsive Design: Expect mobile and desktop breakpoints

Annotations: Contain interaction, accessibility notes and dev instructions

Revisions: Compare updates directly in Figma. If unsure what changed, ask the designer.

4. Use the Inspect Tab

Everything is inspectable directly in Figma. Press I for Inspect Tab, it gives you clean, developer-ready values:

Platform-specific code snippets (CSS, iOS, Android).

Spacing, sizing, and padding.

Typography specs (font, size, line height, etc.).

Design tokens.

Downloadable assets like SVGs, PNGs

Guide to inspecting

Inspecting designs helps developers or other stakeholders understand the structure and properties of a design so they can more easily translate it to code.
How you inspect a design file depends on ...

5. Use Design System Components (SDX)

Use components, not custom styles: Most UI elements map directly to coded components either from the SDX Core Library or one of the Shared Libraries.

Tokens: If there is no component, use the provided tokens for color, spacing, etc. These should map to the codebase.

Variants and states: Check for hover, focus, error, and disabled states – often shown in a component’s variant panel.

6. Make every page accessible

At Swisscom every digital product has to reach AA-Compliance (WCAG 2.1).

Therefore designers define an Accessibility Section with:

Color contrast

Focus order

Keyboard navigation notes

ARIA roles or semantic expectations

Text alternatives for icons, images, illustrations

Accessibility specs are not optional. They are acceptance criteria.

7. Communication & Feedback

Ask early if something is unclear. Don’t implement assumptions.

Comment in Figma: Press C and click to place your comment.

Resolve comments once addressed.

Thanks for following this manual. It makes dev-design collaboration smoother and faster.

SDX | Swisscom Digital Experience

SDX is a set of foundation, components, and guidelines for designing and building UI at Swisscom