-
Notifications
You must be signed in to change notification settings - Fork 5.6k
docs: figma blog post #1647
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
docs: figma blog post #1647
Changes from 5 commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
32cfd77
Goose Figma Blog Post
a1762b4
Update documentation/blog/2025-03-12-goose-figma-mcp/index.md
taniacryptid bd80400
Update documentation/blog/2025-03-12-goose-figma-mcp/index.md
taniacryptid ebf229a
addressed changes
3eb0eb7
changed image
angiejones 95f103e
Update documentation/blog/2025-03-12-goose-figma-mcp/index.md
taniacryptid 1dc7434
Update documentation/blog/2025-03-12-goose-figma-mcp/index.md
taniacryptid 2acccc4
Update documentation/blog/2025-03-12-goose-figma-mcp/index.md
taniacryptid 8c565b4
Update documentation/blog/2025-03-12-goose-figma-mcp/index.md
taniacryptid db98bf2
added tutorial links
57a4996
Update documentation/blog/2025-03-12-goose-figma-mcp/index.md
angiejones File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| --- | ||
| 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 | ||
| --- | ||
|
|
||
|  | ||
|
|
||
| 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 toolds 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: starting with a well-structured Figma design, using Goose to make targeted improvements after the initial generation, fine-tuning specific elements as needed, and to make sure you thoroughly test for functionality and responsiveness. | ||
|
taniacryptid marked this conversation as resolved.
Outdated
|
||
|
|
||
| # 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 [here](https://block.github.io/goose/docs/getting-started/installation), and the Figma and Git extensions can be installed from [here](https://block.github.io/goose/v1/extensions/). | ||
|
taniacryptid marked this conversation as resolved.
Outdated
|
||
|
|
||
| <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="https://block.github.io/goose/assets/images/goosefigma.png" /> | ||
|
taniacryptid marked this conversation as resolved.
Outdated
|
||
| <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="https://block.github.io/goose/assets/images/goosefigma.png" /> | ||
|
taniacryptid marked this conversation as resolved.
Outdated
|
||
| </head> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.