Figmagic Example

Overview

This repository is a demo of Figmagic, showcasing how a project running Webpack, React, and Styled Components can utilize tokens. It provides pre-compiled tokens and demonstrates the process of converting Figma components into code.

Features

• Token Usage: Demonstrates how to use tokens in a project running Webpack, React, and Styled Components.
• React Composition: Shows the React-composed version of the Figma components after minimal coding and correct element closing.
• Selective Styling: Styles only a few elements, such as setting disabled state on the button and checkbox.

Installation

To install the theme, follow these steps:

1. Clone the repository.
2. Run yarn or npm install in the repository’s root directory to install all dependencies.
3. Start the project using yarn start or npm start.
4. To sync graphics, run yarn figmagic:graphics or npm run figmagic:graphics.
5. To sync elements, run yarn figmagic:elements or npm run figmagic:elements.
6. To sync both graphics and elements, run yarn figmagic:sync or npm run figmagic:sync.
7. Start Storybook with yarn storybook or npm run storybook.

Summary

The Figmagic Example repository demonstrates the usage of Figmagic in a project using Webpack, React, and Styled Components. It provides pre-compiled tokens and showcases the process of converting Figma components into code. The repository also includes a demo of selectively styling elements and a guide for installation.