본문으로 건너뛰기

Introduction

Grida is a Opensource Design to Code toolkit. To bring your imagination to life as fast as possible, Grida converts your design into human-level code, which dramatically reduces hours and months of development time. You now Focus on the core.

💸 Building UI applications from scratch costs a lot of time. Coding all the designs from scratch may seem like a conventional way, but it is not anymore. You can now focus on the core, and let grida take care of the UI side.

⚡️ Headless. Grida is a headless toolkit and super fast. You don't need to import your design everytime the design is modified. Edit instantly, get the result instantly.

❤️ Open source. Grida is built with talented developers around the world. Do you want to be part of it? You can start contributing easier than you think.

Fast Track ⏱️

  1. Install Grida Assistant Figma Plugin to get started.
  2. Enter your desing url in input on grida.co and get result for entire figma file.

Features

  • Instant Code conversion
    • Supports React, Flutter, Vanilla - which can be used to build any websites and mobile apps.
    • We can convert any design whatever you select, instantly.
  • Unified Design system
    • Design for design Code for code? - Now you can have your design system truly unified, automatically.
  • Various Widgets support
    • Grida is smart. we understand your design, converts it to desired widgets. Draw a button, we'll make button.
  • Components and Variant support
    • Supports Features like Components and Variants that are used when structuring your design system.
  • Responsive code
    • Supports Autolayout Perfectly.
    • Generates Respnsive code based on Flexbox, extending layout features that are not supported by Figma.
    • On Flutter, we use Column, Row, Flex, Wrap to represent a layout.
    • Generates hight quality code that you can actually understand and agree on.
  • Extending your design
    • Current version of design tools has foundational limitations for representing dynamic layouts. e.g. We can't represent a layout with max-width nor wrap. Grida enables you to bring your design to the next responsible level without leaving figma, with our unique feature - Flags.
  • Lint
    • Good designer makes even the very deepest, invisible part organized and explainable. Grida provides Design Lint feature to tidy up your design even to the invisible part. Make your design clean, Make your code clean.

Design principles

  • Zero Dependency
  • Strictly follows the standard.
  • Design first.
  • Clean design, Clean code.
  • Transparancy.
  • We're not here to do everything.
  • Accessibility.

Staying informed

Let's Dive in

Click the Next button below to get started!