Components
React Components
Last updated
Was this helpful?
React Components
Last updated
Was this helpful?
Figma operates on a component-first philosophy and employs class inheritance behavior much like what you would see in React and other popular JavaScript component frameworks. When you create a component in Figma, it can serve as a blueprint for new instances, which in turn inherit all the properties of the parent component. These instances are not static copies; they can override any of the inherited properties. Additionally, they can introduce new properties that were not present in the parent component, thereby creating a new branch of components. This system of inheritance and customization enables designers to efficiently manage and scale their design systems, ensuring consistency while also allowing for flexibility and adaptation to specific design needs. Each component becomes a reusable and modifiable building block in your design toolkit, facilitating better organization and creativity.
You can also add special behaviors to your application by setting the component type and attributes using the Uncodie Plugin. Uncodie seamlessly manages this protocol and design architecture, streamlining the development process without requiring any additional configuration or setup within the Integrated Development Environment (IDE). This allows developers to focus on adding unique features and improving functionality, while Uncodie handles the necessary backend protocols and structural design elements efficiently.
To create a Component in Uncodie just declare a component in Figma as normal and make new instances in your design as needed.
Compile your app
Open the Uncodie App and select your compiled project
Navigate to the IDE section of the app
Find all your components exported to React in the symbol inspector
You can use any external React Component by creating a "Manifest" and importing your component libraries and dependencies see:
External document components, Figma allows designers to use components referenced from external documents, Uncodie does not have access to the components data prototypes, using external documents, will lose information about all of the animations and prototypes of the component
