Project configuration — Frontfriend

Place frontfriend.config.js at the application root. The file connects your application to a Design System and tells the downloader where component source belongs.

A React application

export default {
  'ff-id': 'YOUR_DESIGN_SYSTEM_ID',
  framework: 'react',
  primitive: 'radix',
  aliases: {
    ui: '@/components/ui',
  },
};

A Vue application

export default {
  'ff-id': 'YOUR_DESIGN_SYSTEM_ID',
  framework: 'vue',
  primitive: 'reka',
  aliases: {
    ui: '@/components/ui',
  },
};

Use module.exports in CommonJS projects. Keep the module format consistent with your application’s package configuration.

Identity is not a credential

The ff-id identifies the Design System. Authentication and authorization still determine access to private data and operations. Never put personal tokens or Figma credentials into the source-controlled configuration.

Path aliases

The ui alias controls the component destination. It should agree with your TypeScript and bundler aliases. React installs generally use a single kebab-case file; Vue components use a folder with a barrel export.

Registry namespace

Initialization can wire the @frontfriend registry entry in components.json. Check it when changing a target. A stale namespace can otherwise select a different primitive than your project metadata.

Monorepos

Configure each consuming application deliberately. Resolve CLI commands from that application’s root and keep each Application’s target explicit. Shared tokens can come from one Design System while the installed source remains target-specific.

After editing configuration, run npx frontfriend status, regenerate tokens, and verify the application build.