Appear 2.0: speed up interface prep for any screen size.

About this plugin

Preview how fonts and components scale, switch between iOS and Android in one click, and quickly resize screens — all in one powerful Figma plugin.

How It Works:

Set Up Component Naming:

1. Use identifiers like /ios and /android in your component names.
2. Example: Button/ios, Button/android.

Save Parent Components:

1. Open the file with your main components and click “Save main components”.
2. This step is required for plugins that reference external libraries.

Select & Convert:

1. Select any frame or components and click “Convert to iOS” or “Convert to Android” to automatically swap instances.

Customize Settings (Optional):

1. You can change the default identifiers (/ios, /android) to match your own naming convention.
2. Adjust default screen widths (375 for iOS, 360 for Android).
3. Enable auto-resizing for screens after conversion.

Naming Rules:

✔️ Good examples:

1. component_name[ios]
2. componentname/ios
3. component(name)-android

❌ Bad examples:

1. component name ios
2. ioscomponentnameios
3. componentname/ios/ios

Identifiers must be unique within the component name and not repeated multiple times.

Important Notes:

Screen resizing works only for frames with resizable content inside.

When components share variant properties, the properties must:

1. Have identical names
2. Contain the same value sets
3. Preferably appear in the same order

Coming Soon:

1. FAQ Section