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.
Two frameworks are available: React and Augular (alpha).
Angular does not yet has all the features available in React (e.g. customizable components).
By default, the project is uploaded on Codesandbox for a super fast preview without needing to install anything.
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.
The project uses the Angular CLI template.
Entry points are specific to the base template:
- Codesandbox:
index.html
is inpublic
,- 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 Button
s. 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.
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.
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 are provided as CSS modules and located next to the component. Example:
- src/components/Card (directories)
- Card.module.css (file)
- Card.tsx (file)
Shapes on Figma (rectangles, stars, vectors…) are converted to SVG files
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)
SVGs are kept in
.svg
files, located in src/assets
. They are displayed using the <img />
tag.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!
src/resets.css
contains global CSS rules to have defaults closer to the Figma behavior.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).
ESLint and Prettier are included for opinionated code linting and formatting.
Last modified 1yr ago