Utilities & Tools · Crisp Paper Clarity
Translator App UI
Lingua is a translator app UI design with a warm paper-white look, built for founders and designers shipping a language-translation product.
Önizle
Ekranları keşfedin
Sleek'te tamamen düzenlenebilen translator mobil uygulama tasarımını önizleyin.
Translator App hakkında
Lingua is a translator app UI design built around Crisp Paper Clarity: warm paper-white backgrounds, near-black ink text, and a single confident cobalt accent reserved only for the active language direction and the translate action. There are no cards or drop shadows; input and output stack as two tonal panels divided by a single hairline rule, so each screen reads with the calm of a well-typeset phrasebook.
The template ships six connected screens that form a complete translation flow: a dual-pane Translate screen with romanization and a speaker action, a two-sided Conversation view with a hold-to-speak mic, a live Camera translate viewfinder that swaps detected text inline, a categorized Phrasebook of saved phrases, a searchable Languages list with offline-ready markers, and a day-grouped History list. The signature "swap pivot", a center-mounted circular cobalt button with interlocking arrows, recurs as the visual anchor that flips the input and output stack.
Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.
İçindekiler
Dahil olan ekranlar
Translate
A dual-pane layout with the English input on top and the Spanish result set in a larger weight below, plus a phonetic romanization line and speaker, copy, star, and share actions. The center swap pivot flips the two panels in place.
Conversation
A two-sided chat view with English bubbles on the right and cobalt-edged Spanish bubbles on the left, topped by Active and Listening status labels. A large "Hold to speak" mic button drives the back-and-forth.
Camera translate
A live viewfinder detects text on a street sign and replaces it inline ("SALIDA" becomes "EXIT") with a highlighted bounding box. A capture button, flash toggle, gallery, and an EN to ES language strip sit on top of the camera feed.
Phrasebook
Saved phrases grouped by category (Dining, Directions) as hairline-divided rows, each showing both languages with a star to favorite. Filter chips across the top switch between All Phrases and categories.
Languages
A searchable list of 100+ languages with the current English-Spanish pair pinned at the top and download markers showing which are offline ready. Each row pairs the language name with its native spelling.
History
Past translations listed in reverse chronological order, grouped under Today and Yesterday with direction codes and timestamps. A "Clear All" action and monthly count sit at the top, and each row reopens the translation.
Tasarım ve özellikler
Öne çıkan özellikler
- Crisp Paper Clarity aesthetic: warm paper-white, near-black ink, one cobalt accent
- Dual-pane document layout divided by a single hairline rule, no cards or shadows
- Signature swap pivot: a circular cobalt button that flips the input and output stack
- Translated phrases set in a larger weight so the result outranks the input
- Tracked-out uppercase language codes (EN, ES, JA)
- Live camera viewfinder with inline text replacement
- Two-sided conversation view with hold-to-speak mic
- Searchable language list with offline-ready markers
Hedef kitle
Kimler için
Kullanım alanları
Neler oluşturabilirsiniz
- Launch an MVP for a travel translation app
- Mock up screens for an investor or stakeholder pitch
- Hand a consistent, ready-made UI off to developers
- Explore a redesign of an existing translator app
Bu şablon nasıl kullanılır
- 1
Şablonu aç
Ekranlara göz atın ve fikrinize uyup uymadığını görmek için tüm tasarımı önizleyin.
- 2
Bu şablonu kullan
Tek tıkla Sleek'te tamamen düzenlenebilir kendi kopyanızı açın.
- 3
Yapay zekâ ile düzenle
Ne istediğinizi anlatarak paleti yeniden tasarlayın, düzenleri değiştirin, ekran ekleyin veya kaldırın.
- 4
Dışa aktar ve yayınla
Tasarımınızı dışa aktarın ya da geliştiricilere teslim edin, lansmana kadar geliştirmeye devam edin.
Sıkça sorulan sorular
İlgili mobil uygulama şablonları
translator uygulamanızı tasarlamaya başlayın
Sleek'te kullanın ve kendinize göre uyarlayın: paleti yeniden tasarlayın, herhangi bir ekranı yapay zekâ ile düzenleyin, ardından koda veya Figma'ya dışa aktarın.
Bu şablonu kullan