Rast Mobile Ürünü · Codigma.io
Figma ekranını
React, Flutter veya HTML/CSS koduna çevirin.
Figma'da bir frame seçin ve hangi teknoloji için kod istediğinizi belirtin. Codigma ilk ekran yerleşimini, component yapısını ve responsive kuralları oluştursun; ekibiniz kodu kontrol edip iş kurallarını eklesin.
12.000'den fazla geliştirici kullanıyor
Kullandığınız teknolojiye uygun kodu seçin ve sonucu çalışır durumdaki önizlemede inceleyin.
Codigma'yı neden geliştirdik?
Aynı Figma ekranını
iki kez kodlamaktan yorulduk.
Bir form kuralı yazmadan veya API bağlamadan önce, Figma'da hazır olan ekranı saatlerce yeniden kurmak gerekiyor. Codigma'yı bu ilk işi kısaltmak için geliştirdik. Hangi kodun projeye gireceğine yine o kodun sahibi karar veriyor.
Daha az kod temizliği
Semantik HTML, okunabilir isimler ve takip edilmesi kolay bir component yapısı üretir. Böylece işe, anlamsız class adlarını düzeltmekle başlamazsınız.
Responsive yapıyı baştan kurmayın
Auto Layout ve frame kısıtları; küçük ekranlar için grid, flexbox, boşluk ve breakpoint kurallarına çevrilir.
Projenize uygun kod çıktısı
Sonradan genel bir HTML çıktısını çevirmek yerine framework ve stil yaklaşımını üretimden önce seçin.
Son söz geliştiricide
Sonucu önizleyin, düzenleyin ve onayladığınız kısımları repoya alın. Codigma ilk sürümü üretir; kodu sizin yerinize merge etmez.
Kod çıktıları
React mi, Flutter mı?
Kod çıktısını projenize göre seçin.
HTML/CSS
JavaScript framework gerekmeyen ekranlar için semantik HTML ve responsive CSS; düz CSS, SCSS veya Tailwind seçeneğiyle.
Angular
İhtiyaca göre standalone veya NgModule component'leri, Reactive Forms ve RxJS kullanımına uygun Angular TypeScript çıktısı.
React
Hook kullanan React component'leri; TypeScript veya JavaScript ve CSS Modules, Styled Components ya da Tailwind seçeneğiyle.
Vue
Composition veya Options API kullanan Vue 3 single-file component'leri; isteğe bağlı TypeScript ve Pinia'ya uygun yapıyla.
React Native
Platforma uygun stiller kullanan, navigation ve state yönetimi eklemeye hazır React Native component'leri.
Flutter
Material veya Cupertino çıktısı, responsive yerleşim ve projenin seçtiği navigation yaklaşımıyla Flutter widget'ları.
Codigma çıktıyı nasıl hazırlıyor?
Tek seferde üretip
olduğu gibi bırakmıyoruz.
Seçilen frame; sayfa yapısı, responsive yerleşim, kod kontrolü, ortak component'ler ve design token'lar için ayrı ayrı işlenir. Kodu dışa aktarmadan önce sonucu çalışan önizlemede kontrol edebilirsiniz.
Önce frame'ler, gruplar ve görsel hiyerarşi okunur; ardından sayfa ve component yapısı oluşturulur.
Auto Layout ve kısıtlar, masaüstü ve mobil için grid, flexbox, boşluk ve breakpoint kurallarına dönüşür.
Üretilen markup ve stiller yaygın erişilebilirlik, yapı ve bakım sorunlarına karşı kontrol edilir.
Tekrarlanan kart, buton ve bölümler ayrılır; aynı markup'ın her ekranda yeniden üretilmesi azaltılır.
Renk, tipografi ve boşluklar seçilen çıktının değişkenlerine, utility class'larına veya tema yapısına eşlenir.
Kodla birlikte çalışan bir önizleme hazırlanır; dışa aktarmadan önce Figma frame'iyle karşılaştırabilirsiniz.
60 saniye ne anlama geliyor?
Hazır bir Figma frame'inden
ilk önizlemeye yaklaşık 60 saniye.
Bu, tamamlanmış özellik değil frontend'in ilk sürümüdür. API bağlantıları, iş kuralları, uç durumlar, testler ve son kod incelemesi yine geliştirme ekibine aittir.
Dokümantasyonu İnceleyinTürkiye teknoloji basınında Codigma
Codigma.io hakkında yazılanlar
Bu yayınlar Codigma'nın Figma'dan koda çalışma biçimini, React Native + Expo çıktısını ve Türkiye dışındaki kullanımını haberleştirdi.
Codigma'yı kullanın
Uygulamayı açın, plugin'i kurun
veya başlamadan dokümanı okuyun.
Codigma'yı kendi Figma ekranınızla deneyin.
Bir frame seçin, çıktıyı belirleyin ve kodu dışa aktarmadan önce çalışan önizlemeyi tasarımla karşılaştırın.