TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

The CSS Behind Figma

156 点作者 WallyFunk将近 3 年前

9 条评论

helipad将近 3 年前
Disappointed in the tone of the comments so far. Here&#x27;s what I took from the article.<p>The author wasn&#x27;t saying this was _good_, they were saying it was _interesting_. Professional curiosity and learning how a complex app uses CSS Grid (and Flexbox) at scale.<p>Indeed, their own conclusion was:<p>&gt; That’s it for this exploration. I enjoyed looking at such unique and fun usage for both Flexbox and Grid. It’s inspiring to see that in a tool we’ll use, and for me, it inspired me to explore even more use cases for the CSS tools we’ve.<p>&quot;Exploration&quot;, &quot;fun usage&quot;, &quot;inspiring&quot;. By all means come in with your preconceptions of Figma but nonetheless we should encourage this sort of analysis.<p>I have no particular love for Figma as a product but I&#x27;d guess there aren&#x27;t many other examples of CSS Grid being used at such scale, as a critical path application for people whose job relies on it, with a relatively low adoption of CSS Grid, particularly to the extent they seem to have used it.<p>There&#x27;s virtue Boring Tech, but let&#x27;s encourage the inverse too.
评论 #32210384 未加载
评论 #32211013 未加载
gherkinnn将近 3 年前
Nice dissection. I never thought to use grid in this way. Whether I will ever do the same remains to be seen, but it is worth investigating.
ricardobeat将近 3 年前
The grid usage is pretty weird. It’s essentially using grids to implement an 8px base unit, which can be achieved with less complexity by using css variables. Would make a bit more sense if it used flexible units.
评论 #32217561 未加载
评论 #32211418 未加载
评论 #32213344 未加载
88913527将近 3 年前
Figma is getting too slow. Open browser tab, get a cup of coffee slow. Love what they did for the space and solutions they unseated, but they are mildly losing their edge.
评论 #32210002 未加载
评论 #32210105 未加载
anhncommenter25将近 3 年前
It&#x27;s got everything you miss about table layouts
clairity将近 3 年前
i&#x27;m really not a fan of the spacer example, as it reminds me so much of early 00s layout (in this case, adding a bunch of empty spans&#x2F;divs to represent the spaces). there&#x27;s a recent proposal for custom functions in css that i believe would allow one to write a simple iterator for this type of use case (use the nth-of-type element count as a multiplier against a set spacer width).
评论 #32210805 未加载
评论 #32211510 未加载
w-ll将近 3 年前
Figma is great, but i feel its getting abused and the non tech people that use it expect it&#x27;s as easy to recreate their Figma in other media just as easy. And lately a lot of hacky transactions, which for sure are possible but dont translate to the effort of implementing them as easy as it was in Figma .<p>Also in rant, not all but many designers have no clue about font licensing&#x27;s that makes me look like the bad guy explaining we wont pay NNN monthly cuz they like the shape of a &#x27;g&#x27; or add another entire font library download.
评论 #32210344 未加载
pyrolistical将近 3 年前
I guess that usage of grid is essentially a better way to express a coarser position absolute
arriu将近 3 年前
Awesome investigation and breakdown.