The project structure

Many best practices have been included by default to ensure you get a good starting point for most cases.

Any question about the design decisions? Anything not matching your project practices? Please let us know! we may add an option for the flexibility you need.

Frameworks

Two frameworks are available: React and Augular (alpha).

Angular does not yet has all the features available in React (e.g. customizable components).

Base template

By default, the project is uploaded on Codesandbox for a super fast preview without needing to install anything.

All projects use TypeScript to type your variables.

React

The project uses create-react-app, which is better supported on Codesandbox.

If you decide to download as a zip instead, the project uses ViteJS for crazy fast development builds.

Angular

The project uses the Angular CLI template.

Files structure

Entry points are specific to the base template:

• Codesandbox:

  • index.html is in public,

  • The TypeScript entry point is src/index.tsx.

• ViteJS:

  • index.html is in the root directory,

  • The TypeScript entry point is src/main.tsx.

The generated code is component-oriented. The selected Figma element is treated as a component (even if it’s not a component in Figma). Its code is located in:

src/components/ComponentName/ComponentName.tsx

With ComponentName being defined as described in the Naming conventions section. Sub-components are located in a sub-folder.

Example: Let’s assume we code a Card component that contains an instance of Actions, which contains two Buttons. The generated code will be structured this way:

• src/components/Card (directories)

  • Actions (directory)

    • Actions.tsx (file)

  • Button (directory)

    • Button.tsx (file)

  • Icon (directory)

    • Icon.tsx (file)

  • Card.tsx (file)

Currently, Clapy generates a single page and its sub-components. Soon, we will add the ability to include multiple frames as pages with the components they depend on. The file structure will be improved to better match common practices, with settings to choose the pages and components directory.

Any opinion about how files should be structured? Please let us know

Naming conventions

All components are named using the name of the corresponding Figma element, following the upper-case CamelCase convention.

Similarly, on each node, classNames, other properties and variables are deduced from the corresponding Figma element, using the lower-case camelCase convension.

For SVGs, an “Icon” suffix is added to the SVG name.

App.tsx

It contains a reference to the main component. If the Figma selection is an instance, App.tsx will also provide the required overrides to the instance to match the design. Please refer to the instances article for more details about the overrides.

Styles

Styles are provided as CSS modules and located next to the component. Example:

• src/components/Card (directories)

  • Card.module.css (file)

  • Card.tsx (file)

SVG

Shapes on Figma (rectangles, stars, vectors…) are converted to SVG files

React

SVGs are bundled into a React component. They are located in the same directory as the React component using them.

Example: let’s say a Button contains an ArrowIcon. We get the structure:

• src/components/Button (directories)

  • ArrowIcon.tsx (file)

  • Button.tsx (file)

In Angular, SVGs

SVGs are kept in .svg files, located in src/assets. They are displayed using the <img /> tag.

Images

Images are extracted from Figma and added to the source code in the public directory.

When the CSS points to an image (e.g. background-image url), it uses the relative link that will be correct at runtime, in the browser. Not the relative path in the source code between the CSS file and the asset file. Bundlers should leave those URLs as they are.

Any issue with it? Please let us know!

Global resets

src/resets.css contains global CSS rules to have defaults closer to the Figma behavior.

Fonts

Font families are imported from Google Fonts based on the font names used in Figma. It has two consequences on the generated project:

• Fonts not available on Google Fonts won't render in the preview. It is your responsibility to include and import them in the final project with a @font-face.
• The font-family names in @font-face must match the official font names, as they appear in Figma and the OS. Otherwise, components won't be able to refer to them (they use the names from Figma).

Other tools in the project

ESLint and Prettier are included for opinionated code linting and formatting.