As designers, we often encounter situations where we need to present mockups or loading states. Especially for initial service screens or cases involving network delays, Skeleton UI is a crucial element that helps provide users with a sense of stability.
In my early days, I used to create these screens manually, thinking, “Isn’t there a faster way to do this?” That’s when I discovered the Ghost plugin, which became a game-changer.
Ghost allows you to keep the original UI layout intact while converting only the content into a clean skeleton format. For designers working with Figma, this tool can be applied directly into real workflows and saves a tremendous amount of time.
How to Install the Ghost Plugin
1. Step 1: In Figma, go to Templates and tools → From Community on the homepage.
2. Step 2: Type "Ghost" in the search bar, then click the Run button to install it.
Once installed, you can choose the color and style (solid or gradient) of your skeleton UI during execution.
Step 1: Select the frame or element you want to convert. All components within the selected area will be affected.
Step 2: Run the Ghost plugin, and then choose the desired skeleton color and style (solid or linear gradient).
And just like that, your Skeleton UI is created in real-time.
Pro Tip: For Clean Results, Select Only Key Elements
Ghost detects and transforms the entire selected frame, which may result in unwanted background or layout layers being included.
To avoid this, select only the internal elements (not the frame itself) before applying the plugin.
This ensures that unnecessary borders, shadows, and backgrounds are removed, and only essential UI components such as text, buttons, and graphs are preserved in the skeleton layout.
When you apply Ghost to an entire frame, lines disappear, and unwanted overlays may be generated, as seen in the left-side image.
However, if you select only the relevant individual elements, the result is much cleaner—just like the right-side image.
Also, applying the plugin works better on Auto Layout components than standard Components, so it’s recommended to convert components into Auto Layout when needed.
You can clearly see the difference when comparing an image converted by selecting the entire frame versus one converted by selecting individual elements.
The Ghost plugin is more than just a tool for visual transformation—it’s a helper in designing loading states with user experience in mind.
Because it maintains the original layout while transforming key elements, it's ideal for prototyping, developer handoff design, and UX scenario planning.
A simple plugin like this can significantly boost your workflow speed, so I highly recommend giving it a try.
댓글