English

简体中文

English

简体中文

Appearance

Facebetter Figma Sticker Plugin Usage Guide ​

The Facebetter Figma Plugin is a professional tool designed for creators to simplify the workflow of creating Augmented Reality (AR) face stickers. With this plugin, you can design stickers, bind face landmarks, configure properties, and preview/export directly within Figma.

1. Login and Language Settings ​

  1. Launch the Plugin: Run the Facebetter plugin within Figma.
  2. Login: Supports Google, GitHub, or Email login.
  3. Language Switch: Click the icon dropdown menu at the top of the interface to switch between English and 简体中文.

2. Workflow Initialization ​

Before designing, you need to initialize the workspace:

  1. Under the Workflow Initialization section, click the Initialize Workspace button.
  2. The plugin will automatically create a 1024x1024 frame named Facebetter_Workspace.
  3. The frame includes 106 standard face reference landmarks.
  4. Option: Check "Show landmark numbers" to easily identify the indices of different facial parts.

3. Layer and Property Binding ​

This is the core step where you define how the sticker follows face movements.

  1. Select a Layer: Select your sticker design layer in the Figma canvas (it must be inside the workspace).
  2. Configure Properties:
    • Blend Mode: Set the fusion effect between the sticker and the face (e.g., Normal, Overlay, Screen, etc.).
    • Position Type:
      • Landmarks: Follow specific face landmarks (most common).
      • Face Rect: Position based on the entire face bounding box.
      • Screen Space: Fixed to the screen coordinates.
    • Trigger Type: Set the trigger condition for the sticker to appear (Always, Face Detect, Mouth Open, etc.).
    • Trigger Delay: The delay time after the trigger occurs.
    • Alpha Factor: Adjust the overall transparency of the sticker.
    • FPS: Set the animation frame rate (if the layer contains multiple frames).

4. Preview and Export ​

  1. 3D Preview:
    • Click 3D Preview.
    • In the popup window, you can see the real-time effect of the sticker on a 3D face model.
    • Supports Left-click to rotate, Right-click to pan, and Scroll to zoom.
  2. Export Package:
    • After confirming the preview, click Export.
    • The package can be used directly in the Facebetter engine and related applications.

5. Get Help ​

Click the Docs link in the plugin's navigation header to jump to the official documentation center for detailed tutorials at any time.