aljaz/goose
1
0
Fork 0
mirror of https://github.com/aljazceru/goose.git synced 2025-12-18 06:34:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs: figma blog post (#1647)

Browse Source 
Co-authored-by: Tania Chakraborty <tchakraborty@BLKG9TC7C9CQ1.local>
Co-authored-by: Angie Jones <jones.angie@gmail.com>
This commit is contained in:
taniashiba
2025-03-13 11:13:12 -04:00
committed by GitHub
parent 70521cda0a
commit 8ab2697a50
3 changed files with 46 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
documentation/blog/2025-03-12-goose-figma-mcp/goosefigma.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 389 KiB

45
documentation/blog/2025-03-12-goose-figma-mcp/index.md Normal file
View File

@@ -0,0 +1,45 @@
---
title: "Turn Figma Designs Into Code With Goose"
description: Give Goose the ability to turn Figma designs into code with the Figma extension.
authors:
- tania
---
![blog cover](goosefigma.png)
In our previous episode of [Goose Flight School](https://www.youtube.com/playlist?list=PLyMFt_U2IX4s1pMaidir5P4lSfjUK6Nzm), our host [Adewale Abati](https://www.linkedin.com/in/acekyd/) showed us how to use Goose to take a Figma design and transform it into a functional Nuxt application. In this stream he covered the entire process, from initial setup to final implementation, highlighting how Goose can help developers bridge the gap between design and development.
<!--truncate-->
# How It Works
[Extensions](https://block.github.io/goose/docs/getting-started/using-extensions) enhance Goose's functionality by connecting with your existing tools and workflows. They add new features, access external data resources, and integrate with other systems. Learn how multiple extensions, including Figma and Developer, worked together seamlessly to dramatically accelerate development.
# Live Tutorial: Goose Builds Live
During the livestream, Adewale demonstrated step-by-step how Goose handled each development phase, from creating the basic application structure to generating responsive layouts using Tailwind CSS. Adewale also highlighted how Goose addresses potential limitations as you go, showcasing the powerful balance between the Goose's automation and developer control.
<iframe class="aspect-ratio" src="https://www.youtube.com/embed/_9t_N9zKwKM?si=r3e1MkrjS-f2AvkI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Throughout the stream, Adewale shared valuable tips to prepare your design for Goose. His key recommendations include:
* start with a well-structured Figma design
* use Goose to make targeted improvements after the initial generation
* fine-tune specific elements as needed
* make sure you thoroughly test for functionality and responsiveness
# Getting Started with Goose and Figma
Whether you're a designer wanting to rapidly turn concepts into working code or a developer curious about streamlining design implementation, you can download Goose with its built-in [Developer extension](https://block.github.io/goose/docs/getting-started/installation) and add the [Figma extension](https://block.github.io/goose/v1/extensions/).
For step-by-step instructions, check out the [Figma tutorial](https://block.github.io/goose/docs/tutorials/figma-mcp).
<head>
<meta property="og:title" content="Goose Flight School: Turn Figma Designs Into Code With Goose" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://block.github.io/goose/blog/2025/03/12/goose-figma-mcp" />
<meta property="og:description" content="Give Goose the ability to turn Figma designs into code with the Figma extension." />
<meta property="og:image" content="http://block.github.io/goose/assets/images/goosefigma-e6f84a734bd56cb431bb02452331a5d5.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="block.github.io/goose" />
<meta name="twitter:title" content="Goose Flight School: Turn Figma Designs Into Code With Goose" />
<meta name="twitter:description" content="Give Goose the ability to turn Figma designs into code with the Figma extension." />
<meta name="twitter:image" content="http://block.github.io/goose/assets/images/goosefigma-e6f84a734bd56cb431bb02452331a5d5.png" />
</head>

1
documentation/blog/authors.yml
View File

@@ -40,6 +40,7 @@ tania:
image_url: https://avatars.githubusercontent.com/u/126204004?v=4
page: true
socials:
linkedin: taniachakraborty
x: taniashiba
github: taniashiba