Figma
chromatic chaos အတွက် monochrome chassis
အင်တာဖေ့စ်သည် တင်းကျပ်ပြီး ဆန့်ကျင်ဘက်အရောင်မြင့်မားသော ဖွဲ့စည်းတည်ဆောက်ပုံဆိုင်ရာ ကွန်တိန်နာတစ်ခုအဖြစ် လုပ်ဆောင်ပြီး အသုံးပြုသူထုတ်လုပ်ထားသော အကြောင်းအရာများကို အမြင်အာရုံအပြည့်အဝ လွှမ်းမိုးမှုပေးပါသည်။ အခြေခံအားဖြင့် #000000 မှ #ffffff palette အထိ တင်းကျပ်ပြီး မူလဘောင်များနှင့် စာသားအတွက် လုံးဝအမြင့်ဆုံး ဆန့်ကျင်ဘက်အရောင်ကို ဦးစားပေးပါသည်။ စာစီစာရိုက်အဆင့်ဆင့်သည် အရောင်ကွဲပြားမှုများထက် အရွယ်အစားနှင့် ပြင်းထန်သော အနုတ်လက္ခဏာစာလုံးအကွာအဝေးပေါ်တွင် လုံးဝနီးပါးအခြေခံထားပြီး စာသားမျဉ်းကြီးများကို သိပ်သည်းသော ဂရပ်ဖစ်ဘလောက်များအဖြစ်သို့ ပြောင်းလဲပေးသည်။ ဘောင်အချင်းဝက်၏ ယုတ္တိဗေဒသည် ထင်ရှားသော ကွဲပြားမှုကို ဖန်တီးပေးသည်- ကမ္ဘာလုံးဆိုင်ရာ လမ်းညွှန်ဒြပ်စင်များအတွက် 50px အပြင်ဘက် "လက်သည်းများ" သည် အကြောင်းအရာကွန်တိန်နာများ၏ ထင်ရှားသော 0px ထောင့်များနှင့် ရည်ရွယ်ချက်ရှိရှိ ဆန့်ကျင်ဘက်အရောင်ကို အသုံးပြုသည်။
ဖွဲ့စည်းမှုများသည် viewport ကိုဗဟိုပြုသည့် အလွန်အမင်းအကျယ်ဆုံးနယ်နိမိတ်များ (အများဆုံး 1440px) ကိုအခြေခံထားပြီး ကျယ်ပြန့်သော macro-space (အပိုင်းများအကြား whitespace 96-120px) ဖြင့်ခွဲထားသော content cluster များပါဝင်သည်။ "hero" archetype သည် floating၊ perfectly centered UI block အောက်တွင် dynamically anchored ထားသော image gallery ကို အသုံးပြုလေ့ရှိသည်။ fold အောက်တွင် အချက်အလက်များသည် margin မပါသော တင်းကျပ်သော four-column grid နှင့်ချက်ချင်းကိုက်ညီပြီး card cluster များကိုထပ်ခါတလဲလဲ frame လုပ်ကာ object density ကိုအမြင့်ဆုံးဖြစ်စေပြီး frame မှ margin များကိုဖယ်ရှားပေးသည်။
အမြင်အာရုံဒီဇိုင်းသည် အသုံးပြုသူဗဟိုပြုရလဒ်များအပေါ် အခြေခံထားသည်။ ရုပ်ပုံများကို ပြားချပ်ချပ်၊ ဘောင်မဲ့စတုရန်းများ သို့မဟုတ် ပြန့်ကျဲနေသော၊ ထပ်နေသော အပိုင်းအစများအဖြစ် ရုပ်ဝတ္ထုပစ္စည်းများနှင့် ဆင်တူအောင် ဗလာနောက်ခံတွင် ပြသထားသည်။ ရုပ်ပုံများသည် ဝဘ်ဆိုက်တွင် အရောင်၏ တစ်ခုတည်းသောရင်းမြစ်ဖြစ်သည်။ လူနေမှုပုံစံဓာတ်ပုံဒြပ်စင်များ သို့မဟုတ် စံကော်ပိုရိတ်ပုံဥပမာများ မရှိပါ။ ဂရပ်ဖစ်ဒြပ်စင်တစ်ခုစီသည် ထုတ်ကုန်အထောက်အထားနှင့် အဓိကအလှအပဒြပ်စင်အဖြစ် တစ်ပြိုင်နက်တည်း လုပ်ဆောင်သော ဒစ်ဂျစ်တယ်ကင်းဗတ်၏ တိကျသော၊ တိုက်ရိုက်လျှပ်တစ်ပြက်ပုံရိပ်တစ်ခုဖြစ်သည်။
ရောင်စုံ
အမှတ်တံဆိပ်
- Context Action Violet
#4d49fc— ဆပ်ကနယ်များအတွင်း ဒေသတွင်းလုပ်ဆောင်ရန် အဓိကခေါ်ဆိုမှု - တစ်ခုတည်းသော အနှောင့်အယှက်ဖြစ်စေသော အရောင်သည် အဓိကအချက်ကို သတ်မှတ်ပေးသည်။
ကြားနေ
- Absolute Canvas
#ffffff— စာမျက်နှာနောက်ခံ၊ မျောနေသော ကိရိယာဘားများ၊ မြှင့်တင်ထားသော ပြားအောက်ခြေများ။ - Structural Ink
#000000— အခြေခံဖောင့်၊ ခိုင်မာသောခလုတ်နောက်ခံ၊ ခလုတ်အပြင်အဆင်။ - Graphite Metadata
#595959— ဒုတိယစာရေးသူစာသား၊ ဒေသိယဘာသာပြန်ထားသော စာသားခွဲ၊ နေရာသတ်မှတ်တန်ဖိုးများ - Boundary Frame
#e2e2e2— သိမ်မွေ့သော ခွဲထုတ်ကိရိယာများနှင့် အသုံးမပြုသော ထည့်သွင်းမှုအကွက် နယ်နိမိတ်များ။ - Angular Teal
#33dfdf— အလှဆင်အကျိုးသက်ရောက်မှုများ၊ loading indicators များနှင့် active cursor visualization။
စာလုံးပုံစံ
၁၂ မှ ၇၂ px အထိ · အဆင့် ၆ ဆင့်
- figmaSans — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 320, 330, 340, 400, 450, 480, 520, 700 · မျက်နှာပြင်ခေါင်းစဉ်များမှသည် လမ်းညွှန်တံဆိပ်များအထိ အရာအားလုံးကို စီမံခန့်ခွဲပေးသည့် စွယ်စုံသုံးကိရိယာတစ်ခု။ ၎င်းသည် optical negative tracking ကို ပြုပြင်ခြင်းဖြင့် ထူးခြားသောအသွင်အပြင်ကို ဖန်တီးပေးသည်။
- figmaMono — အစားထိုးခြင်း: JetBrains Mono · မျဉ်းကြောင်းများ 400 · အကြောင်းအရာအဖြစ်ထက် အသုံးပြုသူမျက်နှာပြင်ဒြပ်စင်များအဖြစ် ပိုမိုလုပ်ဆောင်သော မိုက်ခရိုတဂ်များ၊ ကိုဩဒိနိတ်ခြေရာခံခြင်းနှင့် နည်းပညာဆိုင်ရာ အပိုဆောင်းအချက်များ။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | သိပ်သည်းသော |
| အခြေခံအဆင့် | 24px |
| ခလုတ်အချင်းဝက် | 8px |
| ကတ်အချင်းဝက် | 12px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 96-120px |
| စာမျက်နှာအကျယ် | 1440px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Figma ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Caldera — နွေးထွေးသောထုံးကျောက်ပေါ်တွင် မီးသွေးဖြင့် ကြိတ်ပါ။ ပတ္တူသည် ကြမ်းတမ်းပြီး နွေးထွေးသော ကျောက်စရစ်ဖြစ်ပြီး လိမ္မော်ရောင်ဒြပ်စင်တစ်ခုစီသည် မျက်နှာပြင်ထဲသို့ ဖိထားသော မီးခိုးတလူလူ မီးခဲများကဲ့သို့ ထင်ရသည်။
- Vercel — အဖြူရောင်စက္ကူပေါ်တွင် ရိုက်နှိပ်ထားသော တာမီနယ်
- Dylanbrouwer — နေဝင်ချိန်တွင် ရက်စက်ကြမ်းကြုတ်သော သတ္တုတွင်း
- Headspace — နွေးထွေးသောစက္ကူပေါ်တွင် နေသာသောကျန်းမာရေးထောင့်တစ်ခု
- WHOOP — သန်းခေါင်ယံတွင် စွမ်းဆောင်ရည်ဓာတ်ခွဲခန်း - အနက်ရောင်ဇာတ်ရုံအလွတ်အောက်ရှိ အဖြူရောင်ဆေးခန်းဓာတ်ခွဲခန်းစားပွဲများ၊ ခရမ်းရောင်လျှပ်စစ်စီးကြောင်းတစ်ခု
- (dot)connect — မီးသွေးတစ်ပိုင်းတည်းနဲ့ ရေးဆွဲထားတဲ့ ဆွစ်ဇာလန် အင်ဂျင်နီယာပုံကြမ်း
- Together AI — ရေခဲစက္ကူပေါ်ရှိ သုတေသနကွန်ဆိုးလ်
- Vivid+Co — အော့ဘ်စီဒီယန်မှတစ်ဆင့် ပရစ်စမက်တစ်အလင်းရောင်
- Sequel — မှောင်မိုက်နေတဲ့ ရုပ်ရှင်ရုံမှာ ညအချိန် သီးသန့်ပြသတာက တစ်ခုတည်းသော နွေးထွေးတဲ့အလင်းရောင်ပါပဲ။
- v0 by Vercel — ခုံပုံဆွဲခြင်း။ တိကျမှုနှင့် လုပ်ဆောင်နိုင်စွမ်းသည် အလွန်အရေးကြီးပြီး အစိတ်အပိုင်းတစ်ခုစီသည် သန့်ရှင်းပြီး နည်းပညာအရ ပြီးပြည့်စုံသော မျက်နှာပြင်ပေါ်တွင် ရှင်းလင်းသော ရည်ရွယ်ချက်ကို ဆောင်ရွက်ပေးပါသည်။
- ThoughtLab — ကြက်သွေးရောင် အချက်ပြမှုပါသည့် obsidian အထိမ်းအမှတ်ကျောက်တိုင်။ ဘုရားကျောင်းတွင် တစ်ခုတည်းသော ပြည့်ဝနေသော အနီရောင်အရာဝတ္ထုကို အဖြူရောင်စာလုံးကြီးများဖြင့် ရိုက်နှိပ်ထားပြီး အရောင်တစ်မျိုးတည်းသာရှိသော ပုံသဏ္ဍာန်ရှိသည့် အနက်ရောင် ဗလာနတ္ထိပန်းချီကား။
- Dovetail — လရောင်မည်းအောက်က ပုံစံငယ်တစ်ခု—မမြင်ရတဲ့ ဂရပ်မျဉ်းကြောင်းတွေ၊ အဖြူရောင်ဖောင့်၊ ခရမ်းရောင်တောက်ပမှုတစ်ခု