bernaferrari

Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.

Visit Website

Total Products

Software by bernaferrari

Open Source

FigmaToCode

[![Figma to Code](assets/git_preview.png)](https://www.figma.com/community/plugin/842128343887142055) # Figma to Code <p align="center"> <a href="https://github.com/bernaferrari/FigmaToCode/actions/"><img src="https://github.com/bernaferrari/FigmaToCode/workflows/CI/badge.svg"/></a> <a href="https://codecov.io/gh/bernaferrari/FigmaToCode"><img src="https://codecov.io/gh/bernaferrari/FigmaToCode/branch/master/graph/badge.svg" /></a> <a href="http://twitter.com/bernaferrari"> <img src="https://img.shields.io/badge/[email protected]?style=flat" alt="Twitter"/></a> </p><p align="center"> <a href="https://www.figma.com/community/plugin/842128343887142055"><img src="assets/badge.png" height="60"/></a> </p> Converting Figma designs into usable code can be a challenge, often requiring time-consuming manual work. Figma to Code simplifies that process. This plugin generates responsive layouts in `HTML`, `React (JSX)`, `Svelte`, `styled-components`, `Tailwind`, `Flutter`, and `SwiftUI` directly from your designs. Your feedback and ideas are always welcome. ![Gif showing the conversion](assets/lossy_gif.gif) ## How it works The plugin uses a sophisticated multi-step process to transform your Figma designs into clean, optimized code: 1. **Node Conversion**: First, the plugin converts Figma's native nodes into JSON representations, preserving all necessary properties while adding optimizations and parent references. 2. **Intermediate Representation**: The JSON nodes are then transformed into `AltNodes` - a custom virtual representation that can be manipulated without affecting your original design. 3. **Layout Optimization**: The plugin analyzes and optimizes layouts, detecting patterns like auto-layouts, responsive constraints and color variables. 4. **Code Generation**: Finally, the optimized structure is transformed into the target framework's code, with special handling for each framework's unique patterns and best practices. If a feature is unsupported, the plugin will provide a warning. ![Conversion Workflow](assets/workflow.png) This intermediate representation approach allows for sophisticated transformations and optimizations before any code is generated, resulting in cleaner, more maintainable output. ## Hard cases Converting visual designs to code inevitably encounters complex edge cases. Here are some challenges the plugin handles: 1. **Complex Layouts**: When working with mixed positioning (absolute + auto-layout), the plugin has to make intelligent decisions about how to structure the resulting code. It detects parent-child relationships and z-index ordering to produce the most accurate representation. 2. **Color Variables**: The plugin detects and processes color variables, allowing for theme-consistent output. 3. **Gradients and Effects**: Different frameworks handle gradients and effects in unique ways, requiring specialized conversion logic. ![Conversion Workflow](assets/examples.png) **Tip**: Instead of selecting the whole page, you can also select individual items. This can be useful for both debugging and componentization. For example: you can use the plugin to generate the code of a single element and then replicate it using a for-loop. ### Todo - Vectors (possible to enable in HTML and Tailwind) - Images (possible to enable to inline them in HTML and Tailwind) - Line/Star/Polygon ## How to build the project ### Package Manager The project is configured for [pnpm](https://pnpm.io/). To install, see the [installation notes for pnpm](https://pnpm.io/installation). ### Monorepo The plugin is organized as a monorepo. There are several packages: - `packages/backend` - Contains the business logic that reads the Figma API and converts nodes - `packages/plugin-ui` - Contains the common UI for the plugin - `packages/eslint-config-custom` - Config file for ESLint - `packages/tsconfig` - Collection of TSConfig files used throughout the project - `apps/plugin` - This is the actual plugin assembled from the parts in `backend` & `plugin-ui`. Within this folder it's divided between: - `plugin-src` - loads from `backend` and compiles to `code.js` - `ui-src` - loads the common `plugin-ui` and compiles to `index.html` - `apps/debug` - This is a debug mode plugin that is a more convenient way to see all the UI elements. ### Development Workflow The project uses [Turborepo](https://turborepo.com/) for managing the monorepo, and each package is compiled using [esbuild](https://esbuild.github.io/) for fast development cycles. Only modified files are recompiled when changes are made, making the development process more efficient. #### Running the Project You have two main options for development: 1. **Root development mode** (includes debug UI): ```bash pnpm dev ``` This runs the plugin in dev mode and also starts a Next.js server for the debug UI. You can access the debug UI at `http://localhost:3000`. 2. **Plugin-only development mode**: ```bash cd apps/plugin pnpm dev ``` This focuses only on the plugin without the Next.js debug UI. Use this when you're making changes specifically to the plugin. #### Where to Make Changes Most of your development work will happen in these directories: - `packages/backend` - For plugin backend - `packages/plugin-ui` - For plugin UI - `apps/plugin/` - The main plugin result that combines the backend and UI and is called by Figma. You'll rarely need to modify files directly in the `apps/` directory, as they mostly contain build configuration. #### Commands `pnpm run ...` - `dev` - runs the app in dev mode. This can be run in the Figma editor. - `build` - builds the project for production - `build:watch` - builds and watches for changes - `lint` - runs ESLint - `format` - formats with prettier (warning: may edit files!) #### Debug mode When running the `dev` task, you can open `http://localhost:3000` to see the debug version of the UI. <img width="600" alt="Screenshot 2024-12-13 at 16 26 43" src="https://github.com/user-attachments/assets/427fb066-70e1-47bd-8718-51f7f4d83e35" /> ## Issues The Figma file for this README and icon is also open and welcome to changes! [Check it here.](https://www.figma.com/file/8buWpm6Mpq4yK9MhbkcdJB/Figma-to-Code) I took decisions thinking about how it would benefit the majority of people, but I can (and probably will!) be wrong many times. Found a bug? Have an idea for an improvement? Feel free to [add an issue](../../issues) or email me. Pull requests are also more than welcome.

Design & Creative Frontend Templates Mobile Development

5K Github Stars

Open Source

GradleKotlinConverter

![Image of GradleKotlinConverter](logo.png) # Gradle Kotlin DSL Converter A powerful tool to simplify the migration from Gradle's Groovy DSL to Kotlin DSL for Android projects. [![Image of website](web-screenshot.png)](https://gradle-kotlin-converter.vercel.app/) Visit https://gradle-kotlin-converter.vercel.app/ to use the converter. ## Overview The Gradle Kotlin DSL Converter is designed to streamline the process of transitioning from Gradle's Groovy DSL to Kotlin DSL in Android Studio. This tool automates many of the repetitive tasks involved in the migration, significantly reducing the time and effort required to update your build scripts. While it may not produce a perfect conversion in all cases, it serves as an invaluable first step in the migration process, similar to Android Studio's Java to Kotlin converter. ## Features - Converts Groovy-style Gradle scripts to Kotlin DSL format - Handles common syntax differences and idiomatic changes - Supports both file-based and clipboard-based conversion - Addresses numerous edge cases and common migration challenges ## Getting Started ### Web Interface Visit our [web-based converter](https://gradle-kotlin-converter.vercel.app/) for an easy-to-use interface that doesn't require any local setup. ### Local Development To run the converter locally: ```bash # Navigate to the web directory cd web # Install dependencies (requires pnpm) pnpm install # Start the development server pnpm dev # Run tests pnpm test # Run tests in watch mode pnpm test:watch ``` The converter will be available at `http://localhost:3000`. ### Command-line usage The TypeScript converter can also run locally as a CLI after installing dependencies: ```bash cd web # Convert a file and print the result pnpm cli build.gradle # Convert from stdin pnpm cli < build.gradle # Write the converted output to a Kotlin DSL file pnpm cli build.gradle > build.gradle.kts ``` ### Testing strategy The TypeScript converter is covered by focused unit tests and full-file golden fixtures. - Add focused tests in `web/app/logic.spec.ts` for isolated syntax regressions. - Add full-file examples in `web/app/fixtures/golden/` when a conversion depends on several rules interacting. Each `*.gradle` input must have a matching `*.gradle.kts` expected output. - Keep known future migration work as explicit `it.todo(...)` cases when the converter should not pretend to support a Gradle or AGP migration yet. ### Kotlin script implementation The `kotlin/` directory contains a standalone Kotlin script implementation of the converter. It has been brought to near feature and test parity with the TypeScript version (including byte-exact matching on all golden fixtures). The `web/` version remains the primary and more actively maintained implementation, with additional modern features such as AGP migration warnings. ## Conversion Capabilities The converter handles a wide range of Gradle script elements, including: - String delimiter conversion (apostrophes to quotation marks) - Variable declaration updates (`def` to `val`) - Plugin application syntax - Dependency declaration format - Repository and Maven configurations - SDK version and build type declarations - ProGuard file configurations - Kotlin-specific dependency declarations - And more: --- <table> <th>Description</th> <th>Before</th> <th>After</th> <tr> <td>Replace all ' with "</td> <td>'kotlin-android'</td> <td>"kotlin-android"</td> </tr> <tr> <td>Replace "def " with "val "</td> <td>def appcompat = "1.0.0"</td> <td>val appcompat = "1.0.0"</td> </tr> <tr> <td>Convert plugins</td> <td>apply plugin: "kotlin-kapt"</td> <td>apply(plugin = "kotlin-kapt")</td> </tr> <tr> <td>Add ( ) to dependencies</td> <td>implementation ":epoxy"</td> <td>implementation(":epoxy")</td> </tr> <tr> <td>Convert Maven</td> <td>maven { url "https://jitpack.io" }</td> <td>maven("https://jitpack.io")</td> </tr> <tr> <td>Convert Sdk Version</td> <td>compileSdkVersion 28</td> <td>compileSdkVersion(28)</td> </tr> <tr> <td>Convert Version Code</td> <td>versionCode 4</td> <td>versionCode = 4</td> </tr> <tr> <td>Convert Build Types</td> <td>debuggable true</td> <td>isDebuggable = true</td> </tr> <tr> <td>Convert proguardFiles</td> <td>proguardFiles getDef..., "..."</td> <td>setProguardFiles(listOf(getDef..., "...")</td> </tr> <tr> <td>Convert sourceCompatibility</td> <td>sourceCompatibility = "1.8"</td> <td>sourceCompatibility = JavaVersion.VERSION_1_8</td> </tr> <tr> <td>Convert androidExtensions</td> <td>androidExtensions { experimental = true }</td> <td>androidExtensions { isExperimental = true }</td> </tr> <tr> <td>Convert include</td> <td>include ":app", ":diffutils"</td> <td>include(":app", ":diffutils")</td> </tr> <tr> <td>Convert signingConfigs</td> <td>signingConfigs { debug { ... } }</td> <td>signingConfigs { register("debug") { ... } }</td> </tr> <tr> <td>Convert buildTypes</td> <td>buildTypes { debug { ... } }</td> <td>buildTypes { named("debug") { ... } })</td> </tr> <tr> <td>Convert classpath.exclude</td> <td>configurations.classpath.exclude group: '...lombok'</td> <td>configurations.classpath { exclude(group = "...lombok") }</td> </tr> <tr> <td>Kt dependencies (1/3)</td> <td>"org.jetbrains.kotlin:kotlin-gradle-plugin:$kt_v"</td> <td>kotlin("gradle-plugin", version = "$kt_v")</td> </tr> <tr> <td>Kt dependencies (2/3)</td> <td>"org.jetbrains.kotlin:kotlin-stdlib:$kt_v"</td> <td>kotlin("stdlib")</td> </tr> <tr> <td>Kt dependencies (3/3)</td> <td>"org.jetbrains.kotlin:kotlin-reflect"</td> <td>kotlin("reflect")</td> </tr> <tr> <td>Convert signingConfig</td> <td>signingConfig signingConfigs.release</td> <td>signingConfig = signingConfigs.getByName("release")</td> </tr> <tr> <td>Convert extras</td> <td>ext.enableCrashlytics = false</td> <td>extra.set("enableCrashlytics", false)</td> </tr> <tr> <td>Convert plugins</td> <td>apply(...) apply(...)</td> <td>plugins { id(...) id(...) }</td> </tr> <tr> <td>Convert plugin ids</td> <td>id "io.gitlab.arturbosch.detekt" version "1.0"</td> <td>id("io.gitlab.arturbosch.detekt") version "1.0"</td> </tr> <tr> <td>Convert ":" to " ="</td> <td>testImpl(name: "junit", version: "4.12")</td> <td>testImpl(name = "junit", version = "4.12")</td> </tr> </table> You can find all the details on the source code. The script was made to convert `build.gradle` in `build.gradle.kts`, but it can also help in the migration if you paste something that is not in Kotlin DSL format and you want it converted. If you paste something like a `implementation '...'` and want it converted to `implementation("...")`, you are free to call the script on `build.gradle.kts` file and see it working as expected. When applying on `build.gradle`, the script will create, for example, `build.gradle.kts`. When applying on a file that already ends in `.kts`, the script will overrite the file. In that case, please make sure you are using git or have a backup, in case things turn out wrong. ## Things it still can't do - If you find anything, just tell me. ## Issue Tracking Found a bug? Have an idea for an improvement? Feel free to [add an issue](../../issues). ## License Copyright 2018 Bernardo Ferrari. Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Developer Tools Terminal & CLI Tools

950 Github Stars