Well, that wasn't something we were expecting to see today. Usually, we're pretty clued up on product releases, but this hit us out of left field.
How well does it work?
Well, at the time of writing this, it's probably been out for under 24 hours, but as a tenacious and frankly "no-life" web developer. I can confirm one thing: It's much better than it was.
If you've been following us recently, you'll know that we've begrudgingly started to adopt Tailwind because of the way that React Server Components are going. Why does this matter? Because coincidentally, it works pretty damn well with Tailwind.css.
Similar to Zeplin (if you ever used that), it allows you to add plugin-like extensions to what platforms it supports. So in our case, we were able to leverage the power of Figma dev, however, for Chakra UI... Not so much.
Quick example
I'll give you the breakdown of a piece of code and design, and you'll quickly see some of the smart elements of the language extension that I absolutely thought it would fall down with.
Oh boy, designers are going to be happy
Cue the extremely elegant and well-optimised code... Guess not.
So what went wrong, why is it massive and all over the place? Well it's due to inaccuracies with sizing and images being placed on non-whole-numbers and creating a huge amount of manually sized [404.11px].
javascript1<div className="w-[404.11px] h-[455px] px-6 py-8 bg-slate-800 rounded-2xl flex-col justify-start items-center gap-6 inline-flex">2 <div className="w-[356.11px] h-[203px] pl-[33.77px] pr-[34.07px] pt-[29.90px] pb-[30.06px] justify-center items-center inline-flex">3 <div className="w-[288.27px] h-[143.04px] relative">4 <div className="w-[215.04px] h-[68.08px] px-[11.01px] py-4 left-[20px] top-[58px] absolute bg-white rounded-xl shadow border border border border border-slate-200 flex-col justify-center items-start gap-[11.01px] inline-flex">5 <div className="self-stretch p-[0px] justify-start items-center inline-flex">6 <div className="grow shrink basis-0 h-[35.50px] p-[0px] justify-start items-start gap-[11.01px] flex">7 <div className="p-[0px] opacity-0 justify-start items-start gap-[11.01px] flex">8 <div className="w-[33.02px] h-[33.02px] p-2 bg-sky-50 rounded-[55.03px] justify-center items-center flex">9 <div className="w-4 h-4 relative flex-col justify-start items-start flex" />10 </div>11 </div>12 <div className="grow shrink basis-0 self-stretch py-[2.75px] flex-col justify-center items-start inline-flex">13 <div className="text-slate-900 text-[16px] font-semibold leading-snug">Visit 2</div>14 <div className="text-slate-500 text-[14px] font-normal leading-tight">Window ±7 Days • Week -1</div>15 </div>16 </div>17 <div className="w-[11.01px] h-[11.01px] relative" />18 </div>19 </div>20 <div className="w-[225.83px] h-[67.25px] px-[11.01px] py-4 left-[55px] top-[0px] absolute bg-white rounded-xl shadow border border border border border-slate-200 flex-col justify-center items-start gap-[11.01px] inline-flex">21 <div className="self-stretch p-[0px] justify-start items-center inline-flex">22 <div className="grow shrink basis-0 h-[35.50px] p-[0px] justify-start items-start gap-[11.01px] flex">23 <div className="p-[0px] opacity-0 justify-start items-start gap-[11.01px] flex">24 <div className="w-[33.02px] h-[33.02px] p-2 bg-sky-50 rounded-[55.03px] justify-center items-center flex">25 <div className="w-4 h-4 relative flex-col justify-start items-start flex" />26 </div>27 </div>28 <div className="grow shrink basis-0 self-stretch py-[2.75px] flex-col justify-center items-start inline-flex">29 <div className="text-slate-900 text-[16px] font-semibold leading-snug">Visit 1</div>30 <div className="text-slate-500 text-[9.631057739257812px] font-normal leading-3">Window ±7 Days • Week -3</div>31 </div>32 </div>33 <div className="w-[11.01px] h-[11.01px] relative" />34 </div>35 </div>36 <div className="w-[91.07px] h-[91.07px] p-[0px] left-[0px] top-[1.90px] absolute bg-sky-50 rounded-[91.07px] shadow justify-center items-center gap-[9.11px] inline-flex">37 <div className="w-[36.43px] h-[36.43px] relative" />38 </div>39 <div className="w-[60.64px] h-8 p-[9.15px] left-[119.25px] top-[53px] absolute bg-white rounded shadow justify-start items-start gap-[4.58px] inline-flex">40 <div className="pt-[2.29px] flex-col justify-start items-center gap-[4.58px] inline-flex">41 <div className="w-[9.15px] h-[9.15px] relative" />42 </div>43 <div className="text-slate-900 text-[10.297094345092773px] font-semibold leading-3">Cycle</div>44 </div>45 <div className="w-[123.57px] h-8 p-[9.15px] left-[164.70px] top-[111px] absolute bg-white rounded shadow justify-start items-start gap-[4.58px] inline-flex">46 <div className="pt-[2.29px] flex-col justify-start items-center gap-[4.58px] inline-flex">47 <div className="w-[9.15px] h-[9.15px] relative" />48 </div>49 <div className="text-slate-900 text-[10.297094345092773px] font-semibold leading-3">Screening Period</div>50 </div>51 </div>52 </div>53 <div className="self-stretch h-[164px] p-[0px] flex-col justify-start items-start gap-2 flex">54 <div className="self-stretch text-white text-[20px] font-semibold leading-relaxed">Visits Made Simple</div>55 <div className="self-stretch text-white text-[18px] font-normal leading-relaxed">Visit by visit, the schedule of assessments makes it simple to walk through each procedure with confidence. Notes and guidance documents support adherence.</div>56 </div>57</div>
So what does this all mean?
Well, the shorthand is that for designers, this means they're going to be highly accurate with building Figma files in the future - personally, I think UI designers have had an easy time for too long with this.
It also means that the slap-happy creative ideation will likely be crushed by the new wave of overly specific sizings requested by developers such as myself.
Our rating?
It's pretty good.
It's a great jumping-off point, and any steps further forward in wedding design & development have our vote. I don't think it'll be long before it gets added to job listings as an essential skill and improves handover overall.
