Layout Grid Figma

The Layout Grid Library provides React components for creating grid layouts similar to those in Figma. It includes components for both row-based and column-based grids with customizable properties for alignment, spacing, and styling.

Installation

To install the library, use npm:

npm install layout-grid-figma

Components

LayoutRowsGrid

A component for creating a row-based grid layout.

Props

• rows (number): Number of rows in the grid. Default is 8.
• marginRows (number): Margin between rows in rem. Must be between 0 and 6. Default is 2.
• alignRows ('center' | 'stretch' | 'flex-end' | 'flex-start'): Alignment of rows. Default is 'center'.
• heightRows (string | number): Height of the grid. Default is '100%'.
• gutterRows (number): Gutter size between rows in rem. Must be between 0 and 6. Default is 1.
• color (string): Background color of rows. Default is '#000'.
• opacity (number): Opacity of rows. Default is 0.1.

Example Usage

import React from 'react';
import { LayoutRowsGrid } from 'layout-grid-figma';

const MyComponent = () => (
    <LayoutRowsGrid
        rows={10}
        marginRows={3}
        alignRows="center"
        heightRows="50vh"
        gutterRows={2}
        color="blue"
        opacity={0.5}
    />
);

LayoutColumnsGrid

A component for creating a column-based grid layout.

Props

• columns (number): Number of columns in the grid. Must be between 1 and 12. Default is 12.
• marginColumns (number): Margin between columns in rem. Must be between 0 and 6. Default is 2.
• alignColumns ('center' | 'stretch' | 'flex-end' | 'flex-start'): Alignment of columns. Default is 'center'.
• widthColumns (string | number): Width of the grid. Default is '100%'.
• gutterColumns (number): Gutter size between columns in rem. Must be between 0 and 6. Default is 1.
• color (string): Background color of columns. Default is '#000'.
• opacity (number): Opacity of columns. Default is 0.1.

Example Usage

import React from 'react';
import { LayoutColumnsGrid } from 'layout-grid-figma';

const MyComponent = () => (
    <LayoutColumnsGrid
        columns={8}
        marginColumns={3}
        alignColumns="center"
        widthColumns="80vw"
        gutterColumns={2}
        color="green"
        opacity={0.3}
    />
);

Contributing Contributions are welcome! Please open an issue or submit a pull request.