Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/crcn/figmark
Import Figma designs in React code
https://github.com/crcn/figmark
designtocode designtokens figma frontend
Last synced: 4 months ago
JSON representation
Import Figma designs in React code
- Host: GitHub
- URL: https://github.com/crcn/figmark
- Owner: crcn
- Created: 2020-05-12T22:31:13.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T11:59:13.000Z (about 2 years ago)
- Last Synced: 2024-04-14T05:33:59.957Z (10 months ago)
- Topics: designtocode, designtokens, figma, frontend
- Language: TypeScript
- Homepage:
- Size: 6.2 MB
- Stars: 11
- Watchers: 3
- Forks: 2
- Open Issues: 46
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Figmark allows you to import Figma designs in React code.
### Resources
- [Getting Started](#getting-started)
- [Examples](./examples)
## Getting started
To get started, you'll need to install the CLI tool - go ahead and run:
```
npm install figmark -g
```
`cd` to your project directory, then run:
```
figmark init
```
This will prompt you for a few things, starting with your **Figma personal access key**. Here's how you generate one:
Next you'll need to set your **team ID**. Herre's how you find that (it's in the URL):
_Finally_ you can download your Figma designs:
```
figmark pull
```
> ☝🏻Run this command whenever you want to update your designs locally.
> You'll also notice `*.pc` files which React files are compiled from. To learn more about how to use PC files, you can check out the [Paperclip](https://github.com/crcn/paperclip) repository.
That's it! At this point you should have generated React files that you can import.
### React example
Here's a quick demo of how designs are used in code. Starting off with a few button variations:
After pulling these designs using `figmark pull`, we can import them like so:
```tsx
/*
These are the designs imported from Figma. Each layer is exported as
an individual component that corresponds with the layer name. This
"slicing up" allows us to add responsive CSS styles to each individual layer.
*/
import {
// This is the main button
ButtonPrimary,
// This is a child of ButtonPrimary -- we know that
// because ButtonPrimary_ is the prefix.
ButtonPrimary_Label3,
// Another child of ButtonPrimary
ButtonPrimary_Background3,
// All classnames that correspond with each layer
classNames,
} from "./design-generated/test/figmark-2";
import * as React from "react";
import * as cx from "classnames";
import styled from "styled-components";
// We can easily add responsiveness to our designs like so
const ResponsiveButton = styled(ButtonPrimary)`
cursor: pointer;
display: block;
display: flex;
.${classNames.buttonPrimary_background3} {
padding: 8px 10px;
}
.${classNames.buttonPrimary_label3} {
font-family: Helvetica;
}
`;
type EnhancedButtonProps = {
disabled?: boolean;
primary?: boolean;
secondary?: boolean;
children?: React.ReactNode;
};
const EnhancedButton = ({
disabled,
secondary,
children,
}: EnhancedButtonProps) => (
{children}
);
export const ButtonsPreview = () => {
return (
<>
Primary
Secondary
Disabled
Disabled Secondary
>
);
};
```
Here's what the code above looks like when loaded in a browser:
> For documentation on how to use these designs in Webpack, check out the [Paperclip](https://github.com/crcn/paperclip) repository.
That's all there is to it! 🙌
#### Recommendations & Notes
- You should GIT-ignore generated design files -- treat them like dependencies.
- Unused layers are dropped from your application bundle if you're using tree-shaking.
- `*.pc` file documentation can be found in the [Paperclip repository](https://github.com/crcn/paperclip)
- You can preview `*.pc` files directly using the [VS Code extension](https://marketplace.visualstudio.com/items?itemName=crcn.paperclip-vscode-extension)